Updated to support glTF 2.0. Added more intuitive controls.

index.html

@@ -42,7 +42,7 @@
     <script src="../dat.gui-master/build/dat.gui.min.js"></script>
     <script src="../gl-matrix-master/dist/gl-matrix-min.js"></script>
     <script src="jquery-3.1.1.js"></script>
-    <script src="scene.js"></script>
+    <script src="scene2.js"></script>
     <script src="main.js"></script>
   </body>
 </html>

main.js

@@ -210,22 +210,14 @@ function loadCubeMap(gl, envMap, type, mipLevel) {
   return 1;
 }
 
-function updateDiffuse(value, gl, scene, modelMatrix, viewMatrix, projectionMatrix, u_mvpMatrix, u_NormalMatrix) {
-  var u_BaseColor = gl.getUniformLocation(gl.program, 'u_BaseColor');
-  gl.uniform3f(u_BaseColor, value[0]/255, value[1]/255, value[2]/255);
-  scene.drawScene(gl, modelMatrix, viewMatrix, projectionMatrix, u_mvpMatrix, u_NormalMatrix);
-}
-
-function updateMetallic(value, gl, scene, modelMatrix, viewMatrix, projectionMatrix, u_mvpMatrix, u_NormalMatrix) {
-  var u_Metallic = gl.getUniformLocation(gl.program, 'u_Metallic');
-  gl.uniform1f(u_Metallic, value);
-  scene.drawScene(gl, modelMatrix, viewMatrix, projectionMatrix, u_mvpMatrix, u_NormalMatrix);
-}
-
-function updateRoughness(value, gl, scene, modelMatrix, viewMatrix, projectionMatrix, u_mvpMatrix, u_NormalMatrix) {
-  var u_Roughness = gl.getUniformLocation(gl.program, 'u_Roughness');
-  gl.uniform1f(u_Roughness, value);
-  scene.drawScene(gl, modelMatrix, viewMatrix, projectionMatrix, u_mvpMatrix, u_NormalMatrix);
+// Update model from dat.gui change
+function updateModel(value, gl, scene, viewMatrix, projectionMatrix, u_mvpMatrix, u_NormalMatrix) {
+  scene = new Scene(gl, "./models/" + value + "/glTF/", "./models/" + value + "/glTF/" + value + ".gltf");
+  scene.projectionMatrix = projectionMatrix;
+  scene.viewMatrix = viewMatrix;
+  scene.u_mvpMatrix = u_mvpMatrix;
+  scene.u_NormalMatrix = u_NormalMatrix;
+  return scene;
 }
 
 function main() {
@@ -245,6 +237,7 @@ function main() {
 
   // Load extensions
   gl.getExtension('EXT_shader_texture_lod');
+  gl.getExtension('OES_standard_derivatives');
 
   // Initialize shaders
   $.ajaxSetup({
@@ -282,8 +275,6 @@ function main() {
   gl.useProgram(program);
   gl.program = program;
 
-  // Set positions of vertices
-  //initCubeBuffers(1.0, 1.0, 1.0, gl);
   // Create cube maps
   var envMap = "papermill";
   //loadCubeMap(gl, envMap, "environment");
@@ -296,21 +287,21 @@ function main() {
 
   // Camera
   var u_Camera = gl.getUniformLocation(gl.program, 'u_Camera');
-  gl.uniform3f(u_Camera, 0.0, 0.0, 2.0);
+  gl.uniform3f(u_Camera, 0.0, 0.0, -4.0);
 
   // Model matrix
   var modelMatrix = mat4.create();
 
   // View matrix
   var viewMatrix = mat4.create();
-  var eye = vec3.fromValues(0.0, 0.0, 2.0);
+  var eye = vec3.fromValues(0.0, 0.0, -4.0);
   var at = vec3.fromValues(0.0, 0.0, 0.0);
-  var up = vec3.fromValues(0.0, -1.0, 0.0);
+  var up = vec3.fromValues(0.0, 1.0, 0.0);
   mat4.lookAt(viewMatrix, eye, at, up);
 
   // Projection matrix
   var projectionMatrix = mat4.create();
-  mat4.perspective(projectionMatrix, 30.0, canvas.width/canvas.height, 0.1, 100.0);
+  mat4.perspective(projectionMatrix, 70.0, canvas.width/canvas.height, 0.1, 100.0);
 
   // Get location of mvp matrix uniform
   var u_mvpMatrix = gl.getUniformLocation(gl.program, 'u_mvpMatrix');
@@ -328,61 +319,66 @@ function main() {
   gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 
   // Load scene
-  var scene = new Scene(gl, "./models/damagedHelmet/", "./models/damagedHelmet/Helmet.gltf");
-
-  document.onkeydown = function(ev) {keydown(ev, gl, scene, modelMatrix, viewMatrix, projectionMatrix, u_mvpMatrix, u_NormalMatrix);};
+  //var scene = new Scene(gl, "./models/DamagedHelmetModified/glTF/", "./models/DamagedHelmetModified/glTF/DamagedHelmetModified.gltf");
+  var scene = new Scene(gl, "./models/Avocado/glTF/", "./models/Avocado/glTF/Avocado.gltf");
+  scene.projectionMatrix = projectionMatrix;
+  scene.viewMatrix = viewMatrix;
+  scene.u_mvpMatrix = u_mvpMatrix;
+  scene.u_NormalMatrix = u_NormalMatrix;
+
+  // Set control callbacks
+  canvas.onmousedown = function(ev) {handleMouseDown(ev);};
+  document.onmouseup = function(ev) {handleMouseUp(ev);};
+  document.onmousemove = function(ev) {handleMouseMove(ev, gl, scene);};
+  window.onscroll = function() {handleScroll(gl, scene);};
 
   // Initialize GUI  
   var gui = new dat.GUI();
   var folder = gui.addFolder("Metallic-Roughness Material");
-  var material = {
-    'Base Color': [180, 180, 180],
-    'Metallic': 0.5,
-    'Roughness': 0.5
-  };
-  folder.addColor(material, 'Base Color').onChange(function(value) {
-    updateDiffuse(value, gl, scene, modelMatrix, viewMatrix, projectionMatrix, u_mvpMatrix, u_NormalMatrix);
-  });
-  folder.add(material, 'Metallic', 0.0, 1.0).onChange(function(value) {
-    updateMetallic(value, gl, scene, modelMatrix, viewMatrix, projectionMatrix, u_mvpMatrix, u_NormalMatrix);
-  });
-  folder.add(material, 'Roughness', 0.0, 1.0).onChange(function(value) {
-    updateRoughness(value, gl, scene, modelMatrix, viewMatrix, projectionMatrix, u_mvpMatrix, u_NormalMatrix);
+
+  var text = {Model: "Avocado"};
+  folder.add(text, 'Model', ['Avocado', 'BarramundiFish', 'BoomBox', 'Corset', 'Telephone']).onChange(function(value) {
+    scene = updateModel(value, gl, scene, viewMatrix, projectionMatrix, u_mvpMatrix, u_NormalMatrix);
   });
   folder.open();
-  updateDiffuse(material["Base Color"], gl, scene, modelMatrix, viewMatrix, projectionMatrix, u_mvpMatrix, u_NormalMatrix);
-  updateMetallic(material["Metallic"], gl, scene, modelMatrix, viewMatrix, projectionMatrix, u_mvpMatrix, u_NormalMatrix);
-  updateRoughness(material["Roughness"], gl, scene, modelMatrix, viewMatrix, projectionMatrix, u_mvpMatrix, u_NormalMatrix);
-
-  // Draw 
-  var tick = function() {
-    animate(roll);
-    scene.drawScene(gl, modelMatrix, viewMatrix, projectionMatrix, u_mvpMatrix, u_NormalMatrix);
-    requestAnimationFrame(tick);
-  };
-  tick();
 }
 
-/***** ANIMATE ******/
+// ***** Mouse Controls ***** //
+var mouseDown = false;
 var roll = 0.0;
 var pitch = 0.0;
-var prev = Date.now();
-function animate(angle) {
-  var curr = Date.now();
-  var elapsed = curr - prev;
-  prev = curr;
-  roll = angle + ((Math.PI / 16.0) * elapsed) / 1000.0;
+var translate = 0.0;
+var lastMouseX = null;
+var lastMouseY = null;
+function handleMouseDown(ev) {
+  mouseDown = true;
+  lastMouseX = ev.clientX;
+  lastMouseY = ev.clientY;
 }
 
-/****** KEYDOWN EVENT ******/
-function keydown(ev, gl, scene, modelMatrix, viewMatrix, projectionMatrix, u_mvpMatrix, u_NormalMatrix) {
-  switch (ev.keyCode) {
-    case 39: roll+=0.02; break;
-    case 37: roll-=0.02; break;
-    case 38: pitch+=0.02; break;
-    case 40: pitch-=0.02; break;
-    default: return;
+function handleMouseUp(ev) {
+  mouseDown = false;
+}
+
+function handleMouseMove(gl, scene) {
+  if (!mouseDown) {
+    return;
   }
+  var newX = ev.clientX;
+  var newY = ev.clientY;
+
+  var deltaX = newX - lastMouseX;
+  roll += (deltaX / 100.0); 
+
+  var deltaY = newY - lastMouseY;
+  pitch += (deltaY / 100.0);
+
+  lastMouseX = newX;
+  lastMouseY = newY;
+
+  scene.drawScene(gl);
+}
 
-  scene.drawScene(gl, modelMatrix, viewMatrix, projectionMatrix, u_mvpMatrix, u_NormalMatrix);
+function handleScroll(ev, gl, scene) {
+  console.log("hey");
 }