Weird positioned scene objects.
authorEugen Sawin <sawine@me73.com>
Wed, 27 Apr 2011 02:04:45 +0200
changeset 289df7034275e8
parent 27 130cff40c734
child 29 99652d00489f
Weird positioned scene objects.
scripts/cube.js
scripts/machine.js
scripts/renderer.js
     1.1 --- a/scripts/cube.js	Wed Apr 27 00:45:37 2011 +0200
     1.2 +++ b/scripts/cube.js	Wed Apr 27 02:04:45 2011 +0200
     1.3 @@ -1,9 +1,30 @@
     1.4 +function Node(position, rotation, geometry)
     1.5 +{
     1.6 +    this.pos = position;
     1.7 +    this.rot = rotation;
     1.8 +    this.geometry = geometry;
     1.9 +    this.children = [];
    1.10 +}
    1.11 +Node.prototype.update = function(time)
    1.12 +{
    1.13 +    // this.right = [1, 0, 0];
    1.14 +    // this.up = [0, 1, 0];
    1.15 +    // this.target = [0, 0, -1];
    1.16 +    // var x = vec3.dot([1, 0, 0], this.pos);
    1.17 +    // var y = vec3.dot([0, 1, 0], this.pos);
    1.18 +    // var z = vec3.dot([0, 0, -1], this.pos);
    1.19 +    // this.matrix = mat4.create([this.right[0], this.up[0], -this.target[0], 0,
    1.20 +    //  			       this.right[1], this.up[1], -this.target[1], 0,
    1.21 +    //  			       this.right[2], this.up[2], -this.target[2], 0,
    1.22 +    //  			       -x, -y, z, 1]); 
    1.23 +    for (var id in this.children) this.children[id].update(time);
    1.24 +}
    1.25 +
    1.26 +
    1.27  function Cube(size, context)
    1.28  {
    1.29      var gl = context.gl;
    1.30 -    this.size = size || 1;
    1.31 -    this.rotation = {'x': 0.0, 'y': 0.0, 'z': 0.0};
    1.32 -    
    1.33 +    this.size = size || 1;    
    1.34      this.positionBuffer = gl.createBuffer();
    1.35      gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer);
    1.36      var vertices = [
     2.1 --- a/scripts/machine.js	Wed Apr 27 00:45:37 2011 +0200
     2.2 +++ b/scripts/machine.js	Wed Apr 27 02:04:45 2011 +0200
     2.3 @@ -2,7 +2,7 @@
     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": 1.0, "yaw": 1.0, "roll": 1.0};
     2.8 +var cameraSpeed = {"h": 1.0, "v": 1.0, "zoom": 1.0, "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 @@ -21,10 +21,10 @@
    2.13      var context = new Context(canvas);
    2.14      context.expand();
    2.15      var gl = context.gl;
    2.16 -    var object = new Cube(1, context);
    2.17 +    var scene = createScene(context);   
    2.18      gl.clearColor(0.0, 0.0, 0.0, 1.0);
    2.19      gl.enable(gl.DEPTH_TEST);
    2.20 -    machine = new Machine(object);       
    2.21 +    machine = new Machine(scene);       
    2.22      camera = new Camera(cameraSpeed, [0, 5, 20]);
    2.23      renderer = new Renderer(camera, context);
    2.24      controller = new Controller(keyActionMap, mouseActionMap, camera, machine, renderer);
    2.25 @@ -39,6 +39,22 @@
    2.26      //read("config/camera", configureCamera);
    2.27  }
    2.28  
    2.29 +function createScene(context)
    2.30 +{
    2.31 +    var scene = new Node([0, 0, 0], [0, 0, 0], new Cube(1, context));
    2.32 +    var dim = 3;
    2.33 +    var d = 3;
    2.34 +    for (var x = 0; x < dim; x += 1) {
    2.35 +	for (var y = 0; y < dim; y += 1) {
    2.36 +	    for (var z = 0; z < dim; z += 1) {		
    2.37 +		var pos = [x * d, y * d, -z * d];
    2.38 +		scene.children.push(new Node(pos, [0, 0, 0], new Cube(1, context)));
    2.39 +	    }
    2.40 +	}
    2.41 +    }
    2.42 +    return scene;
    2.43 +}
    2.44 +
    2.45  function configureCamera(config) {
    2.46      alert(config);
    2.47  }
    2.48 @@ -47,10 +63,11 @@
    2.49  {    
    2.50      requestAnimFrame(update);
    2.51      controller.update();
    2.52 -    machine.scene.rotation.x += (random(0, 2) - 2) * 0.001; 
    2.53 -    machine.scene.rotation.y += (random(0, 3) - 1) * 0.001; 
    2.54 -    machine.scene.rotation.z += (random(0, 2) - 1) * 0.001;
    2.55 +    //machine.scene.rotation.x += (random(0, 2) - 2) * 0.001; 
    2.56 +    // machine.scene.rotation.y += (random(0, 3) - 1) * 0.001; 
    2.57 +    // machine.scene.rotation.z += (random(0, 2) - 1) * 0.001;
    2.58      machine.update(new Date().getTime());
    2.59 +    camera.update();
    2.60      renderer.update(machine.scene);
    2.61  }
    2.62  
    2.63 @@ -67,8 +84,7 @@
    2.64  function Controller(keyActionMap, mouseActionMap, camera, machine, renderer)
    2.65  { 
    2.66      this.keyboard = new Keyboard(keyActionMap);
    2.67 -    this.mouse = new Mouse(mouseActionMap);
    2.68 -   
    2.69 +    this.mouse = new Mouse(mouseActionMap);   
    2.70  }
    2.71  Controller.prototype.update = function()
    2.72  {
    2.73 @@ -183,6 +199,7 @@
    2.74  }
    2.75  Machine.prototype.update = function(time)
    2.76  {
    2.77 +    this.scene.update(time);
    2.78      if (this.lastUpdate != 0)
    2.79      {
    2.80  	var diff = time - this.lastUpdate;
     3.1 --- a/scripts/renderer.js	Wed Apr 27 00:45:37 2011 +0200
     3.2 +++ b/scripts/renderer.js	Wed Apr 27 02:04:45 2011 +0200
     3.3 @@ -117,7 +117,6 @@
     3.4  { 
     3.5      var gl = this.context.gl;
     3.6      var viewport = this.context.viewport;
     3.7 -    var shader = this.context.shader;
     3.8      var mvMatrix = this.context.mvMatrix;
     3.9      var pMatrix = this.context.pMatrix;
    3.10      var camera = this.camera;
    3.11 @@ -127,47 +126,69 @@
    3.12      mat4.perspective(45, viewport.width / viewport.height, 0.1, 100.0, pMatrix);
    3.13  
    3.14      mat4.identity(mvMatrix);
    3.15 -    camera.update();
    3.16      mat4.multiply(mvMatrix, camera.matrix); 
    3.17 -    //this.pushMatrix(mvMatrix);
    3.18 +    
    3.19 +    this.draw(scene);
    3.20 +    if (this.next) this.next.update(scene);
    3.21 +}
    3.22 +Renderer.prototype.draw = function(node)
    3.23 +{
    3.24 +    var gl = this.context.gl;
    3.25 +    var shader = this.context.shader;
    3.26 +    var mvMatrix = this.context.mvMatrix;
    3.27 +    var pMatrix = this.context.pMatrix;
    3.28 +   
    3.29 +    if (node)
    3.30 +    {
    3.31 +	this.pushMatrix(mvMatrix);
    3.32 +	mat4.translate(mvMatrix, node.pos);
    3.33 +	//mat4.rotate(mvMatrix, node.rot);
    3.34 +	//mat4.multiply(mvMatrix, node.matrix);
    3.35 +	var object = node.geometry;
    3.36 +	if (object)
    3.37 +	{
    3.38 +	    gl.bindBuffer(gl.ARRAY_BUFFER, object.positionBuffer);
    3.39 +	    gl.vertexAttribPointer(shader.vertexPosition, object.positionBuffer.itemSize, gl.FLOAT, false, 0, 0);
    3.40 +    
    3.41 +	    gl.bindBuffer(gl.ARRAY_BUFFER, object.normalBuffer);
    3.42 +	    gl.vertexAttribPointer(shader.vertexNormal, object.normalBuffer.itemSize, gl.FLOAT, false, 0, 0);
    3.43  
    3.44 -    gl.bindBuffer(gl.ARRAY_BUFFER, scene.positionBuffer);
    3.45 -    gl.vertexAttribPointer(shader.vertexPosition, scene.positionBuffer.itemSize, gl.FLOAT, false, 0, 0);
    3.46 +	    gl.bindBuffer(gl.ARRAY_BUFFER, object.colourBuffer);
    3.47 +	    gl.vertexAttribPointer(shader.vertexColour, object.colourBuffer.itemSize, gl.FLOAT, false, 0, 0);
    3.48 +
    3.49 +	    var lighting = true;
    3.50 +	    gl.uniform1i(shader.useLightingUniform, lighting);
    3.51 +   
    3.52 +	    if (lighting)
    3.53 +	    {   
    3.54 +		var uni = 0.02;
    3.55 +		var ambient = {"r": uni, "g": uni, "b": uni};
    3.56 +		gl.uniform3f(shader.ambientColourUniform, ambient.r, ambient.g, ambient.b);
    3.57 +
    3.58 +		var lightingDir = vec3.create();
    3.59 +		vec3.add(lightingDir, [0.5, -0.5, 0.0]);
    3.60 +		vec3.normalize(lightingDir);
    3.61 +		vec3.scale(lightingDir, -1);     
    3.62 +		gl.uniform3fv(shader.lightingDirectionUniform, lightingDir);
    3.63 +	
    3.64 +		uni = 0.9;
    3.65 +		var directional =  {"r": uni, "g": uni, "b": uni};
    3.66 +		gl.uniform3f(shader.directionalColourUniform, directional.r, directional.g, directional.b);
    3.67 +	    }
    3.68 +   
    3.69 +	    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, object.indexBuffer);
    3.70 +	    this.context.updateMatrixUniforms();
    3.71 +	    gl.drawElements(gl.TRIANGLES, object.indexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
    3.72 +	    //gl.drawArrays(gl.TRIANGLE_STRIP, 0, scene.positionBuffer.numItems);
    3.73 +	}
    3.74      
    3.75 -    gl.bindBuffer(gl.ARRAY_BUFFER, scene.normalBuffer);
    3.76 -    gl.vertexAttribPointer(shader.vertexNormal, scene.normalBuffer.itemSize, gl.FLOAT, false, 0, 0);
    3.77 -
    3.78 -    gl.bindBuffer(gl.ARRAY_BUFFER, scene.colourBuffer);
    3.79 -    gl.vertexAttribPointer(shader.vertexColour, scene.colourBuffer.itemSize, gl.FLOAT, false, 0, 0);
    3.80 -
    3.81 -    var lighting = true;
    3.82 -    gl.uniform1i(shader.useLightingUniform, lighting);
    3.83 -   
    3.84 -    if (lighting)
    3.85 -    {   
    3.86 -	var uni = 0.02;
    3.87 -	var ambient = {"r": uni, "g": uni, "b": uni};
    3.88 -   	gl.uniform3f(shader.ambientColourUniform, ambient.r, ambient.g, ambient.b);
    3.89 -
    3.90 -	var lightingDir = vec3.create();
    3.91 -	vec3.add(lightingDir, [0.0, -1.0, 0.0]);
    3.92 -	vec3.normalize(lightingDir);
    3.93 -	vec3.scale(lightingDir, -1);     
    3.94 -	gl.uniform3fv(shader.lightingDirectionUniform, lightingDir);
    3.95 -	
    3.96 -	uni = 0.5;
    3.97 -	var directional =  {"r": uni, "g": uni, "b": uni};
    3.98 -	gl.uniform3f(shader.directionalColourUniform, directional.r, directional.g, directional.b);
    3.99 +	for (var id in node.children)
   3.100 +	{
   3.101 +	    this.mvMatrix = mvMatrix;
   3.102 +	    this.draw(node.children[id]);
   3.103 +	}
   3.104 +	this.mvMatrix = this.popMatrix();
   3.105      }
   3.106 -   
   3.107 -    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, scene.indexBuffer);
   3.108 -    this.context.updateMatrixUniforms();
   3.109 -    gl.drawElements(gl.TRIANGLES, scene.indexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
   3.110 -    //gl.drawArrays(gl.TRIANGLE_STRIP, 0, scene.positionBuffer.numItems);
   3.111 -    
   3.112 -    //mvMatrix = this.popMatrix();
   3.113 -
   3.114 -    if (this.next) this.next.draw(scene);
   3.115  }
   3.116  Renderer.prototype.pushMatrix = function(matrix)
   3.117  {