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

构造模型矩阵：

image.jpeg

先平移后旋转的顺序与构造模型矩阵的顺序(旋转矩阵X平移矩阵)是相反的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>15绘制三角形-矩阵变换库-平移X旋转4x4</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;
        uniform mat4 u_ModeMatrix;
        void main() {
            gl_Position = u_ModeMatrix * 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;
            }

            // 创建Matrix4对象以进行模型变换
            // ============
            let modelMatrix = new Matrix4();
            // 旋转角度
            let ANGLE = 60.0;
            // 平移距离
            let Tx = 0.5;
            // 设置模型矩阵为旋转矩阵
            modelMatrix.setRotate(ANGLE, 0, 0, 1);
            // 设置模型矩阵为平移矩阵
            modelMatrix.translate( Tx, 0.0, 0.0);
            // 将旋转矩阵传输给顶点着色器
            let u_ModeMatrix = gl.getUniformLocation(gl.program, 'u_ModeMatrix');
            gl.uniformMatrix4fv(u_ModeMatrix, false, modelMatrix.elements);
            //=============

            // 设置<canvas> 背景色
            gl.clearColor(0.0, 0.0, 0.0, 1.0);

            // 清除<canvas>
            gl.clear(gl.COLOR_BUFFER_BIT);

            // 绘制三角形
            gl.drawArrays(gl.TRIANGLES, 0, nLength); // nLength为n个点

        }

        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变量的存储位置
            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>