OrbitControls, known state

Assets/RT3script.cs

@@ -78,7 +78,7 @@ public class RT3script : MonoBehaviour
     {
         for(int i = 0; i < cameraList.Length; i++){
             depthCameraList[i].worldToCameraMatrix = cameraList[i].worldToCameraMatrix;
-            // depthCameraList[i].projectionMatrix = cameraList[i].cameraToWorldMatrix;
+            depthCameraList[i].projectionMatrix = cameraList[i].projectionMatrix;
         }
     }
 

Assets/Website~/index.html

@@ -27,7 +27,7 @@
       />
     </video>
     <div id="main-scene-container"></div>
-    <canvas id="debugCanvas" width="512" height="256" />
+    <canvas id="debugCanvas" width="768" height="256" />
 
     <script type="importmap">
       {
@@ -41,6 +41,7 @@
       import * as THREE from "three";
 
       import { GUI } from "three/addons/libs/lil-gui.module.min.js";
+      import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
       let projection_vert_shader_source = await (await fetch('./projection.vert.glsl')).text();
       let projection_frag_shader_source = await (await fetch('./projection.frag.glsl')).text();
@@ -87,10 +88,9 @@
         camera = new THREE.PerspectiveCamera(
           50,
           window.innerWidth / window.innerHeight,
-          1,
+          .01,
-          10000
+          100
         );
-        camera.position.set(0, 0, 200);
 
         scene = new THREE.Scene();
         center = new THREE.Vector3();
@@ -107,8 +107,8 @@
           captureImageHeight = 256;
         const nearClipping = 0.1,
           farClipping = 5,
-          pointSize = 5,
+          pointSize = 3,
-          boxSize = 100;
+          boxSize = 1;
 
 
         geometry = new THREE.BufferGeometry();
@@ -186,6 +186,10 @@
 
             let mesh = new THREE.Points(geometry, material);
             scene.add(mesh);
+            const arrowHelper = 
+            scene.add( new THREE.ArrowHelper(new THREE.Vector3(1,0,0), new THREE.Vector3(0,0,0), 1, 0xff0000) );
+            scene.add( new THREE.ArrowHelper(new THREE.Vector3(0,1,0), new THREE.Vector3(0,0,0), 1, 0x00ff00) );
+            scene.add( new THREE.ArrowHelper(new THREE.Vector3(0,0,1), new THREE.Vector3(0,0,0), 1, 0x0000ff) );
 
             materialList[i] = material;
             meshList[i] = mesh;
@@ -194,10 +198,9 @@
         }
 
         function animate() {
-          camera.position.x = -mouse.x;
+          //requestAnimationFrame(animate);
-          camera.position.y = mouse.y;
+          controls.update();
-          camera.lookAt(center);
+          
-                    
           let canvas = document.getElementById("debugCanvas");
           let context = canvas.getContext('2d', { willReadFrequently: true } );
           context.drawImage(texture.image, 0,0); //the image must be drawn to a canvas in order to read numCameras
@@ -237,6 +240,8 @@
             
             if (i==0) document.prjm0 = prjm_array; //these two lines make the projection array visible in console, for debugging
             if (i==1) document.prjm1 = prjm_array;
+            if (i==0) document.c2wm0 = c2wm_array; 
+            if (i==1) document.c2wm1 = c2wm_array;
             // columns = document.prjm1; a = []; for (let row=0; row < 4; ++row) a.push([columns[0+row], columns[4+row], columns[8+row], columns[12+row]]); a 
           }
           renderer.render(scene, camera);
@@ -248,9 +253,8 @@
         renderer.setAnimationLoop(animate);
         container.appendChild(renderer.domElement);
 
-        mouse = new THREE.Vector3(0, 0, 1);
+        const controls = new OrbitControls( camera, renderer.domElement );
-
+        camera.position.set(-1, 1, 3);
-        document.addEventListener("mousemove", onDocumentMouseMove);
 
         window.addEventListener("resize", onWindowResize);
       }
@@ -262,11 +266,6 @@
         renderer.setSize(window.innerWidth, window.innerHeight);
       }
 
-      function onDocumentMouseMove(event) {
-        mouse.x = event.clientX - window.innerWidth / 2;
-        mouse.y = event.clientY - window.innerHeight / 2;
-      }
-
 
     </script>
   </body>

Assets/Website~/projection.vert.glsl

@@ -18,6 +18,41 @@ varying vec2 vUv;
 varying vec2 vUv1pxOffset;
 varying float paintfordiscard;
 
+// mat4 swapHandedness(mat4 sM) {
+//     return mat4(
+//         sM[0][0], sM[0][1], sM[0][2], sM[3][0],
+//         sM[1][0], sM[1][1], sM[1][2], sM[3][1],
+//         sM[2][0], sM[2][1], sM[2][2], sM[3][2],
+//         sM[0][3], sM[1][3], sM[2][3], sM[3][3]); 
+// }
+mat4 fuckAroundAndFindOut(mat4 sM) {
+    // return mat4(
+    //     sM[0][0], sM[1][0], sM[2][0], sM[0][3],
+    //     sM[0][1], sM[1][1], sM[2][1], sM[1][3],
+    //     sM[0][2], sM[1][2], sM[2][2], sM[2][3],
+    //     sM[3][0], sM[3][1], sM[3][2], sM[3][3]); 
+    return mat4(
+        sM[0][0], sM[0][1], sM[0][2], sM[0][3],
+        sM[1][0], sM[1][1], sM[1][2], sM[1][3],
+        sM[2][0], sM[2][1], sM[2][2], sM[2][3],
+        sM[3][0], sM[3][1], sM[3][2], sM[3][3]); 
+    // return mat4(
+    //     sM[0][0], sM[1][0], sM[0][2], sM[0][3],
+    //     sM[0][1], sM[1][1], sM[1][2], sM[1][3],
+    //     sM[2][0], sM[2][1], sM[2][2], sM[2][3],
+    //     sM[3][0], sM[3][1], sM[3][2], sM[3][3]); 
+    // return mat4(
+    //     sM[0][0], sM[0][1], sM[2][0], sM[0][3],
+    //     sM[1][0], sM[1][1], sM[2][1], sM[1][3],
+    //     sM[0][2], sM[1][2], sM[2][2], sM[2][3],
+    //     sM[3][0], sM[3][1], sM[3][2], sM[3][3]); 
+    // return mat4(
+    //     sM[0][0], sM[0][1], -sM[0][2], sM[0][3],
+    //     sM[1][0], sM[1][1], sM[1][2], sM[1][3],
+    //     -sM[2][0], sM[2][1], sM[2][2], sM[2][3],
+    //     sM[3][0], sM[3][1], sM[3][2], sM[3][3]); 
+
+}
 
 void main() {
 
@@ -44,7 +79,7 @@ void main() {
 
     float depth = ( color.r + color.g + color.b ) / 3.0;
 
-    // Projection code by @kcmic
+    // (original) Projection code by @kcmic
 
     // instead of building a matrix and multiplying by the matrix, math is being done to
     // guess the projection.
@@ -61,12 +96,14 @@ void main() {
     vec4 pos = vec4(
         2.*(position.x / float(width))  - 1., 
         2.*(position.y / float(height)) - 1., 
-        2.*depth                       - 1., 
+        -1., //mix(1., -1., depth), 
         1.0
     );
     //vec4 pos2 = pos;
-    // vec4 pos2 =  c2wm * prjm * pos; // order matters here! First undo projection, then undo view, then below model is undone
+
-    vec4 pos2 =  c2wm * inverse(prjm) * pos; // order matters here! First undo projection, then undo view, then below model is undone
+    // First undo projection, then undo view, then below model is undone; flip the Y and Z vectors since WebGL is right handed
+    vec4 pos2 = fuckAroundAndFindOut(c2wm) * inverse(prjm) * pos; // order matters here! Parentheses do not
+
     pos2.xyz *= boxSize;
     // pos2 = pos2 * vec4(20000., 20000., 20000., 20000.); // bad idea! the last point needs to be 1 for translation to work
     // pos2 = pos2 * boxSize;