Learning WebGL for Plask Lesson 10

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 Lesson10
//Learing WebGL : http://learningwebgl.com/blog/?page_id=1217
//Github : https://github.com/gpjt/webgl-lessons (this script use 'mud.gif').
//speed: ws, pitch: qe, yaw:ad, reset:r
//
//
//Plask : http://www.plask.org/
//
var path = require('path');
var plask = require('plask');
var fs = require('fs');

function clone(obj){
    var F = function(){};
    F.prototype = obj;
    return new F;
}

var data = fs.readFileSync('./world.txt','utf8');

var lines = data.split("\n");
    var vertexCount = 0;
    var vertexPositions = [];
    var vertexTextureCoords = [];
    for (var i =0; i < lines.length; i+=1) {
      var vals = lines[i].replace(/^\s+/, "").split(/\s+/);
      if (vals.length == 5 && vals[0] != "//") {
        // It is a line describing a vertex; get X, Y and Z first
        vertexPositions.push(parseFloat(vals[0]));
        vertexPositions.push(parseFloat(vals[1]));
        vertexPositions.push(parseFloat(vals[2]));

        // And then the texture coords
        vertexTextureCoords.push(parseFloat(vals[3]));
        vertexTextureCoords.push(parseFloat(vals[4]));

        vertexCount += 1;
      }
    }
    
//console.log(vertexPositions);

function degToRad(degrees) {
    return degrees * Math.PI / 180;
}

    
    

var init ={
        pitch : 0,
        pitchRate : 0,
        yaw : 0,
        yawRate : 0,
        xPos : 0,
        yPos : -0.2,
        zPos : 0,
        speed : 0,
        joggingAngle : 0,
        lastTime : 0
    };


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.param = clone(init);
    
    this.on('keyDown', function(e) {
      // The |str| property on the key event is a string of the unicode
      // translation of the key.  Take bigger steps while holding shift.
      switch (e.str) {
        case 'q': this.param.pitchRate = 0.1; break;
        case 'e': this.param.pitchRate = -0.1; break;
        case 'a': this.param.yawRate = 0.1; break;
        case 'd': this.param.yawRate = -0.1; break;
        case 'w': this.param.speed = -0.003; break;
        case 's': this.param.speed = 0.003; break;

        case 'r': this.param = clone(init);
                  break;//reset
      }
      this.redraw();
    });

    this.on('keyUp', function(e) {
      // The |str| property on the key event is a string of the unicode
      // translation of the key.  Take bigger steps while holding shift.
      switch (e.str) {
        case 'q': this.param.pitchRate = 0; break;
        case 'e': this.param.pitchRate = 0; break;
        case 'a': this.param.yawRate = 0; break;
        case 'd': this.param.yawRate = 0; break;
        case 'w': this.param.speed = 0; break;
        case 's': this.param.speed = 0; break;

      }
      this.redraw();
    });
    
    // 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};
    }
    
    this.worldVertexPositionBuffer = makeBuffer(vertexPositions,3);
    
    this.worldVertexTextureCoordBuffer = makeBuffer(vertexTextureCoords,2);
    
    
     function careateTextureWithFile(fileName) {
        var image = new plask.SkCanvas.createFromImage(path.join(__dirname, fileName));
        var texture = gl.createTexture();
        gl.activeTexture(gl.TEXTURE0);
        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
        gl.bindTexture(gl.TEXTURE_2D, texture);
        gl.texImage2DSkCanvas(gl.TEXTURE_2D, 0, image);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
        gl.generateMipmap(gl.TEXTURE_2D);
        
        //textureの切り替えをしないのでnullをbindせずにそのままdrawへもってく。
        //gl.bindTexture(gl.TEXTURE_2D, null); 
        //return{texture : texture, image : image};
      }
        
    //this.texture = 
    careateTextureWithFile('mud.gif');
    

    gl.viewport(0, 0, this.width, this.height);
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clearDepth(1.0)
    //gl.blendFunc(gl.SRC_ALPHA, gl.ONE);
    gl.enable(gl.BLEND);
    gl.enable(gl.DEPTH_TEST);
    //gl.enable(gl.TEXTURING);gl.blendFunc(gl.SRC_ALPHA, gl.ONE);
    //gl.enable(gl.TEXTURE_2D);
    gl.depthFunc(gl.LEQUAL);

  },

  draw: function() {
    var gl = this.gl;
    var worldVertexPositionBuffer = this.worldVertexPositionBuffer;
    var worldVertexTextureCoordBuffer = this.worldVertexTextureCoordBuffer;

    var mprogram = this.mprogram;
    var param = this.param;
    //console.log(param);
    var mv = this.mv;
    var mvStack = this.mvStack;
    var persp = this.persp;
    var width = this.width;
    var height = this.height;
    var t = this.frametime;
    
    mv = new plask.Mat4();
    mvStack = [];
    persp = new plask.Mat4();
    color = new plask.Vec3();

    mprogram.use();
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    
    persp.perspective(45, width / height, 0.1, 100.0);
    
    mv.rotate(degToRad(-param.pitch), 1.0, 0.0, 0.0);
    mv.rotate(degToRad(-param.yaw), 0.0, 1.0, 0.0);
    mv.translate(param.xPos, param.yPos, param.zPos);

    mprogram.set_uPMatrix(persp);
    mprogram.set_uSampler(0);

    //gl.blendFunc(gl.SRC_ALPHA, gl.ONE);
    //gl.enable(gl.BLEND);
    
    function setProg(){
        mprogram.set_uMVMatrix(mv);
        gl.enableVertexAttribArray(mprogram.location_aVertexPosition);
        gl.enableVertexAttribArray(mprogram.location_aTextureCoord);
    };
    
    function drawMap(){
        // Draw the geometry from the VBO, passing the vertices to the vertex
        // shader as a vec3 named |a_xyz|.
        gl.bindBuffer(gl.ARRAY_BUFFER, worldVertexPositionBuffer.buffer);
        gl.vertexAttribPointer(mprogram.location_aVertexPosition,
                               worldVertexPositionBuffer.itemSize,
                               gl.FLOAT,
                               false, 0, 0);
                            
        gl.bindBuffer(gl.ARRAY_BUFFER, worldVertexTextureCoordBuffer.buffer);
        gl.vertexAttribPointer(mprogram.location_aTextureCoord,
                               worldVertexTextureCoordBuffer.itemSize,
                               gl.FLOAT,
                               false, 0, 0);
                            
        gl.drawArrays(gl.TRIANGLES, 0, worldVertexPositionBuffer.num);
    };
    
    function animate (){
        var timeNow = new Date().getTime();
        if (param.lastTime != 0) {
            var elapsed = timeNow - param.lastTime;
          if (param.speed != 0) {
            param.xPos -= Math.sin(degToRad(param.yaw)) * param.speed * elapsed;
            param.zPos -= Math.cos(degToRad(param.yaw)) * param.speed * elapsed;

            param.joggingAngle += elapsed * 0.6;  // 0.6 "fiddle factor" -- makes it feel more realistic :-)
            param.yPos = Math.sin(degToRad(param.joggingAngle)) / 20 + init.yPos;
          }

        param.pitch += param.pitchRate * elapsed;
        param.yaw += param.yawRate * elapsed;
        }
        param.lastTime = timeNow;
    }

    setProg();
    drawMap();
    animate();
  }
});

app.vshader

attribute vec3 aVertexPosition;
attribute vec2 aTextureCoord;

uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;

varying vec2 vTextureCoord;

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