move frag and vert shaders to dedicated files

Assets/Website/index.html

@@ -27,106 +27,6 @@
       />
     </video>
 
-    <script id="vs" type="x-shader/x-vertex">
-
-      uniform sampler2D map;
-
-      uniform float width;
-      uniform float height;
-      uniform float nearClipping, farClipping;
-
-      uniform float pointSize;
-      uniform float boxSize;
-      uniform float cameraIndex;
-
-      uniform float numCameras;
-
-      uniform mat4 c2wm;
-
-
-      varying vec2 vUv;
-
-      varying vec2 vUv1pxOffset;
-
-      varying float paintfordiscard;
-      
-      void main() {
-
-      	vUv = vec2( position.x / width, position.y / height );  // -> vec2(0, 0)
-        vUv1pxOffset = vec2( 1.0 / width, 1.0 / height ) * 2.0;
-
-        int skipctr = 0;
-        int skipthreshold = 1;
-
-        for (float xoff = -1.0; xoff < 2.0; xoff++) {
-          for (float yoff = -1.0; yoff < 2.0; yoff++) {
-            vec2 thisUv = vUv + (vec2 (xoff, yoff) * vUv1pxOffset);
-            vec4 color = texture2D( map, thisUv*vec2(1.0/numCameras,(1.0/3.0))+vec2(cameraIndex/numCameras,(1.0/3.0)));
-            float depth = ( color.r + color.g + color.b ) / 3.0;
-            if (depth < 0.01) {
-              skipctr++;
-            }
-          }
-        }
-
-        paintfordiscard = float(skipctr > skipthreshold);
-        //vec4 color = texture2D( map, vUv*vec2(0.5,(1.0/3.0))+vec2(0,(1.0/3.0)));
-        vec4 color = texture2D( map, vUv*vec2(1.0/numCameras,(1.0/3.0))+vec2(cameraIndex/numCameras,(1.0/3.0)));
-
-        float depth = ( color.r + color.g + color.b ) / 3.0;
-
-        // Projection code by @kcmic
-
-        // instead of building a matrix and multiplying by the matrix, math is being done to
-        // guess the projection.
-        // Undoes the perspective division
-        //float z = depth * (farClipping-nearClipping) + nearClipping;
-        float z = depth;
-        
-        vec4 pos = vec4(
-          ( position.x / width - 0.5 )*boxSize,
-          ( position.y / height - 0.5 )*boxSize,
-          (-1.0)*z*boxSize*0.5, // we applied a (-1.0) multiplier to try to flip element [2,2] 
-          1.0);
-        //vec4 pos2 = pos;
-        vec4 pos2 = c2wm * pos;
-        //vec4 pos2 = inverse(c2wm) * pos;
-// float(cameraIndex)
-        gl_PointSize = pointSize;
-        gl_Position = projectionMatrix * modelViewMatrix * pos2;
-        if (depth  <.01 || (paintfordiscard != 0.0))  { // move this point out of the view box if the depth is nearly zero
-          gl_Position = vec4(-1., -1., -1., -1.);
-        }
-      }
-    </script>
-
-    <script id="fs" type="x-shader/x-fragment">
-      uniform sampler2D map;
-      uniform float cameraIndex;
-
-      uniform float numCameras;
-
-      uniform mat4 c2wm;
-      
-      varying vec2 vUv;
-
-      varying float paintfordiscard;
-
-
-      void main() {
-        vec4 color = texture2D( map, vUv*vec2(1.0/numCameras,(1.0/3.0))+vec2(cameraIndex/numCameras,0.0));
-        // if (color.r < .2) { discard;}
-
-        if (paintfordiscard == 1.0) {
-          gl_FragColor = vec4(1.0, 0.5, 0.0, 1.0);
-        }
-        else {
-          gl_FragColor = vec4( color.r, color.g, color.b, 1.0);
-        }
-        
-      }
-    </script>
-
     <script type="importmap">
       {
         "imports": {
@@ -140,6 +40,9 @@
 
       import { GUI } from "three/addons/libs/lil-gui.module.min.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();
+
       let scene, camera, renderer;
       let geometry;
       let meshList = [];
@@ -277,8 +180,8 @@
                 numCameras: { value: numCameras },
                 c2wm: { value: new THREE.Matrix4() }
               },
-              vertexShader: document.getElementById("vs").textContent,
+              vertexShader:   projection_vert_shader_source,
-              fragmentShader: document.getElementById("fs").textContent,
+              fragmentShader: projection_frag_shader_source,
               blending: THREE.NormalBlending,
               depthTest: true,
               depthWrite: true,

Assets/Website/projection.frag.glsl

@@ -0,0 +1,24 @@
+uniform sampler2D map;
+uniform float cameraIndex;
+
+uniform float numCameras;
+
+uniform mat4 c2wm;
+
+varying vec2 vUv;
+
+varying float paintfordiscard;
+
+
+void main() {
+    vec4 color = texture2D( map, vUv*vec2(1.0/numCameras,(1.0/3.0))+vec2(cameraIndex/numCameras,0.0));
+    // if (color.r < .2) { discard;}
+
+    if (paintfordiscard == 1.0) {
+        gl_FragColor = vec4(1.0, 0.5, 0.0, 1.0);
+    }
+    else {
+        gl_FragColor = vec4( color.r, color.g, color.b, 1.0);
+    }
+
+}

Assets/Website/projection.vert.glsl

@@ -0,0 +1,70 @@
+
+uniform sampler2D map;
+
+uniform float width;
+uniform float height;
+uniform float nearClipping, farClipping;
+
+uniform float pointSize;
+uniform float boxSize;
+uniform float cameraIndex;
+
+uniform float numCameras;
+
+uniform mat4 c2wm;
+
+
+varying vec2 vUv;
+
+varying vec2 vUv1pxOffset;
+
+varying float paintfordiscard;
+
+void main() {
+
+    vUv = vec2( position.x / width, position.y / height );  // -> vec2(0, 0)
+    vUv1pxOffset = vec2( 1.0 / width, 1.0 / height ) * 2.0;
+
+    int skipctr = 0;
+    int skipthreshold = 1;
+
+    for (float xoff = -1.0; xoff < 2.0; xoff++) {
+        for (float yoff = -1.0; yoff < 2.0; yoff++) {
+        vec2 thisUv = vUv + (vec2 (xoff, yoff) * vUv1pxOffset);
+        vec4 color = texture2D( map, thisUv*vec2(1.0/numCameras,(1.0/3.0))+vec2(cameraIndex/numCameras,(1.0/3.0)));
+        float depth = ( color.r + color.g + color.b ) / 3.0;
+        if (depth < 0.01) {
+            skipctr++;
+        }
+        }
+    }
+
+    paintfordiscard = float(skipctr > skipthreshold);
+    //vec4 color = texture2D( map, vUv*vec2(0.5,(1.0/3.0))+vec2(0,(1.0/3.0)));
+    vec4 color = texture2D( map, vUv*vec2(1.0/numCameras,(1.0/3.0))+vec2(cameraIndex/numCameras,(1.0/3.0)));
+
+    float depth = ( color.r + color.g + color.b ) / 3.0;
+
+    // Projection code by @kcmic
+
+    // instead of building a matrix and multiplying by the matrix, math is being done to
+    // guess the projection.
+    // Undoes the perspective division
+    //float z = depth * (farClipping-nearClipping) + nearClipping;
+    float z = depth;
+    
+    vec4 pos = vec4(
+        ( position.x / width - 0.5 )*boxSize,
+        ( position.y / height - 0.5 )*boxSize,
+        (-1.0)*z*boxSize*0.5, // we applied a (-1.0) multiplier to try to flip element [2,2] 
+        1.0);
+    //vec4 pos2 = pos;
+    vec4 pos2 = c2wm * pos;
+    //vec4 pos2 = inverse(c2wm) * pos;
+// float(cameraIndex)
+    gl_PointSize = pointSize;
+    gl_Position = projectionMatrix * modelViewMatrix * pos2;
+    if (depth  <.01 || (paintfordiscard != 0.0))  { // move this point out of the view box if the depth is nearly zero
+        gl_Position = vec4(-1., -1., -1., -1.);
+    }
+}