• webGL编程指南 第三章 矩阵旋转三角形rotatedTriangle_Matrix

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

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

    git代码地址 ：git

    接着 上一节中 接着做平移的转化。在本次的案例案例中主要是xy的坐标变量相加，同时传递个给相关变量

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.     <h3>可以按下按键ADSWh3>
    13.     <p>旋转的角度：<span id="num">span>p>
    14.     <canvas id='canvas'>canvas>
    15.     <script>
    16.         let canvas = document.getElementById('canvas');
    17.         let gl = canvas.getContext('webgl');
    18.  
    19.         let vertexShaderSource = `
    20.             attribute vec4 a_Position;
    21.             uniform mat4 u_mat4; 
    22.             void main(){
    23.                 gl_Position=u_mat4*a_Position;
    24.             }
    25.         `
    26.         let fragmentShaderSouce = `
    27.             precision mediump float;
    28.             void main(){
    29.                 gl_FragColor = vec4(1.0,0.0,0.0,1.0);
    30.             }
    31.         `
    32.         // 创建顶点着色器
    33.         let vertexShader = gl.createShader(gl.VERTEX_SHADER);
    34.         // 设置着色器源代码
    35.         gl.shaderSource(vertexShader, vertexShaderSource);
    36.         // 编译着色器
    37.         gl.compileShader(vertexShader);
    38.  
    39.         // 创建片元着色器
    40.         let fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    41.         // 设置着色器源代码
    42.         gl.shaderSource(fragmentShader, fragmentShaderSouce);
    43.         // 编译着色器
    44.         gl.compileShader(fragmentShader)
    45.         //创建渲染程序
    46.         let program = gl.createProgram();
    47.         // 附着顶点着色器和片元着色器到渲染程序
    48.         gl.attachShader(program, vertexShader);
    49.         gl.attachShader(program, fragmentShader);
    50.         gl.linkProgram(program);
    51.         //使用当前渲染程序
    52.         gl.useProgram(program)
    53.  
    54.  
    55.         // 检测着色器链接是否正确
    56.         if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
    57.             throw gl.getProgramInfoLog(program);
    58.         } 
    59.         // 旋转角度
    60.         let rotateX = 0.0;
    61.         let rotateY = 0;
    62.         // 三角形的顶点
    63.         let positonArray = new Float32Array([0.0, 0.5, -0.5, -0.5, 0.5, -0.5])
    64.         // 获取顶点着色器中变量a_Position的存储位置
    65.         let a_Position = gl.getAttribLocation(program, 'a_Position');
    66.         // 激活顶点着色器中变量u_mat4的存储位置
    67.         let u_mat4 = gl.getUniformLocation(program, 'u_mat4');
    68.  
    69.  
    70.         
    71.         // 创建buffer对象
    72.         let buffer = gl.createBuffer();
    73.         // 绑定buffer对象
    74.         gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
    75.         // 向buffer中写入数据
    76.         gl.bufferData(gl.ARRAY_BUFFER, positonArray, gl.STATIC_DRAW)
    77.         // 设置attribute变量a_Position的值
    78.         gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0)
    79.         // 启用attribute变量a_Position
    80.         gl.enableVertexAttribArray(a_Position);
    81.  
    82.   
    83.  
    84.         //绘制
    85.         gl.clearColor(0.0, 0.0, 0.0, 1.0);
    86.      
    87.  
    88.  
    89.         const render = function () {
    90.             // 计算角度
    91.             let cos = Math.cos(Math.PI*rotateX/180.0);
    92.             let sin = Math.sin(Math.PI*rotateX/180.0);
    93.             // 计算旋转矩阵
    94.             let mate4=new Float32Array([
    95.             cos,sin,0.0,0.0,
    96.             -sin,cos,0.0,0.0,
    97.             0.0,0.0,1.0,0.0,
    98.             0.0,0.0,0.0,1.0,
    99.             ])
    100.             // 设置旋转矩阵
    101.             gl.uniformMatrix4fv(u_mat4, false, mate4)
    102.  
    103.             // 清除画布
    104.             gl.clear(gl.COLOR_BUFFER_BIT);
    105.             // 绘制图形
    106.             gl.drawArrays(gl.TRIANGLES, 0, 3)
    107.             // 更新角度
    108.             setNumer()
    109.         }
    110.         render()
    111.  
    112.         document.onkeydown = function (e) {    //对整个页面监听  
    113.             var keyNum = window.event ? e.keyCode : e.which;       //获取被按下的键值  
    114.             //判断如果用户按下了回车键（keycody=13）  
    115.             if (keyNum == 65) {
    116.                 console.log('A');
    117.                 rotateX -= 1; 
    118.                 rotateY=0
    119.                 render()
    120.             }
    121.  
    122.             //判断如果用户按下了空格键(keycode=32)，  
    123.             if (keyNum == 68) {
    124.                 console.log('D');
    125.                 rotateX +=1; 
    126.                 rotateY=0
    127.                 render()
    128.             }
    129.             //判断如果用户按下了空格键(keycode=32)，  
    130.             if (keyNum == 83) {
    131.                 console.log('S');
    132.                 rotateY -= 1; 
    133.                 rotateX=0
    134.                 render()
    135.             }
    136.  
    137.  
    138.             //判断如果用户按下了空格键(keycode=32)，  
    139.             if (keyNum == 87) {
    140.                 console.log('W');
    141.                 rotateY += 1; 
    142.                 rotateX=0
    143.                 render();
    144.  
    145.             }
    146.  
    147.         }
    148.         function setNumer (){
    149.            let text = document.getElementById('num');
    150.            text.innerText = `rotateX:${ rotateX}`
    151.         } 
    152.  
    153.  
    154.  
    155.     script>
    156. body>
    157.  
    158. html>

  • 相关阅读:
    复杂环境下人形机器人自动导航项目复盘
    Java基础-IO流
    使用kotlin用回溯法解决电话号码的字母组合问题
    jdk环境变量配置、maven环境变量配置
    机器视觉工程师前景如何,计算机视觉工程师前景
    OpenCV自学笔记十八：模板匹配
    齐岳离子液体[C1MIm]SbF6/cas:885624-41-9/1,3-二甲基咪唑六氟锑酸盐
    ElementUI之增删改及表单验证
    淘宝客APP源码/社交电商自营商城源码/前端基于Uniapp开发
    【软件设计师21天-考点整理】2)计算机系统构成及硬件基础知识
  • 原文地址：https://blog.csdn.net/huhudeni/article/details/133934652