• webGL编程指南 第三章 旋转三角形RotatedTriangle.js

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

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

    git代码地址

    接着  上一节 接着做平移的转化。本案例是三角形的旋转

    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 vec2 a_Position;
    21.             uniform float u_CosB,u_SinB; 
    22.             void main(){
    23.                 gl_Position.x = a_Position.x * u_CosB - a_Position.y*u_SinB;
    24.                 gl_Position.y = a_Position.x * u_SinB + a_Position.y*u_CosB;
    25.                 gl_Position.z = 0.0;
    26.                 gl_Position.w = 1.0;
    27.             }
    28.         `
    29.         let fragmentShaderSouce = `
    30.             precision mediump float;
    31.             void main(){
    32.                 gl_FragColor = vec4(1.0,0.0,0.0,1.0);
    33.             }
    34.         `
    35.  
    36.         // 创建顶点着色器
    37.         let vertexShader = gl.createShader(gl.VERTEX_SHADER);
    38.         // 设置着色器源代码
    39.         gl.shaderSource(vertexShader, vertexShaderSource)
    40.         // 编译着色器
    41.         gl.compileShader(vertexShader)
    42.  
    43.         // 创建着片元色器
    44.         let fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    45.         // 设置着色器源代码
    46.         gl.shaderSource(fragmentShader, fragmentShaderSouce)
    47.         // 编译着色器
    48.         gl.compileShader(fragmentShader)
    49.         //创建渲染程序
    50.         let program = gl.createProgram();
    51.         // 把顶点着色器添加到渲染程序
    52.         gl.attachShader(program, vertexShader);
    53.         gl.attachShader(program, fragmentShader);
    54.         gl.linkProgram(program);
    55.         //使用当前渲染程序
    56.         gl.useProgram(program)
    57.  
    58.  
    59.         //检测着色器链接是否正确
    60.         if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
    61.             throw gl.getProgramInfoLog(program);
    62.         } 
    63.         //x抽的旋转角度
    64.         let rotateX = 0.0;
    65.         //y轴的旋转角度
    66.         let rotateY = 0;
    67.         //三角的三个顶点的坐标位置
    68.         let positonArray = new Float32Array([0.0, 0.5, -0.5, -0.5, 0.5, -0.5]);
    69.         // 获取顶点着色器的变量
    70.         let a_Position = gl.getAttribLocation(program, 'a_Position');
    71.         // 获取旋转角度的变量
    72.         let u_CosB = gl.getUniformLocation(program, 'u_CosB')
    73.         let u_SinB = gl.getUniformLocation(program, 'u_SinB')
    74.         
    75.         // 创建缓冲区
    76.         let buffer = gl.createBuffer();
    77.         //将缓冲区对象绑定到目标
    78.         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    79.         //向缓冲区写入数据
    80.         gl.bufferData(gl.ARRAY_BUFFER, positonArray, gl.STATIC_DRAW)
    81.         //将缓冲区对象绑定到目标
    82.         gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0)
    83.         // 启用变量a_Position
    84.         gl.enableVertexAttribArray(a_Position);
    85.  
    86.   
    87.  
    88.         //绘制
    89.         gl.clearColor(0.0, 0.0, 0.0, 1.0);
    90.      
    91.  
    92.  
    93.         const render = function () {
    94.             //赋值x角度
    95.             gl.uniform1f(u_CosB, Math.cos(Math.PI*rotateX/180.0));
    96.             //赋值y角度
    97.             gl.uniform1f(u_SinB, Math.sin(Math.PI*rotateX/180.0));
    98.             // 清空画布
    99.             gl.clear(gl.COLOR_BUFFER_BIT);
    100.             // 绘制三角形
    101.             gl.drawArrays(gl.TRIANGLES, 0, 3)
    102.  
    103.             setNumer()
    104.         }
    105.         render()
    106.  
    107.         document.onkeydown = function (e) {    //对整个页面监听  
    108.             var keyNum = window.event ? e.keyCode : e.which;       //获取被按下的键值  
    109.             //判断如果用户按下了回车键（keycody=13）  
    110.             if (keyNum == 65) {
    111.                 console.log('A');
    112.                 rotateX -= 1; 
    113.                 rotateY=0
    114.                 render()
    115.             }
    116.  
    117.             //判断如果用户按下了空格键(keycode=32)，  
    118.             if (keyNum == 68) {
    119.                 console.log('D');
    120.                 rotateX +=1; 
    121.                 rotateY=0
    122.                 render()
    123.             }
    124.             //判断如果用户按下了空格键(keycode=32)，  
    125.             if (keyNum == 83) {
    126.                 console.log('S');
    127.                 rotateY -= 1; 
    128.                 rotateX=0
    129.                 render()
    130.             }
    131.  
    132.  
    133.             //判断如果用户按下了空格键(keycode=32)，  
    134.             if (keyNum == 87) {
    135.                 console.log('W');
    136.                 rotateY += 1; 
    137.                 rotateX=0
    138.                 render();
    139.  
    140.             }
    141.  
    142.         }
    143.         function setNumer (){
    144.            let text = document.getElementById('num');
    145.            text.innerText = `rotateX:${ rotateX}`
    146.         } 
    147.  
    148.  
    149.     script>
    150. body>
    151.  
    152. html>

  • 相关阅读:
    数据中心不能“偏科”，AIGC时代算力、存力需协调发展
    【LeetCode】54. 螺旋矩阵
    C++ 对象和类
    [nlp] pointwise,pairwise,listwise
    pytest 结合logging输出日志保存至文件
    共话医疗数据安全，美创科技@2023南湖HIT论坛，11月11日见
    【MyBatis】代码生成
    【C++】—— 装饰器模式
    基于Web的美食分享平台的设计与实现——HTML+CSS+JavaScript水果介绍网页设计(橙子之家)
    华为设备ACL配置命令
  • 原文地址：https://blog.csdn.net/huhudeni/article/details/133915670