sawine@2
|
1 |
var machine;
|
sawine@8
|
2 |
var renderer;
|
sawine@11
|
3 |
var controller;
|
sawine@11
|
4 |
var camera;
|
sawine@14
|
5 |
var cameraSpeed = {"x": 0.1, "y": 0.1, "z": 0.5, "pitch": 0.5, "yaw": 0.5};
|
sawine@13
|
6 |
var keyActionMap = {'A': moveCameraLeft,
|
sawine@13
|
7 |
'D': moveCameraRight,
|
sawine@13
|
8 |
'W': moveCameraUp,
|
sawine@13
|
9 |
'S': moveCameraDown};
|
sawine@14
|
10 |
var mouseActionMap = {"pitch": [[true, false, false], pitchCamera],
|
sawine@14
|
11 |
"yaw": [[true, false, false], yawCamera],
|
sawine@14
|
12 |
"wheel": zoomCamera};
|
sawine@2
|
13 |
|
sawine@2
|
14 |
function main()
|
sawine@2
|
15 |
{
|
sawine@2
|
16 |
var canvas = document.getElementById("machine");
|
sawine@2
|
17 |
var context = new Context(canvas);
|
sawine@10
|
18 |
context.expand();
|
sawine@2
|
19 |
var gl = context.gl;
|
sawine@7
|
20 |
var object = new Cube(1, context);
|
sawine@2
|
21 |
gl.clearColor(0.0, 0.0, 0.0, 1.0);
|
sawine@2
|
22 |
gl.enable(gl.DEPTH_TEST);
|
sawine@11
|
23 |
machine = new Machine(object);
|
sawine@12
|
24 |
camera = new Camera(cameraSpeed);
|
sawine@11
|
25 |
renderer = new Renderer(camera, context);
|
sawine@13
|
26 |
controller = new Controller(keyActionMap, mouseActionMap, camera, machine, renderer);
|
sawine@6
|
27 |
update();
|
sawine@13
|
28 |
window.onresize = expandContext;
|
sawine@13
|
29 |
document.onkeydown = handleKeyDown;
|
sawine@13
|
30 |
document.onkeyup = handleKeyUp;
|
sawine@13
|
31 |
canvas.onmousedown = handleMouseDown;
|
sawine@13
|
32 |
document.onmouseup = handleMouseUp;
|
sawine@13
|
33 |
document.onmousemove = handleMouseMove;
|
sawine@14
|
34 |
document.onmousewheel = handleMouseWheel;
|
sawine@13
|
35 |
//read("config/camera", configureCamera);
|
sawine@13
|
36 |
}
|
sawine@13
|
37 |
|
sawine@13
|
38 |
function configureCamera(config) {
|
sawine@13
|
39 |
alert(config);
|
sawine@6
|
40 |
}
|
sawine@6
|
41 |
|
sawine@6
|
42 |
function update()
|
sawine@6
|
43 |
{
|
sawine@7
|
44 |
requestAnimFrame(update);
|
sawine@11
|
45 |
controller.update();
|
sawine@10
|
46 |
machine.scene.rotation.x += (random(0, 2) - 2) * 0.001;
|
sawine@10
|
47 |
machine.scene.rotation.y += (random(0, 3) - 1) * 0.001;
|
sawine@10
|
48 |
machine.scene.rotation.z += (random(0, 2) - 1) * 0.001;
|
sawine@8
|
49 |
machine.update(new Date().getTime());
|
sawine@8
|
50 |
renderer.update(machine.scene);
|
sawine@2
|
51 |
}
|
sawine@2
|
52 |
|
sawine@9
|
53 |
function random(min, max)
|
sawine@9
|
54 |
{
|
sawine@10
|
55 |
return (min + Math.random() * (max - min));
|
sawine@9
|
56 |
}
|
sawine@9
|
57 |
|
sawine@12
|
58 |
function Camera(speed)
|
sawine@4
|
59 |
{
|
sawine@11
|
60 |
this.x = 0.0;
|
sawine@11
|
61 |
this.y = 0.0;
|
sawine@13
|
62 |
this.z = 7.0;
|
sawine@13
|
63 |
this.pitch = 0.0;
|
sawine@13
|
64 |
this.yaw = 0.0;
|
sawine@12
|
65 |
this.speed = speed;
|
sawine@15
|
66 |
this.rotMatrix = mat4.create();
|
sawine@15
|
67 |
this.transMatrix = mat4.create();
|
sawine@16
|
68 |
this.matrix = mat4.create();
|
sawine@15
|
69 |
mat4.identity(this.rotMatrix);
|
sawine@15
|
70 |
mat4.identity(this.transMatrix);
|
sawine@16
|
71 |
mat4.identity(this.matrix);
|
sawine@11
|
72 |
}
|
sawine@11
|
73 |
Camera.prototype.moveLeft = function()
|
sawine@11
|
74 |
{
|
sawine@13
|
75 |
this.x -= this.speed.x;
|
sawine@11
|
76 |
}
|
sawine@11
|
77 |
Camera.prototype.moveRight = function()
|
sawine@11
|
78 |
{
|
sawine@13
|
79 |
this.x += this.speed.x;
|
sawine@11
|
80 |
}
|
sawine@11
|
81 |
Camera.prototype.moveUp = function()
|
sawine@11
|
82 |
{
|
sawine@13
|
83 |
this.y += this.speed.y;
|
sawine@11
|
84 |
}
|
sawine@11
|
85 |
Camera.prototype.moveDown = function()
|
sawine@11
|
86 |
{
|
sawine@13
|
87 |
this.y -= this.speed.y;
|
sawine@13
|
88 |
}
|
sawine@14
|
89 |
Camera.prototype.zoom = function(delta)
|
sawine@13
|
90 |
{
|
sawine@17
|
91 |
this.x += this.speed.x * delta * Math.sin(this.yaw);
|
sawine@17
|
92 |
this.z += this.speed.z * delta * Math.cos(this.yaw);
|
sawine@13
|
93 |
}
|
sawine@13
|
94 |
Camera.prototype.changePitch = function(delta)
|
sawine@13
|
95 |
{
|
sawine@13
|
96 |
this.pitch += this.speed.pitch * delta;
|
sawine@13
|
97 |
}
|
sawine@13
|
98 |
Camera.prototype.changeYaw = function(delta)
|
sawine@13
|
99 |
{
|
sawine@13
|
100 |
this.yaw += this.speed.yaw * delta;
|
sawine@12
|
101 |
}
|
sawine@15
|
102 |
Camera.prototype.update = function()
|
sawine@15
|
103 |
{
|
sawine@16
|
104 |
//mat4.rotate(this.rotMatrix, -this.pitch, [1, 0, 0]);
|
sawine@16
|
105 |
//mat4.rotate(this.rotMatrix, -this.yaw, [0, 1, 0]);
|
sawine@16
|
106 |
//mat4.translate(this.transMatrix, [-this.x, -this.y, -this.z]);
|
sawine@16
|
107 |
mat4.translate(this.matrix, [-this.x, -this.y, -this.z]);
|
sawine@16
|
108 |
//mat4.rotate(this.matrix, -this.pitch, [1, 0, 0]);
|
sawine@16
|
109 |
//mat4.rotate(this.matrix, -this.yaw, [0, 1, 0]);
|
sawine@16
|
110 |
|
sawine@16
|
111 |
|
sawine@15
|
112 |
this.clear();
|
sawine@15
|
113 |
//mat4.rotate(mvMatrix, -camera.pitch, [1, 0, 0]);
|
sawine@15
|
114 |
//mat4.rotate(mvMatrix, -camera.yaw, [0, 1, 0]);
|
sawine@15
|
115 |
//mat4.translate(mvMatrix, [-camera.x, -camera.y, -camera.z]);
|
sawine@15
|
116 |
}
|
sawine@15
|
117 |
Camera.prototype.clear = function()
|
sawine@15
|
118 |
{
|
sawine@17
|
119 |
//this.x = this.y = this.z = 0;
|
sawine@16
|
120 |
//this.pitch = this.yaw = 0;
|
sawine@15
|
121 |
}
|
sawine@12
|
122 |
|
sawine@13
|
123 |
function Controller(keyActionMap, mouseActionMap, camera, machine, renderer)
|
sawine@11
|
124 |
{
|
sawine@13
|
125 |
this.keyboard = new Keyboard(keyActionMap);
|
sawine@13
|
126 |
this.mouse = new Mouse(mouseActionMap);
|
sawine@11
|
127 |
|
sawine@11
|
128 |
}
|
sawine@11
|
129 |
Controller.prototype.update = function()
|
sawine@11
|
130 |
{
|
sawine@11
|
131 |
this.keyboard.handle();
|
sawine@13
|
132 |
this.mouse.handle();
|
sawine@11
|
133 |
}
|
sawine@11
|
134 |
|
sawine@13
|
135 |
function Mouse(actionMap)
|
sawine@11
|
136 |
{
|
sawine@13
|
137 |
this.actionMap = actionMap;
|
sawine@14
|
138 |
this.pressed = [false, false, false];
|
sawine@14
|
139 |
this.wheelDelta = 0;
|
sawine@11
|
140 |
}
|
sawine@13
|
141 |
Mouse.prototype.buttonDown = function(event)
|
sawine@13
|
142 |
{
|
sawine@13
|
143 |
this.pressed[event.which-1] = true;
|
sawine@13
|
144 |
}
|
sawine@13
|
145 |
Mouse.prototype.buttonUp = function(event)
|
sawine@13
|
146 |
{
|
sawine@13
|
147 |
this.pressed[event.which-1] = false;
|
sawine@13
|
148 |
}
|
sawine@13
|
149 |
Mouse.prototype.move = function(event)
|
sawine@13
|
150 |
{
|
sawine@14
|
151 |
this.currentPos = [event.clientX, event.clientY];
|
sawine@14
|
152 |
}
|
sawine@14
|
153 |
Mouse.prototype.moveWheel = function(event)
|
sawine@14
|
154 |
{
|
sawine@14
|
155 |
this.wheelDelta += event.wheelDelta;
|
sawine@14
|
156 |
}
|
sawine@14
|
157 |
Mouse.prototype.handle = function()
|
sawine@14
|
158 |
{
|
sawine@14
|
159 |
var pos = this.currentPos;
|
sawine@14
|
160 |
if (pos && this.lastPos)
|
sawine@13
|
161 |
{
|
sawine@13
|
162 |
var delta = [pos[0] - this.lastPos[0], pos[1] - this.lastPos[1]];
|
sawine@14
|
163 |
delta = normaliseMoveDelta(delta);
|
sawine@13
|
164 |
var action = this.actionMap["pitch"];
|
sawine@13
|
165 |
if (delta[1] != 0 && action)
|
sawine@13
|
166 |
{
|
sawine@13
|
167 |
for (var i = 0; i < 3; i++)
|
sawine@13
|
168 |
{
|
sawine@13
|
169 |
if (this.pressed[i] != action[0][i]) break;
|
sawine@13
|
170 |
if (i == 2) action[1](delta[1]);
|
sawine@13
|
171 |
}
|
sawine@13
|
172 |
}
|
sawine@13
|
173 |
action = this.actionMap["yaw"];
|
sawine@13
|
174 |
if (delta[0] != 0 && action)
|
sawine@13
|
175 |
{
|
sawine@13
|
176 |
for (var i = 0; i < 3; i++)
|
sawine@13
|
177 |
{
|
sawine@13
|
178 |
if (this.pressed[i] != action[0][i]) break;
|
sawine@13
|
179 |
if (i == 2) action[1](delta[0]);
|
sawine@13
|
180 |
}
|
sawine@13
|
181 |
}
|
sawine@13
|
182 |
}
|
sawine@13
|
183 |
this.lastPos = pos;
|
sawine@14
|
184 |
|
sawine@14
|
185 |
if (this.wheelDelta != 0)
|
sawine@14
|
186 |
{
|
sawine@14
|
187 |
var delta = normaliseWheelDelta(this.wheelDelta);
|
sawine@14
|
188 |
var action = this.actionMap["wheel"];
|
sawine@14
|
189 |
if (delta > 0 && action) action(delta);
|
sawine@14
|
190 |
else if (delta < 0 && action) action(delta);
|
sawine@14
|
191 |
this.wheelDelta = 0;
|
sawine@14
|
192 |
}
|
sawine@14
|
193 |
|
sawine@13
|
194 |
}
|
sawine@13
|
195 |
|
sawine@14
|
196 |
function normaliseMoveDelta(delta)
|
sawine@13
|
197 |
{
|
sawine@13
|
198 |
var width = renderer.context.canvas.width;
|
sawine@13
|
199 |
var height = renderer.context.canvas.height;
|
sawine@13
|
200 |
return [delta[0] / width, delta[1] / height];
|
sawine@13
|
201 |
}
|
sawine@13
|
202 |
|
sawine@14
|
203 |
function normaliseWheelDelta(delta)
|
sawine@14
|
204 |
{
|
sawine@14
|
205 |
return delta / 60;
|
sawine@14
|
206 |
}
|
sawine@14
|
207 |
|
sawine@11
|
208 |
function Keyboard(actionMap)
|
sawine@11
|
209 |
{
|
sawine@11
|
210 |
this.actionMap = actionMap;
|
sawine@11
|
211 |
this.pressed = {};
|
sawine@11
|
212 |
}
|
sawine@11
|
213 |
Keyboard.prototype.keyDown = function(event)
|
sawine@11
|
214 |
{
|
sawine@11
|
215 |
this.pressed[event.keyCode] = true;
|
sawine@11
|
216 |
}
|
sawine@11
|
217 |
Keyboard.prototype.keyUp = function(event)
|
sawine@11
|
218 |
{
|
sawine@11
|
219 |
this.pressed[event.keyCode] = false;
|
sawine@11
|
220 |
}
|
sawine@11
|
221 |
Keyboard.prototype.handle = function()
|
sawine@11
|
222 |
{
|
sawine@11
|
223 |
for (key in this.pressed)
|
sawine@11
|
224 |
{
|
sawine@11
|
225 |
if (this.pressed[key])
|
sawine@11
|
226 |
{
|
sawine@11
|
227 |
key = String.fromCharCode(key);
|
sawine@11
|
228 |
if (this.actionMap[key]) this.actionMap[key]();
|
sawine@11
|
229 |
}
|
sawine@11
|
230 |
}
|
sawine@11
|
231 |
}
|
sawine@11
|
232 |
|
sawine@11
|
233 |
function Renderer(camera, context)
|
sawine@11
|
234 |
{
|
sawine@11
|
235 |
this.camera = camera;
|
sawine@4
|
236 |
this.context = context;
|
sawine@4
|
237 |
this.gl = context.gl;
|
sawine@7
|
238 |
this.matrixStack = [];
|
sawine@4
|
239 |
}
|
sawine@8
|
240 |
Renderer.prototype.update = function(scene)
|
sawine@5
|
241 |
{
|
sawine@5
|
242 |
var gl = this.context.gl;
|
sawine@5
|
243 |
var viewport = this.context.viewport;
|
sawine@5
|
244 |
var shader = this.context.shader;
|
sawine@5
|
245 |
var mvMatrix = this.context.mvMatrix;
|
sawine@5
|
246 |
var pMatrix = this.context.pMatrix;
|
sawine@13
|
247 |
var camera = this.camera;
|
sawine@15
|
248 |
camera.update();
|
sawine@5
|
249 |
|
sawine@5
|
250 |
gl.viewport(0, 0, viewport.width, viewport.height);
|
sawine@5
|
251 |
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
|
sawine@17
|
252 |
mat4.perspective(55, viewport.width / viewport.height, 0.1, 100.0, pMatrix);
|
sawine@5
|
253 |
|
sawine@5
|
254 |
mat4.identity(mvMatrix);
|
sawine@16
|
255 |
//mat4.multiply(mvMatrix, camera.rotMatrix);
|
sawine@16
|
256 |
//mat4.multiply(mvMatrix, camera.transMatrix);
|
sawine@16
|
257 |
mat4.rotate(mvMatrix, -camera.pitch, [1, 0, 0]);
|
sawine@16
|
258 |
mat4.rotate(mvMatrix, -camera.yaw, [0, 1, 0]);
|
sawine@17
|
259 |
mat4.translate(mvMatrix, [-camera.x, -camera.y, -camera.z]);
|
sawine@17
|
260 |
//mat4.multiply(mvMatrix, camera.matrix);
|
sawine@16
|
261 |
//mat4.rotate(camera.matrix, -camera.pitch, [1, 0, 0]);
|
sawine@16
|
262 |
//mat4.rotate(camera.matrix, -camera.yaw, [0, 1, 0]);
|
sawine@16
|
263 |
//camera.yaw = camera.pitch = 0;
|
sawine@16
|
264 |
|
sawine@15
|
265 |
|
sawine@17
|
266 |
//this.pushMatrix(mvMatrix);
|
sawine@7
|
267 |
|
sawine@17
|
268 |
//mat4.rotate(mvMatrix, scene.rotation.x, [1, 0, 0]);
|
sawine@17
|
269 |
//mat4.rotate(mvMatrix, scene.rotation.y, [0, 1, 0]);
|
sawine@17
|
270 |
//mat4.rotate(mvMatrix, scene.rotation.z, [0, 0, 1]);
|
sawine@7
|
271 |
|
sawine@5
|
272 |
gl.bindBuffer(gl.ARRAY_BUFFER, scene.positionBuffer);
|
sawine@5
|
273 |
gl.vertexAttribPointer(shader.vertexPosition, scene.positionBuffer.itemSize, gl.FLOAT, false, 0, 0);
|
sawine@5
|
274 |
|
sawine@5
|
275 |
gl.bindBuffer(gl.ARRAY_BUFFER, scene.colourBuffer);
|
sawine@5
|
276 |
gl.vertexAttribPointer(shader.vertexColour, scene.colourBuffer.itemSize, gl.FLOAT, false, 0, 0);
|
sawine@9
|
277 |
|
sawine@9
|
278 |
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, scene.indexBuffer);
|
sawine@17
|
279 |
|
sawine@5
|
280 |
this.context.updateMatrixUniforms();
|
sawine@9
|
281 |
gl.drawElements(gl.TRIANGLES, scene.indexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
|
sawine@9
|
282 |
//gl.drawArrays(gl.TRIANGLE_STRIP, 0, scene.positionBuffer.numItems);
|
sawine@7
|
283 |
|
sawine@17
|
284 |
//mvMatrix = this.popMatrix();
|
sawine@5
|
285 |
|
sawine@5
|
286 |
if (this.next) this.next.draw(scene);
|
sawine@5
|
287 |
}
|
sawine@8
|
288 |
Renderer.prototype.pushMatrix = function(matrix)
|
sawine@7
|
289 |
{
|
sawine@7
|
290 |
var copy = mat4.create();
|
sawine@7
|
291 |
mat4.set(matrix, copy);
|
sawine@7
|
292 |
this.matrixStack.push(copy);
|
sawine@7
|
293 |
}
|
sawine@8
|
294 |
Renderer.prototype.popMatrix = function()
|
sawine@7
|
295 |
{
|
sawine@7
|
296 |
if (this.matrixStack.length > 0) return this.matrixStack.pop();
|
sawine@7
|
297 |
}
|
sawine@5
|
298 |
|
sawine@5
|
299 |
function Machine(scene)
|
sawine@4
|
300 |
{
|
sawine@5
|
301 |
this.scene = scene;
|
sawine@8
|
302 |
this.lastUpdate = 0;
|
sawine@5
|
303 |
}
|
sawine@8
|
304 |
Machine.prototype.update = function(time)
|
sawine@5
|
305 |
{
|
sawine@8
|
306 |
if (this.lastUpdate != 0)
|
sawine@8
|
307 |
{
|
sawine@9
|
308 |
var diff = time - this.lastUpdate;
|
sawine@8
|
309 |
|
sawine@8
|
310 |
}
|
sawine@8
|
311 |
this.lastUpdate = time;
|
sawine@4
|
312 |
}
|
sawine@4
|
313 |
|
sawine@2
|
314 |
function Context(canvas)
|
sawine@2
|
315 |
{
|
sawine@3
|
316 |
this.canvas = canvas;
|
sawine@2
|
317 |
try
|
sawine@2
|
318 |
{
|
sawine@2
|
319 |
this.gl = canvas.getContext("experimental-webgl");
|
sawine@2
|
320 |
this.viewport = {'width': canvas.width,
|
sawine@2
|
321 |
'height': canvas.height};
|
sawine@2
|
322 |
}
|
sawine@2
|
323 |
catch(e)
|
sawine@2
|
324 |
{
|
sawine@2
|
325 |
alert(e);
|
sawine@2
|
326 |
}
|
sawine@2
|
327 |
if (!this.gl) alert("Failed: WebGL init.");
|
sawine@2
|
328 |
this.mvMatrix = mat4.create();
|
sawine@2
|
329 |
this.pMatrix = mat4.create();
|
sawine@10
|
330 |
this.shader = new Shader(this);
|
sawine@2
|
331 |
}
|
sawine@2
|
332 |
Context.prototype.updateMatrixUniforms = function()
|
sawine@2
|
333 |
{
|
sawine@2
|
334 |
var gl = this.gl;
|
sawine@2
|
335 |
var program = this.shader;
|
sawine@2
|
336 |
var pMatrix = this.pMatrix;
|
sawine@2
|
337 |
var mvMatrix = this.mvMatrix;
|
sawine@2
|
338 |
gl.uniformMatrix4fv(program.pMatrixUniform, false, pMatrix);
|
sawine@2
|
339 |
gl.uniformMatrix4fv(program.mvMatrixUniform, false, mvMatrix);
|
sawine@2
|
340 |
}
|
sawine@10
|
341 |
Context.prototype.expand = function()
|
sawine@10
|
342 |
{
|
sawine@10
|
343 |
var width = window.innerWidth;
|
sawine@10
|
344 |
var height = window.innerHeight;
|
sawine@10
|
345 |
this.canvas.width = width;
|
sawine@10
|
346 |
this.canvas.height = height;
|
sawine@10
|
347 |
this.viewport.width = width;
|
sawine@10
|
348 |
this.viewport.height = height;
|
sawine@10
|
349 |
}
|
sawine@10
|
350 |
|
sawine@2
|
351 |
function Shader(context)
|
sawine@2
|
352 |
{
|
sawine@2
|
353 |
var gl = context.gl;
|
sawine@9
|
354 |
var fragment = loadShader(gl, "fragment-shader");
|
sawine@9
|
355 |
var vertex = loadShader(gl, "vertex-shader");
|
sawine@2
|
356 |
this.program = gl.createProgram();
|
sawine@2
|
357 |
gl.attachShader(this.program, vertex);
|
sawine@2
|
358 |
gl.attachShader(this.program, fragment);
|
sawine@2
|
359 |
gl.linkProgram(this.program);
|
sawine@2
|
360 |
|
sawine@2
|
361 |
if (!gl.getProgramParameter(this.program, gl.LINK_STATUS))
|
sawine@2
|
362 |
{
|
sawine@2
|
363 |
alert("Failed: Shader init.");
|
sawine@2
|
364 |
}
|
sawine@2
|
365 |
|
sawine@2
|
366 |
gl.useProgram(this.program);
|
sawine@2
|
367 |
this.vertexPosition = gl.getAttribLocation(this.program, "aVertexPosition");
|
sawine@2
|
368 |
gl.enableVertexAttribArray(this.vertexPosition);
|
sawine@4
|
369 |
|
sawine@4
|
370 |
this.vertexColour = gl.getAttribLocation(this.program, "aVertexColour");
|
sawine@4
|
371 |
gl.enableVertexAttribArray(this.vertexColour);
|
sawine@4
|
372 |
|
sawine@2
|
373 |
this.pMatrixUniform = gl.getUniformLocation(this.program, "uPMatrix");
|
sawine@2
|
374 |
this.mvMatrixUniform = gl.getUniformLocation(this.program, "uMVMatrix");
|
sawine@2
|
375 |
|
sawine@9
|
376 |
function loadShader(gl, id)
|
sawine@2
|
377 |
{
|
sawine@2
|
378 |
var script = document.getElementById(id);
|
sawine@2
|
379 |
if (!script) return null;
|
sawine@2
|
380 |
|
sawine@2
|
381 |
var str = "";
|
sawine@2
|
382 |
var child = script.firstChild;
|
sawine@2
|
383 |
while (child)
|
sawine@2
|
384 |
{
|
sawine@2
|
385 |
if (child.nodeType == 3) str += child.textContent;
|
sawine@2
|
386 |
child = child.nextSibling;
|
sawine@2
|
387 |
}
|
sawine@2
|
388 |
|
sawine@2
|
389 |
var shader;
|
sawine@2
|
390 |
var common = "x-shader/x-";
|
sawine@2
|
391 |
if (script.type == common + "fragment") shader = gl.createShader(gl.FRAGMENT_SHADER);
|
sawine@2
|
392 |
else if (script.type == common + "vertex") shader = gl.createShader(gl.VERTEX_SHADER);
|
sawine@2
|
393 |
else return null;
|
sawine@2
|
394 |
|
sawine@2
|
395 |
gl.shaderSource(shader, str);
|
sawine@2
|
396 |
gl.compileShader(shader);
|
sawine@2
|
397 |
|
sawine@2
|
398 |
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
|
sawine@2
|
399 |
{
|
sawine@2
|
400 |
alert(gl.getShaderInfoLog(shader));
|
sawine@2
|
401 |
return null;
|
sawine@2
|
402 |
}
|
sawine@2
|
403 |
|
sawine@2
|
404 |
return shader;
|
sawine@2
|
405 |
}
|
sawine@2
|
406 |
}
|
sawine@2
|
407 |
|
sawine@2
|
408 |
|
sawine@7
|
409 |
function Cube(size, context)
|
sawine@2
|
410 |
{
|
sawine@2
|
411 |
var gl = context.gl;
|
sawine@2
|
412 |
this.size = size || 1;
|
sawine@10
|
413 |
this.rotation = {'x': 0.0, 'y': 0.0, 'z': 0.0};
|
sawine@4
|
414 |
|
sawine@4
|
415 |
this.positionBuffer = gl.createBuffer();
|
sawine@4
|
416 |
gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer);
|
sawine@9
|
417 |
var vertices = [
|
sawine@9
|
418 |
// Front face
|
sawine@9
|
419 |
-1.0, -1.0, 1.0,
|
sawine@9
|
420 |
1.0, -1.0, 1.0,
|
sawine@9
|
421 |
1.0, 1.0, 1.0,
|
sawine@9
|
422 |
-1.0, 1.0, 1.0,
|
sawine@9
|
423 |
|
sawine@9
|
424 |
// Back face
|
sawine@9
|
425 |
-1.0, -1.0, -1.0,
|
sawine@9
|
426 |
-1.0, 1.0, -1.0,
|
sawine@9
|
427 |
1.0, 1.0, -1.0,
|
sawine@9
|
428 |
1.0, -1.0, -1.0,
|
sawine@9
|
429 |
|
sawine@9
|
430 |
// Top face
|
sawine@9
|
431 |
-1.0, 1.0, -1.0,
|
sawine@9
|
432 |
-1.0, 1.0, 1.0,
|
sawine@9
|
433 |
1.0, 1.0, 1.0,
|
sawine@9
|
434 |
1.0, 1.0, -1.0,
|
sawine@9
|
435 |
|
sawine@9
|
436 |
// Bottom face
|
sawine@9
|
437 |
-1.0, -1.0, -1.0,
|
sawine@9
|
438 |
1.0, -1.0, -1.0,
|
sawine@9
|
439 |
1.0, -1.0, 1.0,
|
sawine@9
|
440 |
-1.0, -1.0, 1.0,
|
sawine@9
|
441 |
|
sawine@9
|
442 |
// Right face
|
sawine@9
|
443 |
1.0, -1.0, -1.0,
|
sawine@9
|
444 |
1.0, 1.0, -1.0,
|
sawine@9
|
445 |
1.0, 1.0, 1.0,
|
sawine@9
|
446 |
1.0, -1.0, 1.0,
|
sawine@9
|
447 |
|
sawine@9
|
448 |
// Left face
|
sawine@9
|
449 |
-1.0, -1.0, -1.0,
|
sawine@9
|
450 |
-1.0, -1.0, 1.0,
|
sawine@9
|
451 |
-1.0, 1.0, 1.0,
|
sawine@9
|
452 |
-1.0, 1.0, -1.0];
|
sawine@2
|
453 |
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
|
sawine@4
|
454 |
this.positionBuffer.itemSize = 3;
|
sawine@9
|
455 |
this.positionBuffer.numItems = 24;
|
sawine@4
|
456 |
|
sawine@4
|
457 |
this.colourBuffer = gl.createBuffer();
|
sawine@4
|
458 |
gl.bindBuffer(gl.ARRAY_BUFFER, this.colourBuffer);
|
sawine@9
|
459 |
var alpha = 1.0;
|
sawine@9
|
460 |
var colours = [[1.0, 0.0, 0.0, alpha],
|
sawine@9
|
461 |
[0.0, 1.0, 0.0, alpha],
|
sawine@9
|
462 |
[0.0, 0.0, 1.0, alpha],
|
sawine@9
|
463 |
[1.0, 0.0, 1.0, alpha],
|
sawine@9
|
464 |
[1.0, 1.0, 0.0, alpha],
|
sawine@9
|
465 |
[0.0, 1.0, 1.0, alpha]];
|
sawine@9
|
466 |
var unpackedColours = [];
|
sawine@9
|
467 |
for (var i in colours)
|
sawine@4
|
468 |
{
|
sawine@9
|
469 |
var colour = colours[i];
|
sawine@9
|
470 |
for (var j = 0; j < 4; j++)
|
sawine@9
|
471 |
{
|
sawine@9
|
472 |
unpackedColours = unpackedColours.concat(colour);
|
sawine@9
|
473 |
}
|
sawine@9
|
474 |
//colours = colours.concat([0.5, 0.5, 1.0, 1.0]);
|
sawine@4
|
475 |
}
|
sawine@9
|
476 |
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(unpackedColours), gl.STATIC_DRAW);
|
sawine@4
|
477 |
this.colourBuffer.itemSize = 4;
|
sawine@9
|
478 |
this.colourBuffer.numItems = 24;
|
sawine@9
|
479 |
|
sawine@9
|
480 |
this.indexBuffer = gl.createBuffer();
|
sawine@9
|
481 |
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
|
sawine@9
|
482 |
var indices = [0, 1, 2, 0, 2, 3,
|
sawine@9
|
483 |
4, 5, 6, 4, 6, 7,
|
sawine@9
|
484 |
8, 9, 10, 8, 10, 11,
|
sawine@9
|
485 |
12, 13, 14, 12, 14, 15,
|
sawine@9
|
486 |
16, 17, 18, 16, 18, 19,
|
sawine@9
|
487 |
20, 21, 22, 20, 22, 23];
|
sawine@9
|
488 |
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
|
sawine@9
|
489 |
this.indexBuffer.itemSize = 1;
|
sawine@9
|
490 |
this.indexBuffer.numItems = 36;
|
sawine@13
|
491 |
}
|
sawine@13
|
492 |
|
sawine@13
|
493 |
function read(file, handler)
|
sawine@13
|
494 |
{
|
sawine@13
|
495 |
var request = new XMLHttpRequest();
|
sawine@13
|
496 |
request.open("GET", file);
|
sawine@13
|
497 |
request.onreadystatechange = function() {
|
sawine@13
|
498 |
alert(request.readyState);
|
sawine@13
|
499 |
if (request.readyState == 4) {
|
sawine@13
|
500 |
handler(request.responseText);
|
sawine@13
|
501 |
}
|
sawine@13
|
502 |
}
|
sawine@13
|
503 |
request.send();
|
sawine@13
|
504 |
}
|
sawine@13
|
505 |
|
sawine@13
|
506 |
// event handler
|
sawine@13
|
507 |
function expandContext()
|
sawine@13
|
508 |
{
|
sawine@13
|
509 |
renderer.context.expand();
|
sawine@13
|
510 |
}
|
sawine@13
|
511 |
|
sawine@13
|
512 |
function moveCameraLeft()
|
sawine@13
|
513 |
{
|
sawine@13
|
514 |
camera.moveLeft();
|
sawine@13
|
515 |
}
|
sawine@13
|
516 |
|
sawine@13
|
517 |
function moveCameraRight()
|
sawine@13
|
518 |
{
|
sawine@13
|
519 |
camera.moveRight();
|
sawine@13
|
520 |
}
|
sawine@13
|
521 |
|
sawine@13
|
522 |
function moveCameraUp()
|
sawine@13
|
523 |
{
|
sawine@13
|
524 |
camera.moveUp();
|
sawine@13
|
525 |
}
|
sawine@13
|
526 |
|
sawine@13
|
527 |
function moveCameraDown()
|
sawine@13
|
528 |
{
|
sawine@13
|
529 |
camera.moveDown();
|
sawine@13
|
530 |
}
|
sawine@13
|
531 |
|
sawine@14
|
532 |
function zoomCamera(delta)
|
sawine@14
|
533 |
{
|
sawine@14
|
534 |
camera.zoom(delta);
|
sawine@14
|
535 |
}
|
sawine@14
|
536 |
|
sawine@13
|
537 |
function pitchCamera(delta)
|
sawine@13
|
538 |
{
|
sawine@13
|
539 |
camera.changePitch(delta);
|
sawine@13
|
540 |
}
|
sawine@13
|
541 |
|
sawine@13
|
542 |
function yawCamera(delta)
|
sawine@13
|
543 |
{
|
sawine@13
|
544 |
camera.changeYaw(delta);
|
sawine@13
|
545 |
}
|
sawine@13
|
546 |
|
sawine@13
|
547 |
function handleKeyDown(event)
|
sawine@13
|
548 |
{
|
sawine@13
|
549 |
controller.keyboard.keyDown(event);
|
sawine@13
|
550 |
}
|
sawine@13
|
551 |
|
sawine@13
|
552 |
function handleKeyUp(event)
|
sawine@13
|
553 |
{
|
sawine@13
|
554 |
controller.keyboard.keyUp(event);
|
sawine@13
|
555 |
}
|
sawine@13
|
556 |
|
sawine@13
|
557 |
function handleMouseDown(event)
|
sawine@13
|
558 |
{
|
sawine@13
|
559 |
controller.mouse.buttonDown(event);
|
sawine@13
|
560 |
}
|
sawine@13
|
561 |
|
sawine@13
|
562 |
function handleMouseUp(event)
|
sawine@13
|
563 |
{
|
sawine@13
|
564 |
controller.mouse.buttonUp(event);
|
sawine@13
|
565 |
}
|
sawine@13
|
566 |
|
sawine@13
|
567 |
function handleMouseMove(event)
|
sawine@13
|
568 |
{
|
sawine@13
|
569 |
controller.mouse.move(event);
|
sawine@13
|
570 |
}
|
sawine@14
|
571 |
|
sawine@14
|
572 |
function handleMouseWheel(event)
|
sawine@14
|
573 |
{
|
sawine@14
|
574 |
controller.mouse.moveWheel(event);
|
sawine@14
|
575 |
}
|