Skip to content

Commit 4e4041a

Browse files
hehaosenhehaosen
committed
+LookAtTriangles
1 parent 3aa6e96 commit 4e4041a

File tree

3 files changed

+150
-1
lines changed

3 files changed

+150
-1
lines changed

‎LookAtTriangles/LookAtTriangles.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang = "en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Look at triangle</title>
6+
</head>
7+
<body onload="main()">
8+
<canvas id="webgl" width="400" height="400">
9+
Please use the browert supporting "canvas"
10+
</canvas>
11+
<script src="../lib/webgl-utils.js"></script>
12+
<script src="../lib/webgl-debug.js"></script>
13+
<script src="../lib/cuon-utils.js"></script>
14+
<script src="../lib/cuon-matrix.js"></script>
15+
16+
<script src="LookAtTriangles.js"></script>
17+
</body>
18+
</html>

‎LookAtTriangles/LookAtTriangles.js

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
// LookAtTriangles.js
2+
// 顶点着色器
3+
var VSHADER_SOURCE =
4+
'attribute vec4 a_Position;\n' +
5+
'attribute vec4 a_Color;\n' +
6+
'uniform mat4 u_ViewMatrix;\n' +
7+
'varying vec4 v_Color;\n' +
8+
'void main() {\n' +
9+
' gl_Position = u_ViewMatrix * a_Position;\n' +
10+
' v_Color = a_Color;\n' +
11+
'}\n';
12+
13+
// 片源着色器
14+
var FSHADER_SOURCE =
15+
'precision mediump float;\n' +
16+
'varying vec4 v_Color;\n' +
17+
'void main() {\n' +
18+
' gl_FragColor = v_Color;\n' +
19+
'}\n';
20+
21+
function main() {
22+
// 获取<canvas>元素
23+
var canvas = document.getElementById('webgl');
24+
25+
// 获取webGL上下文
26+
var gl =getWebGLContext(canvas);
27+
28+
if(!gl) {
29+
console.log('Failed to get the rendering context for WebGL');
30+
return;
31+
}
32+
33+
// 初始化着色器
34+
if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
35+
console.log('Failed to initialize shaders');
36+
return;
37+
}
38+
39+
// 设置顶点位置
40+
var n = initVertexBuffers(gl);
41+
if (n < 0) {
42+
console.log('Failed to set the positions of the vertices');
43+
return;
44+
}
45+
46+
// 获取u_ViewMatrix变量的存储地址
47+
var u_ViewMatrix = gl.getUniformLocation(gl.program, 'u_ViewMatrix');
48+
49+
if (!u_ViewMatrix) {
50+
console.log('Failed to get the storage locations of u_ViewMatrix');
51+
return;
52+
}
53+
54+
// 设置视点、视线、和上方向
55+
var viewMatrix = new Matrix4();
56+
viewMatrix.setLookAt(0.20, 0.25, 0.25, 0, 0, 0, 0, 1, 0);
57+
58+
// 将视图矩形传给u_ViewMatrix变量
59+
gl.uniformMatrix4fv(u_ViewMatrix, false, viewMatrix.elements);
60+
61+
// 清空<canvas>的背景色
62+
gl.clearColor(0.0, 0.0, 0.0, 1.0);
63+
64+
gl.clear(gl.COLOR_BUFFER_BIT);
65+
66+
// 绘制三角形
67+
gl.drawArrays(gl.TRIANGLES, 0, n);
68+
69+
}
70+
71+
function initVertexBuffers(gl) {
72+
var verticesColors = new Float32Array([
73+
// 顶点坐标和颜色
74+
0.0, 0.5, -0.4, 0.4, 1.0, 0.4, // 绿色三角形在后面
75+
-0.5, -0.5, -0.4, 0.4, 1.0, 0.4,
76+
0.5, -0.5, -0.4, 1.0, 0.4, 0.4,
77+
78+
0.5, 0.4, -0.2, 1.0, 0.4, 0.4, // 黄色三角形在中间
79+
-0.5, 0.4, -0.2, 1.0, 1.0, 0.4,
80+
0.0, -0.6, -0.2, 1.0, 1.0, 0.4,
81+
82+
0.0, 0.5, 0.0, 0.4, 0.4, 1.0, // 蓝色三角形在最前面
83+
-0.5, -0.5, 0.0, 0.4, 0.4, 1.0,
84+
0.5, -0.5, 0.0, 1.0, 0.4, 0.4
85+
]);
86+
87+
var n = 9; //点的个数
88+
89+
// 创建缓冲区对象
90+
var vertexColorBuffer = gl.createBuffer();
91+
if (!vertexColorBuffer) {
92+
console.log('Failed to create the buffer object ');
93+
return -1;
94+
}
95+
96+
// 将缓冲区对象绑定到目标
97+
gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer);
98+
99+
//向缓冲区对象写入数据
100+
gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW);
101+
102+
var FSIZE = verticesColors.BYTES_PER_ELEMENT;
103+
104+
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
105+
106+
if (a_Position < 0) {
107+
console.log('Failed to get the storage location of a_Position');
108+
return a_Position;
109+
}
110+
111+
// 将缓冲区对象分配给a_Position变量
112+
gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, FSIZE * 6, 0);
113+
114+
// 连接a_Poisition变量与分配给它的缓冲区对象
115+
gl.enableVertexAttribArray(a_Position);
116+
117+
// 将缓冲区对象分配给a_Color变量
118+
var a_Color = gl.getAttribLocation(gl.program, 'a_Color');
119+
if (a_Color < 0) {
120+
console.log('Failed to get the storage location of a_Color');
121+
return a_Color;
122+
}
123+
gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 6, FSIZE * 3);
124+
gl.enableVertexAttribArray(a_Color);
125+
126+
gl.bindBuffer(gl.ARRAY_BUFFER, null);
127+
128+
return n
129+
}

‎README.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,4 +53,6 @@ WebGL实例程序
5353
#TexturedQuad_Clamp_Mirror
5454
修改纹理参数
5555
#MultiTexture
56-
使用两幅纹理图像
56+
使用两幅纹理图像
57+
#LookAtTriangles
58+
三个具有不同深度的三角形

0 commit comments

Comments
 (0)