Checkpoint

client/src/components/graph/drawSpatialImageRegl.js

@@ -2,35 +2,78 @@ export default function drawSpatialImageRegl(regl) {
   return regl({
     frag: `
         precision mediump float;
-        uniform sampler2D texture;
-        varying vec2 uv;
-        void main () {
-          gl_FragColor = texture2D(texture, uv);
+
+        // our texture
+        uniform sampler2D u_image;
+
+        // the texCoords passed in from the vertex shader.
+        varying vec2 v_texCoord;
+
+        void main() {
+            gl_FragColor = texture2D(u_image, v_texCoord);
         }`,
 
     vert: `
-        precision mediump float;
-        attribute vec2 position;
-        varying vec2 uv;
-        const float zMiddle = 0.;
+        attribute vec2 a_position;
+        attribute vec2 a_texCoord;
+
+        uniform vec2 u_resolution;
+
         uniform mat3 projView;
-        
-        vec2 norm(vec2 position) {
-          return ((position - 0.5) * 2.0) * vec2(1., -1.);
-        }
+
+        varying vec2 v_texCoord;
+
         void main() {
-          uv = position;
-          vec3 xy = projView * vec3(norm(position), 1.);
-          gl_Position = vec4(xy.xy, 0, 1.);
+            // convert the rectangle from pixels to 0.0 to 1.0
+            vec3 pos = vec3(a_position, 1.);
+            vec2 zeroToOne = pos.xy / u_resolution;
+
+            // convert from 0->1 to 0->2
+            vec2 zeroToTwo = zeroToOne * 2.0;
+
+            // convert from 0->2 to -1->+1 (clipspace)
+            vec2 clipSpace = zeroToTwo - 1.0;
+
+            vec3 pos2 = projView * vec3(clipSpace, 1.);
+
+            gl_Position = vec4(pos2.xy , 0, 1);
+
+            // pass the texCoord to the fragment shader
+            // The GPU will interpolate this value between points.
+            v_texCoord = a_texCoord;
         }`,
 
     attributes: {
-      position: [-1, 1, -1, -1, 1, -1, 1, -1, 1, 1, -1, 1],
+      a_texCoord: [0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 1.0],
+      // a_position: [
+      //     10, 0,
+      //     10 + regl.prop("img_width"), 0,
+      //     10, 0 + regl.prop("img_height"),
+      //     10, 0 + regl.prop("img_height"),
+      //     10 + regl.prop("img_width"), 0,
+      //     10 + regl.prop("img_width"), 0 + regl.prop("img_height"),
+      //     ],
+      a_position: [
+        0,
+        0,
+        0 + 2000,
+        0,
+        0,
+        0 + 2000,
+        0,
+        0 + 2000,
+        0 + 2000,
+        0,
+        0 + 2000,
+        0 + 2000,
+      ],
     },
 
     uniforms: {
       projView: regl.prop("projView"),
-      texture: regl.prop("spatialImageAsTexture"),
+      u_image: regl.prop("spatialImageAsTexture"),
+      color: [1, 0, 0, 1],
+      u_resolution: [2000, 2000],
     },
 
     count: 6,

client/src/components/graph/graph.js

@@ -114,6 +114,7 @@ class Graph extends React.Component {
     /*
     compute the model coordinate for each point
     */
+    console.log({ X }, { Y });
     const positions = new Float32Array(2 * X.length);
     for (let i = 0, len = X.length; i < len; i += 1) {
       const p = vec2.fromValues(X[i], Y[i]);
@@ -516,7 +517,8 @@ class Graph extends React.Component {
     return { toolSVG: newToolSVG, tool, container };
   };
 
-  loadTextureFromUrl = (src) => new Promise((resolve, reject) => {
+  loadTextureFromUrl = (src) =>
+    new Promise((resolve, reject) => {
       const img = new Image();
       img.onload = () => resolve(img);
       img.onerror = reject;
@@ -832,6 +834,8 @@ class Graph extends React.Component {
       depth: 1,
       color: [0, 0, 0, 0],
     });
+    console.log({ pointBuffer });
+    console.log({ projView });
     drawPoints({
       distance: camera.distance(),
       color: colorBuffer,
@@ -844,8 +848,12 @@ class Graph extends React.Component {
     });
     drawSpatialImage({
       projView,
+      img_width: this.spatialImage.width,
+      img_height: this.spatialImage.height,
       spatialImageAsTexture: regl.texture({
         data: this.spatialImage,
+        wrapS: "clamp",
+        wrapT: "clamp",
       }),
     });
     regl._gl.flush();