gistfile1.js

PhiloGL.unpack();
function webGLStart() {
  var pitch = 0,
      pitchRate = 0,
      yaw = 0,
      yawRate = 0,
      xPos = 0,
      yPos = 0.4,
      zPos = 0,
      speed = 0,
      joggingAngle = 0;

  //Model
  var world;

  //load world
  new IO.XHR({
    url: 'world.txt',
    onSuccess: function(data) {      
      var lines = data.split("\n");
      var vertexCount = 0;
      var vertexPositions = [];
      var vertexTextureCoords = [];
      for (var i in lines) {
        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;
        }
      }

      world = new O3D.Model({
        vertices: vertexPositions,
        texCoords: vertexTextureCoords,
        textures: 'mud.gif'
      });

      startApp();
    },
    onError: function() {
      console.log("There was something wrong with loading the world");
    }
  }).send();
  
  function startApp() {
    
    //Create App
    PhiloGL('lesson10-canvas', {
      textures: {
        src: ['mud.gif'],
        parameters: [{
          name: 'TEXTURE_MAG_FILTER',
          value: 'LINEAR'
        }, {
          name: 'TEXTURE_MIN_FILTER',
          value: 'LINEAR_MIPMAP_NEAREST',
          generateMipmap: true
        }]
      },
      events: {
        onKeyDown: function(e) {
          switch(e.key) {
            case 'left': case 'a':
              yawRate = 0.001;
              break;
            case 'right': case 'd':
              yawRate = -0.001;
              break;
            case 'up': case 'w':
              speed = 0.001;
              break;
            case 'down': case 's':
              speed = -0.001;
              break;
          }
          if (e.code == 33) {
            pichRate = 0.001;
          } else if (e.code == 34) {
            pichRate = -0.001;
          }
        },
        onKeyUp: function() {
          speed = 0;
          pitchRate = 0;
          yawRate = 0;
        }
      },
      onError: function() {
        console.log('The app could not be loaded');
      },
      onLoad: function(app) {
        var gl = app.gl,
            scene = app.scene,
            camera = app.camera,
            canvas = app.canvas;
        
        scene.add(world);

        gl.viewport(0, 0, canvas.width, canvas.height);
        gl.clearColor(0, 0, 0, 1);
        gl.clearDepth(1);
        gl.enable(gl.DEPTH_TEST);
        gl.depthFunc(gl.LEQUAL);

        function tick() {
          drawScene();
          animate();
          Fx.requestAnimationFrame(tick);
        }
        
        var lastTime = 0;
        function animate() {
          var timeNow = Date.now();
          if (lastTime != 0) {
            var elapsed = timeNow - lastTime;

            if (speed != 0) {
              xPos -= Math.sin(yaw) * speed * elapsed;
              zPos -= Math.cos(yaw) * speed * elapsed;

              joggingAngle += elapsed * 0.01;  // 0.6 "fiddle factor" - makes it feel more realistic :-)
              yPos = Math.sin(joggingAngle) / 100 + 0.4
            }

            yaw += yawRate * elapsed;
            pitch += pitchRate * elapsed;

          }
          lastTime = timeNow;
        }
        
        function drawScene() {
          gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

          //Update Camera Position 
          camera.view.id()
                          .$rotateXYZ(-pitch, -yaw, 0)
                          .$translate(-xPos, -yPos, -zPos);
                          
          //Render all elements in the Scene
          scene.render();
        }
        
        tick();
      
      }
    });
  }
}