OLD | NEW |
| (Empty) |
1 tdl.require('tdl.buffers'); | |
2 tdl.require('tdl.fast'); | |
3 tdl.require('tdl.log'); | |
4 tdl.require('tdl.math'); | |
5 tdl.require('tdl.models'); | |
6 tdl.require('tdl.primitives'); | |
7 tdl.require('tdl.programs'); | |
8 tdl.require('tdl.textures'); | |
9 tdl.require('tdl.webgl'); | |
10 | |
11 function setupLogo() { | |
12 var textures = { | |
13 diffuseSampler: tdl.textures.loadTexture('webgl-logo-pot.png') | |
14 }; | |
15 var program = tdl.programs.loadProgramFromScriptTags( | |
16 'modelVertexShader', | |
17 'modelFragmentShader'); | |
18 var arrays = tdl.primitives.createCube(1.2); | |
19 tdl.primitives.reorient(arrays, | |
20 [2, 0, 0, 0, | |
21 0, 1, 0, 0, | |
22 0, 0, 2, 0, | |
23 0, 0, 0, 1]); | |
24 return new tdl.models.Model(program, arrays, textures); | |
25 }; | |
26 | |
27 var g_eyeSpeed = 1; | |
28 var g_eyeHeight = 1.5; | |
29 var g_eyeRadius = 3; | |
30 var g_trans = [0,0.4,0]; | |
31 | |
32 function initializeLogo(canvas) { | |
33 var math = tdl.math; | |
34 var fast = tdl.fast; | |
35 var model = setupLogo(); | |
36 | |
37 var clock = 0.0; | |
38 | |
39 // pre-allocate a bunch of arrays | |
40 var projection = new Float32Array(16); | |
41 var view = new Float32Array(16); | |
42 var world = new Float32Array(16); | |
43 var worldInverse = new Float32Array(16); | |
44 var worldInverseTranspose = new Float32Array(16); | |
45 var viewProjection = new Float32Array(16); | |
46 var worldViewProjection = new Float32Array(16); | |
47 var viewInverse = new Float32Array(16); | |
48 var viewProjectionInverse = new Float32Array(16); | |
49 var eyePosition = new Float32Array(3); | |
50 var target = new Float32Array(3); | |
51 var up = new Float32Array([0,1,0]); | |
52 var lightWorldPos = new Float32Array(3); | |
53 var v3t0 = new Float32Array(3); | |
54 var v3t1 = new Float32Array(3); | |
55 var v3t2 = new Float32Array(3); | |
56 var v3t3 = new Float32Array(3); | |
57 var m4t0 = new Float32Array(16); | |
58 var m4t1 = new Float32Array(16); | |
59 var m4t2 = new Float32Array(16); | |
60 var m4t3 = new Float32Array(16); | |
61 var zero4 = new Float32Array(4); | |
62 var one4 = new Float32Array([1,1,1,1]); | |
63 | |
64 // uniforms. | |
65 var modelConst = { | |
66 viewInverse: viewInverse, | |
67 lightWorldPos: lightWorldPos, | |
68 specular: one4, | |
69 shininess: 50, | |
70 specularFactor: 0.2, | |
71 lightColor: new Float32Array([1,1,1,1]), | |
72 }; | |
73 var modelPer = { | |
74 world: world, | |
75 worldViewProjection: worldViewProjection, | |
76 worldInverse: worldInverse, | |
77 worldInverseTranspose: worldInverseTranspose}; | |
78 | |
79 var then = (new Date()).getTime() * 0.001; | |
80 function render() { | |
81 tdl.webgl.requestAnimationFrame(render, canvas); | |
82 var now = (new Date()).getTime() * 0.001; | |
83 var elapsedTime = now - then; | |
84 then = now; | |
85 | |
86 clock += elapsedTime; | |
87 eyePosition[0] = Math.sin(clock * g_eyeSpeed) * g_eyeRadius; | |
88 eyePosition[1] = g_eyeHeight; | |
89 eyePosition[2] = Math.cos(clock * g_eyeSpeed) * g_eyeRadius; | |
90 | |
91 gl.colorMask(true, true, true, true); | |
92 gl.depthMask(true); | |
93 gl.clearColor(0,0,0.5,0); | |
94 gl.clearDepth(1); | |
95 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT | gl.STENCIL_BUFFER_BIT); | |
96 | |
97 gl.enable(gl.CULL_FACE); | |
98 gl.enable(gl.DEPTH_TEST); | |
99 //gl.enable(gl.BLEND); | |
100 //gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); | |
101 | |
102 fast.matrix4.perspective( | |
103 projection, | |
104 math.degToRad(60), | |
105 canvas.clientWidth / canvas.clientHeight, | |
106 1, | |
107 5000); | |
108 fast.matrix4.lookAt( | |
109 view, | |
110 eyePosition, | |
111 target, | |
112 up); | |
113 fast.matrix4.mul(viewProjection, view, projection); | |
114 fast.matrix4.inverse(viewInverse, view); | |
115 fast.matrix4.inverse(viewProjectionInverse, viewProjection); | |
116 | |
117 fast.matrix4.getAxis(v3t0, viewInverse, 0); // x | |
118 fast.matrix4.getAxis(v3t1, viewInverse, 1); // y; | |
119 fast.matrix4.getAxis(v3t2, viewInverse, 2); // z; | |
120 fast.mulScalarVector(v3t0, 0, v3t0); | |
121 fast.mulScalarVector(v3t1, 1, v3t1); | |
122 fast.mulScalarVector(v3t2, 1, v3t2); | |
123 fast.addVector(lightWorldPos, eyePosition, v3t0); | |
124 fast.addVector(lightWorldPos, lightWorldPos, v3t1); | |
125 fast.addVector(lightWorldPos, lightWorldPos, v3t2); | |
126 | |
127 model.drawPrep(modelConst); | |
128 fast.matrix4.translation(world, g_trans); | |
129 fast.matrix4.mul(worldViewProjection, world, viewProjection); | |
130 fast.matrix4.inverse(worldInverse, world); | |
131 fast.matrix4.transpose(worldInverseTranspose, worldInverse); | |
132 model.draw(modelPer); | |
133 | |
134 // Set the alpha to 255. | |
135 gl.colorMask(false, false, false, true); | |
136 gl.clearColor(0,0,0,1); | |
137 gl.clear(gl.COLOR_BUFFER_BIT); | |
138 } | |
139 render(); | |
140 } | |
141 | |
OLD | NEW |