Fix silhouette sampling math to match GPU

Author: adroitwhiz

src/Drawable.js

@@ -24,10 +24,16 @@ const __isTouchingPosition = twgl.v3.create();
  * @return {twgl.v3} [x,y] texture space float vector - transformed by effects and matrix
  */
 const getLocalPosition = (drawable, vec) => {
-    // Transfrom from world coordinates to Drawable coordinates.
+    // Transform from world coordinates to Drawable coordinates.
     const localPosition = __isTouchingPosition;
-    const v0 = vec[0];
-    const v1 = vec[1];
+    // World coordinates/screen-space coordinates refer to pixels by integer coordinates.
+    // The GL rasterizer considers a pixel to be an area sample.
+    // Without multisampling, it samples once from the pixel center,
+    // which is offset by (0.5, 0.5) from the pixel's integer coordinate.
+    // If you think of it as a pixel grid, the coordinates we're given are grid lines, but we want grid boxes.
+    // That's why we offset by 0.5 (-0.5 in the X direction because it's flipped).
+    const v0 = vec[0] - 0.5;
+    const v1 = vec[1] + 0.5;
     const m = drawable._inverseMatrix;
     // var v2 = v[2];
     const d = (v0 * m[3]) + (v1 * m[7]) + m[15];
@@ -36,14 +42,7 @@ const getLocalPosition = (drawable, vec) => {
     // localPosition matches that transformation.
     localPosition[0] = 0.5 - (((v0 * m[0]) + (v1 * m[4]) + m[12]) / d);
     localPosition[1] = (((v0 * m[1]) + (v1 * m[5]) + m[13]) / d) + 0.5;
-    // Apply texture effect transform if the localPosition is within the drawable's space,
-    // and any effects are currently active.
-    if (drawable.enabledEffects !== 0 &&
-        (localPosition[0] >= 0 && localPosition[0] < 1) &&
-        (localPosition[1] >= 0 && localPosition[1] < 1)) {
-
-        EffectTransform.transformPoint(drawable, localPosition, localPosition);
-    }
+    if (drawable.enabledEffects !== 0) EffectTransform.transformPoint(drawable, localPosition, localPosition);
     return localPosition;
 };
 

src/RenderWebGL.js

@@ -1806,12 +1806,12 @@ class RenderWebGL extends EventEmitter {
         let rr = -1;
         let Q;
         for (let y = 0; y < height; y++) {
-            _pixelPos[1] = y / height;
+            _pixelPos[1] = (y + 0.5) / height;
             // Scan from left to right, looking for a touchable spot in the
             // skin.
             let x = 0;
             for (; x < width; x++) {
-                _pixelPos[0] = x / width;
+                _pixelPos[0] = (x + 0.5) / width;
                 EffectTransform.transformPoint(drawable, _pixelPos, _effectPos);
                 if (drawable.skin.isTouchingLinear(_effectPos)) {
                     Q = [x, y];
@@ -1841,7 +1841,7 @@ class RenderWebGL extends EventEmitter {
             // Scan from right to left, looking for a touchable spot in the
             // skin.
             for (x = width - 1; x >= 0; x--) {
-                _pixelPos[0] = x / width;
+                _pixelPos[0] = (x + 0.5) / width;
                 EffectTransform.transformPoint(drawable, _pixelPos, _effectPos);
                 if (drawable.skin.isTouchingLinear(_effectPos)) {
                     Q = [x, y];

src/Silhouette.js

@@ -10,20 +10,25 @@
  */
 let __SilhouetteUpdateCanvas;
 
+// Optimized Math.min and Math.max for integers;
+// taken from https://web.archive.org/web/20190716181049/http://guihaire.com/code/?p=549
+const intMin = (i, j) => j ^ ((i ^ j) & ((i - j) >> 31));
+const intMax = (i, j) => i ^ ((i ^ j) & ((i - j) >> 31));
+
 /**
- * Internal helper function (in hopes that compiler can inline).  Get a pixel
- * from silhouette data, or 0 if outside it's bounds.
+ * Internal helper function (in hopes that compiler can inline).  Get a pixel's alpha
+ * from silhouette data, matching texture sampling rules.
  * @private
  * @param {Silhouette} silhouette - has data width and height
  * @param {number} x - x
  * @param {number} y - y
  * @return {number} Alpha value for x/y position
  */
 const getPoint = ({_width: width, _height: height, _colorData: data}, x, y) => {
-    // 0 if outside bounds, otherwise read from data.
-    if (x >= width || y >= height || x < 0 || y < 0) {
-        return 0;
-    }
+    // Clamp coords to edge, matching GL_CLAMP_TO_EDGE.
+    x = intMax(0, intMin(x, width - 1));
+    y = intMax(0, intMin(y, height - 1));
+
     return data[(((y * width) + x) * 4) + 3];
 };
 
@@ -41,16 +46,16 @@ const __cornerWork = [
  * Get the color from a given silhouette at an x/y local texture position.
  * Multiply color values by alpha for proper blending.
  * @param {Silhouette} The silhouette to sample.
- * @param {number} x X position of texture (0-1).
- * @param {number} y Y position of texture (0-1).
+ * @param {number} x X position of texture [0, width).
+ * @param {number} y Y position of texture [0, height).
  * @param {Uint8ClampedArray} dst A color 4b space.
  * @return {Uint8ClampedArray} The dst vector.
  */
 const getColor4b = ({_width: width, _height: height, _colorData: data}, x, y, dst) => {
-    // 0 if outside bounds, otherwise read from data.
-    if (x >= width || y >= height || x < 0 || y < 0) {
-        return dst.fill(0);
-    }
+    // Clamp coords to edge, matching GL_CLAMP_TO_EDGE.
+    x = intMax(0, intMin(x, width - 1));
+    y = intMax(0, intMin(y, height - 1));
+
     const offset = ((y * width) + x) * 4;
     // premultiply alpha
     const alpha = data[offset + 3] / 255;
@@ -65,16 +70,16 @@ const getColor4b = ({_width: width, _height: height, _colorData: data}, x, y, ds
  * Get the color from a given silhouette at an x/y local texture position.
  * Do not multiply color values by alpha, as it has already been done.
  * @param {Silhouette} The silhouette to sample.
- * @param {number} x X position of texture (0-1).
- * @param {number} y Y position of texture (0-1).
+ * @param {number} x X position of texture [0, width).
+ * @param {number} y Y position of texture [0, height).
  * @param {Uint8ClampedArray} dst A color 4b space.
  * @return {Uint8ClampedArray} The dst vector.
  */
 const getPremultipliedColor4b = ({_width: width, _height: height, _colorData: data}, x, y, dst) => {
-    // 0 if outside bounds, otherwise read from data.
-    if (x >= width || y >= height || x < 0 || y < 0) {
-        return dst.fill(0);
-    }
+    // Clamp coords to edge, matching GL_CLAMP_TO_EDGE.
+    x = intMax(0, intMin(x, width - 1));
+    y = intMax(0, intMin(y, height - 1));
+
     const offset = ((y * width) + x) * 4;
     dst[0] = data[offset];
     dst[1] = data[offset + 1];
@@ -163,8 +168,8 @@ class Silhouette {
     colorAtNearest (vec, dst) {
         return this._getColor(
             this,
-            Math.floor(vec[0] * (this._width - 1)),
-            Math.floor(vec[1] * (this._height - 1)),
+            Math.floor(vec[0] * this._width),
+            Math.floor(vec[1] * this._height),
             dst
         );
     }
@@ -177,8 +182,13 @@ class Silhouette {
      * @returns {Uint8ClampedArray} dst
      */
     colorAtLinear (vec, dst) {
-        const x = vec[0] * (this._width - 1);
-        const y = vec[1] * (this._height - 1);
+        // In texture space, pixel centers are at integer coords. Here, the *corners* are at integers.
+        // We cannot skip the "add 0.5 in Drawable.getLocalPosition -> subtract 0.5 here" roundtrip
+        // because the two spaces are different--we add 0.5 in Drawable.getLocalPosition in "Scratch space"
+        // (-240,240 & -180,180), but subtract 0.5 in silhouette space (0, width or height).
+        // See https://web.archive.org/web/20190125211252/http://hacksoflife.blogspot.com/2009/12/texture-coordinate-system-for-opengl.html
+        const x = (vec[0] * (this._width)) - 0.5;
+        const y = (vec[1] * (this._height)) - 0.5;
 
         const x1D = x % 1;
         const y1D = y % 1;
@@ -208,10 +218,17 @@ class Silhouette {
      */
     isTouchingNearest (vec) {
         if (!this._colorData) return;
+
+        // Never touching if the coord falls outside the texture space.
+        if (vec[0] < 0 || vec[0] > 1 ||
+            vec[1] < 0 || vec[1] > 1) {
+            return false;
+        }
+
         return getPoint(
             this,
-            Math.floor(vec[0] * (this._width - 1)),
-            Math.floor(vec[1] * (this._height - 1))
+            Math.floor(vec[0] * this._width),
+            Math.floor(vec[1] * this._height)
         ) > 0;
     }
 
@@ -223,8 +240,15 @@ class Silhouette {
      */
     isTouchingLinear (vec) {
         if (!this._colorData) return;
-        const x = Math.floor(vec[0] * (this._width - 1));
-        const y = Math.floor(vec[1] * (this._height - 1));
+
+        // Never touching if the coord falls outside the texture space.
+        if (vec[0] < 0 || vec[0] > 1 ||
+            vec[1] < 0 || vec[1] > 1) {
+            return false;
+        }
+
+        const x = Math.floor((vec[0] * this._width) - 0.5);
+        const y = Math.floor((vec[1] * this._height) - 0.5);
         return getPoint(this, x, y) > 0 ||
             getPoint(this, x + 1, y) > 0 ||
             getPoint(this, x, y + 1) > 0 ||