webGL编程指南第四章旋转+平移.TanslatedRotatdTriangle

原创已于 2026-03-02 14:17:47 修改 · 345 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#1024程序员节 #webgl #canvsa #javascript #矩阵

于 2023-10-24 15:38:13 首次发布

webGl 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了如何在Wegl编程指南中，通过WebGL实现先旋转后位移的图形变换，详细展示了矩阵的使用和关键代码片段，包括顶点着色器和矩阵设置过程。

我会持续更新关于wegl的编程指南中的代码。

当前的代码不会使用书中的缩写，每一步都是会展开写。希望能给后来学习的一些帮助

git代码地址：git

本篇文章将把旋转和平位移结合起来，因为矩阵的不存在交换法则

文章中设计的矩阵地址在这里

我将先学习先旋转再位移

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../tool/cuon-matrix.js"></script>
</head>

<body>
    <h1>先旋转再位移</h1>
    <h3>可以按下按键ADSW</h3>
    <P id="rotate"></P>
    <P id="translate"></P>
    <canvas id='canvas'></canvas>
    <script>
        let canvas = document.getElementById('canvas');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        let gl = canvas.getContext('webgl');

        let vertexShaderSource = `
            attribute vec4 a_Position;
            uniform mat4 u_mat4; 
            void main(){
                gl_Position=u_mat4*a_Position;
            }
        `
        let fragmentShaderSouce = `
            precision mediump float;
            void main(){
                gl_FragColor = vec4(1.0,0.0,0.0,1.0);
            }
        `
        // 创建顶点着色器
        let vertexShader = gl.createShader(gl.VERTEX_SHADER);
        // 绑定顶点着色器
        gl.shaderSource(vertexShader, vertexShaderSource);
        // 编译顶点着色器
        gl.compileShader(vertexShader);

        // 创建片元着色器
        let fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
        // 绑定片元着色器
        gl.shaderSource(fragmentShader, fragmentShaderSouce)
        // 编译片元着色器
        gl.compileShader(fragmentShader)
        //创建渲染程序
        let program = gl.createProgram();
        // 绑定渲染程序
        gl.attachShader(program, vertexShader);
        gl.attachShader(program, fragmentShader);
        gl.linkProgram(program);
        //使用当前渲染程序
        gl.useProgram(program)


        //检测顶点数据是否正确
        if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
            throw gl.getProgramInfoLog(program);
        } 
        //创建矩阵
        let mate4 = new Matrix4()
        // 设置旋转角度
        let rotateX = 0.0;
        // 设置位移的长度
        let translateY = 0.0;
        //三角形的顶点数据
        let positonArray = new Float32Array([0.0, 0.5, -0.5, -0.5, 0.5, -0.5])
        // 获取变量a_Position
        let a_Position = gl.getAttribLocation(program, 'a_Position');
        //获取变量u_mat4
        let u_mat4 = gl.getUniformLocation(program, 'u_mat4');

        //创建缓冲区
        let buffer = gl.createBuffer();
        //绑定缓冲区
        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
        //缓冲区里面传递数值
        gl.bufferData(gl.ARRAY_BUFFER, positonArray, gl.STATIC_DRAW);
        //给a_Position传递数值
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
        //启用变量
        gl.enableVertexAttribArray(a_Position);

        //绘制
        gl.clearColor(0.0, 0.0, 0.0, 1.0);
     
        //绘制三角形
        const render = function () {
            //设置三角形的角度
            mate4.setRotate(rotateX,0,0,1);
            //设置位移的差量
            mate4.translate(0,translateY,0);
            // 设置矩阵
            gl.uniformMatrix4fv(u_mat4, false, mate4.elements) 
            gl.clear(gl.COLOR_BUFFER_BIT);
            gl.drawArrays(gl.TRIANGLES, 0, 3)

            setNum()
        }
        render()

        document.onkeydown = function (e) {    //对整个页面监听  
            var keyNum = window.event ? e.keyCode : e.which;       //获取被按下的键值  
            //判断如果用户按下了回车键（keycody=13）  
            if (keyNum == 65) {
                console.log('A');
                rotateX -= 1;  
                render()
            }

            //判断如果用户按下了空格键(keycode=32)，  
            if (keyNum == 68) {
                console.log('D');
                rotateX +=1;  
                render()
            }
            //判断如果用户按下了空格键(keycode=32)，  
            if (keyNum == 83) {
                console.log('S'); 
                translateY-=0.1
                render()
            }


            //判断如果用户按下了空格键(keycode=32)，  
            if (keyNum == 87) {
                console.log('W'); 
                translateY+=0.1
                render();

            }
        }
        function setNum(){
            let rotate = document.getElementById("rotate");
            let translate = document.getElementById("translate");

            rotate.innerText =  `旋转的角度：${rotateX}`
            translate.innerText = `平移的距离：${translateY}`
 
        }


    </script>
</body>

</html>