【WebGL之巅】06-绘制三个点

By yesmore on 2021-07-25
阅读时间 9 分钟
文章共 2.1k
阅读量

对应《WebGL编程指南》代码:06-MultiPoints

要点:缓冲区对象、gl.drawArrays、缓冲区对象向着色器传入多个顶点的数据的5个步骤

复习:03-绘制一个点_v2_attribute变量

绘制步骤

获取WebGL上下文 初始化着色器 设置点的坐标信息 设置<canvas>背景色 清空<canvas> 绘制

知识点

一、缓冲区对象

​ 作用:可以一次性地向着色器传入多个顶点的数据。

​ 本质:是WebGL系统中的的一块内存区域。

二、initVertexBuffers(gl)

​ 作用:创建顶点缓冲区对象,并将多个顶点的数据保存在缓冲区中,然后将缓冲区传给顶点着色器.

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
function initVertexBuffers(gl) {
var vertices = new Float32Array([
0.0, 0.5,
-0.5, -0.5,
0.5, -0.5
]);
var n=3; //点的个数

// 1.创建缓冲区对象
var vertexBuffer = gl.createBuffer();
if(!vertexBuffer){
console.log("Failed to create thie buffer object");
return -1;
}

// 2.将缓冲区对象保存到目标上
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

// 3.向缓存对象写入数据
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

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 -1;
}

// 4.将缓冲区对象分配给a_Postion变量
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);

// 5.连接a_Postion变量与分配给它的缓冲区对象(开启attribute变量)
gl.enableVertexAttribArray(a_Position);

return n;
}
三、缓冲区对象向着色器传入多个顶点的数据的5个步骤
1.创建缓冲区对象
gl.createBuffer()
返回值 非null:新创建的缓冲区对象 null:创建失败
ERROR /

​ 补充:

gl.deleteBuffer(Buffer)
参数 buffer:待删除的的缓冲区对象
返回值 /
2.将缓冲区对象保存到目标上
gl.bindBuffer(target, buffer)
参数 target(gl.ARRAY_BUFFER表示缓冲区对象中包含了顶点的数据 / gl.ELEMENT_ARRAT_BUFFER表示缓冲区对象中包含了顶点的索引值) buffer:由gl.createBuffer()创建的缓冲区对象
返回值 /
错误 INVALID_ENUM:target不是上述值之一

​ 注解:

​ ①gl.ARRAY_BUFFER,缓冲区对象存储者关于顶点的数据(顶点的位置坐标)

3.向缓存对象写入数据
gl.bufferData(target, data, usage)
参数 target(gl.ARRAY_BUFFER / gl.ELEMENT_ARRAT_BUFFER) data:写入缓冲区对象的数据 usage:程序将如何使用存储在缓冲区对象中的数据
返回值 /
错误 INVALID_ENUM:target不是上述值之一

​ 注解:

​ ①usage值:

​ gl.STATIC_DRAW:只会向缓冲区对象中写入一次数据,但需要绘制很多次

​ gl.STREAM_DRAW:只会向缓冲区对象中写入一次数据,然后绘制若干次

​ gl.DYNAMIC_DRAW:会向缓冲区对象中写入多次数据,并绘制很多次

​ ②Float32Array():通常用来存储顶点坐标或颜色数据,类型化数组,解决了js一般Array数组存储类型杂乱问题,不支持pop、push方法,且只能使用new运算符创建,不能使用[]

​ 常见类型化数组:

数组类型 每个元素所占字节数 描述(c语言中的数据类型)
Int8Array 1 8位整型数
UInt8Array 1 8位无符号整型数
Int16Array 2 16位整型数
UInt16Array 2 16位无符号整型数
Int32Array 4 32位整型数
UInt32Array 4 32位无符号整型数
Float32Array 4 单精度32位浮点数
Float64Array 8 双精度64位浮点数
4.将缓冲区对象分配给a_Postion变量

gl.vertexAttribPointer(location, size, type, normalized, stride, offset);

  • 参数1:location
    指定要修改的顶点属性的索引。(a_Position)

  • 参数2:size
    指定每个顶点属性的组成数量,必须是1,2,3或4。

  • 参数3:type
    指定数组中每个元素的数据类型可能是:

    • gl.BYTE: signed 8-bit integer, with values in [-128, 127]
      有符号的8位整数,范围[-128, 127]

    • gl.SHORT: signed 16-bit integer, with values in [-32768, 32767]
      有符号的16位整数,范围[-32768, 32767]

    • gl.UNSIGNED_BYTE: unsigned 8-bit integer, with values in [0, 255]
      无符号的8位整数,范围[0, 255]

    • gl.UNSIGNED_SHORT: unsigned 16-bit integer, with values in [0, 65535]
      无符号的16位整数,范围[0, 65535]

    • gl.FLOAT: 32-bit IEEE floating point number
      32位IEEE标准的浮点数

    • 使用WebGL2版本的还可以使用以下值:

      • gl.HALF_FLOAT: 16-bit IEEE floating point number
        16位IEEE标准的浮点数
  • 参数4:normalized
    当转换为浮点数时是否应该将整数数值归一化到特定的范围(true/false)。

    • For types gl.BYTE and gl.SHORT, normalizes the values to [-1, 1] if true.
      对于类型gl.BYTEgl.SHORT,如果是true则将值归一化为[-1, 1]
    • For types gl.UNSIGNED_BYTE and gl.UNSIGNED_SHORT, normalizes the values to [0, 1] if true.
      对于类型gl.UNSIGNED_BYTEgl.UNSIGNED_SHORT,如果是true则将值归一化为[0, 1]
    • For types gl.FLOAT and gl.HALF_FLOAT, this parameter has no effect.
      对于类型gl.FLOATgl.HALF_FLOAT,此参数无效
  • 参数5:stride

    指定相邻两个顶点间的字节数,默认为0.

    一个GLsizei,以字节为单位指定连续顶点属性开始之间的偏移量(即数组中一行长度)。不能大于255。如果stride为0,则假定该属性是紧密打包的,即不交错属性,每个属性在一个单独的块中,下一个顶点的属性紧跟当前顶点之后。

  • 参数6:offset

    GLintptr (en-US)指定顶点属性数组中第一部分的字节偏移量。即attribute变量从缓冲区何处开始存储。必须是类型的字节长度的倍数。

5.连接a_Postion变量与分配给它的缓冲区对象(开启attribute变量)

gl.enableVertexAttribArray(a_Position)

参数 location:指定attribute变量的存储位置
返回值 /
错误 INVALID_VALUE

​ 关闭分配:

gl.disableVertexAttribArray(a_Position)

参数 location:指定attribute变量的存储位置
返回值 /
错误 INVALID_VALUE
四、gl.drawArrays(gl.POINTS, first, count)
1
2
3
4
5
6
7
作用:执行顶点着色器,按照mode参数指定的方式绘制图形
参数:
mode,指定绘制的方式(gl.POINTS/gl.LINES/gl.LINE_STRIP/gl.LINE_LOOP/gl.TRIANGLES/gl.TRIANGLE_STRIP/gl.TRIANGLE_FAN)。
first, 指定从那个顶点开始绘制(整数型),0表示从第一个顶点开始画起。
count, 指定绘制需要多少个顶点(整数型),顶点着色器执行的次数,每次处理一个顶点。执行完后,片元着色器开始执行
返回值:无
错误:/

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>setPoint</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="MultiPoints.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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
// MultiPoints.js
// 顶点着色器程序
var VSHADER_SOURCE =
'attribute vec4 a_Position;'+
'void main(){'+
'gl_Position=a_Position;'+
'gl_PointSize=10.0;'+
'}';

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

function main() {
// 获取canvas元素
var canvas = document.getElementById("webgl");
if(!canvas){
console.log("Failed to retrieve the <canvas> element");
return;
}

// 获取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;
}

// 设置顶点位置
var n = initVertexBuffers(gl);
if (n < 0) {
console.log('Failed to set the positions of the vertices');
return;
}


//指定清空<canvas>颜色
gl.clearColor(0.0, 0.0, 0.0, 1.0);

//清空<canvas>
gl.clear(gl.COLOR_BUFFER_BIT);

//绘制三个点
gl.drawArrays(gl.POINTS, 0, n);
}

function initVertexBuffers(gl) {
var vertices = new Float32Array([
0.0, 0.5,
-0.5, -0.5,
0.5, -0.5
]);
var n=3; //点的个数

// 1.创建缓冲区对象
var vertexBuffer = gl.createBuffer();
if(!vertexBuffer){
console.log("Failed to create thie buffer object");
return -1;
}

// 2.将缓冲区对象保存到目标上
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

// 3.向缓存对象写入数据
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

// 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 -1;
}

// 4.将缓冲区对象分配给a_Postion变量
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);

// 5.连接a_Postion变量与分配给它的缓冲区对象(开启attribute变量)
gl.enableVertexAttribArray(a_Position);

return n;
}

效果

1


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