Learning WebGL for Plask Lesson05

app.fshader

#ifdef GL_ES
  precision highp float;
#endif

  varying vec2 vTextureCoord;

  uniform sampler2D uSampler;

  void main(void) {
    gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
  }

app.js

//Learning WebGL for Plask Lesson5
//Learing WebGL : http://learningwebgl.com/blog/?page_id=1217
//Github : https://github.com/gpjt/webgl-lessons (this script use 'nehe.gif'.)
//
//Plask : http://www.plask.org/


var path = require('path');
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 = new 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, itemSize: itemSize};
    }

    function makeEABuffer(ar,itemSize) {
      var buffer = gl.createBuffer();
      var data = new Uint16Array(ar);
      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffer);
      gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, data, gl.STATIC_DRAW);
      return {buffer: buffer, num: data.length / itemSize, data: data, itemSize: itemSize};
    }
    


        
    this.cubeVertexPositionBuffer = makeBuffer([
      -1.0, -1.0,  1.0,
       1.0, -1.0,  1.0,
       1.0,  1.0,  1.0,
      -1.0,  1.0,  1.0,

      // Back face
      -1.0, -1.0, -1.0,
      -1.0,  1.0, -1.0,
       1.0,  1.0, -1.0,
       1.0, -1.0, -1.0,

      // Top face
      -1.0,  1.0, -1.0,
      -1.0,  1.0,  1.0,
       1.0,  1.0,  1.0,
       1.0,  1.0, -1.0,

      // Bottom face
      -1.0, -1.0, -1.0,
       1.0, -1.0, -1.0,
       1.0, -1.0,  1.0,
      -1.0, -1.0,  1.0,

      // Right face
       1.0, -1.0, -1.0,
       1.0,  1.0, -1.0,
       1.0,  1.0,  1.0,
       1.0, -1.0,  1.0,

      // Left face
      -1.0, -1.0, -1.0,
      -1.0, -1.0,  1.0,
      -1.0,  1.0,  1.0,
      -1.0,  1.0, -1.0,
    ],3);
    

    
     this.cubeVertexIndexBuffer = makeEABuffer([
      0, 1, 2,      0, 2, 3,    // Front face
      4, 5, 6,      4, 6, 7,    // Back face
      8, 9, 10,     8, 10, 11,  // Top face
      12, 13, 14,   12, 14, 15, // Bottom face
      16, 17, 18,   16, 18, 19, // Right face
      20, 21, 22,   20, 22, 23  // Left face
    ],1);
    
    this.cubeVertexTextureCoordBuffer = makeBuffer([
      // Front face
      0.0, 0.0,
      1.0, 0.0,
      1.0, 1.0,
      0.0, 1.0,

      // Back face
      1.0, 0.0,
      1.0, 1.0,
      0.0, 1.0,
      0.0, 0.0,

      // Top face
      0.0, 1.0,
      0.0, 0.0,
      1.0, 0.0,
      1.0, 1.0,

      // Bottom face
      1.0, 1.0,
      0.0, 1.0,
      0.0, 0.0,
      1.0, 0.0,

      // Right face
      1.0, 0.0,
      1.0, 1.0,
      0.0, 1.0,
      0.0, 0.0,

      // Left face
      0.0, 0.0,
      1.0, 0.0,
      1.0, 1.0,
      0.0, 1.0,
    ],2);
    
    function makeTexture(fileName){
        var tex_image = new plask.SkCanvas.createFromImage(path.join(__dirname, fileName));
        var texture = gl.createTexture();
          gl.activeTexture(gl.TEXTURE0);
          gl.bindTexture(gl.TEXTURE_2D, texture);
          gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
          gl.texImage2DSkCanvas(gl.TEXTURE_2D, 0, tex_image);
          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    };
    
    makeTexture('nehe.gif');

    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.enable(gl.TEXTURING);
    //gl.enable(gl.TEXTURE_2D);
    gl.depthFunc(gl.LEQUAL);

  },

  draw: function() {
    var gl = this.gl;
    var cubeVertexPositionBuffer = this.cubeVertexPositionBuffer;
    var cubeVertexTextureCoordBuffer = this.cubeVertexTextureCoordBuffer;
    var cubeVertexIndexBuffer = this.cubeVertexIndexBuffer;
    //var neheTexture = this.neheTexture;
    var tex_image = this.tex_image; 

    var texture = this.texture;


    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(0.0, 0.0, -5.0);
    mv.rotate(t / 50, 0, 0, 1); 
    mv.rotate(t / 30, 0, 1, 0);
    mv.rotate(t / 70, 1, 0, 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);
    mprogram.set_uSampler(0);


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

    gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer.buffer);
    gl.vertexAttribPointer(mprogram.location_aTextureCoord,
                           cubeVertexTextureCoordBuffer.itemSize,
                           gl.FLOAT,
                           false, 0, 0);
    gl.enableVertexAttribArray(mprogram.location_aTextureCoord);

    
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer.buffer);

    
    gl.drawElements(gl.TRIANGLES, cubeVertexIndexBuffer.num, gl.UNSIGNED_SHORT, 0);


  }
});

app.vshader

  attribute vec3 aVertexPosition;
  attribute vec2 aTextureCoord;


  uniform mat4 uMVMatrix;
  uniform mat4 uPMatrix;

  varying vec4 vColor;
  varying vec2 vTextureCoord;

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