-
Notifications
You must be signed in to change notification settings - Fork 2
/
cube.html
99 lines (83 loc) · 3.06 KB
/
cube.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html>
<head>
<title>Gladder : Cube example</title>
<script src="../src/gl-matrix.js"></script>
<script src="../src/webgl-debug.js"></script>
<script src="../src/gladder.js"></script>
</head>
<body>
<h1>Gladder : Cube example</h1>
<p>Because every OpenGL demo needs a spinning cube, right?</p>
<canvas id="canvas" width="640" height="640"></canvas>
<script id="vertex-shader" type="x-shader/x-vertex">
uniform mat4 transform;
attribute vec3 position;
varying vec3 pos;
void main() {
gl_Position = transform * vec4(position, 1.0);
pos = position;
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
varying vec3 pos;
void main() {
gl_FragColor.rgb = pow(1.0 - abs(pos.rgb), vec3(3.0));
gl_FragColor.a = 1.0;
}
</script>
<script>
var gla = new Gladder({
canvas: "canvas",
debug: true,
errorCallback: function(err) { console.error(err); },
// callCallback: function(msg) { console.info(msg); },
});
gla.enable(gla.Capability.DEPTH_TEST, gla.Capability.CULL_FACE);
var program = new gla.Program({
vertexShader: "vertex-shader",
fragmentShader: "fragment-shader",
uniforms: { transform: "mat4" },
attributes: { position: "vec3" },
});
var cubeData = [
-1,-1,-1, -1,+1,-1, +1,+1,-1, -1,-1,-1, +1,+1,-1, +1,-1,-1, // x=-1 face
-1,-1,+1, +1,-1,+1, +1,+1,+1, -1,-1,+1, +1,+1,+1, -1,+1,+1, // x=+1 face
-1,-1,-1, +1,-1,-1, +1,-1,+1, -1,-1,-1, +1,-1,+1, -1,-1,+1, // y=-1 face
-1,+1,-1, -1,+1,+1, +1,+1,+1, -1,+1,-1, +1,+1,+1, +1,+1,-1, // y=+1 face
-1,-1,-1, -1,-1,+1, -1,+1,+1, -1,-1,-1, -1,+1,+1, -1,+1,-1, // z=-1 face
+1,-1,-1, +1,+1,-1, +1,+1,+1, +1,-1,-1, +1,+1,+1, +1,-1,+1, // z=+1 face
];
var buffer = new gla.Buffer({
data: cubeData,
componentsPerItem: 3,
});
var modelMatrix = mat4.create();
mat4.identity(modelMatrix);
var viewMatrix = mat4.create();
mat4.identity(viewMatrix);
mat4.translate(viewMatrix, [0, 0, -5]);
var projectionMatrix = mat4.create();
mat4.perspective(45, gla.canvas.width / gla.canvas.height, 1.0, 10.0, projectionMatrix);
var transform = mat4.create();
gla.mainLoop(function(delta) {
gla.clear({ color: [1, 1, 1], depth: 1 });
mat4.rotate(modelMatrix, 0.0008 * delta, [1, 0, 0]);
mat4.rotate(modelMatrix, 0.0005 * delta, [0, 1, 0]);
mat4.rotate(modelMatrix, 0.0003 * delta, [0, 0, 1]);
mat4.identity(transform);
mat4.multiply(transform, projectionMatrix);
mat4.multiply(transform, viewMatrix);
mat4.multiply(transform, modelMatrix);
gla.draw({
program: program,
uniforms: { transform: transform },
attributes: { position: buffer },
type: gla.DrawMode.TRIANGLES,
count: buffer.numItems,
});
});
</script>
</body>
</html>