prepare demo for envmap rendering

ArvinCheng2019 · Mar 3, 2019 · bb81cdf · bb81cdf
1 parent d7494a0
commit bb81cdf
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 15 deletions.
diff --git a/src/app.ts b/src/app.ts
@@ -26,6 +26,7 @@ class App implements IApp {
     }
 
     private config(): void{
+
         // to support JSON-encoded bodies
         this._express.use(express.json({
             limit: '50mb'

diff --git a/test_client/demo.html b/test_client/demo.html
@@ -35,7 +35,8 @@
     <body onload="initScene()" onbeforeunload="closeSession(demo.sessionGuid)" >
         <div class="canvas-wrapper">
             <div class="toolbar">
-                <button id="btnRender" onclick="renderScene(demo.scene, demo.camera)">Render</button>
+                <button id="btnRenderImg" onclick="renderScene(demo.scene, demo.camera, 640, 480, { camera_type: 0, camera_overrideFOV: false }, updateImg)">Render to Slider</button>
+                <button id="btnRenderEnv" onclick="renderScene(demo.scene, demo.camera, 1000, 500, { camera_type: 1, camera_overrideFOV: true, camera_fov: 360 }, openEnvmapViewer)">Render Environment</button>
                 <button id="btnUpdateCam" onclick="updateCamera(demo.camera)">Update Camera</button>
                 <div id="renderStatus" class="status"></div>
             </div>

diff --git a/test_client/envmap_demo.html → test_client/envmap-viewer.html b/test_client/envmap_demo.html → test_client/envmap-viewer.html
@@ -28,15 +28,15 @@
 			}
 		</style>
 
-                <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.js"></script>
-                <script type="text/javascript" src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
+		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.js"></script>
+		<script type="text/javascript" src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
 		<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
 
 		<script>
 			var urlString = window.location.href;
 			var url = new URL(urlString);
-			var envmapGuid = url.searchParams.get("guid");
-			console.log(envmapGuid);
+			var envmapUrl = url.searchParams.get("url[0]");
+			console.log(envmapUrl);
 		</script>
 
 	</head>
@@ -73,7 +73,7 @@
 				geometry.scale( - 1, 1, 1 );
 
 				var material = new THREE.MeshBasicMaterial( {
-					map: new THREE.TextureLoader().load( `https://acc.renderfarmjs.com/v1/renderoutput/${envmapGuid}.png` )
+					map: new THREE.TextureLoader().load( envmapUrl )
 				} );
 
 				mesh = new THREE.Mesh( geometry, material );

diff --git a/test_client/js/demo.js b/test_client/js/demo.js
@@ -116,6 +116,23 @@ function initScene() {
     cubey.add(cubez);
     // =============
 
+    var roomGeometry = new THREE.BoxGeometry( 100, 80, 100 );
+    // invert the geometry on the x-axis so that all of the faces point inward
+    roomGeometry.scale( - 1, 1, 1 );
+    roomGeometry = new THREE.BufferGeometry().fromGeometry(roomGeometry);
+
+    var roomMaterial = new THREE.MeshBasicMaterial( {
+        color: 0xA9A0A2
+    } );
+
+    let roomMesh = new THREE.Mesh( roomGeometry, roomMaterial );
+    roomMesh.name = "Room001";
+    roomMesh.applyMatrix(new THREE.Matrix4().makeTranslation(0,39.9,0));
+    roomMesh.castShadow = false;
+    roomMesh.receiveShadow = true;
+    scene.add( roomMesh );
+
+
     var planeGeometry = new THREE.PlaneGeometry( 15, 15, 1 );
         planeGeometry = new THREE.BufferGeometry().fromGeometry(planeGeometry);
     var material = new THREE.MeshPhongMaterial({
@@ -142,16 +159,17 @@ function initScene() {
     animate();
 }
 
-function renderScene(scene, camera, onRenderComplete) {
+function renderScene(scene, camera, width, height, renderSettings, onRenderComplete) {
     console.log(camera);
 
-    $("#btnRender").attr("disabled", true);
+    $("#btnRenderImg").attr("disabled", true);
+    $("#btnRenderEnv").attr("disabled", true);
     $("#renderStatus").css("color", "gray");
 
     // have session? just do it
     if (window.demo.sessionGuid) {
         updateCamera(window.demo.camera);
-        postJob(window.demo.sessionGuid, window.demo.camera.name, onRenderComplete);
+        postJob(window.demo.sessionGuid, window.demo.camera.name, width, height, renderSettings, onRenderComplete);
         return;
     }
 
@@ -188,7 +206,7 @@ function renderScene(scene, camera, onRenderComplete) {
                 rfarm.postScene(newSession.guid, sceneJson, function(result) {
                     console.log(result);
 
-                    postJob(newSession.guid, window.demo.camera.name, onRenderComplete);
+                    postJob(newSession.guid, window.demo.camera.name, width, height, renderSettings, onRenderComplete);
                 });
 
             });
@@ -197,13 +215,14 @@ function renderScene(scene, camera, onRenderComplete) {
     }, function(sessionError) {
         $("#renderStatus").text(`${sessionError.message} - ${sessionError.error}`);
         $("#renderStatus").css("color", "red");
-        $("#btnRender").attr("disabled", false);
+        $("#btnRenderImg").attr("disabled", false);
+        $("#btnRenderEnv").attr("disabled", false);
     })
 }
 
-function postJob(sessionGuid, cameraName, onRenderComplete) {
+function postJob(sessionGuid, cameraName, width, height, renderSettings, onRenderComplete) {
     $("#renderStatus").text("Starting render...");
-    rfarm.createJob(sessionGuid, cameraName, 3000, 1500, { camera_type: 1, camera_overrideFOV: true, camera_fov: 360 }, function(job) {
+    rfarm.createJob(sessionGuid, cameraName, width, height, renderSettings, function(job) {
         $("#renderStatus").text(`Rendering... 0 sec.`);
 
         let t0 = new Date();
@@ -219,8 +238,9 @@ function postJob(sessionGuid, cameraName, onRenderComplete) {
 
                     clearInterval(jobTimer);
                     console.log(updatedJob.urls);
-                    $("#vray").attr("src", updatedJob.urls[0]);
-                    $("#btnRender").attr("disabled", false);
+
+                    $("#btnRenderImg").attr("disabled", false);
+                    $("#btnRenderEnv").attr("disabled", false);
 
                     if (onRenderComplete) onRenderComplete( updatedJob.urls[0] );
                 }
@@ -255,3 +275,13 @@ function saveJson(jsonObj, filename) {
     });
     saveAs(blob, filename);
 }
+
+function updateImg(url) {
+    $("#vray").attr("src", url);
+}
+
+function openEnvmapViewer(url) {
+    console.log(" >> openEnvmapViewer: ", url)
+    var win = window.open(`http://renderfarmjs.com/envmap-viewer?url[0]=${url}`, '_blank');
+    win.focus();
+}