Skip to content

Commit 3982ccc

Browse files
greggmangreggman
committed
Refactor samples
* use glmatrix.js instead of sylvester as it's far more popular and suited to WebGL * try to use less global variables * make the shader functions more generally useful * use requestAnimationFrame instead of setTimeout * use multi-line templates instead of script tags * use const where possible * set the html language * use meta charset instead of http-equiv * move scripts to bottom so no onload event needed
1 parent bd9b35f commit 3982ccc

File tree

17 files changed

+8648
-2014
lines changed

17 files changed

+8648
-2014
lines changed

‎tutorial/gl-matrix.js‎

Lines changed: 6888 additions & 0 deletions
Large diffs are not rendered by default.

‎tutorial/sample1/index.html‎

Lines changed: 27 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,36 @@
11
<!doctype html>
2-
<html>
2+
<html lang="en">
33
<head>
44
<title>WebGL Demo</title>
5-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5+
<meta charset="utf-8">
66
<link rel="stylesheet" href="../webgl.css" type="text/css">
7+
</head>
78

8-
<script>
9-
var canvas;
10-
var gl;
11-
12-
//
13-
// start
14-
//
15-
// Called when the canvas is created to get the ball rolling.
16-
// Figuratively, that is. There's nothing moving in this demo.
17-
//
18-
function start() {
19-
canvas = document.getElementById("glcanvas");
20-
21-
initWebGL(canvas); // Initialize the GL context
22-
23-
// Only continue if WebGL is available and working
24-
if (!gl) {
25-
return;
26-
}
27-
28-
gl.clearColor(0.0, 0.0, 0.0, 1.0); // Set clear color to black, fully opaque
29-
gl.clearDepth(1.0); // Clear everything
30-
gl.enable(gl.DEPTH_TEST); // Enable depth testing
31-
gl.depthFunc(gl.LEQUAL); // Near things obscure far things
32-
gl.clear(gl.COLOR_BUFFER_BIT); // Clear the color buffer with specified clear color
33-
}
34-
35-
//
36-
// initWebGL
37-
//
38-
// Initialize WebGL, returning the GL context or null if
39-
// WebGL isn't available or could not be initialized.
40-
//
41-
function initWebGL() {
42-
gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
43-
44-
// If we don't have a GL context, give up now
9+
<body>
10+
<canvas id="glcanvas" width="640" height="480"></canvas>
11+
</body>
4512

46-
if (!gl) {
47-
alert("Unable to initialize WebGL. Your browser may not support it.");
48-
}
13+
<script>
14+
main();
15+
16+
//
17+
// start here
18+
//
19+
function main() {
20+
const canvas = document.querySelector("#glcanvas");
21+
// Initialize the GL context
22+
const gl = canvas.getContext("webgl");
23+
24+
// Only continue if WebGL is available and working
25+
if (!gl) {
26+
alert("Unable to initialize WebGL. Your browser or machine may not support it.");
27+
return;
4928
}
50-
</script>
51-
</head>
5229

53-
<body onload="start()">
54-
<canvas id="glcanvas" width="640" height="480">
55-
Your browser doesn't appear to support the <code>&lt;canvas&gt;</code> element.
56-
</canvas>
57-
</body>
30+
// Set clear color to black, fully opaque
31+
gl.clearColor(0.0, 0.0, 0.0, 1.0);
32+
// Clear the color buffer with specified clear color
33+
gl.clear(gl.COLOR_BUFFER_BIT);
34+
}
35+
</script>
5836
</html>

‎tutorial/sample1/webgl-demo.js‎

Lines changed: 0 additions & 46 deletions
This file was deleted.

‎tutorial/sample2/index.html‎

Lines changed: 7 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,15 @@
11
<!doctype html>
2-
<html>
2+
<html lang="en">
33
<head>
4+
<meta charset="utf-8">
45
<title>WebGL Demo</title>
5-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
66
<link rel="stylesheet" href="../webgl.css" type="text/css">
7-
<script src="../sylvester.js" type="text/javascript"></script>
8-
<script src="../glUtils.js" type="text/javascript"></script>
9-
<script src="webgl-demo.js" type="text/javascript"></script>
10-
11-
<!-- Fragment shader program -->
12-
13-
<script id="shader-fs" type="x-shader/x-fragment">
14-
void main(void) {
15-
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
16-
}
17-
</script>
18-
19-
<!-- Vertex shader program -->
20-
21-
<script id="shader-vs" type="x-shader/x-vertex">
22-
attribute vec3 aVertexPosition;
23-
24-
uniform mat4 uMVMatrix;
25-
uniform mat4 uPMatrix;
26-
27-
void main(void) {
28-
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
29-
}
30-
</script>
317
</head>
328

33-
<body onload="start()">
34-
<canvas id="glcanvas" width="640" height="480">
35-
Your browser doesn't appear to support the HTML5 <code>&lt;canvas&gt;</code> element.
36-
</canvas>
9+
<body>
10+
<canvas id="glcanvas" width="640" height="480"></canvas>
3711
</body>
12+
13+
<script src="../gl-matrix.js"></script>
14+
<script src="webgl-demo.js"></script>
3815
</html>

0 commit comments

Comments
 (0)