Merge pull request #544 from adroitwhiz/fix-vector-silhouette

Fix SVGSkin silhouettes

Author: cwillisf

src/RenderWebGL.js

@@ -972,7 +972,7 @@ class RenderWebGL extends EventEmitter {
 
         drawable.updateMatrix();
         if (drawable.skin) {
-            drawable.skin.updateSilhouette();
+            drawable.skin.updateSilhouette(this._getDrawableScreenSpaceScale(drawable));
         } else {
             log.warn(`Could not find skin for drawable with id: ${drawableID}`);
         }
@@ -1008,7 +1008,7 @@ class RenderWebGL extends EventEmitter {
             if (drawable.getVisible() && drawable.getUniforms().u_ghost !== 0) {
                 drawable.updateMatrix();
                 if (drawable.skin) {
-                    drawable.skin.updateSilhouette();
+                    drawable.skin.updateSilhouette(this._getDrawableScreenSpaceScale(drawable));
                 } else {
                     log.warn(`Could not find skin for drawable with id: ${id}`);
                 }
@@ -1243,7 +1243,7 @@ class RenderWebGL extends EventEmitter {
         if (!drawable.skin || !drawable.skin.getTexture([100, 100])) return null;
 
         drawable.updateMatrix();
-        drawable.skin.updateSilhouette();
+        drawable.skin.updateSilhouette(this._getDrawableScreenSpaceScale(drawable));
         const bounds = drawable.getFastBounds();
 
         // Limit queries to the stage size.
@@ -1281,7 +1281,7 @@ class RenderWebGL extends EventEmitter {
                 if (drawable.skin && drawable._visible) {
                     // Update the CPU position data
                     drawable.updateMatrix();
-                    drawable.skin.updateSilhouette();
+                    drawable.skin.updateSilhouette(this._getDrawableScreenSpaceScale(drawable));
                     const candidateBounds = drawable.getFastBounds();
                     if (bounds.intersects(candidateBounds)) {
                         result.push({
@@ -1659,6 +1659,18 @@ class RenderWebGL extends EventEmitter {
         this._regionId = null;
     }
 
+    /**
+     * Get the screen-space scale of a drawable, as percentages of the drawable's "normal" size.
+     * @param {Drawable} drawable The drawable whose screen-space scale we're fetching.
+     * @returns {Array<number>} The screen-space X and Y dimensions of the drawable's scale, as percentages.
+     */
+    _getDrawableScreenSpaceScale (drawable) {
+        return [
+            drawable.scale[0] * this._gl.canvas.width / this._nativeSize[0],
+            drawable.scale[1] * this._gl.canvas.height / this._nativeSize[1]
+        ];
+    }
+
     /**
      * Draw a set of Drawables, by drawable ID
      * @param {Array<int>} drawables The Drawable IDs to draw, possibly this._drawList.
@@ -1691,10 +1703,7 @@ class RenderWebGL extends EventEmitter {
             if (!drawable.getVisible() && !opts.ignoreVisibility) continue;
 
             // Combine drawable scale with the native vs. backing pixel ratio
-            const drawableScale = [
-                drawable.scale[0] * this._gl.canvas.width / this._nativeSize[0],
-                drawable.scale[1] * this._gl.canvas.height / this._nativeSize[1]
-            ];
+            const drawableScale = this._getDrawableScreenSpaceScale(drawable);
 
             // If the skin or texture isn't ready yet, skip it.
             if (!drawable.skin || !drawable.skin.getTexture(drawableScale)) continue;

src/SVGSkin.js

@@ -104,6 +104,11 @@ class SVGSkin extends Skin {
         return mip;
     }
 
+    updateSilhouette (scale = 1) {
+        // Ensure a silhouette exists.
+        this.getTexture(scale);
+    }
+
     /**
      * @param {Array<number>} scale - The scaling factors to be used, each in the [0,100] range.
      * @return {WebGLTexture} The GL texture representation of this skin when drawing at the given scale.