Learning WebGL for Plask Lesson 03

app.fshader

#ifdef GL_ES
  precision highp float;
#endif

  varying vec4 vColor;

  void main(void) {
    gl_FragColor = vColor;
  }

app.js

var plask = require('plask');

plask.simpleWindow({
  settings: {
    width: 1280,
    height: 720,
    type: '3d',  // Create an OpenGL window.
    vsync: true,  // Prevent tearing.
    multisample: true  // Anti-alias.
  },

  init: function() {
    var gl = this.gl;

    this.framerate(60);

    // Read/compile/link the shaders into a MagicProgram.  The |mprogram|
    // object created has methods to set the shader uniform variables.
    this.mprogram = plask.gl.MagicProgram.createFromBasename(
        gl, __dirname, 'app');

    // Create the three 3d (xyz) vertices for the triangle.  This creates the
    // geometry and loads it into an Vertex Buffer Object (VBO).
    function makeBuffer(ar,itemSize) {
      var buffer = gl.createBuffer();
      var data = new Float32Array(ar);
      gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
      gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
      return {buffer: buffer, num: data.length / itemSize, data: data};
    }
    
    this.triangleMesh = makeBuffer([
                                   0.0,  1.0,  0.0,
                                  -1.0, -1.0,  0.0,
                                   1.0, -1.0,  0.0
                                ],3);
                                
    this.triangleVertexColorBuffer=makeBuffer([
                                            1.0, 0.0, 0.0, 1.0,
                                            0.0, 1.0, 0.0, 1.0,
                                            0.0, 0.0, 1.0, 1.0,
                                              ],4);    
    this.squareMesh = makeBuffer([ 
                           1.0,  1.0,  0.0,
                          -1.0,  1.0,  0.0,
                           1.0, -1.0,  0.0,
                          -1.0, -1.0,  0.0,
                        ],3);
//    this.squareVertexColorBuffer = makeBuffer([
//    0.5, 0.5, 1.0, 1.0,
//    0.5, 0.5, 1.0, 1.0,
//    0.5, 0.5, 1.0, 1.0,
//    0.5, 0.5, 1.0, 1.0],4);
    this.squareVertexColorBuffer = makeBuffer((function () {
        var ar =[],i=0;
        for (i; i < 4; i+=1) {
            ar = ar.concat([0.5, 0.5, 1.0, 1.0]);
        }
        return ar;
    }()),4);

    gl.viewport(0, 0, this.width, this.height);
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clearDepth(1.0)
    gl.enable(gl.DEPTH_TEST);
    gl.depthFunc(gl.LEQUAL);

  },

  draw: function() {
    var gl = this.gl;
    var triangleMesh = this.triangleMesh;
    var squareMesh = this.squareMesh;
    var triangleVertexColorBuffer = this.triangleVertexColorBuffer;
    var squareVertexColorBuffer = this.squareVertexColorBuffer;
    var mprogram = this.mprogram;
    var t = this.frametime * 50;

    // Clear the background to gray.  The depth buffer isn't really needed for
    // a single triangle, but generally the depth buffer should also be cleared.
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    // Build the "model-view" matrix, which will rotate the triangle based on
    // the mouse controls.
    var mv = new plask.Mat4();
    mv.translate(-1.5, 0.0, -7.0);
    mv.rotate(t / 50, 0, 1, 0);

    
    // Build the "perspective" matrix, which will apply the aspect ratio,
    // perspective divide, and clipping planes.
    var persp = new plask.Mat4();
    persp.perspective(45, this.width / this.height, 0.1, 100.0);

    // Set the shaders to be used during drawing, and pass the current
    // transformation matrices to them.
    mprogram.use();
    mprogram.set_uPMatrix(persp);
    mprogram.set_uMVMatrix(mv);

    // Draw the geometry from the VBO, passing the vertices to the vertex
    // shader as a vec3 named |a_xyz|.
    gl.bindBuffer(gl.ARRAY_BUFFER, triangleMesh.buffer);
    gl.vertexAttribPointer(mprogram.location_aVertexPosition,
                           3,
                           gl.FLOAT,
                           false, 0, 0);
    gl.enableVertexAttribArray(mprogram.location_aVertexPosition);

    gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer.buffer);
    gl.vertexAttribPointer(mprogram.location_aVertexColor,
                           4,
                           gl.FLOAT,
                           false, 0, 0);    
    gl.enableVertexAttribArray(mprogram.location_aVertexColor);
    gl.drawArrays(gl.TRIANGLES, 0, triangleMesh.num);
    
    mv.reset();
    //mv.rotate(-t / 50, 0, 1, 0);
    //mv.translate(3.0, 0.0, 0.0);
    mv.translate(1.5, 0.0, -7.0);
    mv.rotate(t / 20, 1, 0, 0);
    
    mprogram.set_uMVMatrix(mv);
    
    gl.bindBuffer(gl.ARRAY_BUFFER, squareMesh.buffer);
    gl.vertexAttribPointer(mprogram.location_aVertexPosition,
                           3,
                           gl.FLOAT,
                           false, 0, 0);
    gl.enableVertexAttribArray(mprogram.location_aVertexPosition);
    gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexColorBuffer.buffer);
    gl.vertexAttribPointer(mprogram.location_aVertexColor,
                           4,
                           gl.FLOAT,
                           false, 0, 0);    
    gl.enableVertexAttribArray(mprogram.location_aVertexColor);

    gl.drawArrays(gl.TRIANGLE_STRIP, 0, squareMesh.num);


  }
});

app.vshader

  attribute vec3 aVertexPosition;
  attribute vec4 aVertexColor;

  uniform mat4 uMVMatrix;
  uniform mat4 uPMatrix;

  varying vec4 vColor;

  void main(void) {
    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
    vColor = aVertexColor;
  }