Skip to content

Commit 33537a7

Browse files
hawkcoderhawkcoder
committed
2015-04-03
1 parent 21ddcf2 commit 33537a7

13 files changed

+1924
-40
lines changed

‎HelloTriangle/HelloTriangle.html

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<html>
2+
<head>
3+
<title>WebGL Demo</title>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5+
<link rel="stylesheet" href="webgl.css" type="text/css">
6+
<script src="sylvester.js" type="text/javascript"></script>
7+
<script src="glUtils.js" type="text/javascript"></script>
8+
<script src="webgl-demo.js" type="text/javascript"></script>
9+
10+
<!-- Fragment shader program -->
11+
12+
<script id="shader-fs" type="x-shader/x-fragment">
13+
void main(void) {
14+
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
15+
}
16+
</script>
17+
18+
<!-- Vertex shader program -->
19+
20+
<script id="shader-vs" type="x-shader/x-vertex">
21+
attribute vec3 aVertexPosition;
22+
23+
uniform mat4 uMVMatrix;
24+
uniform mat4 uPMatrix;
25+
26+
void main(void) {
27+
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
28+
}
29+
</script>
30+
</head>
31+
32+
<body onload="start()">
33+
<canvas id="glcanvas" width="640" height="480">
34+
Your browser doesn't appear to support the HTML5 <code>&lt;canvas&gt;</code> element.
35+
</canvas>
36+
</body>
37+
</html>

‎glUtils.js renamed to ‎HelloTriangle/glUtils.js

File renamed without changes.

‎sylvester.js renamed to ‎HelloTriangle/sylvester.js

File renamed without changes.

‎webgl-demo.js renamed to ‎HelloTriangle/webgl-demo.js

File renamed without changes.

‎webgl.css renamed to ‎HelloTriangle/webgl.css

File renamed without changes.

‎RotateTriangle/RotatingTranslatedTriangle.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Continually Rotate A Translated Triangle</title>
6+
</head>
7+
8+
<body onload="main()">
9+
<canvas id="webgl" width="400" height="400">
10+
Please use a browser that supports "canvas"
11+
</canvas>
12+
13+
<script src="lib/webgl-utils.js"></script>
14+
<script src="lib/webgl-debug.js"></script>
15+
<script src="lib/cuon-utils.js"></script>
16+
<script src="lib/cuon-matrix.js"></script>
17+
<script src="RotatingTranslatedTriangle.js"></script>
18+
</body>
19+
</html>

‎RotateTriangle/RotatingTranslatedTriangle.js

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
// RotatingTranslatedTriangle.js (c) 2012 matsuda
2+
// Vertex shader program
3+
var VSHADER_SOURCE =
4+
'attribute vec4 a_Position;\n' +
5+
'uniform mat4 u_ModelMatrix;\n' +
6+
'void main() {\n' +
7+
' gl_Position = u_ModelMatrix * a_Position;\n' +
8+
'}\n';
9+
10+
// Fragment shader program
11+
var FSHADER_SOURCE =
12+
'void main() {\n' +
13+
' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' +
14+
'}\n';
15+
16+
// Rotation angle (degrees/second)
17+
var ANGLE_STEP = 45.0;
18+
19+
function main() {
20+
// Retrieve <canvas> element
21+
var canvas = document.getElementById('webgl');
22+
23+
// Get the rendering context for WebGL
24+
var gl = getWebGLContext(canvas);
25+
if (!gl) {
26+
console.log('Failed to get the rendering context for WebGL');
27+
return;
28+
}
29+
30+
// Initialize shaders
31+
if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
32+
console.log('Failed to intialize shaders.');
33+
return;
34+
}
35+
36+
// Write the positions of vertices to a vertex shader
37+
var n = initVertexBuffers(gl);
38+
if (n < 0) {
39+
console.log('Failed to set the positions of the vertices');
40+
return null;
41+
}
42+
43+
// Specify the color for clearing <canvas>
44+
gl.clearColor(0, 0, 0, 1);
45+
46+
// Get storage location of u_ModelMatrix
47+
var u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix');
48+
if (!u_ModelMatrix) {
49+
console.log('Failed to get the storage location of u_ModelMatrix');
50+
return;
51+
}
52+
53+
// Current rotation angle
54+
var currentAngle = 0.0;
55+
// Model matrix
56+
var modelMatrix = new Matrix4();
57+
58+
// Start drawing
59+
var tick = function() {
60+
currentAngle = animate(currentAngle); // Update the rotation angle
61+
draw(gl, n, currentAngle, modelMatrix, u_ModelMatrix); // Draw the triangle
62+
requestAnimationFrame(tick, canvas); // Request that the browser ?calls tick
63+
};
64+
tick();
65+
}
66+
67+
function initVertexBuffers(gl) {
68+
var vertices = new Float32Array ([
69+
0, 0.5, -0.5, -0.5, 0.5, -0.5
70+
]);
71+
var n = 3; // The number of vertices
72+
73+
// Create a buffer object
74+
var vertexBuffer = gl.createBuffer();
75+
if (!vertexBuffer) {
76+
console.log('Failed to create the buffer object');
77+
return -1;
78+
}
79+
80+
// Bind the buffer object to target
81+
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
82+
// Write date into the buffer object
83+
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
84+
85+
// Assign the buffer object to a_Position variable
86+
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
87+
if(a_Position < 0) {
88+
console.log('Failed to get the storage location of a_Position');
89+
return -1;
90+
}
91+
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
92+
93+
// Enable the assignment to a_Position variable
94+
gl.enableVertexAttribArray(a_Position);
95+
96+
return n;
97+
}
98+
99+
function draw(gl, n, currentAngle, modelMatrix, u_ModelMatrix) {
100+
// Set the rotation matrix
101+
modelMatrix.setRotate(currentAngle, 0, 0, 1);
102+
modelMatrix.translate(0.35, 0, 0);
103+
104+
// Pass the rotation matrix to the vertex shader
105+
gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements);
106+
107+
// Clear <canvas>
108+
gl.clear(gl.COLOR_BUFFER_BIT);
109+
110+
// Draw the rectangle
111+
gl.drawArrays(gl.TRIANGLES, 0, n);
112+
}
113+
114+
// Last time that this function was called
115+
var g_last = Date.now();
116+
function animate(angle) {
117+
// Calculate the elapsed time
118+
var now = Date.now();
119+
var elapsed = now - g_last;
120+
g_last = now;
121+
// Update the current rotation angle (adjusted by the elapsed time)
122+
var newAngle = angle + (ANGLE_STEP * elapsed) / 1000.0;
123+
return newAngle %= 360;
124+
}

0 commit comments

Comments
 (0)