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 scale;' + 41 'void main(void) {' + 42 ' gl_Position = scale*vec4(coordinates,1.0);' + 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 Sx = 1.5, Sy = 1.5, Sz = 1.5; 69 var xformMatrix = new Float32Array([ 70 Sx, 0.0, 0.0, 0.0, 71 0.0, Sy, 0.0, 0.0, 72 0.0, 0.0, Sz, 0.0, 73 0.0, 0.0, 0.0, 1.0 74 ]); 75 76 77 //然后将矩阵传输给定点着色器 78 var scale = gl.getUniformLocation(shaderProgram,'scale'); 79 gl.uniformMatrix4fv(scale, false, xformMatrix); 80 81 82 //第5步 - 绘制所需的对象 83 gl.clearColor(0.5, 0.5, 0.5, 0.9); 84 gl.enable(gl.DEPTH_TEST); 85 gl.clear(gl.COLOR_BUFFER_BIT); 86 gl.viewport(0, 0, myCanvas.width, myCanvas.height); 87 gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0); 88 89 90 //监听事件 91 document.addEventListener("keyup",function (event) { 92 switch (event.keyCode){ 93 case 38: 94 Sx += 0.05; 95 Sy += 0.05; 96 Sz += 0.05; 97 break; 98 case 40: 99 Sx -= 0.05; 100 Sy -= 0.05; 101 Sz -= 0.05; 102 break; 103 } 104 105 //重复以上部分操作 106 xformMatrix = new Float32Array([ 107 Sx, 0.0, 0.0, 0.0, 108 0.0, Sy, 0.0, 0.0, 109 0.0, 0.0, Sz, 0.0, 110 0.0, 0.0, 0.0, 1.0 111 ]); 112 gl.uniformMatrix4fv(scale, false, xformMatrix); 113 //重复 第5步 - 绘制所需的对象 114 gl.clearColor(0.5, 0.5, 0.5, 0.9); 115 gl.enable(gl.DEPTH_TEST); 116 gl.clear(gl.COLOR_BUFFER_BIT); 117 gl.viewport(0, 0, myCanvas.width, myCanvas.height); 118 gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0); 119 120 }); 121 122 123 } 124 125 </script> 126 </html>