WebGl 平移（矩阵变换）

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>WebGl 平移（矩阵变换）</title>
 </head>
 <body>
 <h6>使用键盘方向键←、↑、→、↓平移三角形</h6>
 <canvas id="myCanvas" width="500" height="300" style="border: 1px solid red"></canvas>
 </body>
 <script>

     window.onload = function () {

         //第1步 - 准备Canvas和获取WebGL的渲染上下文
         var canvas = document.getElementById('myCanvas'),
             gl = canvas.getContext('webgl');

         //第2步 - 定义几何并将其存储在缓冲区对象
         var vertices = [
                 -0.5,0.5,0.0,
                 0.0,0.5,0.0,
                 -0.25,0.25,0.0,
                 0.5,0.5,0.0,
                 0.25,0.25,0.0,
             ],
             indices =[0,1,2,1,3,4];

         var vertex_buffer = gl.createBuffer();
         gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
         gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

         var Index_Buffer = gl.createBuffer();
         gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, Index_Buffer);
         gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);

         //第3步 - 创建和编译着色器程序
         var vertCode =
             'attribute vec3 coordinates;' +
             'uniform mat4 translation;' +
             'void main(void) {' +
             ' gl_Position = translation*vec4(coordinates,1.0);' +//这里一定要注意  是translation在前
             '}';

         var fragCode =
             'void main(void) {' +
             ' gl_FragColor = vec4(1, 0.5, 0.0, 1);' +
             '}';

         var vertShader = gl.createShader(gl.VERTEX_SHADER);
         var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
         gl.shaderSource(vertShader, vertCode);
         gl.shaderSource(fragShader, fragCode);
         gl.compileShader(vertShader);
         gl.compileShader(fragShader);
         var shaderProgram = gl.createProgram();
         gl.attachShader(shaderProgram, vertShader);
         gl.attachShader(shaderProgram, fragShader);
         gl.linkProgram(shaderProgram);
         gl.useProgram(shaderProgram);

         //第4步 - 关联着色器程序到缓冲区对象
         var coord = gl.getAttribLocation(shaderProgram, 'coordinates');
         gl.vertexAttribPointer(coord, 3, gl.FLOAT, false, 0, 0);
         gl.enableVertexAttribArray(coord);

         var Tx =0.0,Ty = 0.0,Tz = 0.0;
         //注意WebGL的矩阵式列主序的
         var xformMatrix = 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,
             Tx, Ty, Tz, 1.0
         ]);
         //然后将矩阵传输给定点着色器
         var translation = gl.getUniformLocation(shaderProgram,'translation');
         gl.uniformMatrix4fv(translation, false, xformMatrix);

         //第5步 - 绘制所需的对象
         gl.clearColor(0.5, 0.5, 0.5, 0.9);
         gl.enable(gl.DEPTH_TEST);
         gl.clear(gl.COLOR_BUFFER_BIT);
         gl.viewport(0, 0, myCanvas.width, myCanvas.height);
         gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);

         //监听事件
         document.addEventListener("keyup",function (event) {
             switch (event.keyCode){
                 case 37:
                     Tx -= 0.05;
                     break;
                 case 38:
                     Ty += 0.05;
                     break;
                 case 39:
                     Tx += 0.05;
                     break;
                 case 40:
                     Ty -= 0.05;
                     break;
             }

             //重复以上部分操作
             xformMatrix = 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,
                 Tx, Ty, Tz, 1.0
             ]);
             gl.uniformMatrix4fv(translation, false, xformMatrix);
             //重复 第5步 - 绘制所需的对象
             gl.clearColor(0.5, 0.5, 0.5, 0.9);
             gl.enable(gl.DEPTH_TEST);
             gl.clear(gl.COLOR_BUFFER_BIT);
             gl.viewport(0, 0, myCanvas.width, myCanvas.height);
             gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);

         });

     }

 </script>
 </html>