forked from emoller/WebGL101
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path13-textured-mesh.html
72 lines (63 loc) · 1.69 KB
/
13-textured-mesh.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
<!DOCTYPE html>
<html>
<canvas id='c' width='900' height='900'></canvas>
<script src='webgl-utils.js'></script>
<script src='mesh.js'></script>
<script src='vector-math.js'></script>
<script>
var c = document.getElementById('c');
var gl = c.getContext('experimental-webgl');
gl.enable(gl.DEPTH_TEST);
gl.clearColor(0,0,0,1);
function DAGNode(ch) {
this.local = new Matrix4x3();
this.children = ch ? ch : [];
}
DAGNode.prototype = {
draw : function() {
pushModelMatrix().multiply(this.local);
for (var c in this.children) {
this.children[c].draw();
}
popModelMatrix();
}
};
function Geometry(mesh) {
this.mesh = mesh;
}
Geometry.prototype = {
draw : function() {
this.mesh.draw();
}
};
Geometry.prototype.prototype = DAGNode.prototype;
var mesh = new Mesh();
var z = 0;
var rot = new Matrix4x3();
var camera = new Matrix4x3();
var spinNode = new DAGNode([new Geometry(mesh)]);
var children = [];
for (var x = -2; x <= 2; x += 2) {
for (var y = -2; y <= 2; y += 2) {
var newNode = new DAGNode([spinNode]);
newNode.local.d[12] = x;
newNode.local.d[13] = y;
children[children.length] = newNode;
}
}
var scene = new DAGNode(children);
function draw() {
requestAnimationFrame(draw, c);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
spinNode.local.makeRotate(z,1,0,0);
spinNode.local.multiply(rot.makeRotate(z,0,1,0));
spinNode.local.multiply(rot.makeRotate(z,0,0,1));
scene.local.makeRotate(z,0,1,0);
camera.d[14] = 8 + Math.sin(z);
viewMatrix().makeInverseRigidBody(camera);
scene.draw();
z += 0.01;
}
mesh.load('meshes/mech-cube.json', draw);
</script>
</html>