Removed border of canvas for perf

prototype/index.md

@@ -17,6 +17,7 @@ when you come closer to them, and you can automatically move to them by
 clicking on them. You can reset the camera at anytime by clicking on the reset
 button.
 
+<button id="full" style="margin-bottom: 10px;">Fullscreen</button>
 <button id="reset" style="margin-bottom:10px">Reset camera</button>
 <input type="checkbox" id="fullarrow" style="margin-bottom:10px">
 <label for="fullarrow">Full arrow</label>
@@ -25,4 +26,4 @@ button.
 <input type="checkbox" id="showarrows" style="margin-bottom:10px" checked>
 <label for="showarrows">Show arrows</label>
 
-<div id="container"> </div>
+<div id="container" style="padding: 0px; margin: 0px;"></div>

static/js/FixedCamera.js

@@ -162,7 +162,7 @@ FixedCamera.prototype.regenerateArrow = function(mainCamera) {
     var limit = this.fullArrow ? 0.1 : 0.3;
 
     // for (var i = this.fullArrow ? 0 : 0.5; i <= 1.001; i += 0.05) {
-    for (var i = 1; i > limit; i -= 0.01) {
+    for (var i = 1; i > limit; i -= 0.05) {
         point = hermite.eval(i);
         deriv = hermite.prime(i);
         up.cross(deriv);
@@ -211,7 +211,7 @@ FixedCamera.prototype.regenerateArrow = function(mainCamera) {
     this.arrow.geometry.elementsNeedUpdate = true;
     this.arrow.geometry.groupsNeedUpdate = true;
     this.arrow.geometry.normalsNeedUpdate = true;
-    this.arrow.geometry.facesNeedUpdate = true;
+    // this.arrow.geometry.facesNeedUpdate = true;
 
 }
 

static/js/prototype/main.js

@@ -7,6 +7,7 @@ var cameras = new CameraContainer();
 var spheres = new Array(mesh_number);
 var visible = 0;
 var stats;
+var canvas;
 var ctx2d;
 
 var loader;
@@ -22,6 +23,8 @@ function init() {
     // Collidable objects to prevent camera from traversing objects
     var collidableObjects = new Array();
 
+    document.getElementById('full').onclick = fullscreen;
+
     // Add the listener on the button
     document.getElementById('reset').onclick = function() { cameras.mainCamera().reset(); };
     var fullarrow = document.getElementById('fullarrow');
@@ -53,7 +56,7 @@ function init() {
     renderer.setClearColor(0x87ceeb);
     renderer.sortObjects = false;
 
-    var canvas = document.createElement('canvas');
+    canvas = document.createElement('canvas');
     canvas.style.position ="absolute";
     canvas.style.cssFloat = 'top-left';
     canvas.width = container_size.width;
@@ -78,7 +81,7 @@ function init() {
     // init light
     var directional_light = new THREE.DirectionalLight(0xdddddd);
     directional_light.position.set(1, 0.5, 1).normalize();
-    directional_light.castShadow = true;
+    directional_light.castShadow = false;
     scene.add(directional_light);
 
     var ambient_light = new THREE.AmbientLight(0x444444);
@@ -140,8 +143,8 @@ function init() {
         object.traverse(function (object) {
             if (object instanceof THREE.Mesh) {
                 object.material.side = THREE.DoubleSide;
-                object.geometry.mergeVertices();
+                // object.geometry.mergeVertices();
-                object.geometry.computeVertexNormals();
+                // object.geometry.computeVertexNormals();
                 object.raycastable = true;
                 if (object.material.name === 'Material.054_777F0E0B_c.bmp' ||
                     object.material.name === 'Material.061_5C3492AB_c.bmp'   ) {
@@ -207,7 +210,7 @@ function init() {
 
     container.addEventListener('mousedown', function(event) { if (event.which == 1) click(event); }, false);
     container.addEventListener('mousemove', updateMouse, false);
-    // container.addEventListener('keydown', updateMouse, false);
+    document.addEventListener('keydown', function(event) { if (event.keyCode == 27) { stopFullscreen();} }, false);
 
     camera1.collidableObjects = collidableObjects;
 
@@ -217,6 +220,50 @@ function init() {
 
 }
 
+function fullscreen() {
+    container.style.position = "absolute";
+    container.style.cssFloat = "top-left";
+    container.style.top = "0px";
+    container.style.bottom = "0px";
+    container.style.left = "0px";
+    container.style.right = "0px";
+    container.style.width="";
+    container.style.height="";
+    container.style.overflow = "hidden";
+
+    // canvas.style.position = "absolute";
+    // canvas.style.cssFloat = "top-left";
+    // canvas.style.top = "0px";
+    // canvas.style.bottom = "0px";
+    // canvas.style.left = "0px";
+    // canvas.style.right = "0px";
+    // canvas.width=window.innerWidth;
+    // canvas.height=window.innerHeight;
+    // canvas.style.overflow = "hidden";
+
+    onWindowResize();
+}
+
+function stopFullscreen() {
+    container.style.position = "";
+    container.style.cssFloat = "";
+    container.style.width = container_size.width + "px";
+    container.style.height = container_size.height + "px";
+    container.style.overflow = "";
+
+    // canvas.style.position = "";
+    // canvas.style.cssFloat = "";
+    // canvas.style.width = container_size.width + "px";
+    // canvas.style.height = container_size.height + "px";
+    // canvas.style.overflow = "";
+
+    onWindowResize();
+}
+
+function log() {
+    console.log(container.style.width);
+}
+
 function createCamera(position, target) {
     var camera = new FixedCamera(
             50,
@@ -261,7 +308,14 @@ function render() {
     renderer.render(scene, cameras.mainCamera());
 
     // Clear canvas
-    ctx2d.clearRect(0,0,container_size.width, container_size.height);
+    // canvas.width = canvas.width;
+
+    width = container.offsetWidth / 5;
+    height = container.offsetHeight / 5;
+    left = prev.x - width/2;
+    bottom =  renderer.domElement.height - prev.y + height/5;
+
+    // ctx2d.clearRect(left-1,bottom+1,width+1,height+1);
 
     if (prev.go) {
         // Hide arrows
@@ -274,24 +328,24 @@ function render() {
 
 
         // Draw border
-        var can_bottom = container.offsetHeight - bottom - height - 1;
+        // var can_bottom = container.offsetHeight - bottom - height ;
-        ctx2d.strokeStyle = "#ffffff";
+        // ctx2d.strokeStyle = "#ffffff";
-        ctx2d.beginPath();
+        // ctx2d.beginPath();
-        ctx2d.moveTo(left-1, can_bottom);
+        // ctx2d.moveTo(left-1, can_bottom);
-        ctx2d.lineTo(left-1, can_bottom + height);
+        // ctx2d.lineTo(left-1, can_bottom + height);
-        ctx2d.lineTo(left + width-1, can_bottom + height);
+        // ctx2d.lineTo(left + width-1, can_bottom + height);
-        ctx2d.lineTo(left + width-1, can_bottom);
+        // ctx2d.lineTo(left + width-1, can_bottom);
-        ctx2d.closePath();
+        // ctx2d.closePath();
-        ctx2d.stroke();
+        // ctx2d.stroke();
 
-        ctx2d.strokeStyle = "#000000";
+        // ctx2d.strokeStyle = "#000000";
-        ctx2d.beginPath();
+        // ctx2d.beginPath();
-        ctx2d.moveTo(left, can_bottom + 1);
+        // ctx2d.moveTo(left, can_bottom + 1);
-        ctx2d.lineTo(left, can_bottom + height - 1);
+        // ctx2d.lineTo(left, can_bottom + height - 1);
-        ctx2d.lineTo(left + width - 2 , can_bottom + height-1);
+        // ctx2d.lineTo(left + width - 2 , can_bottom + height-1);
-        ctx2d.lineTo(left + width - 2, can_bottom+1);
+        // ctx2d.lineTo(left + width - 2, can_bottom+1);
-        ctx2d.closePath();
+        // ctx2d.closePath();
-        ctx2d.stroke();
+        // ctx2d.stroke();
 
         // Do render in previsualization
         prev.camera.look();