Canvas scaling

Minor adjustments for speed

README.md

@@ -1,2 +1,13 @@
-# oceanography-final
-Our final project for EARS 3: Oceanography - a visualization of the oceans using three.js
+# Oceanography Final Project
+
+This is our final project for EARS 3: Oceanography.
+
+It's a dynamic user visualization of the oceans and currents using three.js
+
+One of the large problems was the tradeoff between performance and image quality.
+
+With only the rotating Earth rendering, we get ~40 FPS.
+
+With the 'Currents' visualization running at 2048x1024, it runs at ~8 FPS.
+
+Running with the proper resolution of 4096x2048, it runs at ~4 FPS.

js/main.js

@@ -63,8 +63,8 @@ currentsVideo.loop = true;
 currentsVideo.play();
 
 var currentsCanvas = document.createElement('canvas');
-currentsCanvas.width = 4096;
-currentsCanvas.height = 2048;
+currentsCanvas.width = 2048; //4096;
+currentsCanvas.height = 1024; //2048;
 
 var currentsContext = currentsCanvas.getContext('2d');
 
@@ -157,15 +157,14 @@ function render() {
 
 	// Rotate the earth automatically
 	earth.rotation.y += 0.0005;
-	//clouds.rotation.y += 0.0005;
 
 	controls.update();
 
 	// Update video
-	//currentsContext.drawImage(currentsVideo, 0, 0);
-	//currentsContext.globalCompositeOperation = "destination-out";
-	//currentsContext.drawImage(mask, 0, 0);
-	//currentsContext.globalCompositeOperation = "source-over";
+	currentsContext.drawImage(currentsVideo, 0, 0, currentsCanvas.width, currentsCanvas.height);
+	currentsContext.globalCompositeOperation = "destination-out";
+	currentsContext.drawImage(mask, 0, 0, currentsCanvas.width, currentsCanvas.height);
+	currentsContext.globalCompositeOperation = "source-over";
 	if (currentsTexture) {
 		currentsTexture.needsUpdate = true;
 	}