working

3 files changed, 52 insertions, 54 deletions

diff --git a/js/3D_Landscape.js b/js/3D_Landscape.js
index 6871786..ca71ea6 100644
--- a/js/3D_Landscape.js
+++ b/js/3D_Landscape.js
@@ -1,10 +1,10 @@
 var container, stats;

 var camera, controls, scene, renderer;

 var mesh, texture, material;

+//FIXME experiment with these fixed params

 var worldWidth = 256, worldDepth = 256, worldHalfWidth = worldWidth / 2, worldHalfDepth = worldDepth / 2;

-var textureURL, heightmapURL;

-var textureFile = 'img/test2.gif'; //texture doesn't need resizing

-var heightmapFile = 'img/testnew.png';

+var textureFile = 'img/Texture.jpg'; 

+var heightmapFile = 'img/Heightmap.jpg';

 var pos_x, pos_y, pos_z, rot_x, rot_y, rot_z;

 var wf = false;

 

@@ -17,17 +17,15 @@ function runWebGLSimulation(){
 	}

 

 	//Start Graphics

-	initGraphics(function(){ animate() });

+	initGraphics(textureFile, heightmapFile, function(){ animate() });

 	//Start Scene Animation

 }

 

-function initGraphics(cb) {

+function initGraphics(textureFile, heightmapFile, cb) {

 

 	container = document.getElementById('container');

-	

 	//Set camera

 	camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 20000);

-	

 	//Set scene

 	scene = new THREE.Scene();

 	

@@ -45,7 +43,6 @@ function initGraphics(cb) {
 	var img = new Image();

 	img.src = heightmapFile;

 

-//FIXME

   img.onload = function(){

     context.drawImage(img, 0, 0);

     image = context.getImageData(0, 0, worldWidth, worldDepth);

@@ -95,12 +92,6 @@ function initGraphics(cb) {
     container.innerHTML = "";

     container.appendChild(renderer.domElement);

 

-  //	//Add FPS statistics

-  //	stats = new Stats();

-  //	stats.domElement.style.position = 'absolute';

-  //	stats.domElement.style.top = '0px';

-  //	container.appendChild(stats.domElement);

-

     //Get default values

     pos_x = mesh.position.x;

     pos_y = mesh.position.y;

@@ -182,16 +173,28 @@ function initGraphics(cb) {
   };

 }

 

-

+var requestId;

+function loop() {

+    render();

+    requestId = window.requestAnimationFrame(loop);

+}

 function animate() {

-	render();

-	requestAnimationFrame(animate);

+    if (!requestId) {

+       loop();

+    }

+}

+function stop_animating() {

+    if (requestId) {

+       window.cancelAnimationFrame(requestId);

+       requestId = undefined;

+    }

 }

 

+

 function render() {

 	renderer.render(scene, camera);

 }

 

 window.onload= function(e){

-	initGraphics(function(){ animate() });

+  runWebGLSimulation();

 }

diff --git a/js/RequestAnimationFrame.js b/js/RequestAnimationFrame.js
index 77f85c5..b1940ae 100644
--- a/js/RequestAnimationFrame.js
+++ b/js/RequestAnimationFrame.js
@@ -1,22 +1,24 @@
-/**
- * Provides requestAnimationFrame in a cross browser way.
- * http://paulirish.com/2011/requestanimationframe-for-smart-animating/
- */
+(function() {
+    var lastTime = 0;
+    var vendors = ['webkit', 'moz'];
+    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
+        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
+        window.cancelAnimationFrame =
+          window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
+    }
 
-if ( !window.requestAnimationFrame ) {
+    if (!window.requestAnimationFrame)
+        window.requestAnimationFrame = function(callback, element) {
+            var currTime = new Date().getTime();
+            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
+            var id = window.setTimeout(function() { callback(currTime + timeToCall); },
+              timeToCall);
+            lastTime = currTime + timeToCall;
+            return id;
+        };
 
-	window.requestAnimationFrame = ( function() {
-
-		return window.webkitRequestAnimationFrame ||
-		window.mozRequestAnimationFrame ||
-		window.oRequestAnimationFrame ||
-		window.msRequestAnimationFrame ||
-		function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) {
-
-			window.setTimeout( callback, 1000 / 60 );
-
-		};
-
-	} )();
-
-}
+    if (!window.cancelAnimationFrame)
+        window.cancelAnimationFrame = function(id) {
+            clearTimeout(id);
+        };
+}());
diff --git a/js/pb.js b/js/pb.js
index 0e44fc8..b2babb5 100644
--- a/js/pb.js
+++ b/js/pb.js
@@ -1,4 +1,5 @@
 var loadUrl = '/img/load';
+var textureURL, heightmapURL;
 function getCookie(name) {
 	var arg = name + "=";
 	var alen = arg.length;
@@ -49,23 +50,15 @@ function saveScene(){
 
 function loadNew() {
 	//Get values for url
-	textureURL = document.getElementById("texture").value;
-	heightmapURL = document.getElementById("heightmap").value;
+	textureURL = document.getElementById("texture").value.replace(/\s/,"");
+	heightmapURL = document.getElementById("heightmap").value.replace(/\s/,"");
 	
-	//Validate urls
-	if (isUrl(textureURL) && isUrl(heightmapURL)){
-		//Post to server
-	    $.post(
-	        loadUrl,
-	        { texture: textureURL, heightmap: heightmapURL },
-	        function(response) {
-             console.log(response);
-	        }
-	    ); 
-	} else {	
-		//Invalid URL(s)
-		alert("Texture and/or heightmap URLs are invalid.\nAlso note that only JPG pictures are supported!");
-	}
+  console.log(textureURL);
+  console.log(heightmapURL);
+    stop_animating();
+    var new_texture = '/cgi-bin/proxy?'+textureURL;
+    var new_heightmap = '/cgi-bin/proxy?'+heightmapURL;
+    initGraphics(new_texture, new_heightmap, function(){ animate() } );
 }
 
 function isUrl(s) {