asgn3.js

let gl;
let camera;

let a_Position, a_UV;
let u_ModelMatrix, u_ViewMatrix, u_ProjMatrix;
let u_Sampler0, u_Sampler1;
let u_whichTexture;
let u_BaseColor;
let u_texColorWeight;

let map = [];
let animals = [];
let collected = 0;

const WORLD_SIZE = 32;

function main() {
  const canvas = document.getElementById('webgl');
  gl = canvas.getContext('webgl');

  gl.enable(gl.DEPTH_TEST);

  initShaders(gl, VSHADER, FSHADER);

  initBuffers();
  initTextures();

  camera = new Camera(canvas);

  generateWorld();
  spawnAnimals();

  initControls();
  render();
}
const VSHADER = `
attribute vec4 a_Position;
attribute vec2 a_UV;

uniform mat4 u_ModelMatrix;
uniform mat4 u_ViewMatrix;
uniform mat4 u_ProjMatrix;

varying vec2 v_UV;

void main() {
  gl_Position = u_ProjMatrix * u_ViewMatrix * u_ModelMatrix * a_Position;
  v_UV = a_UV;
}
`;

const FSHADER = `
precision mediump float;

uniform sampler2D u_Sampler0;
uniform sampler2D u_Sampler1;
uniform int u_whichTexture;
uniform vec4 u_BaseColor;
uniform float u_texColorWeight;

varying vec2 v_UV;

void main() {
  vec4 texColor;

  if(u_whichTexture == 0)
    texColor = texture2D(u_Sampler0, v_UV);
  else
    texColor = texture2D(u_Sampler1, v_UV);

  gl_FragColor = (1.0 - u_texColorWeight) * u_BaseColor
                 + u_texColorWeight * texColor;
}
`;
function initBuffers() {

  let vertices = new Float32Array([
    // position        // UV
    -0.5,-0.5,0.5,     0,0,
    0.5,-0.5,0.5,     1,0,
    0.5,0.5,0.5,      1,1,
    -0.5,-0.5,0.5,     0,0,
    0.5,0.5,0.5,      1,1,
    -0.5,0.5,0.5,      0,1,

    -0.5,-0.5,-0.5,    1,0,
    -0.5,0.5,-0.5,     1,1,
    0.5,0.5,-0.5,     0,1,
    -0.5,-0.5,-0.5,    1,0,
    0.5,0.5,-0.5,     0,1,
    0.5,-0.5,-0.5,    0,0,

    -0.5,0.5,-0.5,     0,0,
    -0.5,0.5,0.5,      0,1,
    0.5,0.5,0.5,      1,1,
    -0.5,0.5,-0.5,     0,0,
    0.5,0.5,0.5,      1,1,
    0.5,0.5,-0.5,     1,0,

    -0.5,-0.5,-0.5,    0,0,
    0.5,-0.5,-0.5,    1,0,
    0.5,-0.5,0.5,     1,1,
    -0.5,-0.5,-0.5,    0,0,
    0.5,-0.5,0.5,     1,1,
    -0.5,-0.5,0.5,     0,1,
  ]);

  let buffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

  a_Position = gl.getAttribLocation(gl.program, 'a_Position');
  a_UV = gl.getAttribLocation(gl.program, 'a_UV');

  gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, 20, 0);
  gl.enableVertexAttribArray(a_Position);

  gl.vertexAttribPointer(a_UV, 2, gl.FLOAT, false, 20, 12);
  gl.enableVertexAttribArray(a_UV);

  u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix');
  u_ViewMatrix = gl.getUniformLocation(gl.program, 'u_ViewMatrix');
  u_ProjMatrix = gl.getUniformLocation(gl.program, 'u_ProjMatrix');

  u_Sampler0 = gl.getUniformLocation(gl.program, 'u_Sampler0');
  u_Sampler1 = gl.getUniformLocation(gl.program, 'u_Sampler1');
  u_whichTexture = gl.getUniformLocation(gl.program, 'u_whichTexture');
  u_BaseColor = gl.getUniformLocation(gl.program, 'u_BaseColor');
  u_texColorWeight = gl.getUniformLocation(gl.program, 'u_texColorWeight');
}
function initTextures() {

  loadTexture('textures/wall.jpg', 0);
  loadTexture('textures/grass.jpg', 1);
}

function loadTexture(path, unit) {

  let texture = gl.createTexture();
  let image = new Image();

  image.onload = function() {
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
    gl.activeTexture(gl.TEXTURE0 + unit);
    gl.bindTexture(gl.TEXTURE_2D, texture);

    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB,
        gl.UNSIGNED_BYTE, image);

    gl.texParameteri(gl.TEXTURE_2D,
        gl.TEXTURE_MIN_FILTER,
        gl.LINEAR);

    if(unit == 0)
      gl.uniform1i(u_Sampler0, 0);
    else
      gl.uniform1i(u_Sampler1, 1);
  };

  image.src = path;
}
function generateWorld() {
  for(let x=0;x<WORLD_SIZE;x++){
    map[x]=[];
    for(let z=0;z<WORLD_SIZE;z++){
      if(x==0 || z==0 || x==31 || z==31)
        map[x][z]=4;
      else
        map[x][z]=Math.floor(Math.random()*3);
    }
  }
}
function spawnAnimals(){
  for(let i=0;i<5;i++){
    animals.push({
      x: Math.floor(Math.random()*WORLD_SIZE),
      z: Math.floor(Math.random()*WORLD_SIZE)
    });
  }
}
function render(){

  gl.clearColor(0.5,0.7,1,1);
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

  gl.uniformMatrix4fv(u_ViewMatrix,false,camera.viewMatrix.elements);
  gl.uniformMatrix4fv(u_ProjMatrix,false,camera.projectionMatrix.elements);

  drawSky();
  drawGround();
  drawWorld();
  drawAnimals();

  requestAnimationFrame(render);
}
function drawCube(x,y,z,textureID){

  let model = new Matrix4();
  model.setTranslate(x,y,z);
  gl.uniformMatrix4fv(u_ModelMatrix,false,model.elements);

  gl.uniform1i(u_whichTexture, textureID);
  gl.uniform4f(u_BaseColor, 1,1,1,1);
  gl.uniform1f(u_texColorWeight, 1);

  gl.drawArrays(gl.TRIANGLES,0,24);
}

function drawWorld(){
  for(let x=0;x<WORLD_SIZE;x++){
    for(let z=0;z<WORLD_SIZE;z++){
      for(let y=0;y<map[x][z];y++){
        drawCube(x,y,z,0);
      }
    }
  }
}

function drawGround(){
  let model = new Matrix4();
  model.setTranslate(16,-0.5,16);
  model.scale(32,0.1,32);

  gl.uniformMatrix4fv(u_ModelMatrix,false,model.elements);
  gl.uniform1i(u_whichTexture,1);
  gl.uniform1f(u_texColorWeight,1);

  gl.drawArrays(gl.TRIANGLES,0,24);
}

function drawSky(){
  let model = new Matrix4();
  model.setTranslate(16,10,16);
  model.scale(1000,1000,1000);

  gl.uniformMatrix4fv(u_ModelMatrix,false,model.elements);
  gl.uniform1f(u_texColorWeight,0);
  gl.uniform4f(u_BaseColor,0.4,0.7,1,1);

  gl.drawArrays(gl.TRIANGLES,0,24);
}

function drawAnimals(){
  for(let a of animals){
    let model = new Matrix4();
    model.setTranslate(a.x, map[a.x][a.z]+0.5, a.z);

    gl.uniformMatrix4fv(u_ModelMatrix,false,model.elements);
    gl.uniform1f(u_texColorWeight,0);
    gl.uniform4f(u_BaseColor,1,1,0,1);

    gl.drawArrays(gl.TRIANGLES,0,24);
  }
}
function initControls(){

  document.onkeydown = (e)=>{
    if(e.key=="w") camera.moveForward();
    if(e.key=="s") camera.moveBackwards();
    if(e.key=="a") camera.moveLeft();
    if(e.key=="d") camera.moveRight();
    if(e.key=="q") camera.rotate(-3,0);
    if(e.key=="e") camera.rotate(3,0);

    if(e.key=="f") modifyBlock(1);
    if(e.key=="g") modifyBlock(-1);
  };

  let lastX;

  document.onmousemove = (e)=>{
    if(lastX==undefined){ lastX=e.clientX; return; }

    let dx = e.clientX-lastX;
    lastX = e.clientX;

    if(dx>0) camera.panRight();
    else camera.panLeft();
  };
}
function modifyBlock(delta){

  let fx = Math.floor(camera.at.elements[0]);
  let fz = Math.floor(camera.at.elements[2]);

  if(fx>=0 && fx<32 && fz>=0 && fz<32){

    map[fx][fz]+=delta;

    if(map[fx][fz]<0) map[fx][fz]=0;
    if(map[fx][fz]>4) map[fx][fz]=4;
  }
}