Cube.
authorEugen Sawin <sawine@me73.com>
Sat, 02 Apr 2011 15:17:52 +0200
changeset 9610eb11054aa
parent 8 287fcb0e8f60
child 10 9c21841b3ef9
Cube.
scripts/machine.js
     1.1 --- a/scripts/machine.js	Sat Apr 02 01:42:19 2011 +0200
     1.2 +++ b/scripts/machine.js	Sat Apr 02 15:17:52 2011 +0200
     1.3 @@ -20,14 +20,14 @@
     1.4  function update()
     1.5  {    
     1.6      requestAnimFrame(update);
     1.7 -    //machine.scene.rotation *= 1.003;
     1.8 +    machine.scene.rotation += 0.0001;
     1.9      machine.update(new Date().getTime());
    1.10      renderer.update(machine.scene);
    1.11  }
    1.12  
    1.13  function resize()
    1.14  {
    1.15 -    make_fullscreen(render.context);
    1.16 +    make_fullscreen(renderer.context);
    1.17      update();
    1.18  }
    1.19  
    1.20 @@ -41,6 +41,11 @@
    1.21      context.viewport.height = height;
    1.22  }
    1.23  
    1.24 +function random(min, max)
    1.25 +{
    1.26 +    return (min + Math.random() * (max - min + 1));
    1.27 +}
    1.28 +
    1.29  function Renderer(context)
    1.30  {
    1.31      this.context = context;
    1.32 @@ -64,17 +69,18 @@
    1.33  
    1.34      this.pushMatrix(mvMatrix);
    1.35  
    1.36 -    mat4.rotate(mvMatrix, scene.rotation, [1, 1, 1]);
    1.37 -    //mat4.rotate(mvMatrix, scene.rotation, [1, 0, 0]);
    1.38 +    mat4.rotate(mvMatrix, scene.rotation, [random(0, 1), random(0, 1), random(0, 1)]);
    1.39  
    1.40      gl.bindBuffer(gl.ARRAY_BUFFER, scene.positionBuffer);
    1.41      gl.vertexAttribPointer(shader.vertexPosition, scene.positionBuffer.itemSize, gl.FLOAT, false, 0, 0);
    1.42  
    1.43      gl.bindBuffer(gl.ARRAY_BUFFER, scene.colourBuffer);
    1.44      gl.vertexAttribPointer(shader.vertexColour, scene.colourBuffer.itemSize, gl.FLOAT, false, 0, 0);
    1.45 -
    1.46 +    
    1.47 +    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, scene.indexBuffer);
    1.48      this.context.updateMatrixUniforms();
    1.49 -    gl.drawArrays(gl.TRIANGLE_STRIP, 0, scene.positionBuffer.numItems);
    1.50 +    gl.drawElements(gl.TRIANGLES, scene.indexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
    1.51 +    //gl.drawArrays(gl.TRIANGLE_STRIP, 0, scene.positionBuffer.numItems);
    1.52      
    1.53      mvMatrix = this.popMatrix();
    1.54  
    1.55 @@ -100,7 +106,7 @@
    1.56  {
    1.57      if (this.lastUpdate != 0)
    1.58      {
    1.59 -	var diff = time - lastUpdate;
    1.60 +	var diff = time - this.lastUpdate;
    1.61  	
    1.62      }
    1.63      this.lastUpdate = time;
    1.64 @@ -137,8 +143,8 @@
    1.65  function Shader(context)
    1.66  {
    1.67      var gl = context.gl;
    1.68 -    var fragment = load_shader(gl, "fragment-shader");
    1.69 -    var vertex = load_shader(gl, "vertex-shader");
    1.70 +    var fragment = loadShader(gl, "fragment-shader");
    1.71 +    var vertex = loadShader(gl, "vertex-shader");
    1.72      this.program = gl.createProgram();
    1.73      gl.attachShader(this.program, vertex);
    1.74      gl.attachShader(this.program, fragment);
    1.75 @@ -159,7 +165,7 @@
    1.76      this.pMatrixUniform = gl.getUniformLocation(this.program, "uPMatrix");
    1.77      this.mvMatrixUniform = gl.getUniformLocation(this.program, "uMVMatrix");
    1.78  
    1.79 -    function load_shader(gl, id)
    1.80 +    function loadShader(gl, id)
    1.81      {
    1.82  	var script = document.getElementById(id);
    1.83  	if (!script) return null;
    1.84 @@ -200,26 +206,78 @@
    1.85      
    1.86      this.positionBuffer = gl.createBuffer();
    1.87      gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer);
    1.88 -    var vertices = [1.0, 1.0, 0.0,
    1.89 -		    -1.0, 1.0, 0.0,
    1.90 -		    1.0, -1.0, 0.0,
    1.91 -		    -1.0, -1.0, 0.0];
    1.92 +    var vertices = [
    1.93 +	     // Front face
    1.94 +            -1.0, -1.0,  1.0,
    1.95 +             1.0, -1.0,  1.0,
    1.96 +             1.0,  1.0,  1.0,
    1.97 +            -1.0,  1.0,  1.0,
    1.98 + 
    1.99 +            // Back face
   1.100 +            -1.0, -1.0, -1.0,
   1.101 +            -1.0,  1.0, -1.0,
   1.102 +             1.0,  1.0, -1.0,
   1.103 +             1.0, -1.0, -1.0,
   1.104 + 
   1.105 +            // Top face
   1.106 +            -1.0,  1.0, -1.0,
   1.107 +            -1.0,  1.0,  1.0,
   1.108 +             1.0,  1.0,  1.0,
   1.109 +             1.0,  1.0, -1.0,
   1.110 + 
   1.111 +            // Bottom face
   1.112 +            -1.0, -1.0, -1.0,
   1.113 +             1.0, -1.0, -1.0,
   1.114 +             1.0, -1.0,  1.0,
   1.115 +            -1.0, -1.0,  1.0,
   1.116 + 
   1.117 +            // Right face
   1.118 +             1.0, -1.0, -1.0,
   1.119 +             1.0,  1.0, -1.0,
   1.120 +             1.0,  1.0,  1.0,
   1.121 +             1.0, -1.0,  1.0,
   1.122 + 
   1.123 +            // Left face
   1.124 +            -1.0, -1.0, -1.0,
   1.125 +            -1.0, -1.0,  1.0,
   1.126 +            -1.0,  1.0,  1.0,
   1.127 +            -1.0,  1.0, -1.0];
   1.128      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
   1.129      this.positionBuffer.itemSize = 3;
   1.130 -    this.positionBuffer.numItems = 4;
   1.131 +    this.positionBuffer.numItems = 24;
   1.132  
   1.133      this.colourBuffer = gl.createBuffer();
   1.134      gl.bindBuffer(gl.ARRAY_BUFFER, this.colourBuffer);
   1.135 -    var colours = [1.0, 0.0, 0.0, .5,
   1.136 -		   0.0, 1.0, 0.0, .5,
   1.137 -		   0.0, 0.0, 1.0, .5,
   1.138 -		   1.0, 0.0, 1.0, .5];
   1.139 -    //colours = [];
   1.140 -    for (var i = 0; i < 4; i++)
   1.141 +    var alpha = 1.0;
   1.142 +    var colours = [[1.0, 0.0, 0.0, alpha],
   1.143 +		   [0.0, 1.0, 0.0, alpha],
   1.144 +		   [0.0, 0.0, 1.0, alpha],
   1.145 +		   [1.0, 0.0, 1.0, alpha],
   1.146 +		   [1.0, 1.0, 0.0, alpha],
   1.147 +		   [0.0, 1.0, 1.0, alpha]];
   1.148 +    var unpackedColours = [];
   1.149 +    for (var i in colours)
   1.150      {
   1.151 -	//	colours = colours.concat([0.5, 0.5, 1.0, 1.0]);
   1.152 +	var colour = colours[i];
   1.153 +	for (var j = 0; j < 4; j++)
   1.154 +	{
   1.155 +	    unpackedColours = unpackedColours.concat(colour);
   1.156 +	}
   1.157 +	//colours = colours.concat([0.5, 0.5, 1.0, 1.0]);
   1.158      }
   1.159 -    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colours), gl.STATIC_DRAW);
   1.160 +    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(unpackedColours), gl.STATIC_DRAW);
   1.161      this.colourBuffer.itemSize = 4;
   1.162 -    this.colourBuffer.numItems = 4;
   1.163 +    this.colourBuffer.numItems = 24;
   1.164 +
   1.165 +    this.indexBuffer = gl.createBuffer();
   1.166 +    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
   1.167 +    var indices = [0, 1, 2, 0, 2, 3,
   1.168 +		   4, 5, 6, 4, 6, 7,
   1.169 +		   8, 9, 10, 8, 10, 11,
   1.170 +		   12, 13, 14, 12, 14, 15,
   1.171 +		   16, 17, 18, 16, 18, 19,
   1.172 +		   20, 21, 22, 20, 22, 23];
   1.173 +    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
   1.174 +    this.indexBuffer.itemSize = 1;
   1.175 +    this.indexBuffer.numItems = 36;
   1.176  }
   1.177 \ No newline at end of file