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 ></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>
