diff options
| -rw-r--r-- | downImg.cgi | 56 | ||||
| -rw-r--r-- | index.html | 19 | ||||
| -rw-r--r-- | js/3D_Landscape.js | 39 | ||||
| -rw-r--r-- | js/RequestAnimationFrame.js | 42 | ||||
| -rw-r--r-- | js/pb.js | 25 | ||||
| -rw-r--r-- | simple_proxy.py | 29 |
6 files changed, 96 insertions, 114 deletions
diff --git a/downImg.cgi b/downImg.cgi deleted file mode 100644 index 8eb37a1..0000000 --- a/downImg.cgi +++ /dev/null @@ -1,56 +0,0 @@ -my $outputDir="d:/Programe/Apache Server/htdocs/landscape/img";
-##---------------------------------------------------------------------------------------
-##GET THE URLS FROM THE HTTP POST REQUEST
-##---------------------------------------------------------------------------------------
-my $query = new CGI;
-##Get texture url
-my $texture = $query->param("texture");
-if ( !$texture )
- {
- ##Problem retrieving the data
- print $query->header ( );
- print "no";
- exit;
- }
-##Get heigthmap url
-my $heightmap = $query->param("heightmap");
-if ( !$heightmap )
- {
- ##Problem retrieving the data
- print $query->header ( );
- print "no";
- exit;
- }
-
-##---------------------------------------------------------------------------------------
-##DOWNLOAD THE PICTURES TO THE OUTPUT DIR
-##---------------------------------------------------------------------------------------
-##Get texture
-getstore($texture, "$outputDir/Texture_orig.jpg");
-
-##Resize texture to 256x256
-my $image = Image::Resize->new("$outputDir/Texture_orig.jpg");
-my $gd = $image->resize(256, 256);
-open(IMG,">$outputDir/Texture.jpg");
-binmode IMG;
-print IMG $gd->jpeg;
-close IMG;
-
-##Get heightmap
-getstore($heightmap, "$outputDir/Heightmap_orig.jpg");
-
-##Resize heightmap to 256x256
-my $image = Image::Resize->new("$outputDir/Heightmap_orig.jpg");
-my $gd = $image->resize(256, 256, 0);
-open(IMG,">$outputDir/Heightmap.jpg");
-binmode IMG;
-print IMG $gd->jpeg;
-close IMG;
-
-
-##---------------------------------------------------------------------------------------
-##PRINT SUCCESS IN HTML FORMAT
-##---------------------------------------------------------------------------------------
-print $query->header ( );
-print "yes";
-exit;
@@ -20,7 +20,7 @@ body { } #title { - font-size: 30px; + font-size: 25px; } #params { @@ -73,12 +73,11 @@ body { <table id="form_table" border="0"> <tr> <td>Texture URL:</td> - <td colspan="2"><input type="text" id="texture" size="70" - value="http://someurl.jpg" /></td> + <td colspan="2"><input type="text" id="texture" size="35" value="http://someurl.jpg" /></td> </tr> <tr> <td>Heightmap URL:</td> - <td colspan="2"><input type="text" id="heightmap" size="70" + <td colspan="2"><input type="text" id="heightmap" size="35" value="http://someurl.jpg" /><br /></td> </tr> <tr> @@ -91,6 +90,18 @@ body { </form> </div> </td> + <td> + <div id="new_thing"> + <table id="username_etc" border=0> + <tr> + <td colspan="2">Username: <input type="text" size="10" id="username" value="" /></td> + </tr> + <tr> + <td id="gallery_link" colspan="2">→<a href="http://asdf.us/im/gallery" target="_blank" >pb gallery</a></td> + </tr> + </table> + </div> + </td> </tr> </table> <div id="container"> 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); + }; +}()); @@ -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) { diff --git a/simple_proxy.py b/simple_proxy.py new file mode 100644 index 0000000..cde43e8 --- /dev/null +++ b/simple_proxy.py @@ -0,0 +1,29 @@ +#!/usr/bin/env python3 +import http.server +import urllib.request +import re +import sys + +class MyHTTPRequestHandler(http.server.CGIHTTPRequestHandler ): + def end_headers(self): + self.send_my_headers() + + http.server.CGIHTTPRequestHandler .end_headers(self) + + def send_my_headers(self): + self.send_header("Access-Control-Allow-Origin", "*") + + def do_GET(self): + if self.path[0:14] == "/cgi-bin/proxy": + sys.stderr.write(self.path[15:]); + self.copyfile(urllib.request.urlopen(self.path[15:]), self.wfile) + super().do_GET(); + else: + super().do_GET() + + def do_POST(self): + super().do_POST(); + +if __name__ == '__main__': + http.server.test(port=8181, HandlerClass=MyHTTPRequestHandler) + |