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

webgl入门实例-06绘制多个大小不同点-深入理解buffer02

article 2025/3/26 10:59:38

绘制多个大小、颜色不同的点，使用一个buffer交叉存储点信息

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body onload="main()">
    <canvas id="webgl" width="400" height="400"></canvas>

    <!-- Vertex shader program -->
    <script id="VSHADER_SOURCE" type="text/plain">
        attribute vec4 a_Position; // 点的坐标
        attribute float a_PointSize; // 点的大小
        attribute vec4 a_PointColor; // 点的颜色
        varying vec4 v_PointColor;
        void main()	{
            gl_Position = a_Position;
            gl_PointSize = a_PointSize;
            v_PointColor = a_PointColor; // 将点的颜色传递给片元着色器
        }
    </script>

    <!-- Fragment shader program -->
    <script id="FSHADER_SOURCE" type="text/plain">
        precision mediump float;
        varying vec4 v_PointColor; // 接收顶点着色器传过来的颜色
        void main()	{
            gl_FragColor = v_PointColor;
        }
    </script>

    <script>
        function main() {
            var VSHADER_SOURCE = document.getElementById("VSHADER_SOURCE").textContent
            var FSHADER_SOURCE = document.getElementById("FSHADER_SOURCE").textContent
            var canvas = document.getElementById("webgl");
            var gl = canvas.getContext("webgl");
            initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE);

            // 每个顶的的坐标、颜色、大小
            var verticesSizesColors = new Float32Array([
                0.0, 0.5, 1.0, 0.0, 0.0, 1.0, 10.0,     // 第一个点 x, y, r, g, b, a, size
                -0.5, -0.5, 0.0, 1.0, 0.0, 1.0, 20.0,   // 第二个点 x, y, r, g, b, a, size
                0.5, -0.5, 0.0, 0.0, 1.0, 1.0, 30.0     // 第三个点 x, y, r, g, b, a, size
            ])
            var n = 3; // 点的数量
            // 创建buffer对象
            var vertexSizeBuffer = gl.createBuffer();
            // 绑定buffer对象
            gl.bindBuffer(gl.ARRAY_BUFFER, vertexSizeBuffer);
            // 将verticesSizesColors写入buffer对象
            gl.bufferData(gl.ARRAY_BUFFER, verticesSizesColors, gl.STATIC_DRAW);

            var FSIZE = verticesSizesColors.BYTES_PER_ELEMENT;
            // 获取 a_Position 变量在内存中的位置
            var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
            // 将buffer对象的输入传递给a_Position
            // 传递顶点的数据
            gl.vertexAttribPointer(
                a_Position, // 待分配的 attribute 变量在内存中的位置
                2,          // 分配的数量，对应vec4，vec4中，除第四个分量为1外，其余未分配的将自动填充为0，如第一个点 vec4( 0.0, 0.5, 0.0, 1.0)
                gl.FLOAT,   // 类型
                false,      // 是否正交化
                FSIZE * 7,  // 指定多少个字节存储一个顶点的信息，如 x, y, r, g, b, a, size 共7个
                0           // attribute 变量在ARRAY_BUFFER对象中存储的起始位置
            );
            // 启用buffer对象的分配
            gl.enableVertexAttribArray(a_Position);

            // 传递顶点颜色
            // 获取顶点颜色 a_PointColor 在内存中的位置
            var a_PointColor = gl.getAttribLocation(gl.program, 'a_PointColor');
            gl.vertexAttribPointer(
                a_PointColor,  // 指针
                4,             // 分配的数量 对应 vec4 ， 如第一个定义的颜色 vec4(1.0, 0.0, 0.0, 1.0)
                gl.FLOAT,
                false,
                FSIZE * 7,
                FSIZE * 3       // 起始位置 2
            );
            gl.enableVertexAttribArray(a_PointColor);  // Enable buffer allocation

            // 传递顶点大小
            // 获取顶点大小 a_PointColor 在内存中的位置
            var a_PointSize = gl.getAttribLocation(gl.program, 'a_PointSize');
            gl.vertexAttribPointer(
                a_PointSize,   // 指针
                1,             // 分配的数量 对应 float
                gl.FLOAT,
                false,
                FSIZE * 7,
                FSIZE * 6       // 起始位置 6
            );
            gl.enableVertexAttribArray(a_PointSize);  // Enable buffer allocation

            // 解绑 ARRAY_BUFFER
            gl.bindBuffer(gl.ARRAY_BUFFER, null);

            // Specify the color for clearing <canvas>
            gl.clearColor(0.0, 0.0, 0.0, 1.0);

            // Clear <canvas>
            gl.clear(gl.COLOR_BUFFER_BIT);

            // Draw three points
            gl.drawArrays(gl.POINTS, 0, n);
        }

        function initShaders(gl, vshader, fshader) {
            var program = createProgram(gl, vshader, fshader);
            if (!program) {
                console.log("Failed to create program");
                return false;
            }

            gl.useProgram(program);
            gl.program = program;

            return true;
        }
        function createProgram(gl, vshader, fshader) {
            var vertexShader = loadShader(gl, gl.VERTEX_SHADER, vshader);
            var fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fshader);
            if (!vertexShader || !fragmentShader) {
                return null;
            }
            var program = gl.createProgram();
            if (!program) {
                return null;
            }
            gl.attachShader(program, vertexShader);
            gl.attachShader(program, fragmentShader);
            gl.linkProgram(program);
            var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
            if (!linked) {
                var error = gl.getProgramInfoLog(program);
                console.log("Failed to link program: " + error);
                gl.deleteProgram(program);
                gl.deleteShader(fragmentShader);
                gl.deleteShader(vertexShader);
                return null;
            }
            return program;
        }
        function loadShader(gl, type, source) {
            var shader = gl.createShader(type);
            if (shader == null) {
                console.log("unable to create shader");
                return null;
            }
            gl.shaderSource(shader, source);
            gl.compileShader(shader);
            var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
            if (!compiled) {
                var error = gl.getShaderInfoLog(shader);
                console.log("Failed to compile shader: " + error);
                gl.deleteShader(shader);
                return null;
            }
            return shader;
        }
    </script>
</body>

</html>