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