Introduce vertex shader technique to clean edge artifacts

Assets/Website/index.html

@@ -46,37 +46,57 @@
 
       varying vec2 vUv;
 
+      varying vec2 vUv1pxOffset;
+
+      varying float paintfordiscard;
+      
       void main() {
 
-      	vUv = vec2( position.x / width, position.y / height );
+      	vUv = vec2( position.x / width, position.y / height );  // -> vec2(0, 0)
+        vUv1pxOffset = vec2( 1.0 / width, 1.0 / height ) * 2.0;
 
-      	//vec4 color = texture2D( map, vUv*vec2(0.5,(1.0/3.0))+vec2(0,(1.0/3.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;
+        float depth = ( color.r + color.g + color.b ) / 3.0;
 
-      	// Projection code by @kcmic
+        // 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 * (farClipping-nearClipping) + nearClipping;
+        float z = depth;
         
-      	vec4 pos = vec4(
+        vec4 pos = vec4(
-      		( position.x / width - 0.5 )*boxSize,
+          ( position.x / width - 0.5 )*boxSize,
-      		( position.y / height - 0.5 )*boxSize,
+          ( position.y / height - 0.5 )*boxSize,
-      		z*boxSize*0.5,
+          z*boxSize*0.5,
-      		1.0);
+          1.0);
-
+        vec4 pos2 = pos;
-       // vec4 pos2 = c2wm * pos;
+        //vec4 pos2 = c2wm * pos;
-        vec4 pos2 = inverse(c2wm) * pos;
+        //vec4 pos2 = inverse(c2wm) * pos;
 // float(cameraIndex)
-      	gl_PointSize = pointSize;
+        gl_PointSize = pointSize;
-      	gl_Position = projectionMatrix * modelViewMatrix * pos2;
+        gl_Position = projectionMatrix * modelViewMatrix * pos2;
         if (depth  <.01)  { // move this point out of the view box if the depth is nearly zero
           gl_Position = vec4(-1., -1., -1., -1.);
         }
-
       }
     </script>
 
@@ -90,11 +110,14 @@
       
       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 (c2wm[1][2] > .26) {
+        if (paintfordiscard == 1.0) {
           gl_FragColor = vec4(1.0, 0.5, 0.0, 1.0);
         }
         else {
@@ -169,7 +192,7 @@
           1,
           10000
         );
-        camera.position.set(0, 0, 1000);
+        camera.position.set(0, 0, 200);
 
         scene = new THREE.Scene();
         center = new THREE.Vector3();
@@ -179,6 +202,7 @@
 
         const texture = new THREE.VideoTexture(video);
         texture.minFilter = THREE.NearestFilter;
+        texture.magFilter = THREE.NearestFilter;
         texture.generateMipmaps = false;
 
         const captureImageWidth = 256,
@@ -186,16 +210,23 @@
         const nearClipping = 0.1,
           farClipping = 5,
           pointSize = 5,
-          boxSize = 500;
+          boxSize = 100;
 
 
         geometry = new THREE.BufferGeometry();
+        // create a array of points, where every three elements corresponds to one point (x, y, z)
         const vertices = new Float32Array(captureImageWidth * captureImageHeight * 3);
-        for (let i = 0, j = 0, l = vertices.length; i < l; i += 3, j++) {
+        for (
-          vertices[i] = j % captureImageWidth;
+          let i = 0, j = 0, l = vertices.length; 
-          vertices[i + 1] = Math.floor(j / captureImageWidth);
+          i < l; 
+          i += 3, j++
+        ) {
+          vertices[i]     = j % captureImageWidth;  // pixels from left
+          vertices[i + 1] = Math.floor(j / captureImageWidth); // pixels from bottom (vertical zero in shader land)
+          vertices[i + 2] = 0;
         }
 
+        // treat the "position" property as a vertice made from three elements
         geometry.setAttribute(
           "position",
           new THREE.BufferAttribute(vertices, 3)