对应《WebGL编程指南》代码:06-MultiPoints
要点:缓冲区对象、gl.drawArrays、缓冲区对象向着色器传入多个顶点的数据的5个步骤
绘制步骤
获取WebGL上下文 →
初始化着色器 →
设置点的坐标信息 →
设置<canvas>
背景色 →
清空<canvas>
→
绘制
知识点
一、缓冲区对象
作用:可以一次性地向着色器传入多个顶点的数据。
本质:是WebGL系统中的的一块内存区域。
二、initVertexBuffers(gl)
作用:创建顶点缓冲区对象,并将多个顶点的数据保存在缓冲区中,然后将缓冲区传给顶点着色器.
1 | function initVertexBuffers(gl) { |
三、缓冲区对象向着色器传入多个顶点的数据的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
andgl.SHORT
, normalizes the values to [-1, 1] if true.
对于类型gl.BYTE
和gl.SHORT
,如果是true则将值归一化为[-1, 1] - For types
gl.UNSIGNED_BYTE
andgl.UNSIGNED_SHORT
, normalizes the values to [0, 1] if true.
对于类型gl.UNSIGNED_BYTE
和gl.UNSIGNED_SHORT
,如果是true则将值归一化为[0, 1] - For types
gl.FLOAT
andgl.HALF_FLOAT
, this parameter has no effect.
对于类型gl.FLOAT
和gl.HALF_FLOAT
,此参数无效
- For types
-
参数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 | 作用:执行顶点着色器,按照mode参数指定的方式绘制图形 |
实例
1 |
|
1 | // MultiPoints.js |
效果
Tips: Please indicate the source and original author when reprinting or quoting this article.