Skip to content

Commit 7d417bd

Browse files
Elchi3Elchi3
committed
Import from developer.mozilla.org/samples/webgl/
1 parent 9cd52f1 commit 7d417bd

21 files changed

+3401
-0
lines changed

‎tutorial/glUtils.js‎

Lines changed: 193 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
// augment Sylvester some
2+
Matrix.Translation = function (v)
3+
{
4+
if (v.elements.length == 2) {
5+
var r = Matrix.I(3);
6+
r.elements[2][0] = v.elements[0];
7+
r.elements[2][1] = v.elements[1];
8+
return r;
9+
}
10+
11+
if (v.elements.length == 3) {
12+
var r = Matrix.I(4);
13+
r.elements[0][3] = v.elements[0];
14+
r.elements[1][3] = v.elements[1];
15+
r.elements[2][3] = v.elements[2];
16+
return r;
17+
}
18+
19+
throw "Invalid length for Translation";
20+
}
21+
22+
Matrix.prototype.flatten = function ()
23+
{
24+
var result = [];
25+
if (this.elements.length == 0)
26+
return [];
27+
28+
29+
for (var j = 0; j < this.elements[0].length; j++)
30+
for (var i = 0; i < this.elements.length; i++)
31+
result.push(this.elements[i][j]);
32+
return result;
33+
}
34+
35+
Matrix.prototype.ensure4x4 = function()
36+
{
37+
if (this.elements.length == 4 &&
38+
this.elements[0].length == 4)
39+
return this;
40+
41+
if (this.elements.length > 4 ||
42+
this.elements[0].length > 4)
43+
return null;
44+
45+
for (var i = 0; i < this.elements.length; i++) {
46+
for (var j = this.elements[i].length; j < 4; j++) {
47+
if (i == j)
48+
this.elements[i].push(1);
49+
else
50+
this.elements[i].push(0);
51+
}
52+
}
53+
54+
for (var i = this.elements.length; i < 4; i++) {
55+
if (i == 0)
56+
this.elements.push([1, 0, 0, 0]);
57+
else if (i == 1)
58+
this.elements.push([0, 1, 0, 0]);
59+
else if (i == 2)
60+
this.elements.push([0, 0, 1, 0]);
61+
else if (i == 3)
62+
this.elements.push([0, 0, 0, 1]);
63+
}
64+
65+
return this;
66+
};
67+
68+
Matrix.prototype.make3x3 = function()
69+
{
70+
if (this.elements.length != 4 ||
71+
this.elements[0].length != 4)
72+
return null;
73+
74+
return Matrix.create([[this.elements[0][0], this.elements[0][1], this.elements[0][2]],
75+
[this.elements[1][0], this.elements[1][1], this.elements[1][2]],
76+
[this.elements[2][0], this.elements[2][1], this.elements[2][2]]]);
77+
};
78+
79+
Vector.prototype.flatten = function ()
80+
{
81+
return this.elements;
82+
};
83+
84+
function mht(m) {
85+
var s = "";
86+
if (m.length == 16) {
87+
for (var i = 0; i < 4; i++) {
88+
s += "<span style='font-family: monospace'>[" + m[i*4+0].toFixed(4) + "," + m[i*4+1].toFixed(4) + "," + m[i*4+2].toFixed(4) + "," + m[i*4+3].toFixed(4) + "]</span><br>";
89+
}
90+
} else if (m.length == 9) {
91+
for (var i = 0; i < 3; i++) {
92+
s += "<span style='font-family: monospace'>[" + m[i*3+0].toFixed(4) + "," + m[i*3+1].toFixed(4) + "," + m[i*3+2].toFixed(4) + "]</font><br>";
93+
}
94+
} else {
95+
return m.toString();
96+
}
97+
return s;
98+
}
99+
100+
//
101+
// gluLookAt
102+
//
103+
function makeLookAt(ex, ey, ez,
104+
cx, cy, cz,
105+
ux, uy, uz)
106+
{
107+
var eye = $V([ex, ey, ez]);
108+
var center = $V([cx, cy, cz]);
109+
var up = $V([ux, uy, uz]);
110+
111+
var mag;
112+
113+
var z = eye.subtract(center).toUnitVector();
114+
var x = up.cross(z).toUnitVector();
115+
var y = z.cross(x).toUnitVector();
116+
117+
var m = $M([[x.e(1), x.e(2), x.e(3), 0],
118+
[y.e(1), y.e(2), y.e(3), 0],
119+
[z.e(1), z.e(2), z.e(3), 0],
120+
[0, 0, 0, 1]]);
121+
122+
var t = $M([[1, 0, 0, -ex],
123+
[0, 1, 0, -ey],
124+
[0, 0, 1, -ez],
125+
[0, 0, 0, 1]]);
126+
return m.x(t);
127+
}
128+
129+
//
130+
// glOrtho
131+
//
132+
function makeOrtho(left, right,
133+
bottom, top,
134+
znear, zfar)
135+
{
136+
var tx = -(right+left)/(right-left);
137+
var ty = -(top+bottom)/(top-bottom);
138+
var tz = -(zfar+znear)/(zfar-znear);
139+
140+
return $M([[2/(right-left), 0, 0, tx],
141+
[0, 2/(top-bottom), 0, ty],
142+
[0, 0, -2/(zfar-znear), tz],
143+
[0, 0, 0, 1]]);
144+
}
145+
146+
//
147+
// gluPerspective
148+
//
149+
function makePerspective(fovy, aspect, znear, zfar)
150+
{
151+
var ymax = znear * Math.tan(fovy * Math.PI / 360.0);
152+
var ymin = -ymax;
153+
var xmin = ymin * aspect;
154+
var xmax = ymax * aspect;
155+
156+
return makeFrustum(xmin, xmax, ymin, ymax, znear, zfar);
157+
}
158+
159+
//
160+
// glFrustum
161+
//
162+
function makeFrustum(left, right,
163+
bottom, top,
164+
znear, zfar)
165+
{
166+
var X = 2*znear/(right-left);
167+
var Y = 2*znear/(top-bottom);
168+
var A = (right+left)/(right-left);
169+
var B = (top+bottom)/(top-bottom);
170+
var C = -(zfar+znear)/(zfar-znear);
171+
var D = -2*zfar*znear/(zfar-znear);
172+
173+
return $M([[X, 0, A, 0],
174+
[0, Y, B, 0],
175+
[0, 0, C, D],
176+
[0, 0, -1, 0]]);
177+
}
178+
179+
//
180+
// glOrtho
181+
//
182+
function makeOrtho(left, right, bottom, top, znear, zfar)
183+
{
184+
var tx = - (right + left) / (right - left);
185+
var ty = - (top + bottom) / (top - bottom);
186+
var tz = - (zfar + znear) / (zfar - znear);
187+
188+
return $M([[2 / (right - left), 0, 0, tx],
189+
[0, 2 / (top - bottom), 0, ty],
190+
[0, 0, -2 / (zfar - znear), tz],
191+
[0, 0, 0, 1]]);
192+
}
193+

‎tutorial/sample1/index.html‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>WebGL Demo</title>
5+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
6+
<link rel="stylesheet" href="../webgl.css" type="text/css">
7+
8+
<script type="text/JavaScript">
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+
25+
if (gl) {
26+
gl.clearColor(0.0, 0.0, 0.0, 1.0); // Set clear color to black, fully opaque
27+
gl.clearDepth(1.0); // Clear everything
28+
gl.enable(gl.DEPTH_TEST); // Enable depth testing
29+
gl.depthFunc(gl.LEQUAL); // Near things obscure far things
30+
}
31+
}
32+
33+
//
34+
// initWebGL
35+
//
36+
// Initialize WebGL, returning the GL context or null if
37+
// WebGL isn't available or could not be initialized.
38+
//
39+
function initWebGL() {
40+
gl = null;
41+
42+
try {
43+
gl = canvas.getContext("experimental-webgl");
44+
}
45+
catch(e) {
46+
}
47+
48+
// If we don't have a GL context, give up now
49+
50+
if (!gl) {
51+
alert("Unable to initialize WebGL. Your browser may not support it.");
52+
}
53+
}
54+
</script>
55+
</head>
56+
57+
<body onload="start()">
58+
<canvas id="glcanvas" width="640" height="480">
59+
Your browser doesn't appear to support the <code>&lt;canvas&gt;</code> element.
60+
</canvas>
61+
</body>
62+
</html>

‎tutorial/sample1/webgl-demo.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
var canvas;
2+
var gl;
3+
4+
//
5+
// start
6+
//
7+
// Called when the canvas is created to get the ball rolling.
8+
// Figuratively, that is. There's nothing moving in this demo.
9+
//
10+
function start() {
11+
canvas = document.getElementById("glcanvas");
12+
13+
initWebGL(canvas); // Initialize the GL context
14+
15+
// Only continue if WebGL is available and working
16+
17+
if (gl) {
18+
gl.clearColor(0.0, 0.0, 0.0, 1.0); // Set clear color to black, fully opaque
19+
gl.clearDepth(1.0); // Clear everything
20+
gl.enable(gl.DEPTH_TEST); // Enable depth testing
21+
gl.depthFunc(gl.LEQUAL); // Near things obscure far things
22+
}
23+
}
24+
25+
//
26+
// initWebGL
27+
//
28+
// Initialize WebGL, returning the GL context or null if
29+
// WebGL isn't available or could not be initialized.
30+
//
31+
function initWebGL() {
32+
gl = null;
33+
34+
try {
35+
gl = canvas.getContext("experimental-webgl");
36+
}
37+
catch(e) {
38+
}
39+
40+
// If we don't have a GL context, give up now
41+
42+
if (!gl) {
43+
alert("Unable to initialize WebGL. Your browser may not support it.");
44+
}
45+
}

‎tutorial/sample2/index.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>WebGL Demo</title>
5+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
6+
<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>
31+
</head>
32+
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>
37+
</body>
38+
</html>

0 commit comments

Comments
 (0)