-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathdrawstress.html
65 lines (55 loc) · 1.8 KB
/
drawstress.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
<!DOCTYPE html>
<html lang="en">
<meta charset='utf-8'>
<canvas id='c' width='600' height='600' style='border: 1px solid black'></canvas>
<div id='d'></div>
<script src='webgl-utils.js'></script>
<script src='color-cube.js'></script>
<script src='vector-math.js'></script>
<script>
'use strict';
var d = document.getElementById('d');
var c = document.getElementById('c');
var gl = c.getContext('webgl');
gl.enable(gl.DEPTH_TEST);
gl.clearColor(0,0,0,1);
var cube = new ColorCube();
var z = 0;
var rot = new Matrix4x3();
var camera = new Matrix4x3();
var timeOffset = Date.now();
var last = Date.now();
var query = location.search;
var dim = (query && query.match(/dim=([0-9]*)/)[1]) || 16;
function draw() {
requestAnimationFrame(draw, c);
var now = Date.now();
var delta = now - last;
d.textContent = 'Draw: ' + dim*dim*dim + ', Delta: ' + delta;
last = now;
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// Uncomment the following for a bit of camera animation.
// camera.d[14] = 8 + Math.sin(z);
camera.d[14] = dim;
viewMatrix().makeInverseRigidBody(camera);
cube.bind();
cube.setUniforms(0x6);
var time = (now - timeOffset) / 1000.0;
var step = 0.6;
var pos = [ -step*dim / 2.0, -step*dim / 2.0, -15 ];
for (var zz = 0; zz < dim; ++zz) {
for (var yy = 0; yy < dim; ++yy) {
for (var xx = 0; xx < dim; ++xx) {
modelMatrix().makeRotateXYZ(time + xx*0.21, time + yy*0.37, time + yy*0.13);
modelMatrix().d[12] = pos[0] + (xx + 0.5)*step;
modelMatrix().d[13] = pos[1] + (yy + 0.5)*step;
modelMatrix().d[14] = pos[2] + zz*step;
cube.draw(0x1);
}
}
}
z += 0.01;
}
draw();
</script>
</html>