示例8：三角形矩阵

作者: WebGiser | 来源:发表于2021-07-01 09:00 被阅读0次

变换：向量和矩阵
示例8：三角形矩阵
WebGL 3D(三角形的矩阵变换[平移、旋转、缩放])
相关性计算与可视化画
867. 转置矩阵
代码小功能实现
数据结构之图的存储结构邻接矩阵法
WebGL 3D(绘制三角形)
半正定矩阵理解
c语言打印蛇形矩阵

效果

image.png

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
        
        </style>
    </head>
    <body>
        <canvas id="canvas" width="600" height="600" style="border: 1px solid #ff0000;"></canvas>
        
        <script>
            let canvas = document.getElementById('canvas');
            let gl = canvas.getContext('webgl');
            
            // 顶点着色器
            let VSHADER_SOURCE = 
            "attribute vec4 a_Position;\n"+
            "uniform mat4 u_xformMatrix;\n"+
            "void main(){\n"+
                "gl_Position = u_xformMatrix * a_Position;\n"+
            "}\n";
            
            // 片元着色器
            let FSHADER_SOURCE = 
            "void main(){\n"+
                "gl_FragColor = vec4(1.0, 0.0 ,0.0, 1.0);\n"+
            "}\n";
            
            
            // 初始化着色器
            function initShaders(gl, vSource, fSource){
                let vShader = gl.createShader(gl.VERTEX_SHADER);
                gl.shaderSource(vShader, vSource);
                gl.compileShader(vShader);
                
                let fShader = gl.createShader(gl.FRAGMENT_SHADER);
                gl.shaderSource(fShader, fSource);
                gl.compileShader(fShader);
                
                let program = gl.createProgram();
                gl.attachShader(program, vShader);
                gl.attachShader(program, fShader);
                gl.linkProgram(program);
                gl.useProgram(program);
                gl.program = program;
            }
            
            // 设置定点位置-缓冲区对象
            function initVertexBuffers(gl){
                let vertices = new Float32Array([
                    0.0, 0.5, -0.5, -0.5, 0.5, -0.5
                ]);
                let n = 3;
                // 创建缓冲区对象
                let vertexBuffer = gl.createBuffer();
                // 将缓冲区对象绑定到目标
                gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
                // 向缓冲区对象中写入数据
                gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
                // 将缓冲区对象分配给a_Position
                let a_Position = gl.getAttribLocation(gl.program, 'a_Position');
                gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
                // 连接a_Position变量与分配给它的缓冲区对象
                gl.enableVertexAttribArray(a_Position);
                return n;
            }
            
            initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE);
            
            initVertexBuffers(gl);
            
            // 创建旋转矩阵
            let angle = 90;
            let radian = Math.PI * angle / 180;
            let cosB = Math.cos(radian);
            let sinB = Math.sin(radian);
            let xformMatrix = new Float32Array([
                cosB, sinB, 0.0, 0.0,
                -sinB, cosB, 0.0, 0.0,
                0.0, 0.0, 1.0, 0.0,
                0.0, 0.0, 0.0, 1.0
            ])
            let u_xformMatrix = gl.getUniformLocation(gl.program, 'u_xformMatrix');
            gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix);
            
            gl.clearColor(0.0, 0.0, 0.0, 1.0);
            gl.clear(gl.COLOR_BUFFER_BIT);
            
            gl.drawArrays(gl.TRIANGLES, 0, 3);
        </script>
    </body>
</html>