Better handle matrix + silhouette updates

Author: adroitwhiz

src/Drawable.js

@@ -452,6 +452,8 @@ class Drawable {
 
     /**
      * Check if the world position touches the skin.
+     * The caller is responsible for ensuring this drawable's inverse matrix & its skin's silhouette are up-to-date.
+     * @see updateCPURenderAttributes
      * @param {twgl.v3} vec World coordinate vector.
      * @return {boolean} True if the world position touches the skin.
      */
@@ -632,6 +634,15 @@ class Drawable {
         }
     }
 
+    /**
+     * Update everything necessary to render this drawable on the CPU.
+     */
+    updateCPURenderAttributes () {
+        this.updateMatrix();
+        // CPU rendering always occurs at the "native" size, so no need to scale up this._scale
+        if (this.skin) this.skin.updateSilhouette(this._scale);
+    }
+
     /**
      * Respond to an internal change in the current Skin.
      * @private
@@ -676,6 +687,8 @@ class Drawable {
 
     /**
      * Sample a color from a drawable's texture.
+     * The caller is responsible for ensuring this drawable's inverse matrix & its skin's silhouette are up-to-date.
+     * @see updateCPURenderAttributes
      * @param {twgl.v3} vec The scratch space [x,y] vector
      * @param {Drawable} drawable The drawable to sample the texture from
      * @param {Uint8ClampedArray} dst The "color4b" representation of the texture at point.

src/RenderWebGL.js

@@ -752,6 +752,8 @@ class RenderWebGL extends EventEmitter {
         const color = __touchingColor;
         const hasMask = Boolean(mask3b);
 
+        drawable.updateCPURenderAttributes();
+
         // Scratch Space - +y is top
         for (let y = bounds.bottom; y <= bounds.top; y++) {
             if (bounds.width * (y - bounds.bottom) * (candidates.length + 1) >= maxPixelsForCPU) {
@@ -895,6 +897,8 @@ class RenderWebGL extends EventEmitter {
         const drawable = this._allDrawables[drawableID];
         const point = __isTouchingDrawablesPoint;
 
+        drawable.updateCPURenderAttributes();
+
         // This is an EXTREMELY brute force collision detector, but it is
         // still faster than asking the GPU to give us the pixels.
         for (let x = bounds.left; x <= bounds.right; x++) {
@@ -971,12 +975,7 @@ class RenderWebGL extends EventEmitter {
         const bounds = this.clientSpaceToScratchBounds(centerX, centerY, touchWidth, touchHeight);
         const worldPos = twgl.v3.create();
 
-        drawable.updateMatrix();
-        if (drawable.skin) {
-            drawable.skin.updateSilhouette(this._getDrawableScreenSpaceScale(drawable));
-        } else {
-            log.warn(`Could not find skin for drawable with id: ${drawableID}`);
-        }
+        drawable.updateCPURenderAttributes();
 
         for (worldPos[1] = bounds.bottom; worldPos[1] <= bounds.top; worldPos[1]++) {
             for (worldPos[0] = bounds.left; worldPos[0] <= bounds.right; worldPos[0]++) {
@@ -1007,12 +1006,7 @@ class RenderWebGL extends EventEmitter {
             const drawable = this._allDrawables[id];
             // default pick list ignores visible and ghosted sprites.
             if (drawable.getVisible() && drawable.getUniforms().u_ghost !== 0) {
-                drawable.updateMatrix();
-                if (drawable.skin) {
-                    drawable.skin.updateSilhouette(this._getDrawableScreenSpaceScale(drawable));
-                } else {
-                    log.warn(`Could not find skin for drawable with id: ${id}`);
-                }
+                drawable.updateCPURenderAttributes();
                 return true;
             }
             return false;
@@ -1243,8 +1237,6 @@ class RenderWebGL extends EventEmitter {
         /** @todo remove this once URL-based skin setting is removed. */
         if (!drawable.skin || !drawable.skin.getTexture([100, 100])) return null;
 
-        drawable.updateMatrix();
-        drawable.skin.updateSilhouette(this._getDrawableScreenSpaceScale(drawable));
         const bounds = drawable.getFastBounds();
 
         // Limit queries to the stage size.
@@ -1281,8 +1273,7 @@ class RenderWebGL extends EventEmitter {
                 const drawable = this._allDrawables[id];
                 if (drawable.skin && drawable._visible) {
                     // Update the CPU position data
-                    drawable.updateMatrix();
-                    drawable.skin.updateSilhouette(this._getDrawableScreenSpaceScale(drawable));
+                    drawable.updateCPURenderAttributes();
                     const candidateBounds = drawable.getFastBounds();
                     if (bounds.intersects(candidateBounds)) {
                         result.push({
@@ -1767,6 +1758,8 @@ class RenderWebGL extends EventEmitter {
             return [];
         }
 
+        drawable.updateCPURenderAttributes();
+
         /**
          * Return the determinant of two vectors, the vector from A to B and
          * the vector from A to C.

src/SVGSkin.js

@@ -105,7 +105,7 @@ class SVGSkin extends Skin {
         return mip;
     }
 
-    updateSilhouette (scale = 1) {
+    updateSilhouette (scale = [100, 100]) {
         // Ensure a silhouette exists.
         this.getTexture(scale);
     }

src/Skin.js

@@ -219,6 +219,9 @@ class Skin extends EventEmitter {
     /**
      * Does this point touch an opaque or translucent point on this skin?
      * Nearest Neighbor version
+     * The caller is responsible for ensuring this skin's silhouette is up-to-date.
+     * @see updateSilhouette
+     * @see Drawable.updateCPURenderAttributes
      * @param {twgl.v3} vec A texture coordinate.
      * @return {boolean} Did it touch?
      */
@@ -229,6 +232,9 @@ class Skin extends EventEmitter {
     /**
      * Does this point touch an opaque or translucent point on this skin?
      * Linear Interpolation version
+     * The caller is responsible for ensuring this skin's silhouette is up-to-date.
+     * @see updateSilhouette
+     * @see Drawable.updateCPURenderAttributes
      * @param {twgl.v3} vec A texture coordinate.
      * @return {boolean} Did it touch?
      */

test/integration/cpu-render.html

@@ -61,8 +61,7 @@
                 if (!(drawable._visible && drawable.skin)) {
                     return;
                 }
-                drawable.updateMatrix();
-                drawable.skin.updateSilhouette();
+                drawable.updateCPURenderAttributes();
                 return { id, drawable };
             }).reverse().filter(Boolean);
             const color = new Uint8ClampedArray(3);