WebGl 多缓冲区和数据偏移

小白菜学前端

已于 2024-10-21 15:46:52 修改

阅读量578

点赞数 12

分类专栏： WebGl 文章标签： webgl 前端 javascript

于 2024-10-21 14:33:30 首次发布

本文链接：https://blog.youkuaiyun.com/dlmyrt/article/details/143111348

版权

WebGl 专栏收录该内容

15 篇文章

订阅专栏

1.多缓冲区

多缓冲区技术通常涉及到创建多个缓冲区对象，并将它们用于不同的数据集。
这种做法可以提高数据处理效率，尤其是在处理大量数据或需要频繁更新数据时。
通过预先分配和配置多个缓冲区，可以在不影响渲染性能的情况下，快速切换数据集。

2.数据偏移

数据偏移是指在处理缓冲区数据时，指针跳过一定数量的字节来定位特定的数据。
在WebGL中，gl.vertexAttribPointer函数的offset参数用于指定从缓冲区起始位置开始的偏移量。
这允许开发者将不同类型的数据（如顶点位置、法线、颜色等）存储在同一个缓冲区中，并通过偏移量来正确地访问这些数据。

3. 实现示例

3.1. 声明aPointSize

 attribute float aPointSize;

3.2. 获取attribute变量aPointSize

const aPointSize = gl.getAttribLocation(program, 'aPointSize');

3.3. 获取字节数

 const BYTES = points.BYTES_PER_ELEMENT;

3.4. 顶点大小参数设置：

gl.vertexAttribPointer(aPointSize, 1, gl.FLOAT, false, BYTES * 3, BYTES * 2);

4. 代码实现

<!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')
        // 顶点着色器源码
        // 1. 声明aPointSize
        const vertexShaderSource = `
            attribute vec4 aPosition;
            attribute float aPointSize;
            void main() {
                gl_Position = aPosition; 
                gl_PointSize = aPointSize;
            }`

        // 片源着色器源码
        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.获取attribute变量aPointSize
        const aPointSize = gl.getAttribLocation(program, 'aPointSize');

        // 2.创建顶点数据,前两位是顶点的位置，第三位是顶点的大小
        const points = new Float32Array([
            -0.5, -0.5, 10.0,
            0.5, -0.5, 20.0,
            0.0, 0.5, 30.0,
        ])
        const buffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
        gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);
        // 3.获取字节数
        const BYTES = points.BYTES_PER_ELEMENT;
        // 4.顶点位置参数设置：两个相邻顶点之间的字节数为三个字节，所以字节数为BYTES*3; 顶点数据是前两位，所以偏移量为0;
        gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, BYTES * 3, 0);
        // 5.顶点大小参数设置：两个相邻顶点之间的字节数为三个字节，所以字节数为BYTES*3; 顶点数据是第三位，所以偏移量为BYTES*2;
        gl.vertexAttribPointer(aPointSize, 1, gl.FLOAT, false, BYTES * 3, BYTES * 2);
        // 4.激活变量
        gl.enableVertexAttribArray(aPosition);
        gl.enableVertexAttribArray(aPointSize);

        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>