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

WebGL只能绘制点、线、三角形,万物都可以用三角形绘制出来
矩形划分成两部分的三角形绘制。(v0,v1,v2)和(v2,v1,v3)，注意四二个三角形顺序
绘制矩形与绘制三角形的区别：

let vertices = new Float32Array([ -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, -0.5, ]); 四个坐标
let n = 4; 顶点变为4个
gl.drawArrays(gl.TRIANGLE_STRIP, 0, nLength); 第一个参数变为三角带图形
截图.png
截图.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>07绘制矩形</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;
        void main() {
            gl_Position = a_Position; // 设置坐标
        }
        `;
        // 片元着色器程序
        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);
            // 绘制三角形
            // ======
            // gl.TRIANGLE_STRIP三角带 (v0,v1,v2)/(v2,v1,v3)
            // ======
            gl.drawArrays(gl.TRIANGLE_STRIP, 0, nLength); // nLength为n个点
        }
        function initVertexBuffers(gl) {
            // 类型化数组, 用于储存顶点的坐标或颜色。比Array性能更高，不支持push(),和pop()
            let vertices = new Float32Array([
                -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, -0.5,
            ]); // 坐标 x1,y1,x2,y2,x3,y3
            let n = 4; // 点的个数
            // 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变量的存储位置
            let a_Position = gl.getAttribLocation(gl.program, 'a_Position');
            if (a_Position < 0) {
                console.log('无法获取 a_Position')
                return -1;
            }
            // 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>