本系列仅作为本人学习《WebGL编程指南》这本书的笔记所用

构成三维模型的基本单位是三角形，复杂三维模型都是由许多三角形和这些三角形的顶点构成。
先通过绘制多个点的二维图形，来学习绘制多个点的三维图形

WebGL提供了【缓冲区对象】机制，可以一次性向着色器传入多个顶点的数据。
创建顶点缓冲区对象，并将多个顶点的数据保存在缓冲区中，然后将缓冲区传给顶点着色器。

截图.png

截图2.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05绘制多个点</title>
    <script src="./lib/cuon-matrix.js"></script>
    <script src="./lib/cuon-utils.js"></script>
    <script src="./lib/webgl-debug.js"></script>
    <script src="./lib/webgl-utils.js"></script>
</head>
<body onload="main()">
    <canvas id="webgl" width="400" height="400">
        不支持canvas的浏览器会展示这段文字
    </canvas>
    <script>
        // 顶点着色器程序
        let VSHADER_SOURCE =
        `
        attribute vec4 a_Position;
        attribute float a_PoinSize;
        void main() {
            gl_Position = a_Position; // 设置坐标
            gl_PointSize = a_PoinSize; // 设置尺寸
        }
        `;
        // 片元着色器程序============================
        let FSHADER_SOURCE = 
        `
        void main() {
            gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
        }
        `;
        // 主程序
        function main() {
            let canvas = document.getElementById('webgl');
            // 获取WebGL绘图上下文
            let gl = getWebGLContext(canvas);
            if(!gl) {
                console.error('无法使用WebGL');
                return;
            }
            
            // 初始化着色器
            if(!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
                console.error('无法使用着色器');
                return;
            }
            // 设置顶点位置 ============================================ 
            let nLength = initVertexBuffers(gl);
            if ( nLength < 0) {
                console.log('无法设置点的位置');
                return;
            }
            // =========================================================
            // 设置<canvas> 背景色
            gl.clearColor(0.0, 0.0, 0.0, 1.0);
            // 清除<canvas>
            gl.clear(gl.COLOR_BUFFER_BIT);
            // 绘制三个点, 0 表示从第一个坐标开始画
            gl.drawArrays(gl.POINTS, 0, nLength); // nLength为3个点
            // =====================================================重复性代码
            // 获取WebGL绘图上下文
            // 初始化着色器
            // 设置点的坐标信息***
            // 设置<canvas>背景色
            // 清空<canvas>
            // 绘制
        }
        function initVertexBuffers(gl) {
            // 类型化数组, 用于储存顶点的坐标或颜色。比Array性能更高，不支持push(),和pop()
            let vertices = new Float32Array([
                0.0, 0.5, -0.5, -0.5, 0.5, -0.5
            ]); // 坐标 x1,y1,x2,y2,x3,y3
            let n = 3; // 点的个数
            // 1.创建缓冲区对象
            let vertexBuffer = gl.createBuffer();
            if (!vertexBuffer) {
                console.log('不能创建缓冲区对象');
                return -1;
            }
            // 2.将缓冲区对象绑定到目标
            gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
            // 3.向缓冲区对象写入数据,不能直接向缓冲区写入数据，只能向绑定的目标输入数据
            gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
            // 获取a_Position、a_PoinSize 变量的存储位置
            let a_Position = gl.getAttribLocation(gl.program, 'a_Position');
            if (a_Position < 0) {
                console.log('无法获取 a_Position')
                return -1;
            }
            let a_PoinSize = gl.getAttribLocation(gl.program, 'a_PoinSize');
            if (a_PoinSize < 0) {
                console.log('无法获取 a_PoinSize')
                return -1;
            }
            gl.vertexAttrib1f(a_PoinSize, 12.0);
            // gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0); 替换缓冲区对象数据,因为只能一次传入一个点
            // 4.将缓冲区对象分配给attribute变量--所有点数据一次性传入
            gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
            // 5.连接a_Position变量与分配给它的缓冲区对象,开启attribute变量
            gl.enableVertexAttribArray(a_Position);
            return n; // 返回待绘制顶点的数量， 函数内部发生错误后返回-1
        }
        
            
    </script>
</body>
</html>