• webGL编程指南 第三章 平移三角形 TranslatedTriangle.js

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

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

    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>可以按下按键ADSW移动图形h3>
    13.     <canvas id='canvas'>canvas>
    14.     <script>
    15.         let canvas = document.getElementById('canvas');
    16.         let gl = canvas.getContext('webgl');
    17.  
    18.         let vertexShaderSource = `
    19.             attribute vec2 a_Position;
    20.             uniform vec2 u_Translation;
    21.             void main(){
    22.                 gl_Position = vec4(u_Translation+a_Position,0.0,1.0) ; 
    23.             }
    24.         `
    25.         let fragmentShaderSouce = `
    26.             precision mediump float;
    27.             void main(){
    28.                 gl_FragColor = vec4(1.0,0.0,0.0,1.0);
    29.             }
    30.         `
    31.         // 创建着色器
    32.         let vertexShader = gl.createShader(gl.VERTEX_SHADER);
    33.         // 设置着色器源代码
    34.         gl.shaderSource(vertexShader, vertexShaderSource);
    35.         // 编译着色器
    36.         gl.compileShader(vertexShader)
    37.  
    38.         // 创建片段着色器
    39.         let fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    40.         // 设置片段着色器源代码
    41.         gl.shaderSource(fragmentShader, fragmentShaderSouce);
    42.         //  编译片段着色器
    43.         gl.compileShader(fragmentShader)
    44.         // 创建渲染程序
    45.         let program = gl.createProgram();
    46.         // 附着顶点着色器和片段着色器到渲染程序
    47.         gl.attachShader(program, vertexShader);
    48.         gl.attachShader(program, fragmentShader);
    49.         // 链接渲染程序
    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.         // x移动的增加量
    60.         let translationX = 0.0;
    61.         // y移动的增加量
    62.         let translationY = 0.0;
    63.         // 绘制三角形的顶点
    64.         let positonArray = new Float32Array([1.0, 0.0, -1.0, 0.0, 0.0, -1.0])
    65.         // 获取顶点着色器中的a_Position变量
    66.         let a_Position = gl.getAttribLocation(program, 'a_Position');
    67.         //获取顶点着色器中的u_Translation变量
    68.         let u_Translation = gl.getUniformLocation(program, 'u_Translation');
    69.         //创建缓冲区对象
    70.         let buffer = gl.createBuffer();
    71.         //将缓冲区对象绑定到目标
    72.         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    73.         //  向缓冲区对象写入数据
    74.         gl.bufferData(gl.ARRAY_BUFFER, positonArray, gl.STATIC_DRAW);
    75.         //  将缓冲区对象分配给a_Position变量
    76.         gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
    77.         //  启用顶点位置的顶点着色器变量
    78.         gl.enableVertexAttribArray(a_Position);
    79.  
    80.   
    81.  
    82.         //绘制
    83.         gl.clearColor(0.0, 0.0, 0.0, 1.0);
    84.      
    85.         const render = function () {
    86.             // 设置xy的移动增加的量
    87.             gl.uniform2f(u_Translation, translationX, translationY)
    88.             // 清除颜色缓冲区
    89.             gl.clear(gl.COLOR_BUFFER_BIT);
    90.             // 绘制三角形
    91.             gl.drawArrays(gl.TRIANGLES, 0, 3)
    92.         }
    93.         render()
    94.  
    95.         document.onkeydown = function (e) {    //对整个页面监听  
    96.             var keyNum = window.event ? e.keyCode : e.which;       //获取被按下的键值  
    97.             //判断如果用户按下了回车键（keycody=13）  
    98.             if (keyNum == 65) {
    99.                 console.log('A');
    100.                 translationX -= 0.1; 
    101.                 render()
    102.             }
    103.  
    104.             //判断如果用户按下了空格键(keycode=32)，  
    105.             if (keyNum == 68) {
    106.                 console.log('D');
    107.                 translationX += 0.1; 
    108.                 render()
    109.             }
    110.             //判断如果用户按下了空格键(keycode=32)，  
    111.             if (keyNum == 83) {
    112.                 console.log('S');
    113.                 translationY -= 0.1; 
    114.                 render()
    115.             }
    116.  
    117.  
    118.             //判断如果用户按下了空格键(keycode=32)，  
    119.             if (keyNum == 87) {
    120.                 console.log('W');
    121.                 translationY += 0.1; 
    122.                 render();
    123.  
    124.             }
    125.  
    126.         }
    127.  
    128.  
    129.     script>
    130. body>
    131.  
    132. html>

  • 相关阅读:
    金仓KFS数据双向同步场景部署
    【C++】C++基础知识（五）---数组
    nginx配置ssl证书
    git dep preparation failed 报错
    Dubbo3.0新特性
    太焦虑了，那些 30多的测试员都是怎么走过来的？
    十个最为戳心测试/开程序员笑话，念茫茫人海，该如何寻觅？
    我是这样保持精力充沛的
    【TCPDF】使用TCPDF导出PDF文件
    leetcode 698. 划分为k个相等的子集-状态压缩+记忆搜索的一步步实现
  • 原文地址：https://blog.csdn.net/huhudeni/article/details/133914872