webGL编程指南 第三章 矩阵平移三角形.translatedTriangle_Matrix

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

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

git代码地址 :git

接着 上一节 中 我们使用矩阵进行旋转,这次我们使用矩阵实现位移

html 复制代码
<!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>
</head>

<body>
    <h3>可以按下按键ADSW</h3>
    <p><span id="num"></span></p>
    <canvas id='canvas'></canvas>
    <script>
        let canvas = document.getElementById('canvas');
        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);
        }
        // x的坐标移动变量
        let translationX = 0.0;
        // y的坐标移动变量
        let translationY = 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');



        // 创建buffer
        let buffer = gl.createBuffer();
        // 绑定buffer
        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
        // 向buffer中写入数据
        gl.bufferData(gl.ARRAY_BUFFER, positonArray, gl.STATIC_DRAW);
        // 向a_Position中传递变量
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
        // 开启a_Position
        gl.enableVertexAttribArray(a_Position);



        //绘制
        gl.clearColor(0.0, 0.0, 0.0, 1.0);



        const render = function () {
            // 设置位移的变量(主列)
            let mate4 = new Float32Array([
                1.0, 0.0, 0.0, 0.0,
                0.0, 1.0, 0.0, 0.0,
                0.0, 0.0, 1.0, 0.0,
                translationX, translationY, 0.0, 1.0,
            ])
            // 传递矩阵
            gl.uniformMatrix4fv(u_mat4, false, mate4)
            // 清空画布
            gl.clear(gl.COLOR_BUFFER_BIT);
            // 绘制图形
            gl.drawArrays(gl.TRIANGLES, 0, 3);

            setNumer()
        }
        render()

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

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


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

            }

        }
        function setNumer (){
           let text = document.getElementById('num');
           text.innerText = `translationX:${ translationX} translationY:${translationY}`
        }


    </script>
</body>

</html>
相关推荐
YuTaoShao2 小时前
【LeetCode 热题 100】73. 矩阵置零——(解法一)空间复杂度 O(M + N)
算法·leetcode·矩阵
Dark__Monarch7 小时前
二元一次方程
线性代数
Kaltistss7 小时前
240.搜索二维矩阵Ⅱ
线性代数·算法·矩阵
说私域11 小时前
视频号账号矩阵运营中定制开发开源 AI 智能名片 S2B2C 商城小程序的赋能研究
人工智能·矩阵·开源
康康的幸福生活1 天前
webgl2 方法解析: bufferData()
webgl
张晓~183399481211 天前
数字人源码部署流程分享--- PC+小程序融合方案
javascript·小程序·矩阵·aigc·文心一言·html5
xhload3d1 天前
智慧航天运载体系全生命周期监测 | 图扑数字孪生
物联网·3d·智慧城市·html5·webgl·数字孪生·可视化·工业互联网·三维建模·工控·航空航天·火箭升空·智慧航空·智慧航天·火箭发射·火箭回收
魂断蓝桥6661 天前
使用three.js,实现微信3D小游戏系列教程,框架篇(一)
webgl·threejs·微信小游戏·3d建筑·three.js路径规划、三维a*算法、javascript三维导航,·three.js小游戏
峙峙峙2 天前
线性代数--AI数学基础复习
人工智能·线性代数
我爱C编程2 天前
基于拓扑结构检测的LDPC稀疏校验矩阵高阶环检测算法matlab仿真
算法·matlab·矩阵·ldpc·环检测