learning WebGL for plask 01

app.fshader

void main(void) {
    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}

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);
    //this.syphon = gl.createSyphonServer('SuperCoolGL'); 

    // 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 makeMesh(ar) {
      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 / 3, data: data};
    }
    
    this.triangleMesh = makeMesh([
                                   0.0,  1.0,  0.0,
                                  -1.0, -1.0,  0.0,
                                   1.0, -1.0,  0.0
                                ]);
    
    this.squareMesh = makeMesh([ 
                           1.0,  1.0,  0.0,
                          -1.0,  1.0,  0.0,
                           1.0, -1.0,  0.0,
                          -1.0, -1.0,  0.0,
                        ]);

    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 mprogram = this.mprogram;

    // 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);
    
    // 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.drawArrays(gl.TRIANGLES, 0, triangleMesh.num);
    
    mv.translate(3.0, 0.0, 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.drawArrays(gl.TRIANGLE_STRIP, 0, squareMesh.num);


  }
});

app.vshader

  attribute vec3 aVertexPosition;

  uniform mat4 uMVMatrix;
  uniform mat4 uPMatrix;

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