sawine@2
|
1 |
var machine;
|
sawine@8
|
2 |
var renderer;
|
sawine@11
|
3 |
var controller;
|
sawine@11
|
4 |
var camera;
|
sawine@19
|
5 |
var cameraSpeed = {"h": 0.1, "v": 0.1, "zoom": 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@24
|
13 |
include("scripts/cube.js");
|
sawine@24
|
14 |
include("scripts/renderer.js");
|
sawine@2
|
15 |
|
sawine@2
|
16 |
function main()
|
sawine@2
|
17 |
{
|
sawine@2
|
18 |
var canvas = document.getElementById("machine");
|
sawine@2
|
19 |
var context = new Context(canvas);
|
sawine@10
|
20 |
context.expand();
|
sawine@2
|
21 |
var gl = context.gl;
|
sawine@7
|
22 |
var object = new Cube(1, context);
|
sawine@2
|
23 |
gl.clearColor(0.0, 0.0, 0.0, 1.0);
|
sawine@2
|
24 |
gl.enable(gl.DEPTH_TEST);
|
sawine@11
|
25 |
machine = new Machine(object);
|
sawine@22
|
26 |
camera = new Camera(cameraSpeed, [0, 5, 20]);
|
sawine@11
|
27 |
renderer = new Renderer(camera, context);
|
sawine@13
|
28 |
controller = new Controller(keyActionMap, mouseActionMap, camera, machine, renderer);
|
sawine@6
|
29 |
update();
|
sawine@13
|
30 |
window.onresize = expandContext;
|
sawine@13
|
31 |
document.onkeydown = handleKeyDown;
|
sawine@13
|
32 |
document.onkeyup = handleKeyUp;
|
sawine@13
|
33 |
canvas.onmousedown = handleMouseDown;
|
sawine@13
|
34 |
document.onmouseup = handleMouseUp;
|
sawine@13
|
35 |
document.onmousemove = handleMouseMove;
|
sawine@14
|
36 |
document.onmousewheel = handleMouseWheel;
|
sawine@13
|
37 |
//read("config/camera", configureCamera);
|
sawine@13
|
38 |
}
|
sawine@13
|
39 |
|
sawine@13
|
40 |
function configureCamera(config) {
|
sawine@13
|
41 |
alert(config);
|
sawine@6
|
42 |
}
|
sawine@6
|
43 |
|
sawine@6
|
44 |
function update()
|
sawine@6
|
45 |
{
|
sawine@7
|
46 |
requestAnimFrame(update);
|
sawine@11
|
47 |
controller.update();
|
sawine@10
|
48 |
machine.scene.rotation.x += (random(0, 2) - 2) * 0.001;
|
sawine@10
|
49 |
machine.scene.rotation.y += (random(0, 3) - 1) * 0.001;
|
sawine@10
|
50 |
machine.scene.rotation.z += (random(0, 2) - 1) * 0.001;
|
sawine@8
|
51 |
machine.update(new Date().getTime());
|
sawine@8
|
52 |
renderer.update(machine.scene);
|
sawine@2
|
53 |
}
|
sawine@2
|
54 |
|
sawine@9
|
55 |
function random(min, max)
|
sawine@9
|
56 |
{
|
sawine@10
|
57 |
return (min + Math.random() * (max - min));
|
sawine@9
|
58 |
}
|
sawine@9
|
59 |
|
sawine@22
|
60 |
function normalize(vectors)
|
sawine@22
|
61 |
{
|
sawine@22
|
62 |
for (var v in vectors) vec3.normalize(v);
|
sawine@22
|
63 |
}
|
sawine@22
|
64 |
|
sawine@22
|
65 |
function Camera(speed, pos, up, right, target)
|
sawine@4
|
66 |
{
|
sawine@12
|
67 |
this.speed = speed;
|
sawine@22
|
68 |
this.pos = vec3.create(pos || [0, 0, 7]);
|
sawine@22
|
69 |
this.up = vec3.create(up || [0, 1, 0]);
|
sawine@22
|
70 |
this.right = vec3.create(right || [1, 0, 0]);
|
sawine@22
|
71 |
this.target = vec3.create(target || [0, 0, -1]);
|
sawine@22
|
72 |
normalize([this.up, this.right, this.target]);
|
sawine@16
|
73 |
this.matrix = mat4.create();
|
sawine@11
|
74 |
}
|
sawine@11
|
75 |
Camera.prototype.moveLeft = function()
|
sawine@11
|
76 |
{
|
sawine@19
|
77 |
var dir = vec3.create(this.right);
|
sawine@19
|
78 |
vec3.scale(dir, -this.speed.h);
|
sawine@19
|
79 |
vec3.add(this.pos, dir);
|
sawine@11
|
80 |
}
|
sawine@11
|
81 |
Camera.prototype.moveRight = function()
|
sawine@11
|
82 |
{
|
sawine@19
|
83 |
var dir = vec3.create(this.right);
|
sawine@19
|
84 |
vec3.scale(dir, this.speed.h);
|
sawine@19
|
85 |
vec3.add(this.pos, dir);
|
sawine@11
|
86 |
}
|
sawine@11
|
87 |
Camera.prototype.moveUp = function()
|
sawine@19
|
88 |
{
|
sawine@19
|
89 |
var dir = vec3.create(this.up);
|
sawine@19
|
90 |
vec3.scale(dir, this.speed.v);
|
sawine@19
|
91 |
vec3.add(this.pos, dir);
|
sawine@11
|
92 |
}
|
sawine@11
|
93 |
Camera.prototype.moveDown = function()
|
sawine@19
|
94 |
{
|
sawine@19
|
95 |
var dir = vec3.create(this.up);
|
sawine@19
|
96 |
vec3.scale(dir, -this.speed.v);
|
sawine@19
|
97 |
vec3.add(this.pos, dir);
|
sawine@13
|
98 |
}
|
sawine@14
|
99 |
Camera.prototype.zoom = function(delta)
|
sawine@13
|
100 |
{
|
sawine@19
|
101 |
var dir = vec3.create(this.target);
|
sawine@20
|
102 |
vec3.scale(dir, delta * this.speed.zoom);
|
sawine@19
|
103 |
vec3.add(this.pos, dir);
|
sawine@13
|
104 |
}
|
sawine@19
|
105 |
Camera.prototype.pitch = function(delta)
|
sawine@13
|
106 |
{
|
sawine@21
|
107 |
delta *= -this.speed.pitch;
|
sawine@21
|
108 |
vec3.scale(this.target, Math.cos(delta));
|
sawine@21
|
109 |
vec3.scale(this.up, Math.sin(delta));
|
sawine@21
|
110 |
vec3.add(this.target, this.up);
|
sawine@21
|
111 |
vec3.normalize(this.target);
|
sawine@21
|
112 |
vec3.cross(this.target, this.right, this.up);
|
sawine@21
|
113 |
vec3.scale(this.up, -1);
|
sawine@13
|
114 |
}
|
sawine@19
|
115 |
Camera.prototype.yaw = function(delta)
|
sawine@13
|
116 |
{
|
sawine@21
|
117 |
delta *= -this.speed.yaw;
|
sawine@21
|
118 |
vec3.scale(this.right, Math.cos(delta));
|
sawine@21
|
119 |
vec3.scale(this.target, Math.sin(delta));
|
sawine@21
|
120 |
vec3.add(this.right, this.target);
|
sawine@21
|
121 |
vec3.normalize(this.right);
|
sawine@21
|
122 |
vec3.cross(this.right, this.up, this.target);
|
sawine@21
|
123 |
vec3.scale(this.target, -1);
|
sawine@19
|
124 |
}
|
sawine@19
|
125 |
Camera.prototype.roll = function(delta)
|
sawine@19
|
126 |
{
|
sawine@19
|
127 |
|
sawine@12
|
128 |
}
|
sawine@15
|
129 |
Camera.prototype.update = function()
|
sawine@15
|
130 |
{
|
sawine@19
|
131 |
var x = vec3.dot(this.right, this.pos);
|
sawine@19
|
132 |
var y = vec3.dot(this.up, this.pos);
|
sawine@19
|
133 |
var z = vec3.dot(this.target, this.pos);
|
sawine@19
|
134 |
this.matrix = mat4.create([this.right[0], this.up[0], -this.target[0], 0,
|
sawine@19
|
135 |
this.right[1], this.up[1], -this.target[1], 0,
|
sawine@19
|
136 |
this.right[2], this.up[2], -this.target[2], 0,
|
sawine@22
|
137 |
-x, -y, z, 1]);
|
sawine@15
|
138 |
}
|
sawine@12
|
139 |
|
sawine@13
|
140 |
function Controller(keyActionMap, mouseActionMap, camera, machine, renderer)
|
sawine@11
|
141 |
{
|
sawine@13
|
142 |
this.keyboard = new Keyboard(keyActionMap);
|
sawine@13
|
143 |
this.mouse = new Mouse(mouseActionMap);
|
sawine@11
|
144 |
|
sawine@11
|
145 |
}
|
sawine@11
|
146 |
Controller.prototype.update = function()
|
sawine@11
|
147 |
{
|
sawine@11
|
148 |
this.keyboard.handle();
|
sawine@13
|
149 |
this.mouse.handle();
|
sawine@11
|
150 |
}
|
sawine@11
|
151 |
|
sawine@13
|
152 |
function Mouse(actionMap)
|
sawine@11
|
153 |
{
|
sawine@13
|
154 |
this.actionMap = actionMap;
|
sawine@14
|
155 |
this.pressed = [false, false, false];
|
sawine@14
|
156 |
this.wheelDelta = 0;
|
sawine@11
|
157 |
}
|
sawine@13
|
158 |
Mouse.prototype.buttonDown = function(event)
|
sawine@13
|
159 |
{
|
sawine@13
|
160 |
this.pressed[event.which-1] = true;
|
sawine@13
|
161 |
}
|
sawine@13
|
162 |
Mouse.prototype.buttonUp = function(event)
|
sawine@13
|
163 |
{
|
sawine@13
|
164 |
this.pressed[event.which-1] = false;
|
sawine@13
|
165 |
}
|
sawine@13
|
166 |
Mouse.prototype.move = function(event)
|
sawine@13
|
167 |
{
|
sawine@14
|
168 |
this.currentPos = [event.clientX, event.clientY];
|
sawine@14
|
169 |
}
|
sawine@14
|
170 |
Mouse.prototype.moveWheel = function(event)
|
sawine@14
|
171 |
{
|
sawine@14
|
172 |
this.wheelDelta += event.wheelDelta;
|
sawine@14
|
173 |
}
|
sawine@14
|
174 |
Mouse.prototype.handle = function()
|
sawine@14
|
175 |
{
|
sawine@14
|
176 |
var pos = this.currentPos;
|
sawine@14
|
177 |
if (pos && this.lastPos)
|
sawine@13
|
178 |
{
|
sawine@13
|
179 |
var delta = [pos[0] - this.lastPos[0], pos[1] - this.lastPos[1]];
|
sawine@14
|
180 |
delta = normaliseMoveDelta(delta);
|
sawine@13
|
181 |
var action = this.actionMap["pitch"];
|
sawine@13
|
182 |
if (delta[1] != 0 && action)
|
sawine@13
|
183 |
{
|
sawine@13
|
184 |
for (var i = 0; i < 3; i++)
|
sawine@13
|
185 |
{
|
sawine@13
|
186 |
if (this.pressed[i] != action[0][i]) break;
|
sawine@13
|
187 |
if (i == 2) action[1](delta[1]);
|
sawine@13
|
188 |
}
|
sawine@13
|
189 |
}
|
sawine@13
|
190 |
action = this.actionMap["yaw"];
|
sawine@13
|
191 |
if (delta[0] != 0 && action)
|
sawine@13
|
192 |
{
|
sawine@13
|
193 |
for (var i = 0; i < 3; i++)
|
sawine@13
|
194 |
{
|
sawine@13
|
195 |
if (this.pressed[i] != action[0][i]) break;
|
sawine@13
|
196 |
if (i == 2) action[1](delta[0]);
|
sawine@13
|
197 |
}
|
sawine@13
|
198 |
}
|
sawine@13
|
199 |
}
|
sawine@13
|
200 |
this.lastPos = pos;
|
sawine@14
|
201 |
|
sawine@14
|
202 |
if (this.wheelDelta != 0)
|
sawine@14
|
203 |
{
|
sawine@14
|
204 |
var delta = normaliseWheelDelta(this.wheelDelta);
|
sawine@14
|
205 |
var action = this.actionMap["wheel"];
|
sawine@21
|
206 |
if (delta != 0 && action) action(delta);
|
sawine@14
|
207 |
this.wheelDelta = 0;
|
sawine@14
|
208 |
}
|
sawine@14
|
209 |
|
sawine@13
|
210 |
}
|
sawine@13
|
211 |
|
sawine@14
|
212 |
function normaliseMoveDelta(delta)
|
sawine@13
|
213 |
{
|
sawine@13
|
214 |
var width = renderer.context.canvas.width;
|
sawine@13
|
215 |
var height = renderer.context.canvas.height;
|
sawine@13
|
216 |
return [delta[0] / width, delta[1] / height];
|
sawine@13
|
217 |
}
|
sawine@13
|
218 |
|
sawine@14
|
219 |
function normaliseWheelDelta(delta)
|
sawine@14
|
220 |
{
|
sawine@14
|
221 |
return delta / 60;
|
sawine@14
|
222 |
}
|
sawine@14
|
223 |
|
sawine@11
|
224 |
function Keyboard(actionMap)
|
sawine@11
|
225 |
{
|
sawine@11
|
226 |
this.actionMap = actionMap;
|
sawine@11
|
227 |
this.pressed = {};
|
sawine@11
|
228 |
}
|
sawine@11
|
229 |
Keyboard.prototype.keyDown = function(event)
|
sawine@11
|
230 |
{
|
sawine@11
|
231 |
this.pressed[event.keyCode] = true;
|
sawine@11
|
232 |
}
|
sawine@11
|
233 |
Keyboard.prototype.keyUp = function(event)
|
sawine@11
|
234 |
{
|
sawine@11
|
235 |
this.pressed[event.keyCode] = false;
|
sawine@11
|
236 |
}
|
sawine@11
|
237 |
Keyboard.prototype.handle = function()
|
sawine@11
|
238 |
{
|
sawine@11
|
239 |
for (key in this.pressed)
|
sawine@11
|
240 |
{
|
sawine@11
|
241 |
if (this.pressed[key])
|
sawine@11
|
242 |
{
|
sawine@11
|
243 |
key = String.fromCharCode(key);
|
sawine@11
|
244 |
if (this.actionMap[key]) this.actionMap[key]();
|
sawine@11
|
245 |
}
|
sawine@11
|
246 |
}
|
sawine@11
|
247 |
}
|
sawine@11
|
248 |
|
sawine@5
|
249 |
|
sawine@5
|
250 |
|
sawine@5
|
251 |
function Machine(scene)
|
sawine@4
|
252 |
{
|
sawine@5
|
253 |
this.scene = scene;
|
sawine@8
|
254 |
this.lastUpdate = 0;
|
sawine@5
|
255 |
}
|
sawine@8
|
256 |
Machine.prototype.update = function(time)
|
sawine@5
|
257 |
{
|
sawine@8
|
258 |
if (this.lastUpdate != 0)
|
sawine@8
|
259 |
{
|
sawine@9
|
260 |
var diff = time - this.lastUpdate;
|
sawine@8
|
261 |
|
sawine@8
|
262 |
}
|
sawine@8
|
263 |
this.lastUpdate = time;
|
sawine@4
|
264 |
}
|
sawine@4
|
265 |
|
sawine@10
|
266 |
|
sawine@2
|
267 |
|
sawine@2
|
268 |
|
sawine@4
|
269 |
|
sawine@13
|
270 |
|
sawine@13
|
271 |
function read(file, handler)
|
sawine@13
|
272 |
{
|
sawine@13
|
273 |
var request = new XMLHttpRequest();
|
sawine@13
|
274 |
request.open("GET", file);
|
sawine@13
|
275 |
request.onreadystatechange = function() {
|
sawine@13
|
276 |
alert(request.readyState);
|
sawine@13
|
277 |
if (request.readyState == 4) {
|
sawine@13
|
278 |
handler(request.responseText);
|
sawine@13
|
279 |
}
|
sawine@13
|
280 |
}
|
sawine@13
|
281 |
request.send();
|
sawine@13
|
282 |
}
|
sawine@13
|
283 |
|
sawine@13
|
284 |
// event handler
|
sawine@13
|
285 |
function expandContext()
|
sawine@13
|
286 |
{
|
sawine@13
|
287 |
renderer.context.expand();
|
sawine@13
|
288 |
}
|
sawine@13
|
289 |
|
sawine@13
|
290 |
function moveCameraLeft()
|
sawine@13
|
291 |
{
|
sawine@13
|
292 |
camera.moveLeft();
|
sawine@13
|
293 |
}
|
sawine@13
|
294 |
|
sawine@13
|
295 |
function moveCameraRight()
|
sawine@13
|
296 |
{
|
sawine@13
|
297 |
camera.moveRight();
|
sawine@13
|
298 |
}
|
sawine@13
|
299 |
|
sawine@13
|
300 |
function moveCameraUp()
|
sawine@13
|
301 |
{
|
sawine@13
|
302 |
camera.moveUp();
|
sawine@13
|
303 |
}
|
sawine@13
|
304 |
|
sawine@13
|
305 |
function moveCameraDown()
|
sawine@13
|
306 |
{
|
sawine@13
|
307 |
camera.moveDown();
|
sawine@13
|
308 |
}
|
sawine@13
|
309 |
|
sawine@14
|
310 |
function zoomCamera(delta)
|
sawine@14
|
311 |
{
|
sawine@14
|
312 |
camera.zoom(delta);
|
sawine@14
|
313 |
}
|
sawine@14
|
314 |
|
sawine@13
|
315 |
function pitchCamera(delta)
|
sawine@13
|
316 |
{
|
sawine@19
|
317 |
camera.pitch(delta);
|
sawine@13
|
318 |
}
|
sawine@13
|
319 |
|
sawine@13
|
320 |
function yawCamera(delta)
|
sawine@13
|
321 |
{
|
sawine@19
|
322 |
camera.yaw(delta);
|
sawine@13
|
323 |
}
|
sawine@13
|
324 |
|
sawine@13
|
325 |
function handleKeyDown(event)
|
sawine@13
|
326 |
{
|
sawine@13
|
327 |
controller.keyboard.keyDown(event);
|
sawine@13
|
328 |
}
|
sawine@13
|
329 |
|
sawine@13
|
330 |
function handleKeyUp(event)
|
sawine@13
|
331 |
{
|
sawine@13
|
332 |
controller.keyboard.keyUp(event);
|
sawine@13
|
333 |
}
|
sawine@13
|
334 |
|
sawine@13
|
335 |
function handleMouseDown(event)
|
sawine@13
|
336 |
{
|
sawine@13
|
337 |
controller.mouse.buttonDown(event);
|
sawine@13
|
338 |
}
|
sawine@13
|
339 |
|
sawine@13
|
340 |
function handleMouseUp(event)
|
sawine@13
|
341 |
{
|
sawine@13
|
342 |
controller.mouse.buttonUp(event);
|
sawine@13
|
343 |
}
|
sawine@13
|
344 |
|
sawine@13
|
345 |
function handleMouseMove(event)
|
sawine@13
|
346 |
{
|
sawine@13
|
347 |
controller.mouse.move(event);
|
sawine@13
|
348 |
}
|
sawine@14
|
349 |
|
sawine@14
|
350 |
function handleMouseWheel(event)
|
sawine@14
|
351 |
{
|
sawine@14
|
352 |
controller.mouse.moveWheel(event);
|
sawine@14
|
353 |
}
|