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

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

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

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

绘制步骤

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

知识点

一、缓冲区对象

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

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

二、initVertexBuffers(gl)

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

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.BYTE和gl.SHORT，如果是true则将值归一化为[-1, 1]
- For types gl.UNSIGNED_BYTE and gl.UNSIGNED_SHORT, normalizes the values to [0, 1] if true.
  对于类型gl.UNSIGNED_BYTE和gl.UNSIGNED_SHORT，如果是true则将值归一化为[0, 1]
- For types gl.FLOAT and gl.HALF_FLOAT, this parameter has no effect.
  对于类型gl.FLOAT和gl.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)

作用：执行顶点着色器，按照mode参数指定的方式绘制图形
参数：
	mode，指定绘制的方式（gl.POINTS/gl.LINES/gl.LINE_STRIP/gl.LINE_LOOP/gl.TRIANGLES/gl.TRIANGLE_STRIP/gl.TRIANGLE_FAN）。
	first, 指定从那个顶点开始绘制（整数型），0表示从第一个顶点开始画起。
	count, 指定绘制需要多少个顶点（整数型），顶点着色器执行的次数，每次处理一个顶点。执行完后，片元着色器开始执行
返回值：无
错误：/

实例

<!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>

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

效果

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

绘制步骤

知识点

一、缓冲区对象

二、initVertexBuffers(gl)

三、缓冲区对象向着色器传入多个顶点的数据的5个步骤

1.创建缓冲区对象

2.将缓冲区对象保存到目标上

3.向缓存对象写入数据

4.将缓冲区对象分配给a_Postion变量

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

四、gl.drawArrays(gl.POINTS, first, count)

实例

效果

特色标签

链友