7、三角形旋转

三角形旋转

• 效果
• 代码

效果

旋转前

旋转后

代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var webgl;
        // 旋转前
        // let vsString = `
        // attribute vec3 a_position;
        // uniform float angle;
        // void main(){
        //     gl_Position=vec4(a_position,1.0);
        // }
        // `
        // 旋转后
        let vsString = `
        attribute vec3 a_position;
        uniform float angle;
        void main(){
            gl_Position=vec4(a_position.x*cos(angle)-a_position.y*sin(angle),a_position.x*sin(angle)+a_position.y*cos(angle),0,1.0);
        }
        `
        let fsString = `
        void main(){
            gl_FragColor=vec4(0.0,0.0,1.0,1.0);
        }
        `
        function init() {
            initWebgl();
            initShader();
            initBuffer();
            draw();
        }
        function initWebgl() {
            let webglDiv = document.getElementById("webgl_canvas");
            webgl = webglDiv.getContext("webgl");
            webgl.viewport(0, 0, webglDiv.clientWidth, webglDiv.clientHeight)
        }
        function initShader() {
            let shaderVs = webgl.createShader(webgl.VERTEX_SHADER);
            let shaderFs = webgl.createShader(webgl.FRAGMENT_SHADER);
            webgl.shaderSource(shaderVs, vsString)
            webgl.shaderSource(shaderFs, fsString)
            webgl.compileShader(shaderVs)
            webgl.compileShader(shaderFs)
            // 检查着色器编译是否成功
            if (!webgl.getShaderParameter(shaderVs, webgl.COMPILE_STATUS)) {
                console.error("Vertex shader compilation failed:", webgl.getShaderInfoLog(shaderVs));
                return;
            }
            if (!webgl.getShaderParameter(shaderFs, webgl.COMPILE_STATUS)) {
                console.error("Fragment shader compilation failed:", webgl.getShaderInfoLog(shaderFs));
                return;
            }
            let program = webgl.createProgram();
            webgl.attachShader(program, shaderVs)
            webgl.attachShader(program, shaderFs)
            webgl.linkProgram(program)
            webgl.useProgram(program)
            webgl.program = program
        }
        function initBuffer() {
            let arr = [
                0.1, 0.4, 0,
                0.1, 0.5, 0,
                0.2, 0.4, 0
            ]
            let float = new Float32Array(arr)
            let buffer = webgl.createBuffer();
            webgl.bindBuffer(webgl.ARRAY_BUFFER, buffer)
            webgl.bufferData(webgl.ARRAY_BUFFER, float, webgl.STATIC_DRAW)

            //以下为给shader赋值
            let aPosition = webgl.getAttribLocation(webgl.program, "a_position")
            webgl.vertexAttribPointer(aPosition, 3, webgl.FLOAT, false, 0, 0)
            webgl.enableVertexAttribArray(aPosition)

            let uAngle = webgl.getUniformLocation(webgl.program, "angle")
            let angle1 = 90 * Math.PI / 180;
            webgl.uniform1f(uAngle, angle1)
        }
        function draw() {
            webgl.clearColor(1.0, 0.0, 0.0, 1.0)
            webgl.clear(webgl.COLOR_BUFFER_BIT)
            webgl.drawArrays(webgl.TRIANGLES, 0, 3)
        }
    </script>
</head>

<body onload="init()">
    <canvas id="webgl_canvas" width="500" height="500"></canvas>
</body>

</html>