【WebGL之巅】03-绘制一个点_v2_attribute变量

By yesmore on 2021-07-24
阅读时间 4 分钟
文章共 882
阅读量

对应《WebGL编程指南》代码:03-HelloPoint2

要点:JavaScript与着色器之前数据的传输(attribute变量使用步骤)、存储限定符(attribute)、gl.getAttribLocation()、gl.vertexAttrib3f()、WebGL函数命名规范

知识点

  1. 位置信息的传输

    方式1:attribute变量,传输与顶点相关的数据

    方式2:uniform变量,传输对于所有顶点都相同(与顶点无关)的数据

  2. attribute变量使用步骤

    ① 在顶点着色器中,声明attribute变量

    ② 将attribute变量赋值给gl_Position变量

    ③ 向attribute变量传输数据

  3. 存储限定符

    关键词attribute被称为存储限定符

    声明attribute变量:<存储限定符><类型><变量名>

    1
    2
    3
    4
    5
    存储限定符  类型    变量名
    ↓ ↓ ↓
    'attribute vec4 a_Position;'

    注意:以后所有attribute变量名都使用‘a_’,uniform变量名使用‘u_’规范
    1
    2
    3
    4
    5
    6
    7
    8
    var 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';
    准备好从外部接收顶点坐标及尺寸
  4. gl.getAttribLocation()
作用 获取attribute变量地址
参数 program:程序对象,包含了顶点和片元着色器 name:attribute变量名称
返回值 大于等于0:attribute变量的存储地址 -1:attribute变量不存在或命名错误
错误 INVALID_OPERATION 程序对象未能成功连接 INVALID_VALUE name参数长度越界
  1. 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, 可接受数组作为参数
  1. WebGL函数命名规范

    遵循openGL:<基础函数名><参数个数><参数类型>

1
2
3
gl.vertexAttrib 3     f ()
↑ ↑ ↑
基础函数名 参数个数 参数类型(f:浮点数,i:整数)

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>draw a point 2</title>
</head>
<body onload="main()">
<canvas id="webgl" width="400" height="400">
Please use the browser supporting "canvas".
</canvas>

<script src="../lib/webgl-utils.js"></script>
<script src="../lib/webgl-debug.js"></script>
<script src="../lib/cuon-utils.js"></script>
<script src="HelloPoint2.js"></script>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
// HelloPoint2
var 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';

// 片元着色器程序
var FSHADER_SOURCE=
'void main(){\n'+
'gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n'+ // 设置颜色
'}\n';

function main(){
var canvas = document.getElementById('webgl');
var gl=getWebGLContext(canvas);
if(!gl)
{
console.log('Failed to get the rendering context for WebGL');
return ;
}

// 初始化着色器
if(!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)){
console.log('Failed to initialize shaders.');
return ;
}

// 获取attribute变量的存储位置
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
if(a_Position < 0)
{
console.log('Failed to get the storage location of a_Position');
return ;
}
// 获取attribute变量的存储位置
var a_PointSize = gl.getAttribLocation(gl.program, 'a_PointSize');
if(a_PointSize<0)
{
console.log('Failed to get the storage location of a_PointSize');
return ;
}

// 将顶点位置传输给attribute变量
// gl.vertexAttrib2f(a_Position, 0.2,0.5);
gl.vertexAttrib3f(a_Position, 0.2, 0.5, 0.0);
gl.vertexAttrib1f(a_PointSize, 10);

gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

gl.drawArrays(gl.POINTS, 0, 1);
}

效果

1


Tips: Please indicate the source and original author when reprinting or quoting this article.