1.1 --- a/machine.html	Fri Apr 01 14:49:58 2011 +0200
     1.2 +++ b/machine.html	Fri Apr 01 15:24:55 2011 +0200
     1.3 @@ -10,20 +10,28 @@
     1.4      #ifdef GL_ES
     1.5      precision highp float;
     1.6      #endif
     1.7 +
     1.8 +    varying vec4 vColour;
     1.9   
    1.10 -    void main(void) {
    1.11 -        gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
    1.12 +    void main(void) 
    1.13 +    {
    1.14 +        gl_FragColor = vColour;
    1.15      }
    1.16  </script> 
    1.17   
    1.18  <script id="vertex-shader" type="x-shader/x-vertex"> 
    1.19      attribute vec3 aVertexPosition;
    1.20 - 
    1.21 +    attribute vec4 aVertexColour;
    1.22 +
    1.23      uniform mat4 uMVMatrix;
    1.24      uniform mat4 uPMatrix;
    1.25 +
    1.26 +    varying vec4 vColour;
    1.27   
    1.28 -    void main(void) {
    1.29 +    void main(void) 
    1.30 +    {
    1.31          gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
    1.32 +        vColour = aVertexColour;
    1.33      }
    1.34  </script>
    1.35  

     2.1 --- a/scripts/machine.js	Fri Apr 01 14:49:58 2011 +0200
     2.2 +++ b/scripts/machine.js	Fri Apr 01 15:24:55 2011 +0200
     2.3 @@ -1,15 +1,3 @@
     2.4 -function Machine(canvas, context, scene)
     2.5 -{
     2.6 -    this.canvas = canvas;
     2.7 -    this.context = context;
     2.8 -    this.scene = scene;
     2.9 -    this.gl = context.gl;
    2.10 -}
    2.11 -Machine.prototype.draw = function()
    2.12 -{
    2.13 -    draw(this.context, this.scene);
    2.14 -}
    2.15 -
    2.16  var machine;
    2.17  
    2.18  function main()
    2.19 @@ -23,7 +11,7 @@
    2.20      gl.clearColor(0.0, 0.0, 0.0, 1.0);
    2.21      gl.enable(gl.DEPTH_TEST);
    2.22      //draw(context, object);
    2.23 -    machine = new Machine(canvas, context, object);
    2.24 +    machine = new Machine(context, object);
    2.25      machine.draw();
    2.26  }
    2.27  
    2.28 @@ -44,6 +32,17 @@
    2.29      context.viewport.height = height;
    2.30  }
    2.31  
    2.32 +function Machine(context, scene)
    2.33 +{
    2.34 +    this.context = context;
    2.35 +    this.scene = scene;
    2.36 +    this.gl = context.gl;
    2.37 +}
    2.38 +Machine.prototype.draw = function()
    2.39 +{
    2.40 +    draw(this.context, this.scene);
    2.41 +}
    2.42 +
    2.43  function Context(canvas)
    2.44  {
    2.45      this.canvas = canvas;
    2.46 @@ -90,6 +89,10 @@
    2.47      gl.useProgram(this.program);
    2.48      this.vertexPosition = gl.getAttribLocation(this.program, "aVertexPosition");
    2.49      gl.enableVertexAttribArray(this.vertexPosition);
    2.50 +    
    2.51 +    this.vertexColour = gl.getAttribLocation(this.program, "aVertexColour");
    2.52 +    gl.enableVertexAttribArray(this.vertexColour);
    2.53 +
    2.54      this.pMatrixUniform = gl.getUniformLocation(this.program, "uPMatrix");
    2.55      this.mvMatrixUniform = gl.getUniformLocation(this.program, "uMVMatrix");
    2.56  
    2.57 @@ -130,15 +133,31 @@
    2.58  {
    2.59      var gl = context.gl;
    2.60      this.size = size || 1;
    2.61 -    this.buffer = gl.createBuffer();
    2.62 -    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
    2.63 +    
    2.64 +    this.positionBuffer = gl.createBuffer();
    2.65 +    gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer);
    2.66      var vertices = [1.0, 1.0, 0.0,
    2.67  		    -1.0, 1.0, 0.0,
    2.68  		    1.0, -1.0, 0.0,
    2.69  		    -1.0, -1.0, 0.0];
    2.70      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
    2.71 -    this.itemSize = 3;
    2.72 -    this.numItems = 4;
    2.73 +    this.positionBuffer.itemSize = 3;
    2.74 +    this.positionBuffer.numItems = 4;
    2.75 +
    2.76 +    this.colourBuffer = gl.createBuffer();
    2.77 +    gl.bindBuffer(gl.ARRAY_BUFFER, this.colourBuffer);
    2.78 +    var colours = [1.0, 0.0, 0.0, .5,
    2.79 +		   0.0, 1.0, 0.0, .5,
    2.80 +		   0.0, 0.0, 1.0, .5,
    2.81 +		   1.0, 0.0, 1.0, .5];
    2.82 +    //colours = [];
    2.83 +    for (var i = 0; i < 4; i++)
    2.84 +    {
    2.85 +	//	colours = colours.concat([0.5, 0.5, 1.0, 1.0]);
    2.86 +    }
    2.87 +    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colours), gl.STATIC_DRAW);
    2.88 +    this.colourBuffer.itemSize = 4;
    2.89 +    this.colourBuffer.numItems = 4;
    2.90  }
    2.91  
    2.92  function draw(context, scene)
    2.93 @@ -148,13 +167,19 @@
    2.94      var shader = context.shader;
    2.95      var mvMatrix = context.mvMatrix;
    2.96      var pMatrix = context.pMatrix;
    2.97 +
    2.98      gl.viewport(0, 0, viewport.width, viewport.height);
    2.99      gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
   2.100      mat4.perspective(45, viewport.width / viewport.height, 0.1, 100.0, pMatrix);
   2.101 +
   2.102      mat4.identity(mvMatrix);
   2.103      mat4.translate(mvMatrix, [0.0, 0.0, -7.0]);
   2.104 -    gl.bindBuffer(gl.ARRAY_BUFFER, scene.buffer);
   2.105 -    gl.vertexAttribPointer(shader.vertexPosition, scene.itemSize, gl.FLOAT, false, 0, 0);
   2.106 +    gl.bindBuffer(gl.ARRAY_BUFFER, scene.positionBuffer);
   2.107 +    gl.vertexAttribPointer(shader.vertexPosition, scene.positionBuffer.itemSize, gl.FLOAT, false, 0, 0);
   2.108 +
   2.109 +    gl.bindBuffer(gl.ARRAY_BUFFER, scene.colourBuffer);
   2.110 +    gl.vertexAttribPointer(shader.vertexColour, scene.colourBuffer.itemSize, gl.FLOAT, false, 0, 0);
   2.111 +
   2.112      context.updateMatrixUniforms();
   2.113 -    gl.drawArrays(gl.TRIANGLE_STRIP, 0, scene.numItems);
   2.114 +    gl.drawArrays(gl.TRIANGLE_STRIP, 0, scene.positionBuffer.numItems);
   2.115  }
   2.116 \ No newline at end of file