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

青∠※

987人浏览 · 2025-03-23 10:43:25

青∠※ · 2025-03-23 10:43:25 发布

绘制多个大小不同的点，使用多个buffer绘制

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webgl入门实例-05绘制多个点</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; // 点的大小
        void main()	{
            gl_Position = a_Position;
            gl_PointSize = a_PointSize;
        }
    </script>

    <!-- Fragment shader program -->
    <script id="FSHADER_SOURCE" type="text/plain">
        precision mediump float;
        void main()	{
            gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0 );
        }
    </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 vertices = new Float32Array([
                0.0, 0.5,   // 第一个点
                -0.5, -0.5, // 第二个点
                0.5, -0.5   // 第三个点
            ]);
            var n = 3; // 点的数量

            var sizes = new Float32Array([
                10.0,       // 第一个点的大小
                20.0,       // 第二个点的大小
                30.0        // 第三个点的大小
            ]);

            // 创建buffer对象
            var vertexBuffer = gl.createBuffer();
            var sizeBuffer = gl.createBuffer();

            // 将 vertices 写入 vertexBuffer 并启用
            gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
            var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
            gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
            gl.enableVertexAttribArray(a_Position);

            // 将 sizes 写入 sizeBuffer 并启用
            gl.bindBuffer(gl.ARRAY_BUFFER, sizeBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, sizes, gl.STATIC_DRAW);
            var a_PointSize = gl.getAttribLocation(gl.program, 'a_PointSize');
            gl.vertexAttribPointer(a_PointSize, 1, gl.FLOAT, false, 0, 0);
            gl.enableVertexAttribArray(a_PointSize);

            // 解除 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>

乐奇 Rokid 开放社区

更多推荐

FPC与机器人的双向赋能，解锁智能装备进化新势能

如果说AI算法、算力芯片是智能眼镜的“智慧大脑”，光学模组是智能眼镜的“视觉窗口”，那么FPC就是贯穿整机、连接所有功能模块的“柔性神经脉络”。方寸之间的柔性突破，破解了智能眼镜“轻薄形态”与“全能功能”的核心矛盾，是穿戴智能设备实现形态革新、体验升级的底层核心。未来，随着AR沉浸式技术、AI大模型、穿戴硬件技术的持续进化，智能眼镜将朝着更轻薄、更智能、更多场景、更高稳定性的方向持续迭代，对高端精