JavaScript WebGL

【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.

特色标签
JavaScript WebGL
链友
ESC