index.js

(function() {

  glUtils.SL.init({ callback: function() { main(); }});
  function main() {
    var canvas = document.getElementById("glcanvas");
    var gl = glUtils.checkWebGL(canvas);
    var vertexShader = glUtils.getShader(gl, gl.VERTEX_SHADER, glUtils.SL.Shaders.v1.vertex);
    var fragmentShader = glUtils.getShader(gl, gl.FRAGMENT_SHADER, glUtils.SL.Shaders.v1.fragment);
    var vertexShader2 = glUtils.getShader(gl, gl.VERTEX_SHADER, glUtils.SL.Shaders.v2.vertex);
    var fragmentShader2 = glUtils.getShader(gl, gl.FRAGMENT_SHADER, glUtils.SL.Shaders.v2.fragment);
    var program = glUtils.createProgram(gl, vertexShader2, fragmentShader2);
    // var program2 = glUtils.createProgram(gl, vertexShader2, fragmentShader2);
    gl.useProgram(program);

    // Mendefinisikan verteks-verteks
    var vertices = [];
    var cubePoints = [
      [ -0.5, -0.5,  0.5 ],
      [ -0.5,  0.5,  0.5 ],
      [  0.5,  0.5,  0.5 ],
      [  0.5, -0.5,  0.5 ],
      [ -0.5, -0.5, -0.5 ],
      [ -0.5,  0.5, -0.5 ],
      [  0.5,  0.5, -0.5 ],
      [  0.5, -0.5, -0.5 ]
    ];
    var cubeColors = [
      [],
      [1.0, 0.0, 0.0], // merah
      [0.0, 1.0, 0.0], // hijau
      [0.0, 0.0, 1.0], // biru
      [1.0, 1.0, 1.0], // putih
      [1.0, 0.5, 0.0], // oranye
      [1.0, 1.0, 0.0], // kuning
      []
    ];
    var cubeNormals = [
      [],
      [  0.0,  0.0,  1.0 ], // depan
      [  1.0,  0.0,  0.0 ], // kanan
      [  0.0, -1.0,  0.0 ], // bawah
      [  0.0,  0.0, -1.0 ], // belakang
      [ -1.0,  0.0,  0.0 ], // kiri
      [  0.0,  1.0,  0.0 ], // atas
      []
    ];
    function quad(a, b, c, d) {
      var indices = [a, b, c, a, c, d];
      for (var i=0; i < indices.length; i++) {
        for (var j=0; j < 3; j++) {
          vertices.push(cubePoints[indices[i]][j]);
        }
        for (var j=0; j < 3; j++) {
          vertices.push(cubeColors[a][j]);
        }
        for (var j=0; j < 3; j++) {
          vertices.push(cubeNormals[a][j]);
        }
        switch (indices[i]) {
          case a:
            vertices.push(0.0);
            vertices.push(0.0);
            break;
          case b:
            vertices.push(0.0);
            vertices.push(1.0);
            break;
          case c:
            vertices.push(1.0);
            vertices.push(1.0);
            break;
          case d:
            vertices.push(1.0);
            vertices.push(0.0);
            break;
        
          default:
            break;
        }
      }
    }
    quad(1, 0, 3, 2);
    quad(2, 3, 7, 6);
    quad(3, 0, 4, 7);
    quad(4, 5, 6, 7);
    quad(5, 4, 0, 1);
    quad(6, 5, 1, 2);

    console.log(vertices.length);
    console.log(vertices);

    // Membuat vertex buffer object (CPU Memory <==> GPU Memory)
    var vertexBufferObject = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBufferObject);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

    // Membuat sambungan untuk attribute
    var vPosition = gl.getAttribLocation(program, 'vPosition');
    // var vColor = gl.getAttribLocation(program, 'vColor');
    var vNormal = gl.getAttribLocation(program, 'vNormal');
    var vTexCoord = gl.getAttribLocation(program, 'vTexCoord');
    gl.vertexAttribPointer(
      vPosition,    // variabel yang memegang posisi attribute di shader
      3,            // jumlah elemen per atribut
      gl.FLOAT,     // tipe data atribut
      gl.FALSE, 
      11 * Float32Array.BYTES_PER_ELEMENT, // ukuran byte tiap verteks (overall) 
      0                                   // offset dari posisi elemen di array
    );
    // gl.vertexAttribPointer(vColor, 3, gl.FLOAT, gl.FALSE,
      // 11 * Float32Array.BYTES_PER_ELEMENT, 3 * Float32Array.BYTES_PER_ELEMENT);
    gl.vertexAttribPointer(vNormal, 3, gl.FLOAT, gl.FALSE,
      11 * Float32Array.BYTES_PER_ELEMENT, 6 * Float32Array.BYTES_PER_ELEMENT);
    gl.vertexAttribPointer(vTexCoord, 2, gl.FLOAT, gl.FALSE,
      11 * Float32Array.BYTES_PER_ELEMENT, 9 * Float32Array.BYTES_PER_ELEMENT);
    gl.enableVertexAttribArray(vPosition);
    // gl.enableVertexAttribArray(vColor);
    gl.enableVertexAttribArray(vNormal);
    gl.enableVertexAttribArray(vTexCoord);

    // Variabel untuk rotasi
    var thetaSpeed = 0.0;
    var axis = [true, true, true];
    var x = 0;
    var y = 1;
    var z = 2;

    // Definisi untuk matriks model, view, dan projection
    var camera = {x: 0.0, y: 0.0, z:0.0};
    var mmLoc = gl.getUniformLocation(program, 'modelMatrix');
    var vmLoc = gl.getUniformLocation(program, 'viewMatrix');
    var pmLoc = gl.getUniformLocation(program, 'projectionMatrix');
    // Inisiasi matriks proyeksi
    var pm = glMatrix.mat4.create();
    glMatrix.mat4.perspective(pm,
      glMatrix.glMatrix.toRadian(90), // fovy dalam radian
      canvas.width/canvas.height,     // aspect ratio
      0.5,  // near
      10.0, // far  
    );
    gl.uniformMatrix4fv(pmLoc, false, pm);

    // Uniform untuk pencahayaan
    var dcLoc = gl.getUniformLocation(program, 'diffuseColor');
    var dc = glMatrix.vec3.fromValues(1.0, 1.0, 1.0);  // rgb
    gl.uniform3fv(dcLoc, dc);
    var ddLoc = gl.getUniformLocation(program, 'diffusePosition');
    var dd = glMatrix.vec3.fromValues(1., 2., 1.7);  // xyz
    gl.uniform3fv(ddLoc, dd);
    var acLoc = gl.getUniformLocation(program, 'ambientColor');
    var ac = glMatrix.vec3.fromValues(0.2, 0.2, 0.2);
    gl.uniform3fv(acLoc, ac);

    // Uniform untuk modelMatrix vektor normal
    var nmLoc = gl.getUniformLocation(program, 'normalMatrix');

    // Kontrol menggunakan keyboard
    function onKeyDown(event) {
      if (event.keyCode == 189) thetaSpeed -= 0.01;       // key '-'
      else if (event.keyCode == 187) thetaSpeed += 0.01;  // key '='
      else if (event.keyCode == 48) thetaSpeed = 0;       // key '0'
      if (event.keyCode == 88) axis[x] = !axis[x];
      if (event.keyCode == 89) axis[y] = !axis[y];
      if (event.keyCode == 90) axis[z] = !axis[z];
      if (event.keyCode == 38) camera.z -= 0.1;
      else if (event.keyCode == 40) camera.z += 0.1;
      if (event.keyCode == 37) camera.x -= 0.1;
      else if (event.keyCode == 39) camera.x += 0.1;
    }
    document.addEventListener('keydown', onKeyDown);

    // Kontrol menggunakan mouse
    var dragging;
    var rm = glMatrix.mat4.create();
    function onMouseDown(event) {
      var x = event.clientX;
      var y = event.clientY;
      var rect = event.target.getBoundingClientRect();
      // Saat mouse diklik di area aktif browser,
      //  maka flag dragging akan diaktifkan
      if (
        rect.left <= x &&
        rect.right > x &&
        rect.top <= y &&
        rect.bottom > y
      ) {
        dragging = true;
      }
      // Untuk perhitungan di virtual arc ball 
      startPos = projectOntoSurface(glMatrix.vec3.fromValues(x, y, 0));
      currentPos = startPos;
    }
    function onMouseUp(event) {
      // Ketika klik kiri mouse dilepas
      dragging = false;
      if (currentPos != startPos) {
        startQuat = computeCurrentQuat();
      }
    }
    function onMouseMove(event) {
      if (dragging) {
        var x = event.clientX;
        var y = event.clientY;
        // Perhitungan putaran quaternion
        currentPos = projectOntoSurface(glMatrix.vec3.fromValues(x, y, 0));
        glMatrix.mat4.fromQuat(rm, computeCurrentQuat());
      }
    }
    document.addEventListener('mousedown', onMouseDown);
    document.addEventListener('mouseup', onMouseUp);
    document.addEventListener('mousemove', onMouseMove);

    // QUATERNION SECTION
    var startPos, currentPos;
    var startQuat = glMatrix.quat.create();
    //  Mensimulasikan interaksi mouse dengan object
    //  melalui virtual arc ball
    function projectOntoSurface(point) {
      // Melakukan mapping titik pointer mouse ke virtual arc ball
      var radius = canvas.width/3;  // radius virtual arc ball = 1/3 dari lebar kanvas
      var center = glMatrix.vec3.fromValues(canvas.width/2, canvas.height/2, 0);  // titik tengah virtual arc ball
      var p = glMatrix.vec3.subtract(glMatrix.vec3.create(), point, center);
      p[1] = p[1] * (-1); // Flip sumbu y, karena koordinat piksel makin ke bawah makin besar
      var radius2 = radius * radius;
      var length2 = p[0] * p[0] + p[1] * p[1];
      if (length2 <= radius2) p[2] = Math.sqrt(radius2 - length2); // Dapatkan p.z melalui pythagoras
      else {
        p[0] *= radius / Math.sqrt(length2);
        p[1] *= radius / Math.sqrt(length2);
        p[2] = 0;
      }
      return glMatrix.vec3.normalize(glMatrix.vec3.create(), p);
    }
    function computeCurrentQuat() {
      // Secara berkala hitung quaternion rotasi setiap ada perubahan posisi titik pointer
      var axis = glMatrix.vec3.cross(glMatrix.vec3.create(), startPos, currentPos);
      var dot = glMatrix.vec3.dot(startPos, currentPos);
      var angle = Math.acos(dot);
      // console.log(startPos + " | " + currentPos + " | " + angle);
      var rotationQuat = glMatrix.quat.setAxisAngle(glMatrix.quat.create(), axis, angle);
      glMatrix.quat.normalize(rotationQuat, rotationQuat);
      return glMatrix.quat.multiply(glMatrix.quat.create(), rotationQuat, startQuat);
    }

    function render() {
      gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

      // Inisiasi matriks model
      var mm = glMatrix.mat4.create();
      glMatrix.mat4.translate(mm, mm, [0.0, 0.0, -2.0]);

      if (!dragging) {
        // Lakukan perputaran terhadap sumbu x, y, z object
        if (axis[z]) glMatrix.mat4.rotate(rm, rm, thetaSpeed, glMatrix.vec3.fromValues(0, 0, 1));
        if (axis[y]) glMatrix.mat4.rotate(rm, rm, thetaSpeed, glMatrix.vec3.fromValues(0, 1, 0));
        if (axis[x]) glMatrix.mat4.rotate(rm, rm, thetaSpeed, glMatrix.vec3.fromValues(1, 0, 0));
      }
      glMatrix.mat4.multiply(mm, mm, rm);
      gl.uniformMatrix4fv(mmLoc, false, mm);

      // Perhitungan matriks model untuk vektor normal
      var nm = glMatrix.mat3.create();
      glMatrix.mat3.normalFromMat4(nm, mm);
      gl.uniformMatrix3fv(nmLoc, false, nm);
      
      // Perhitungan matriks pandangan (view)
      var vm = glMatrix.mat4.create();
      glMatrix.mat4.lookAt(vm,
        [camera.x, camera.y, camera.z], // di mana posisi kamera (posisi)
        [0.0, 0.0, -2.0], // ke mana kamera menghadap (vektor)
        [0.0, 1.0, 0.0]  // ke mana arah atas kamera (vektor)
      );
      gl.uniformMatrix4fv(vmLoc, false, vm);

      gl.drawArrays(gl.TRIANGLES, 0, 36);
      requestAnimationFrame(render);
    }
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.enable(gl.DEPTH_TEST);

    // Uniform untuk tekstur
    var sampler0Loc = gl.getUniformLocation(program, 'sampler0');
    gl.uniform1i(sampler0Loc, 0);

    // Create a texture.
    var texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    
    // Fill the texture with a 1x1 blue pixel.
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE,
                  new Uint8Array([0, 0, 255, 255]));
    
    // Asynchronously load an image
    var image = new Image();
    image.src = "images/txStainglass.bmp";
    image.addEventListener('load', function() {
      // Now that the image has loaded make copy it to the texture.
      gl.bindTexture(gl.TEXTURE_2D, texture);
      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA,gl.UNSIGNED_BYTE, image);
      gl.generateMipmap(gl.TEXTURE_2D);
    });

    render();
  }
})();