chore(package): update tap to version 14.9.2

Closes #289

package.json

@@ -38,7 +38,7 @@
     "jsdoc": "^3.5.5",
     "json": "^9.0.4",
     "scratch-vm": "0.2.0-prerelease.20190213162739",
-    "tap": "^14.10.6",
+    "tap": "^14.9.2",
     "travis-after-all": "^1.4.4",
     "uglifyjs-webpack-plugin": "^1.2.5",
     "webpack": "^4.8.0",
@@ -53,7 +53,7 @@
     "minilog": "3.1.0",
     "raw-loader": "^0.5.1",
     "scratch-storage": "^1.0.0",
-    "scratch-svg-renderer": "0.2.0-prerelease.20200109070519",
+    "scratch-svg-renderer": "0.2.0-prerelease.20191104164753",
     "twgl.js": "4.4.0"
   }
 }

src/Drawable.js

@@ -36,12 +36,8 @@ 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)) {
-
+    // Apply texture effect transform if the localPosition is within the drawable's space.
+    if ((localPosition[0] >= 0 && localPosition[0] < 1) && (localPosition[1] >= 0 && localPosition[1] < 1)) {
         EffectTransform.transformPoint(drawable, localPosition, localPosition);
     }
     return localPosition;
@@ -100,11 +96,7 @@ class Drawable {
         this._inverseMatrix = twgl.m4.identity();
         this._inverseTransformDirty = true;
         this._visible = true;
-
-        /** A bitmask identifying which effects are currently in use.
-         * @readonly
-         * @type {int} */
-        this.enabledEffects = 0;
+        this._effectBits = 0;
 
         /** @todo move convex hull functionality, maybe bounds functionality overall, to Skin classes */
         this._convexHullPoints = null;
@@ -167,6 +159,13 @@ class Drawable {
         return [this._scale[0], this._scale[1]];
     }
 
+    /**
+     * @returns {int} A bitmask identifying which effects are currently in use.
+     */
+    getEnabledEffects () {
+        return this._effectBits;
+    }
+
     /**
      * @returns {object.<string, *>} the shader uniforms to be used when rendering this Drawable.
      */
@@ -243,9 +242,9 @@ class Drawable {
     updateEffect (effectName, rawValue) {
         const effectInfo = ShaderManager.EFFECT_INFO[effectName];
         if (rawValue) {
-            this.enabledEffects |= effectInfo.mask;
+            this._effectBits |= effectInfo.mask;
         } else {
-            this.enabledEffects &= ~effectInfo.mask;
+            this._effectBits &= ~effectInfo.mask;
         }
         const converter = effectInfo.converter;
         this._uniforms[effectInfo.uniformName] = converter(rawValue);
@@ -482,7 +481,7 @@ class Drawable {
         }
 
         // If the effect bits for mosaic, pixelate, whirl, or fisheye are set, use linear
-        if ((this.enabledEffects & (
+        if ((this._effectBits & (
             ShaderManager.EFFECT_INFO.fisheye.mask |
             ShaderManager.EFFECT_INFO.whirl.mask |
             ShaderManager.EFFECT_INFO.pixelate.mask |
@@ -693,9 +692,7 @@ class Drawable {
         // drawable.useNearest() ?
              drawable.skin._silhouette.colorAtNearest(localPosition, dst);
         // : drawable.skin._silhouette.colorAtLinear(localPosition, dst);
-
-        if (drawable.enabledEffects === 0) return textColor;
-        return EffectTransform.transformColor(drawable, textColor);
+        return EffectTransform.transformColor(drawable, textColor, textColor);
     }
 }
 

src/EffectTransform.js

@@ -114,25 +114,28 @@ const hslToRgb = ([h, s, l]) => {
 class EffectTransform {
 
     /**
-     * Transform a color in-place given the drawable's effect uniforms.  Will apply
+     * Transform a color given the drawables effect uniforms.  Will apply
      * Ghost and Color and Brightness effects.
      * @param {Drawable} drawable The drawable to get uniforms from.
-     * @param {Uint8ClampedArray} inOutColor The color to transform.
+     * @param {Uint8ClampedArray} color4b The initial color.
+     * @param {Uint8ClampedArary} [dst] Working space to save the color in (is returned)
+     * @param {number} [effectMask] A bitmask for which effects to use. Optional.
      * @returns {Uint8ClampedArray} dst filled with the transformed color
      */
-    static transformColor (drawable, inOutColor) {
-
-        // If the color is fully transparent, don't bother attempting any transformations.
-        if (inOutColor[3] === 0) {
-            return inOutColor;
+    static transformColor (drawable, color4b, dst, effectMask) {
+        dst = dst || new Uint8ClampedArray(4);
+        effectMask = effectMask || 0xffffffff;
+        dst.set(color4b);
+        if (dst[3] === 0) {
+            return dst;
         }
 
-        const effects = drawable.enabledEffects;
         const uniforms = drawable.getUniforms();
+        const effects = drawable.getEnabledEffects() & effectMask;
 
         if ((effects & ShaderManager.EFFECT_INFO.ghost.mask) !== 0) {
             // gl_FragColor.a *= u_ghost
-            inOutColor[3] *= uniforms.u_ghost;
+            dst[3] *= uniforms.u_ghost;
         }
 
         const enableColor = (effects & ShaderManager.EFFECT_INFO.color.mask) !== 0;
@@ -140,7 +143,7 @@ class EffectTransform {
 
         if (enableColor || enableBrightness) {
             // vec3 hsl = convertRGB2HSL(gl_FragColor.xyz);
-            const hsl = rgbToHsl(inOutColor);
+            const hsl = rgbToHsl(dst);
 
             if (enableColor) {
                 // this code forces grayscale values to be slightly saturated
@@ -170,24 +173,25 @@ class EffectTransform {
                 hsl[2] = Math.min(1, hsl[2] + uniforms.u_brightness);
             }
             // gl_FragColor.rgb = convertHSL2RGB(hsl);
-            inOutColor.set(hslToRgb(hsl));
+            dst.set(hslToRgb(hsl));
         }
 
-        return inOutColor;
+        return dst;
     }
 
     /**
      * Transform a texture coordinate to one that would be select after applying shader effects.
      * @param {Drawable} drawable The drawable whose effects to emulate.
      * @param {twgl.v3} vec The texture coordinate to transform.
-     * @param {twgl.v3} dst A place to store the output coordinate.
+     * @param {?twgl.v3} dst A place to store the output coordinate.
      * @return {twgl.v3} dst - The coordinate after being transform by effects.
      */
-    static transformPoint (drawable, vec, dst) {
+    static transformPoint (drawable, vec, dst = twgl.v3.create()) {
         twgl.v3.copy(vec, dst);
 
-        const effects = drawable.enabledEffects;
         const uniforms = drawable.getUniforms();
+        const effects = drawable.getEnabledEffects();
+
         if ((effects & ShaderManager.EFFECT_INFO.mosaic.mask) !== 0) {
             // texcoord0 = fract(u_mosaic * texcoord0);
             dst[0] = uniforms.u_mosaic * dst[0] % 1;

src/RenderWebGL.js

@@ -972,7 +972,7 @@ class RenderWebGL extends EventEmitter {
 
         drawable.updateMatrix();
         if (drawable.skin) {
-            drawable.skin.updateSilhouette(this._getDrawableScreenSpaceScale(drawable));
+            drawable.skin.updateSilhouette();
         } 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(this._getDrawableScreenSpaceScale(drawable));
+                    drawable.skin.updateSilhouette();
                 } 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(this._getDrawableScreenSpaceScale(drawable));
+        drawable.skin.updateSilhouette();
         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(this._getDrawableScreenSpaceScale(drawable));
+                    drawable.skin.updateSilhouette();
                     const candidateBounds = drawable.getFastBounds();
                     if (bounds.intersects(candidateBounds)) {
                         result.push({
@@ -1542,20 +1542,23 @@ class RenderWebGL extends EventEmitter {
         const skin = /** @type {PenSkin} */ this._allSkins[penSkinID];
 
         const gl = this._gl;
-        twgl.bindFramebufferInfo(gl, skin._framebuffer);
+        twgl.bindFramebufferInfo(gl, this._queryBufferInfo);
 
         // Limit size of viewport to the bounds around the stamp Drawable and create the projection matrix for the draw.
-        gl.viewport(
-            (this._nativeSize[0] * 0.5) + bounds.left,
-            (this._nativeSize[1] * 0.5) - bounds.top,
-            bounds.width,
-            bounds.height
-        );
+        gl.viewport(0, 0, bounds.width, bounds.height);
         const projection = twgl.m4.ortho(bounds.left, bounds.right, bounds.top, bounds.bottom, -1, 1);
 
-        // Draw the stamped sprite onto the PenSkin's framebuffer.
-        this._drawThese([stampID], ShaderManager.DRAW_MODE.stamp, projection, {ignoreVisibility: true});
-        skin._silhouetteDirty = true;
+        gl.clearColor(0, 0, 0, 0);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+
+        try {
+            gl.disable(gl.BLEND);
+            this._drawThese([stampID], ShaderManager.DRAW_MODE.stamp, projection, {ignoreVisibility: true});
+        } finally {
+            gl.enable(gl.BLEND);
+        }
+
+        skin._drawToBuffer(this._queryBufferInfo.attachments[0], bounds.left, bounds.top);
     }
 
     /* ******
@@ -1659,18 +1662,6 @@ 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.
@@ -1703,14 +1694,17 @@ class RenderWebGL extends EventEmitter {
             if (!drawable.getVisible() && !opts.ignoreVisibility) continue;
 
             // Combine drawable scale with the native vs. backing pixel ratio
-            const drawableScale = this._getDrawableScreenSpaceScale(drawable);
+            const drawableScale = [
+                drawable.scale[0] * this._gl.canvas.width / this._nativeSize[0],
+                drawable.scale[1] * this._gl.canvas.height / this._nativeSize[1]
+            ];
 
             // If the skin or texture isn't ready yet, skip it.
             if (!drawable.skin || !drawable.skin.getTexture(drawableScale)) continue;
 
             const uniforms = {};
 
-            let effectBits = drawable.enabledEffects;
+            let effectBits = drawable.getEnabledEffects();
             effectBits &= opts.hasOwnProperty('effectMask') ? opts.effectMask : effectBits;
             const newShader = this._shaderManager.getShader(drawMode, effectBits);
 

src/SVGSkin.js

@@ -4,14 +4,6 @@ const Skin = require('./Skin');
 const SvgRenderer = require('scratch-svg-renderer').SVGRenderer;
 
 const MAX_TEXTURE_DIMENSION = 2048;
-const MIN_TEXTURE_SCALE = 1 / 256;
-/**
- * All scaled renderings of the SVG are stored in an array. The 1.0 scale of
- * the SVG is stored at the 8th index. The smallest possible 1 / 256 scale
- * rendering is stored at the 0th index.
- * @const {number}
- */
-const INDEX_OFFSET = 8;
 
 class SVGSkin extends Skin {
     /**
@@ -30,24 +22,24 @@ class SVGSkin extends Skin {
         /** @type {SvgRenderer} */
         this._svgRenderer = new SvgRenderer();
 
-        /** @type {Array<WebGLTexture>} */
-        this._scaledMIPs = [];
+        /** @type {WebGLTexture} */
+        this._texture = null;
 
         /** @type {number} */
-        this._largestMIPScale = 0;
+        this._textureScale = 1;
 
-        /**
-        * Ratio of the size of the SVG and the max size of the WebGL texture
-        * @type {Number}
-        */
-        this._maxTextureScale = 1;
+        /** @type {Number} */
+        this._maxTextureScale = 0;
     }
 
     /**
      * Dispose of this object. Do not use it after calling this method.
      */
     dispose () {
-        this.resetMIPs();
+        if (this._texture) {
+            this._renderer.gl.deleteTexture(this._texture);
+            this._texture = null;
+        }
         super.dispose();
     }
 
@@ -68,110 +60,89 @@ class SVGSkin extends Skin {
         super.setRotationCenter(x - viewOffset[0], y - viewOffset[1]);
     }
 
-    /**
-     * Create a MIP for a given scale.
-     * @param {number} scale - The relative size of the MIP
-     * @return {SVGMIP} An object that handles creating and updating SVG textures.
-     */
-    createMIP (scale) {
-        this._svgRenderer.draw(scale);
-
-        // Pull out the ImageData from the canvas. ImageData speeds up
-        // updating Silhouette and is better handled by more browsers in
-        // regards to memory.
-        const canvas = this._svgRenderer.canvas;
-        // If one of the canvas dimensions is 0, set this MIP to an empty image texture.
-        // This avoids an IndexSizeError from attempting to getImageData when one of the dimensions is 0.
-        if (canvas.width === 0 || canvas.height === 0) return super.getTexture();
-
-        const context = canvas.getContext('2d');
-        const textureData = context.getImageData(0, 0, canvas.width, canvas.height);
-
-        const textureOptions = {
-            auto: false,
-            wrap: this._renderer.gl.CLAMP_TO_EDGE,
-            src: textureData
-        };
-
-        const mip = twgl.createTexture(this._renderer.gl, textureOptions);
-
-        // Check if this is the largest MIP created so far. Currently, silhouettes only get scaled up.
-        if (this._largestMIPScale < scale) {
-            this._silhouette.update(textureData);
-            this._largestMIPScale = scale;
-        }
-
-        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.
      */
+    // eslint-disable-next-line no-unused-vars
     getTexture (scale) {
+        if (!this._svgRenderer.canvas.width || !this._svgRenderer.canvas.height) {
+            return super.getTexture();
+        }
+
         // The texture only ever gets uniform scale. Take the larger of the two axes.
         const scaleMax = scale ? Math.max(Math.abs(scale[0]), Math.abs(scale[1])) : 100;
         const requestedScale = Math.min(scaleMax / 100, this._maxTextureScale);
-        let newScale = 1;
-        let textureIndex = 0;
+        let newScale = this._textureScale;
+        while ((newScale < this._maxTextureScale) && (requestedScale >= 1.5 * newScale)) {
+            newScale *= 2;
+        }
+        if (this._textureScale !== newScale) {
+            this._textureScale = newScale;
+            this._svgRenderer._draw(this._textureScale, () => {
+                if (this._textureScale === newScale) {
+                    const canvas = this._svgRenderer.canvas;
+                    const context = canvas.getContext('2d');
+                    const textureData = context.getImageData(0, 0, canvas.width, canvas.height);
 
-        if (requestedScale < 1) {
-            while ((newScale > MIN_TEXTURE_SCALE) && (requestedScale <= newScale * .75)) {
-                newScale /= 2;
-                textureIndex -= 1;
-            }
-        } else {
-            while ((newScale < this._maxTextureScale) && (requestedScale >= 1.5 * newScale)) {
-                newScale *= 2;
-                textureIndex += 1;
-            }
+                    const gl = this._renderer.gl;
+                    gl.bindTexture(gl.TEXTURE_2D, this._texture);
+                    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureData);
+                    this._silhouette.update(textureData);
+                }
+            });
         }
 
-        if (this._svgRenderer.loaded && !this._scaledMIPs[textureIndex + INDEX_OFFSET]) {
-            this._scaledMIPs[textureIndex + INDEX_OFFSET] = this.createMIP(newScale);
-        }
-
-        return this._scaledMIPs[textureIndex + INDEX_OFFSET] || super.getTexture();
-    }
-
-    /**
-     * Do a hard reset of the existing MIPs by deleting them.
-     * @param {Array<number>} [rotationCenter] - Optional rotation center for the SVG. If not supplied, it will be
-     * calculated from the bounding box
-     * @fires Skin.event:WasAltered
-     */
-    resetMIPs () {
-        this._scaledMIPs.forEach(oldMIP => this._renderer.gl.deleteTexture(oldMIP));
-        this._scaledMIPs.length = 0;
-        this._largestMIPScale = 0;
+        return this._texture;
     }
 
     /**
      * Set the contents of this skin to a snapshot of the provided SVG data.
      * @param {string} svgData - new SVG to use.
-     * @param {Array<number>} [rotationCenter] - Optional rotation center for the SVG.
+     * @param {Array<number>} [rotationCenter] - Optional rotation center for the SVG. If not supplied, it will be
+     * calculated from the bounding box
+     * @fires Skin.event:WasAltered
      */
     setSVG (svgData, rotationCenter) {
-        this._svgRenderer.loadSVG(svgData, false, () => {
-            const svgSize = this._svgRenderer.size;
-            if (svgSize[0] === 0 || svgSize[1] === 0) {
+        this._svgRenderer.fromString(svgData, 1, () => {
+            const gl = this._renderer.gl;
+            this._textureScale = this._maxTextureScale = 1;
+
+            // Pull out the ImageData from the canvas. ImageData speeds up
+            // updating Silhouette and is better handled by more browsers in
+            // regards to memory.
+            const canvas = this._svgRenderer.canvas;
+
+            if (!canvas.width || !canvas.height) {
                 super.setEmptyImageData();
                 return;
             }
 
-            const maxDimension = Math.ceil(Math.max(this.size[0], this.size[1]));
+            const context = canvas.getContext('2d');
+            const textureData = context.getImageData(0, 0, canvas.width, canvas.height);
+
+            if (this._texture) {
+                gl.bindTexture(gl.TEXTURE_2D, this._texture);
+                gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureData);
+                this._silhouette.update(textureData);
+            } else {
+                // TODO: mipmaps?
+                const textureOptions = {
+                    auto: true,
+                    wrap: gl.CLAMP_TO_EDGE,
+                    src: textureData
+                };
+
+                this._texture = twgl.createTexture(gl, textureOptions);
+                this._silhouette.update(textureData);
+            }
+
+            const maxDimension = Math.max(this._svgRenderer.canvas.width, this._svgRenderer.canvas.height);
             let testScale = 2;
             for (testScale; maxDimension * testScale <= MAX_TEXTURE_DIMENSION; testScale *= 2) {
                 this._maxTextureScale = testScale;
             }
 
-            this.resetMIPs();
-
             if (typeof rotationCenter === 'undefined') rotationCenter = this.calculateRotationCenter();
             this.setRotationCenter.apply(this, rotationCenter);
             this.emit(Skin.Events.WasAltered);