Object camera.
authorEugen Sawin <sawine@me73.com>
Wed, 27 Apr 2011 00:45:37 +0200
changeset 27130cff40c734
parent 26 84a998ac11c0
child 28 9df7034275e8
Object camera.
scripts/camera.js
scripts/machine.js
scripts/renderer.js
     1.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     1.2 +++ b/scripts/camera.js	Wed Apr 27 00:45:37 2011 +0200
     1.3 @@ -0,0 +1,126 @@
     1.4 +function Camera(speed, pos, up, right, target)
     1.5 +{
     1.6 +    this.speed = speed;
     1.7 +    this.pos = vec3.create(pos || [0, 0, 7]);
     1.8 +    this.up = vec3.create([0, 1, 0]);
     1.9 +    this.right = vec3.create([1, 0, 0]);
    1.10 +    this.target = vec3.create([0, 0, -1]);
    1.11 +    normalize([this.up, this.right, this.target]);
    1.12 +    this.matrix = mat4.create();
    1.13 +
    1.14 +    this.pitchUp = vec3.create([0, 1, 0]);
    1.15 +    this.yawUp = vec3.create([0, 1, 0]);
    1.16 +    this.pitchRight = vec3.create([1, 0, 0]);
    1.17 +    this.yawRight = vec3.create([1, 0, 0]);
    1.18 +    this.pitchTarget = vec3.create([0, 0, -1]);
    1.19 +    this.yawTarget = vec3.create([0, 0, -1]);
    1.20 +    this.pitchMatrix = mat4.create();
    1.21 +    this.yawMatrix = mat4.create();
    1.22 +    mat4.identity(this.pitchMatrix);
    1.23 +    mat4.identity(this.yawMatrix);
    1.24 +}
    1.25 +Camera.prototype.moveLeft = function()
    1.26 +{
    1.27 +    var dir = vec3.create(this.right);
    1.28 +    vec3.scale(dir, -this.speed.h);
    1.29 +    vec3.add(this.pos, dir);
    1.30 +}
    1.31 +Camera.prototype.moveRight = function()
    1.32 +{
    1.33 +    var dir = vec3.create(this.right);
    1.34 +    vec3.scale(dir, this.speed.h);
    1.35 +    vec3.add(this.pos, dir);
    1.36 +}
    1.37 +Camera.prototype.moveUp = function()
    1.38 +{  
    1.39 +    var dir = vec3.create(this.up);
    1.40 +    vec3.scale(dir, this.speed.v);
    1.41 +    vec3.add(this.pos, dir);
    1.42 +}
    1.43 +Camera.prototype.moveDown = function()
    1.44 +{ 
    1.45 +    var dir = vec3.create(this.up);
    1.46 +    vec3.scale(dir, -this.speed.v);
    1.47 +    vec3.add(this.pos, dir);
    1.48 +}
    1.49 +Camera.prototype.zoom = function(delta) 
    1.50 +{
    1.51 +    var dir = vec3.create(this.target);
    1.52 +    vec3.scale(dir, delta * this.speed.zoom);
    1.53 +    vec3.add(this.pos, dir); 
    1.54 +}
    1.55 +Camera.prototype.pitch = function(delta)
    1.56 +{
    1.57 +    delta *= -this.speed.pitch;
    1.58 +    vec3.scale(this.pitchTarget, Math.cos(delta));
    1.59 +    vec3.scale(this.pitchUp, Math.sin(delta));
    1.60 +    vec3.add(this.pitchTarget, this.pitchUp);
    1.61 +    vec3.normalize(this.pitchTarget);
    1.62 +    vec3.cross(this.pitchTarget, this.pitchRight, this.pitchUp);
    1.63 +    vec3.scale(this.pitchUp, -1);
    1.64 +}
    1.65 +Camera.prototype.yaw = function(delta)
    1.66 +{
    1.67 +    delta *= -this.speed.yaw;
    1.68 +    vec3.scale(this.yawRight, Math.cos(delta));
    1.69 +    vec3.scale(this.yawTarget, Math.sin(delta));
    1.70 +    vec3.add(this.yawRight, this.yawTarget);
    1.71 +    vec3.normalize(this.yawRight);
    1.72 +    vec3.cross(this.yawRight, this.yawUp, this.yawTarget);
    1.73 +    vec3.scale(this.yawTarget, -1);
    1.74 +}
    1.75 +Camera.prototype.rotate = function(angles)
    1.76 +{
    1.77 +    angles = [angles[0] * -this.speed.pitch, 
    1.78 +	      angles[1] * -this.speed.yaw, 
    1.79 +	      angles[2] * -this.speed.roll];
    1.80 +    vec3.scale(this.target, Math.cos(angles[1]) * Math.sin(angles[0]));
    1.81 +    vec3.scale(this.up, Math.sin(angles[1]));
    1.82 +    vec3.scale(this.right, Math.cos(angles[0]));
    1.83 +    vec3.add(this.right, this.target);
    1.84 +    vec3.add(this.target, this.up);
    1.85 +    
    1.86 +    vec3.normalize(this.target);
    1.87 +    vec3.normalize(this.right);
    1.88 +    vec3.cross(this.target, this.right, this.up);
    1.89 +    vec3.scale(this.up, -1);
    1.90 +    vec3.cross(this.right, this.up, this.target);
    1.91 +    vec3.scale(this.target, -1);
    1.92 +    
    1.93 +}
    1.94 +Camera.prototype.roll = function(delta)
    1.95 +{
    1.96 +    
    1.97 +}
    1.98 +Camera.prototype.update = function()
    1.99 +{
   1.100 +    // vec3.add(this.right, this.pitchRight);
   1.101 +    // vec3.add(this.up, this.pitchUp);
   1.102 +    // vec3.add(this.target, this.pitchTarget);
   1.103 +    // vec3.add(this.right, this.yawRight);
   1.104 +    // vec3.add(this.up, this.yawUp);
   1.105 +    // vec3.add(this.target, this.yawTarget);
   1.106 +    // vec3.normalize(this.right);
   1.107 +    // vec3.normalize(this.up);
   1.108 +    // vec3.normalize(this.target);
   1.109 +    var x = vec3.dot(this.right, this.pos);
   1.110 +    var y = vec3.dot(this.up, this.pos);
   1.111 +    var z = vec3.dot(this.target, this.pos);
   1.112 +    this.matrix = mat4.create([this.right[0], this.up[0], -this.target[0], 0,
   1.113 +     			       this.right[1], this.up[1], -this.target[1], 0,
   1.114 +     			       this.right[2], this.up[2], -this.target[2], 0,
   1.115 +     			       -x, -y, z, 1]);    
   1.116 +    //vec3.cross(this.yawRight, this.pitchRight);
   1.117 +    //vec3.cross(this.yawUp, this.pitchUp);
   1.118 +    //vec3.cross(this.yawTarget, this.pitchTarget);
   1.119 +    this.pitchMatrix = mat4.create([this.pitchRight[0], this.pitchUp[0], -this.pitchTarget[0], 0,
   1.120 +     			       this.pitchRight[1], this.pitchUp[1], -this.pitchTarget[1], 0,
   1.121 +     			       this.pitchRight[2], this.pitchUp[2], -this.pitchTarget[2], 0,
   1.122 +			       0, 0, 0, 1]);
   1.123 +    this.yawMatrix = mat4.create([this.yawRight[0], this.yawUp[0], -this.yawTarget[0], 0,
   1.124 +     			       this.yawRight[1], this.yawUp[1], -this.yawTarget[1], 0,
   1.125 +     			       this.yawRight[2], this.yawUp[2], -this.yawTarget[2], 0,
   1.126 +			       0, 0, 0, 1]);
   1.127 +    mat4.multiply(this.matrix, this.pitchMatrix);
   1.128 +    mat4.multiply(this.matrix, this.yawMatrix);
   1.129 +}
   1.130 \ No newline at end of file
     2.1 --- a/scripts/machine.js	Tue Apr 26 03:23:11 2011 +0200
     2.2 +++ b/scripts/machine.js	Wed Apr 27 00:45:37 2011 +0200
     2.3 @@ -2,16 +2,18 @@
     2.4  var renderer;
     2.5  var controller;
     2.6  var camera;
     2.7 -var cameraSpeed = {"h": 0.1, "v": 0.1, "zoom": 0.5, "pitch": 0.5, "yaw": 0.5};
     2.8 +var cameraSpeed = {"h": 0.1, "v": 0.1, "zoom": 0.5, "pitch": 1.0, "yaw": 1.0, "roll": 1.0};
     2.9  var keyActionMap = {'A': moveCameraLeft,
    2.10  		 'D': moveCameraRight,
    2.11  		 'W': moveCameraUp,
    2.12  		 'S': moveCameraDown};
    2.13  var mouseActionMap = {"pitch": [[true, false, false], pitchCamera],
    2.14  		      "yaw": [[true, false, false], yawCamera],
    2.15 +		      "rotate": [[true, false, false], rotateCamera],
    2.16                        "wheel": zoomCamera};
    2.17  include("scripts/cube.js");
    2.18  include("scripts/renderer.js");
    2.19 +include("scripts/camera.js");
    2.20  
    2.21  function main()
    2.22  {
    2.23 @@ -62,81 +64,6 @@
    2.24      for (var v in vectors) vec3.normalize(v);
    2.25  }
    2.26  
    2.27 -function Camera(speed, pos, up, right, target)
    2.28 -{
    2.29 -    this.speed = speed;
    2.30 -    this.pos = vec3.create(pos || [0, 0, 7]);
    2.31 -    this.up = vec3.create(up || [0, 1, 0]);
    2.32 -    this.right = vec3.create(right || [1, 0, 0]);
    2.33 -    this.target = vec3.create(target || [0, 0, -1]);
    2.34 -    normalize([this.up, this.right, this.target]);
    2.35 -    this.matrix = mat4.create();
    2.36 -}
    2.37 -Camera.prototype.moveLeft = function()
    2.38 -{
    2.39 -    var dir = vec3.create(this.right);
    2.40 -    vec3.scale(dir, -this.speed.h);
    2.41 -    vec3.add(this.pos, dir);
    2.42 -}
    2.43 -Camera.prototype.moveRight = function()
    2.44 -{
    2.45 -    var dir = vec3.create(this.right);
    2.46 -    vec3.scale(dir, this.speed.h);
    2.47 -    vec3.add(this.pos, dir);
    2.48 -}
    2.49 -Camera.prototype.moveUp = function()
    2.50 -{  
    2.51 -    var dir = vec3.create(this.up);
    2.52 -    vec3.scale(dir, this.speed.v);
    2.53 -    vec3.add(this.pos, dir);
    2.54 -}
    2.55 -Camera.prototype.moveDown = function()
    2.56 -{ 
    2.57 -    var dir = vec3.create(this.up);
    2.58 -    vec3.scale(dir, -this.speed.v);
    2.59 -    vec3.add(this.pos, dir);
    2.60 -}
    2.61 -Camera.prototype.zoom = function(delta) 
    2.62 -{
    2.63 -    var dir = vec3.create(this.target);
    2.64 -    vec3.scale(dir, delta * this.speed.zoom);
    2.65 -    vec3.add(this.pos, dir); 
    2.66 -}
    2.67 -Camera.prototype.pitch = function(delta)
    2.68 -{
    2.69 -    delta *= -this.speed.pitch;
    2.70 -    vec3.scale(this.target, Math.cos(delta));
    2.71 -    vec3.scale(this.up, Math.sin(delta));
    2.72 -    vec3.add(this.target, this.up);
    2.73 -    vec3.normalize(this.target);
    2.74 -    vec3.cross(this.target, this.right, this.up);
    2.75 -    vec3.scale(this.up, -1);
    2.76 -}
    2.77 -Camera.prototype.yaw = function(delta)
    2.78 -{
    2.79 -    delta *= -this.speed.yaw;
    2.80 -    vec3.scale(this.right, Math.cos(delta));
    2.81 -    vec3.scale(this.target, Math.sin(delta));
    2.82 -    vec3.add(this.right, this.target);
    2.83 -    vec3.normalize(this.right);
    2.84 -    vec3.cross(this.right, this.up, this.target);
    2.85 -    vec3.scale(this.target, -1);
    2.86 -}
    2.87 -Camera.prototype.roll = function(delta)
    2.88 -{
    2.89 -    
    2.90 -}
    2.91 -Camera.prototype.update = function()
    2.92 -{
    2.93 -    var x = vec3.dot(this.right, this.pos);
    2.94 -    var y = vec3.dot(this.up, this.pos);
    2.95 -    var z = vec3.dot(this.target, this.pos);
    2.96 -    this.matrix = mat4.create([this.right[0], this.up[0], -this.target[0], 0,
    2.97 -			       this.right[1], this.up[1], -this.target[1], 0,
    2.98 -			       this.right[2], this.up[2], -this.target[2], 0,
    2.99 -			       -x, -y, z, 1]);    
   2.100 -}
   2.101 -
   2.102  function Controller(keyActionMap, mouseActionMap, camera, machine, renderer)
   2.103  { 
   2.104      this.keyboard = new Keyboard(keyActionMap);
   2.105 @@ -154,6 +81,7 @@
   2.106      this.actionMap = actionMap;
   2.107      this.pressed = [false, false, false];   
   2.108      this.wheelDelta = 0;
   2.109 +    this.posStack = [];
   2.110  }
   2.111  Mouse.prototype.buttonDown = function(event)
   2.112  {
   2.113 @@ -165,7 +93,8 @@
   2.114  }
   2.115  Mouse.prototype.move = function(event)
   2.116  {
   2.117 -    this.currentPos = [event.clientX, event.clientY];
   2.118 +    this.posStack.push([event.clientX, event.clientY]);
   2.119 +    //this.currentPos = [event.clientX, event.clientY];
   2.120  }
   2.121  Mouse.prototype.moveWheel = function(event)
   2.122  { 
   2.123 @@ -173,47 +102,48 @@
   2.124  }
   2.125  Mouse.prototype.handle = function()
   2.126  {
   2.127 -    var pos = this.currentPos;
   2.128 -    if (pos && this.lastPos)
   2.129 +    while (this.posStack.length > 0)
   2.130      {
   2.131 -	var delta = [pos[0] - this.lastPos[0], pos[1] - this.lastPos[1]];
   2.132 -	delta = normaliseMoveDelta(delta);
   2.133 -	var action = this.actionMap["pitch"];
   2.134 -	if (delta[1] != 0 && action) 
   2.135 +	var pos = this.posStack.pop();
   2.136 +	if (this.lastPos)
   2.137  	{
   2.138 -	    for (var i = 0; i < 3; i++)
   2.139 +	    var delta = [pos[0] - this.lastPos[0], pos[1] - this.lastPos[1], 0];
   2.140 +	    delta = normaliseMoveDelta(delta);
   2.141 +	    var action = this.actionMap["pitch"];
   2.142 +	    if (delta[1] != 0 && action) 
   2.143  	    {
   2.144 -		if (this.pressed[i] != action[0][i]) break;
   2.145 -		if (i == 2) action[1](delta[1]);
   2.146 -	    }
   2.147 -	} 
   2.148 -	action = this.actionMap["yaw"];
   2.149 -	if (delta[0] != 0 && action) 
   2.150 -	{
   2.151 -	    for (var i = 0; i < 3; i++)
   2.152 +		for (var i = 0; i < 3; i++)
   2.153 +		{
   2.154 +		    if (this.pressed[i] != action[0][i]) break;
   2.155 +		    if (i == 2) action[1](delta[1]);
   2.156 +		}
   2.157 +	    } 
   2.158 +	    action = this.actionMap["yaw"];
   2.159 +	    if (delta[0] != 0 && action) 
   2.160  	    {
   2.161 -		if (this.pressed[i] != action[0][i]) break;
   2.162 -		if (i == 2) action[1](delta[0]);
   2.163 +		for (var i = 0; i < 3; i++)
   2.164 +		{
   2.165 +		    if (this.pressed[i] != action[0][i]) break;
   2.166 +		    if (i == 2) action[1](delta[0]);
   2.167 +	       	}
   2.168  	    }
   2.169  	}
   2.170 -    }
   2.171 -    this.lastPos = pos;
   2.172 -    
   2.173 +	this.lastPos = pos;
   2.174 +    }   
   2.175      if (this.wheelDelta != 0)
   2.176      {
   2.177  	var delta = normaliseWheelDelta(this.wheelDelta);
   2.178  	var action = this.actionMap["wheel"];
   2.179  	if (delta != 0 && action) action(delta);
   2.180  	this.wheelDelta = 0;
   2.181 -    }
   2.182 -    
   2.183 +    } 
   2.184  }
   2.185  
   2.186  function normaliseMoveDelta(delta)
   2.187  {
   2.188      var width = renderer.context.canvas.width;
   2.189      var height = renderer.context.canvas.height;
   2.190 -    return [delta[0] / width, delta[1] / height];
   2.191 +    return [delta[0] / width, delta[1] / height, 0];
   2.192  }
   2.193  
   2.194  function normaliseWheelDelta(delta)
   2.195 @@ -315,6 +245,11 @@
   2.196      camera.yaw(delta);
   2.197  }
   2.198  
   2.199 +function rotateCamera(angles)
   2.200 +{
   2.201 +    camera.rotate(angles);
   2.202 +}
   2.203 +
   2.204  function handleKeyDown(event)
   2.205  {
   2.206      controller.keyboard.keyDown(event);
     3.1 --- a/scripts/renderer.js	Tue Apr 26 03:23:11 2011 +0200
     3.2 +++ b/scripts/renderer.js	Wed Apr 27 00:45:37 2011 +0200
     3.3 @@ -121,15 +121,14 @@
     3.4      var mvMatrix = this.context.mvMatrix;
     3.5      var pMatrix = this.context.pMatrix;
     3.6      var camera = this.camera;
     3.7 -    camera.update();
     3.8  
     3.9      gl.viewport(0, 0, viewport.width, viewport.height);
    3.10      gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    3.11      mat4.perspective(45, viewport.width / viewport.height, 0.1, 100.0, pMatrix);
    3.12  
    3.13      mat4.identity(mvMatrix);
    3.14 -    mat4.multiply(mvMatrix, camera.matrix);   
    3.15 -    
    3.16 +    camera.update();
    3.17 +    mat4.multiply(mvMatrix, camera.matrix); 
    3.18      //this.pushMatrix(mvMatrix);
    3.19  
    3.20      gl.bindBuffer(gl.ARRAY_BUFFER, scene.positionBuffer);