webgl 初识2
之前的文章介绍了webgl.
这里进一步精简。
WebGL的全部内容就是创建不同的着色器,
向着色器提供数据然后调用gl.drawArrays
或 gl.drawElements
让WebGL调用当前顶点着色器处理每个顶点,调用当前片断着色器渲染每个像素。
既然着色器需要数据,着色器分两部分,顶点和片段着色器
顶点着色器需要的数据,可以通过以下三种方式获得。
- Attributes 属性 (从缓冲中获取的数据)
- Uniforms 全局变量 (在一次绘制中对所有顶点保持一致值)
- Textures 纹理 (从像素或纹理元素中获取的数据)
片断着色器所需的数据,可以通过以下三种方式获取
- Uniforms 全局变量 (values that stay the same for every pixel of a single draw call)
- Textures 纹理 (data from pixels/texels)
- Varyings 可变量 (data passed from the vertex shader and interpolated)
属性写入
- var buf = gl.createBuffer();
- gl.bindBuffer(gl.ARRAY_BUFFER, buf);
- gl.bufferData(gl.ARRAY_BUFFER, someData, gl.STATIC_DRAW);
属性读取
- gl.getAttribLocation(positionLoc);(可初始进行)
- gl.enableVertexAttribArray(positionLoc);
- gl.bindBuffer(gl.ARRAY_BUFFER, buf);
- gl.vertexAttribPointer(positionLoc, numComponents, type, false, stride, offset);
变量读写(用的时候,直接给某变量绑定值就好了)
- var offsetLoc = gl.getUniformLocation(progress, XX);
- gl.uniform(XXXXXX); // 向右偏移一半屏幕宽度
纹理写入
- var txt = gl.createTexture();
- gl.bindTexture(gl.TEXTURE_2D, tex);
- gl.texImage2D(gl.TEXTURE_2D, level, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, img);
纹理读取
- gl.getUniformLocation(positionLoc);(可初始化进行)
- gl.activeTexture(gl.TEXTURE0 + unit);
- gl.bindTexture(gl.TEXTURE_2D, tex);
- gl.uniform1i(someSamplerLoc, unit);
可变量
顶点着色器 直接传给 片段着色器
webgl 初识2的更多相关文章
- webgl 初识1
1. webgl是什么? WebGL其实是一个非常简单的API.好吧,“简单”可能是一个不恰当的描述. 它做的是一件简单的事,它仅仅运行用户提供的两个方法,一个顶点着色器和一个片断着色器, 去绘 ...
- webgl helloworld
之前的webgl 初识1, 初识2 已经介绍了webgl的基本概念,工作原理. 没有理解的自己yy. 现呈上例子一枚 <!DOCTYPE html> <html lang=" ...
- WebGL入门教程(一)-初识webgl
一.WebGL和传统网页的区别: 普通网页组成成分:HTML.JavaScript: WebGL网页组成成分:HTML5.JavaScript和GLSL ES(着色器语言 OpenGL ES): 二. ...
- 初识webgl--我的webgl学习第一课(基于threeJs)
一,我为什么要学习webgl 一个偶然的机会,在和朋友的聊天过程中,听说了webgl,也许过去也看到过,但是没有特别在意过.原来,JavaScript也可以很好的渲染并在网页上显示三维动画,不用借助插 ...
- 初识WEBGL
WEBGL (全写Web Graphics Library)是一种3D绘图协议,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一 ...
- WEBGL学习【一】初识WEBGL
<html lang="zh-CN"> <head> <title>NeHe's WebGL</title> <meta ch ...
- WebGL入门教程(五)-webgl纹理
前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL入门教程(三)-webgl动画 WebGL入门教程(四)-webgl颜色 这里就需要用到 ...
- WebGL入门教程(四)-webgl颜色
前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL入门教程(三)-webgl动画 颜色效果图: 操作步骤: 1.创建HTML5 canva ...
- WebGL入门教程(三)-webgl动画
前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL动画有移动.旋转和缩放,我们将移动.旋转和缩放图形,然后将其绘制到屏幕上,称为变换(tr ...
随机推荐
- Go 跨域请求问题
在使用go语言写测试服务的时候遇到了前端跨域请求问题,只需在go中加入 w.Header().Set("Access-Control-Allow-Origin", "*& ...
- DP_括号匹配序列问题
括号匹配问题 简单括号匹配问题是给出字符串,判断字符串中的括号是否匹配,此类问题核心解决方案就是利用栈的后进先出的特性,从左到右依次遍历字符串,遇左括号进栈,遇右括号将其与栈顶元素配对,若能配对,则栈 ...
- 20155202 2016-2017-2 《Java程序设计》第4周学习总结
20155202 2016-2017-2 <Java程序设计>第4周学习总结 教材学习内容总结 继承与多态: 子类和父类有(is a)关系,Role role1 =new Swordsma ...
- 20155301 2016-2017-2 《Java程序设计》第10周学习总结
20155301 2016-2017-2 <Java程序设计>第10周学习总结 教材学习内容总结 计算机网络: 1.在计算机网络中,现在命名IP地址的规定是IPv4协议,该协议规定每个IP ...
- Why HBase
3.1.1,为什么选用HBases a) 容量巨大 HBase 的单表可以有百亿行.百万列,数据矩阵横向和纵向两个维度所支持的数据量级 都非常具有弹性.传统的关系型数据库,如 Oracle ...
- php实现图形计算器
存档: index.php <html> <head> <title>图形计算器开发</title> <meta http-equiv=" ...
- 433. Number of Islands【LintCode java】
Description Given a boolean 2D matrix, 0 is represented as the sea, 1 is represented as the island. ...
- 【snmp】Linux开启snmp及查询
1.Linux snmp 1.安装snmp yum install -y net-snmp* 2.备份snmp配置 cp /etc/snmp/snmpd.conf /etc/snmp/snmpd.co ...
- Hyperledger_Fabric_Model
Hyperledger_Fabric_Model 本部分描述了Hyperledger Fabric的主要设计特点 Assets: 资产定义使得任何东西都可以通过货币值在网络中交易,从食物到老爷车再到期 ...
- 创建image
摘要: 本节演示如何通过 Web GUI 和 CLI 两种方法创建 Image. 本节演示如何通过 Web GUI 和 CLI 两种方法创建 Image. OpenStack 为终端用户提供了 Web ...