对应《WebGL编程指南》代码:03-HelloPoint2
要点:JavaScript与着色器之前数据的传输(attribute变量使用步骤)、存储限定符(attribute)、gl.getAttribLocation()、gl.vertexAttrib3f()、WebGL函数命名规范
知识点
-
位置信息的传输
方式1:attribute变量,传输与顶点相关的数据
方式2:uniform变量,传输对于所有顶点都相同(与顶点无关)的数据
-
attribute变量使用步骤
① 在顶点着色器中,声明attribute变量
② 将attribute变量赋值给gl_Position变量
③ 向attribute变量传输数据
-
存储限定符
关键词attribute被称为存储限定符
声明attribute变量:<存储限定符><类型><变量名>
1
2
3
4
5存储限定符 类型 变量名
↓ ↓ ↓
'attribute vec4 a_Position;'
注意:以后所有attribute变量名都使用‘a_’,uniform变量名使用‘u_’规范1
2
3
4
5
6
7
8var VSHADER_SOURCE =
'attribute vec4 a_Position;\n' +
'attribute float a_PointSize;\n' +
'void main() {\n' +
'gl_Position = a_Position;\n' +
'gl_PointSize = a_PointSize;\n' +
'}\n';
准备好从外部接收顶点坐标及尺寸 -
gl.getAttribLocation()
作用 | 获取attribute变量地址 | |
---|---|---|
参数 | program:程序对象,包含了顶点和片元着色器 | name:attribute变量名称 |
返回值 | 大于等于0:attribute变量的存储地址 | -1:attribute变量不存在或命名错误 |
错误 | INVALID_OPERATION 程序对象未能成功连接 | INVALID_VALUE name参数长度越界 |
-
gl.vertexAttrib3f()
作用 | 将顶点位置传输给attribute变量 | |
---|---|---|
参数 | location:指定将要修改的attribute变量的存储位置(a_Position) | v0,v1,v2,[,1.0]: 指定填充值(x,y,z坐标) |
返回值 | 无 | |
错误 | INVALID_OPERATION 没有当前的program对象 | INVALID_VALUE location数目大于attribute变量的最大数目 |
同族函数 | gl.vertexAttrib1f、gl.vertexAttrib2f、gl.vertexAttrib4f | 矢量版本:gl.vertexAttrib3fv, 可接受数组作为参数 |
-
WebGL函数命名规范
遵循openGL:<基础函数名><参数个数><参数类型>
1 | gl.vertexAttrib 3 f () |
实例
1 |
|
1 | // HelloPoint2 |
效果
Tips: Please indicate the source and original author when reprinting or quoting this article.