1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>WebGl 平移（矩阵变换）</title> 6 </head> 7 <body> 8 <h6>使用键盘方向键←、↑、→、↓平移三角形</h6> 9 <canvas id="myCanvas" width="500" height="300" style="border: 1px solid red"></canvas> 10 </body> 11 <script> 12 13 window.onload = function () { 14 15 //第1步 - 准备Canvas和获取WebGL的渲染上下文 16 var canvas = document.getElementById('myCanvas'), 17 gl = canvas.getContext('webgl'); 18 19 //第2步 - 定义几何并将其存储在缓冲区对象 20 var vertices = [ 21 -0.5,0.5,0.0, 22 0.0,0.5,0.0, 23 -0.25,0.25,0.0, 24 0.5,0.5,0.0, 25 0.25,0.25,0.0, 26 ], 27 indices =[0,1,2,1,3,4]; 28 29 var vertex_buffer = gl.createBuffer(); 30 gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer); 31 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); 32 33 var Index_Buffer = gl.createBuffer(); 34 gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, Index_Buffer); 35 gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW); 36 37 //第3步 - 创建和编译着色器程序 38 var vertCode = 39 'attribute vec3 coordinates;' + 40 'uniform mat4 translation;' + 41 'void main(void) {' + 42 ' gl_Position = translation*vec4(coordinates,1.0);' +//这里一定要注意 是translation在前 43 '}'; 44 45 var fragCode = 46 'void main(void) {' + 47 ' gl_FragColor = vec4(1, 0.5, 0.0, 1);' + 48 '}'; 49 50 var vertShader = gl.createShader(gl.VERTEX_SHADER); 51 var fragShader = gl.createShader(gl.FRAGMENT_SHADER); 52 gl.shaderSource(vertShader, vertCode); 53 gl.shaderSource(fragShader, fragCode); 54 gl.compileShader(vertShader); 55 gl.compileShader(fragShader); 56 var shaderProgram = gl.createProgram(); 57 gl.attachShader(shaderProgram, vertShader); 58 gl.attachShader(shaderProgram, fragShader); 59 gl.linkProgram(shaderProgram); 60 gl.useProgram(shaderProgram); 61 62 63 //第4步 - 关联着色器程序到缓冲区对象 64 var coord = gl.getAttribLocation(shaderProgram, 'coordinates'); 65 gl.vertexAttribPointer(coord, 3, gl.FLOAT, false, 0, 0); 66 gl.enableVertexAttribArray(coord); 67 68 var Tx =0.0,Ty = 0.0,Tz = 0.0; 69 //注意WebGL的矩阵式列主序的 70 var xformMatrix = new Float32Array([ 71 1.0, 0.0, 0.0, 0.0, 72 0.0, 1.0, 0.0, 0.0, 73 0.0, 0.0, 1.0, 0.0, 74 Tx, Ty, Tz, 1.0 75 ]); 76 //然后将矩阵传输给定点着色器 77 var translation = gl.getUniformLocation(shaderProgram,'translation'); 78 gl.uniformMatrix4fv(translation, false, xformMatrix); 79 80 81 //第5步 - 绘制所需的对象 82 gl.clearColor(0.5, 0.5, 0.5, 0.9); 83 gl.enable(gl.DEPTH_TEST); 84 gl.clear(gl.COLOR_BUFFER_BIT); 85 gl.viewport(0, 0, myCanvas.width, myCanvas.height); 86 gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0); 87 88 89 //监听事件 90 document.addEventListener("keyup",function (event) { 91 switch (event.keyCode){ 92 case 37: 93 Tx -= 0.05; 94 break; 95 case 38: 96 Ty += 0.05; 97 break; 98 case 39: 99 Tx += 0.05; 100 break; 101 case 40: 102 Ty -= 0.05; 103 break; 104 } 105 106 //重复以上部分操作 107 xformMatrix = new Float32Array([ 108 1.0, 0.0, 0.0, 0.0, 109 0.0, 1.0, 0.0, 0.0, 110 0.0, 0.0, 1.0, 0.0, 111 Tx, Ty, Tz, 1.0 112 ]); 113 gl.uniformMatrix4fv(translation, false, xformMatrix); 114 //重复 第5步 - 绘制所需的对象 115 gl.clearColor(0.5, 0.5, 0.5, 0.9); 116 gl.enable(gl.DEPTH_TEST); 117 gl.clear(gl.COLOR_BUFFER_BIT); 118 gl.viewport(0, 0, myCanvas.width, myCanvas.height); 119 gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0); 120 121 }); 122 123 124 } 125 126 </script> 127 </html>