Update app.py

app.py

@@ -579,11 +579,7 @@ async(c, o, p, d, n, m)=>{
                 BABYLON.Engine.LastCreatedScene.render();
             }
           });
-
-          alert(JSON.parse(document.getElementById("output_video").getElementsByTagName("video")));
-          alert(JSON.parse(document.getElementById("depth_video").getElementsByTagName("video")));
         
-          
           BABYLON.Engine.LastCreatedScene.getEngine().setHardwareScalingLevel(1.0);
           BABYLON.Engine.LastCreatedScene.clearColor = new BABYLON.Color4(255,255,255,255);
           BABYLON.Engine.LastCreatedScene.ambientColor = new BABYLON.Color4(255,255,255,255);
@@ -668,6 +664,9 @@ async(c, o, p, d, n, m)=>{
           BABYLON.Engine.LastCreatedScene.meshes[BABYLON.Engine.LastCreatedScene.meshes.length-1].rotation.y = coords[o_[j]].heading / 180 * Math.PI;
           BABYLON.Engine.LastCreatedScene.meshes[BABYLON.Engine.LastCreatedScene.meshes.length-1].rotation.z = -coords[o_[j]].pitch / 180 * Math.PI;
         }*/
+        alert(document.getElementById("output_video").innerHTML);
+        alert(document.getElementById("depth_video").innerHTML);
+          
         const videoDome = new BABYLON.VideoDome(
             "videoDome",
             [document.getElementById("output_video").getElementsByTagName("video")[0].src],
@@ -690,14 +689,6 @@ async(c, o, p, d, n, m)=>{
         BABYLON.Engine.LastCreatedScene.meshes[BABYLON.Engine.LastCreatedScene.meshes.length-1].material.useAlphaFromEmissiveTexture = true;
         BABYLON.Engine.LastCreatedScene.meshes[BABYLON.Engine.LastCreatedScene.meshes.length-1].alphaIndex = 1;
         BABYLON.Engine.LastCreatedScene.meshes[BABYLON.Engine.LastCreatedScene.meshes.length-1].visibility = 0.9999;
-        
-        window.video = document.getElementById("depth_video").getElementsByTagName("video")[0];
-        videoDome.videoTexture.video.oncanplaythrough = function () {
-          videoDome.videoTexture.video.play();
-          video.play();
-          videoDome.videoTexture.video.oncanplaythrough = null;
-          video.oncanplaythrough = null;
-        };
 
         window.md = false;
         window.r_old = 1.0;
@@ -755,15 +746,7 @@ async(c, o, p, d, n, m)=>{
         document.getElementById("model3D").getElementsByTagName("canvas")[0].addEventListener('pointerout', function() {
           md = false;
         });
-
-        video.addEventListener("playing", function () {
-          const canvas = document.createElement("canvas");
-          canvas.width = video.videoWidth;
-          canvas.height = video.videoHeight;
-          ctx = canvas.getContext("2d", { willReadFrequently: true });
-
-          updateMap();
-        });
+        
 
         function requestMap() {
           ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
@@ -774,66 +757,30 @@ async(c, o, p, d, n, m)=>{
           applyDisplacementMapFromBuffer(BABYLON.Engine.LastCreatedScene.meshes[BABYLON.Engine.LastCreatedScene.meshes.length-1], buffer, video.videoWidth, video.videoHeight, 0, 1, null, null, true);
           setTimeout(updateMap, 40);
         }
+        window.requestMap = requestMap;
 
         function updateMap() {
           requestAnimationFrame(requestMap);
         }
+        window.updateMap = updateMap;
 
-    function applyDisplacementMapFromBuffer(
-        mesh,
-        buffer,
-        heightMapWidth,
-        heightMapHeight,
-        minHeight,
-        maxHeight,
-        uvOffset,
-        uvScale,
-        forceUpdate
-    ) {
-        if (!mesh.isVerticesDataPresent(BABYLON.VertexBuffer.PositionKind) || !mesh.isVerticesDataPresent(BABYLON.VertexBuffer.NormalKind) || !mesh.isVerticesDataPresent(BABYLON.VertexBuffer.UVKind)) {
-            alert("Cannot call applyDisplacementMap: Given mesh is not complete. Position, Normal or UV are missing");
-            return mesh;
-        }
-
-        const positions = mesh.getVerticesData(BABYLON.VertexBuffer.PositionKind, true, true);
-        const normals = mesh.getVerticesData(BABYLON.VertexBuffer.NormalKind);
-        const uvs = mesh.getVerticesData(BABYLON.VertexBuffer.UVKind);
-
-        let position = BABYLON.Vector3.Zero();
-        const normal = BABYLON.Vector3.Zero();
-        const uv = BABYLON.Vector2.Zero();
-
-        uvOffset = uvOffset || BABYLON.Vector2.Zero();
-        uvScale = uvScale || new BABYLON.Vector2(1, 1);
-
-        for (let index = 0; index < positions.length; index += 3) {
-            BABYLON.Vector3.FromArrayToRef(positions, index, position);
-            BABYLON.Vector3.FromArrayToRef(normals, index, normal);
-            BABYLON.Vector2.FromArrayToRef(uvs, (index / 3) * 2, uv);
-
-            // Compute height
-            const u = (Math.abs(uv.x * uvScale.x + (uvOffset.x % 1)) * (heightMapWidth - 1)) % heightMapWidth | 0;
-            const v = (Math.abs(uv.y * uvScale.y + (uvOffset.y % 1)) * (heightMapHeight - 1)) % heightMapHeight | 0;
-
-            const pos = (u + v * heightMapWidth) * 4;
-            const r = buffer[pos] / 255.0;
-            const g = buffer[pos + 1] / 255.0;
-            const b = buffer[pos + 2] / 255.0;
-            const a = buffer[pos + 3] / 255.0;
-
-            const gradient = r * 0.33 + g * 0.33 + b * 0.33;
-            //const gradient = a;
-
-            normal.normalize();
-            normal.scaleInPlace(minHeight + (maxHeight - minHeight) * gradient);
-            position = position.add(normal);
+        video.addEventListener("playing", function () {
+          const canvas = document.createElement("canvas");
+          canvas.width = video.videoWidth;
+          canvas.height = video.videoHeight;
+          ctx = canvas.getContext("2d", { willReadFrequently: true });
 
-            position.toArray(positions, index);
-        }
+          updateMap();
+        });
 
-        mesh.setVerticesData(BABYLON.VertexBuffer.PositionKind, positions);
-        return mesh;
-    }
+        window.video = document.getElementById("depth_video").getElementsByTagName("video")[0];
+        videoDome.videoTexture.video.oncanplaythrough = function () {
+          videoDome.videoTexture.video.play();
+          video.play();
+          videoDome.videoTexture.video.oncanplaythrough = null;
+          video.oncanplaythrough = null;
+        };
+        
         
         if (document.getElementById("model")) {
           document.getElementById("model").appendChild(document.getElementById("model3D"));
@@ -977,6 +924,63 @@ if (BABYLON) {
 }
 window.snapshot = snapshot;
 
+function applyDisplacementMapFromBuffer(
+        mesh,
+        buffer,
+        heightMapWidth,
+        heightMapHeight,
+        minHeight,
+        maxHeight,
+        uvOffset,
+        uvScale,
+        forceUpdate
+    ) {
+        if (!mesh.isVerticesDataPresent(BABYLON.VertexBuffer.PositionKind) || !mesh.isVerticesDataPresent(BABYLON.VertexBuffer.NormalKind) || !mesh.isVerticesDataPresent(BABYLON.VertexBuffer.UVKind)) {
+            alert("Cannot call applyDisplacementMap: Given mesh is not complete. Position, Normal or UV are missing");
+            return mesh;
+        }
+
+        const positions = mesh.getVerticesData(BABYLON.VertexBuffer.PositionKind, true, true);
+        const normals = mesh.getVerticesData(BABYLON.VertexBuffer.NormalKind);
+        const uvs = mesh.getVerticesData(BABYLON.VertexBuffer.UVKind);
+
+        let position = BABYLON.Vector3.Zero();
+        const normal = BABYLON.Vector3.Zero();
+        const uv = BABYLON.Vector2.Zero();
+
+        uvOffset = uvOffset || BABYLON.Vector2.Zero();
+        uvScale = uvScale || new BABYLON.Vector2(1, 1);
+
+        for (let index = 0; index < positions.length; index += 3) {
+            BABYLON.Vector3.FromArrayToRef(positions, index, position);
+            BABYLON.Vector3.FromArrayToRef(normals, index, normal);
+            BABYLON.Vector2.FromArrayToRef(uvs, (index / 3) * 2, uv);
+
+            // Compute height
+            const u = (Math.abs(uv.x * uvScale.x + (uvOffset.x % 1)) * (heightMapWidth - 1)) % heightMapWidth | 0;
+            const v = (Math.abs(uv.y * uvScale.y + (uvOffset.y % 1)) * (heightMapHeight - 1)) % heightMapHeight | 0;
+
+            const pos = (u + v * heightMapWidth) * 4;
+            const r = buffer[pos] / 255.0;
+            const g = buffer[pos + 1] / 255.0;
+            const b = buffer[pos + 2] / 255.0;
+            const a = buffer[pos + 3] / 255.0;
+
+            const gradient = r * 0.33 + g * 0.33 + b * 0.33;
+            //const gradient = a;
+
+            normal.normalize();
+            normal.scaleInPlace(minHeight + (maxHeight - minHeight) * gradient);
+            position = position.add(normal);
+
+            position.toArray(positions, index);
+        }
+
+        mesh.setVerticesData(BABYLON.VertexBuffer.PositionKind, positions);
+        return mesh;
+    }
+    window.applyDisplacementMapFromBuffer = applyDisplacementMapFromBuffer;
+
 
 var intv_ = setInterval(function(){
 if (document.getElementById("image_edit") && document.getElementById("image_edit").getElementsByTagName("canvas")) {