当前位置：首页 > article >正文

WebGl 使用缓冲区对象绘制多个点

article 2024/12/24 11:34:41

缓冲区对象是WebGL系统中为一块内存区域，可以一次性地向缓冲区对象中填充大量的顶点数据，然后将这些数据保存在其中，供顶点着色器使用。

1.类型化数组类型

在 webgl 中，需要处理大量的相同类型数据，所以引入类型化数组，这样程序就可以预知到数组中的数据类型，提高性能。

Int8Array:8位整型
UInt8Array: 8位无符号整型
Int16Array: 16位整型
UInt16Array:16位无符号整型
Int32Array:32位整型
UInt32Array:32位无符号整型
Float32Array:单精度32位浮点型
Float64Array:双精度64位浮点型

const points = new Float32Array([
    -0.5, -0.5,
    0.5, -0.5,
    0.0, 0.5,
])

2.创建缓冲区对象

const buffer = gl.createBuffer();

3.绑定缓冲区对象

gl.bindBuffer(target, buffer)

（1）target参数有两种：

gI.ARRAY_BUFFER: 表示缓冲区存储的是顶点的数据
9I.ELEMENT_ARRAY_BUFFER:表示缓冲区存储的是顶点的索引值

（2）buffer：已经创建好的缓冲区对象

4.将数据写入缓冲区对象

gl.bufferData(target, data, type)

（1）target: 类型同 gl.bindBuffer 中的 target

（2）data:写入缓冲区的顶点数据，如程序中的 points

（3）type表示如何使用缓冲区对象中的数据，分为以下几类：

gI.STATIC DRAW：写入一次，多次绘制。
gI.STREAM_DRAW：写入一次，绘制若干次。
gI.DYNAMIC_DRAW：写入多次，绘制多次。

5.将缓冲区对象分配给一个attribute变量

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

（1）location：attribute 变量的存储位置

（2）size：指定每个顶点所使用数据的个数

（3）type：指定数据格式

gI.FLOAT：浮点型
9I.UNSIGNED_BYTE：无符号字节
gI.SHORT：短整型
gI.UNSIGNED_SHORT：无符号短整型
gI.INT：整型
gI.UNSIGNED_INT：无符号整型

（4）normalized：表示是否将数据归一化到[0,1][-1,1]这个区间

（5）stride：两个相邻顶点之间的字节数

（6）offset：数据偏移量

6.开启attribute变量

gl.enableVertexAttribArray(location)

（1）location: attribute 变量的存储地址

（2）gl.disableVertexAttribArray(aPosition); 使用此方法禁用attribute变量

7.完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        canvas {
            margin: 50px auto;
            display: block;
            background: pink;
        }
    </style>
    <title>修改点的颜色</title>
</head>

<body>
    <canvas id="canvas" width="400" height="400">
        此浏览器不支持canvas
    </canvas>
    <script src="./js/index.js"></script>
    <script>
        const ctx = document.getElementById('canvas')
        const gl = ctx.getContext('webgl')
        // 顶点着色器源码
        const vertexShaderSource = `
            attribute vec4 aPosition;
            void main() {
                gl_Position = aPosition; 
                gl_PointSize = 10.0;
            }`

        // 片源着色器源码
        const fragmentShaderSource = `
            void main() {
                gl_FragColor = vec4(0.0,0.0,0.0,1.0); // r, g, b, a
            }`
        const program = initShader(gl, vertexShaderSource, fragmentShaderSource);
        const aPosition = gl.getAttribLocation(program, 'aPosition');

        // 1.创建顶点数据
        const points = new Float32Array([
            -0.5, -0.5,
            0.5, -0.5,
            0.0, 0.5,
        ])
        // 2.创建缓冲区对象
        const buffer = gl.createBuffer();
        // 3.绑定缓冲区对象
        gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
        // 4.将数据写入缓冲区对象，这里参数选择写入一次，多次绘制
        gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW)
        // 5.将缓冲区对象分配给一个attribute变量
        gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0);
        // 6.开启attribute变量
        gl.enableVertexAttribArray(aPosition)
        // 7.绘制三个点
        gl.drawArrays(gl.POINTS, 0, 3);


        // 着色器 
        function initShader(gl, vertexShaderSource, fragmentShaderSource) {
            const vertexShader = gl.createShader(gl.VERTEX_SHADER);
            const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
            gl.shaderSource(vertexShader, vertexShaderSource);
            gl.shaderSource(fragmentShader, fragmentShaderSource);
            gl.compileShader(vertexShader);
            gl.compileShader(fragmentShader);
            const program = gl.createProgram();
            gl.attachShader(program, vertexShader);
            gl.attachShader(program, fragmentShader);
            gl.linkProgram(program);
            gl.useProgram(program);
            return program;
        }
    </script>
</body>

</html>