chore(package): update tap to version 14.6.7

Closes #289

package.json

@@ -37,8 +37,8 @@
     "gh-pages": "^1.0.0",
     "jsdoc": "^3.5.5",
     "json": "^9.0.4",
-    "scratch-vm": "0.2.0-prerelease.20200318165714",
-    "tap": "^11.0.0",
+    "scratch-vm": "0.2.0-prerelease.20190207224121",
+    "tap": "^14.6.7",
     "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.20200205003400",
+    "scratch-svg-renderer": "0.2.0-prerelease.20190822202608",
     "twgl.js": "4.4.0"
   }
 }

src/BitmapSkin.js

@@ -18,6 +18,9 @@ class BitmapSkin extends Skin {
         /** @type {!RenderWebGL} */
         this._renderer = renderer;
 
+        /** @type {WebGLTexture} */
+        this._texture = null;
+
         /** @type {Array<int>} */
         this._textureSize = [0, 0];
     }
@@ -53,7 +56,7 @@ class BitmapSkin extends Skin {
      */
     // eslint-disable-next-line no-unused-vars
     getTexture (scale) {
-        return this._texture || super.getTexture();
+        return this._texture;
     }
 
     /**
@@ -75,10 +78,6 @@ class BitmapSkin extends Skin {
      * @fires Skin.event:WasAltered
      */
     setBitmap (bitmapData, costumeResolution, rotationCenter) {
-        if (!bitmapData.width || !bitmapData.height) {
-            super.setEmptyImageData();
-            return;
-        }
         const gl = this._renderer.gl;
 
         // Preferably bitmapData is ImageData. ImageData speeds up updating
@@ -92,17 +91,22 @@ class BitmapSkin extends Skin {
             textureData = context.getImageData(0, 0, bitmapData.width, bitmapData.height);
         }
 
-        if (this._texture === null) {
+        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: false,
-                wrap: gl.CLAMP_TO_EDGE
+                auto: true,
+                wrap: gl.CLAMP_TO_EDGE,
+                src: textureData
             };
 
             this._texture = twgl.createTexture(gl, textureOptions);
+            this._silhouette.update(textureData);
         }
 
-        this._setTexture(textureData);
-
         // Do these last in case any of the above throws an exception
         this._costumeResolution = costumeResolution || 2;
         this._textureSize = BitmapSkin._getBitmapSize(bitmapData);

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.
      */
@@ -184,99 +183,56 @@ class Drawable {
         return this._visible;
     }
 
-    /**
-     * Update the position if it is different. Marks the transform as dirty.
-     * @param {Array.<number>} position A new position.
-     */
-    updatePosition (position) {
-        if (this._position[0] !== position[0] ||
-            this._position[1] !== position[1]) {
-            this._position[0] = Math.round(position[0]);
-            this._position[1] = Math.round(position[1]);
-            this.setTransformDirty();
-        }
-    }
-
-    /**
-     * Update the direction if it is different. Marks the transform as dirty.
-     * @param {number} direction A new direction.
-     */
-    updateDirection (direction) {
-        if (this._direction !== direction) {
-            this._direction = direction;
-            this._rotationTransformDirty = true;
-            this.setTransformDirty();
-        }
-    }
-
-    /**
-     * Update the scale if it is different. Marks the transform as dirty.
-     * @param {Array.<number>} scale A new scale.
-     */
-    updateScale (scale) {
-        if (this._scale[0] !== scale[0] ||
-            this._scale[1] !== scale[1]) {
-            this._scale[0] = scale[0];
-            this._scale[1] = scale[1];
-            this._rotationCenterDirty = true;
-            this._skinScaleDirty = true;
-            this.setTransformDirty();
-        }
-    }
-
-    /**
-     * Update visibility if it is different. Marks the convex hull as dirty.
-     * @param {boolean} visible A new visibility state.
-     */
-    updateVisible (visible) {
-        if (this._visible !== visible) {
-            this._visible = visible;
-            this.setConvexHullDirty();
-        }
-    }
-
-    /**
-     * Update an effect. Marks the convex hull as dirty if the effect changes shape.
-     * @param {string} effectName The name of the effect.
-     * @param {number} rawValue A new effect value.
-     */
-    updateEffect (effectName, rawValue) {
-        const effectInfo = ShaderManager.EFFECT_INFO[effectName];
-        if (rawValue) {
-            this.enabledEffects |= effectInfo.mask;
-        } else {
-            this.enabledEffects &= ~effectInfo.mask;
-        }
-        const converter = effectInfo.converter;
-        this._uniforms[effectInfo.uniformName] = converter(rawValue);
-        if (effectInfo.shapeChanges) {
-            this.setConvexHullDirty();
-        }
-    }
-
     /**
      * Update the position, direction, scale, or effect properties of this Drawable.
-     * @deprecated Use specific update* methods instead.
      * @param {object.<string,*>} properties The new property values to set.
      */
     updateProperties (properties) {
-        if ('position' in properties) {
-            this.updatePosition(properties.position);
+        let dirty = false;
+        if ('position' in properties && (
+            this._position[0] !== properties.position[0] ||
+            this._position[1] !== properties.position[1])) {
+            this._position[0] = Math.round(properties.position[0]);
+            this._position[1] = Math.round(properties.position[1]);
+            dirty = true;
         }
-        if ('direction' in properties) {
-            this.updateDirection(properties.direction);
+        if ('direction' in properties && this._direction !== properties.direction) {
+            this._direction = properties.direction;
+            this._rotationTransformDirty = true;
+            dirty = true;
         }
-        if ('scale' in properties) {
-            this.updateScale(properties.scale);
+        if ('scale' in properties && (
+            this._scale[0] !== properties.scale[0] ||
+            this._scale[1] !== properties.scale[1])) {
+            this._scale[0] = properties.scale[0];
+            this._scale[1] = properties.scale[1];
+            this._rotationCenterDirty = true;
+            this._skinScaleDirty = true;
+            dirty = true;
         }
         if ('visible' in properties) {
-            this.updateVisible(properties.visible);
+            this._visible = properties.visible;
+            this.setConvexHullDirty();
+        }
+        if (dirty) {
+            this.setTransformDirty();
         }
         const numEffects = ShaderManager.EFFECTS.length;
         for (let index = 0; index < numEffects; ++index) {
             const effectName = ShaderManager.EFFECTS[index];
             if (effectName in properties) {
-                this.updateEffect(effectName, properties[effectName]);
+                const rawValue = properties[effectName];
+                const effectInfo = ShaderManager.EFFECT_INFO[effectName];
+                if (rawValue) {
+                    this._effectBits |= effectInfo.mask;
+                } else {
+                    this._effectBits &= ~effectInfo.mask;
+                }
+                const converter = effectInfo.converter;
+                this._uniforms[effectInfo.uniformName] = converter(rawValue);
+                if (effectInfo.shapeChanges) {
+                    this.setConvexHullDirty();
+                }
             }
         }
     }
@@ -462,9 +418,7 @@ class Drawable {
 
         const localPosition = getLocalPosition(this, vec);
 
-        // We're not passing in a scale to useNearest, but that's okay because "touching" queries
-        // happen at the "native" size anyway.
-        if (this.useNearest()) {
+        if (this.useNearest) {
             return this.skin.isTouchingNearest(localPosition);
         }
         return this.skin.isTouchingLinear(localPosition);
@@ -472,17 +426,15 @@ class Drawable {
 
     /**
      * Should the drawable use NEAREST NEIGHBOR or LINEAR INTERPOLATION mode
-     * @param {?Array<Number>} scale Optionally, the screen-space scale of the drawable.
-     * @return {boolean} True if the drawable should use nearest-neighbor interpolation.
      */
-    useNearest (scale = this.scale) {
+    get useNearest () {
         // Raster skins (bitmaps) should always prefer nearest neighbor
         if (this.skin.isRaster) {
             return true;
         }
 
         // 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 |
@@ -497,8 +449,8 @@ class Drawable {
         }
 
         // If the scale of the skin is very close to 100 (0.99999 variance is okay I guess)
-        if (Math.abs(scale[0]) > 99 && Math.abs(scale[0]) < 101 &&
-            Math.abs(scale[1]) > 99 && Math.abs(scale[1]) < 101) {
+        if (Math.abs(this.scale[0]) > 99 && Math.abs(this.scale[0]) < 101 &&
+            Math.abs(this.scale[1]) > 99 && Math.abs(this.scale[1]) < 101) {
             return true;
         }
         return false;
@@ -578,6 +530,7 @@ class Drawable {
      * @return {!Rectangle} Bounds for the Drawable.
      */
     getFastBounds (result) {
+        this.updateMatrix();
         if (!this.needsConvexHullPoints()) {
             return this.getBounds(result);
         }
@@ -685,20 +638,15 @@ class Drawable {
         const localPosition = getLocalPosition(drawable, vec);
         if (localPosition[0] < 0 || localPosition[1] < 0 ||
             localPosition[0] > 1 || localPosition[1] > 1) {
-            dst[0] = 0;
-            dst[1] = 0;
-            dst[2] = 0;
             dst[3] = 0;
             return dst;
         }
         const textColor =
         // commenting out to only use nearest for now
-        // drawable.useNearest() ?
+        // 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,39 +114,36 @@ 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
+            dst[3] *= uniforms.u_ghost;
+        }
 
         const enableColor = (effects & ShaderManager.EFFECT_INFO.color.mask) !== 0;
         const enableBrightness = (effects & ShaderManager.EFFECT_INFO.brightness.mask) !== 0;
 
         if (enableColor || enableBrightness) {
-            // gl_FragColor.rgb /= gl_FragColor.a + epsilon;
-            // Here, we're dividing by the (previously pre-multiplied) alpha to ensure HSV is properly calculated
-            // for partially transparent pixels.
-            // epsilon is present in the shader because dividing by 0 (fully transparent pixels) messes up calculations.
-            // We're doing this with a Uint8ClampedArray here, so dividing by 0 just gives 255. We're later multiplying
-            // by 0 again, so it won't affect results.
-            const alpha = inOutColor[3] / 255;
-            inOutColor[0] /= alpha;
-            inOutColor[1] /= alpha;
-            inOutColor[2] /= alpha;
-
             // 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
@@ -176,38 +173,25 @@ class EffectTransform {
                 hsl[2] = Math.min(1, hsl[2] + uniforms.u_brightness);
             }
             // gl_FragColor.rgb = convertHSL2RGB(hsl);
-            inOutColor.set(hslToRgb(hsl));
-
-            // gl_FragColor.rgb *= gl_FragColor.a + epsilon;
-            // Now we're doing the reverse, premultiplying by the alpha once again.
-            inOutColor[0] *= alpha;
-            inOutColor[1] *= alpha;
-            inOutColor[2] *= alpha;
+            dst.set(hslToRgb(hsl));
         }
 
-        if ((effects & ShaderManager.EFFECT_INFO.ghost.mask) !== 0) {
-            // gl_FragColor *= u_ghost
-            inOutColor[0] *= uniforms.u_ghost;
-            inOutColor[1] *= uniforms.u_ghost;
-            inOutColor[2] *= uniforms.u_ghost;
-            inOutColor[3] *= uniforms.u_ghost;
-        }
-
-        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/PenSkin.js

@@ -25,12 +25,6 @@ const DefaultPenAttributes = {
     diameter: 1
 };
 
-/**
- * Reused memory location for storing a premultiplied pen color.
- * @type {FloatArray}
- */
-const __premultipliedColor = [0, 0, 0, 0];
-
 
 /**
  * Reused memory location for projection matrices.
@@ -94,6 +88,9 @@ class PenSkin extends Skin {
         /** @type {HTMLCanvasElement} */
         this._canvas = document.createElement('canvas');
 
+        /** @type {WebGLTexture} */
+        this._texture = null;
+
         /** @type {WebGLTexture} */
         this._exportTexture = null;
 
@@ -126,7 +123,7 @@ class PenSkin extends Skin {
 
         const NO_EFFECTS = 0;
         /** @type {twgl.ProgramInfo} */
-        this._stampShader = this._renderer._shaderManager.getShader(ShaderManager.DRAW_MODE.default, NO_EFFECTS);
+        this._stampShader = this._renderer._shaderManager.getShader(ShaderManager.DRAW_MODE.stamp, NO_EFFECTS);
 
         /** @type {twgl.ProgramInfo} */
         this._lineShader = this._renderer._shaderManager.getShader(ShaderManager.DRAW_MODE.lineSample, NO_EFFECTS);
@@ -157,6 +154,13 @@ class PenSkin extends Skin {
         return true;
     }
 
+    /**
+     * @returns {boolean} true if alpha is premultiplied, false otherwise
+     */
+    get hasPremultipliedAlpha () {
+        return true;
+    }
+
     /**
      * @return {Array<number>} the "native" size, in texels, of this skin. [width, height]
      */
@@ -184,7 +188,7 @@ class PenSkin extends Skin {
     clear () {
         const gl = this._renderer.gl;
         twgl.bindFramebufferInfo(gl, this._framebuffer);
-
+        
         /* Reset framebuffer to transparent black */
         gl.clearColor(0, 0, 0, 0);
         gl.clear(gl.COLOR_BUFFER_BIT);
@@ -313,6 +317,13 @@ class PenSkin extends Skin {
 
         twgl.bindFramebufferInfo(gl, this._framebuffer);
 
+        // Needs a blend function that blends a destination that starts with
+        // no alpha.
+        gl.blendFuncSeparate(
+            gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA,
+            gl.ONE, gl.ONE_MINUS_SRC_ALPHA
+        );
+
         gl.viewport(0, 0, bounds.width, bounds.height);
 
         gl.useProgram(currentShader.program);
@@ -321,7 +332,8 @@ class PenSkin extends Skin {
 
         const uniforms = {
             u_skin: this._texture,
-            u_projectionMatrix: projection
+            u_projectionMatrix: projection,
+            u_fudge: 0
         };
 
         twgl.setUniforms(currentShader, uniforms);
@@ -333,6 +345,8 @@ class PenSkin extends Skin {
     _exitDrawLineOnBuffer () {
         const gl = this._renderer.gl;
 
+        gl.blendFuncSeparate(gl.ONE, gl.ONE_MINUS_SRC_ALPHA, gl.ZERO, gl.ONE);
+
         twgl.bindFramebufferInfo(gl, null);
     }
 
@@ -371,13 +385,6 @@ class PenSkin extends Skin {
         const radius = diameter / 2;
         const yScalar = (0.50001 - (radius / (length + diameter)));
 
-        // Premultiply pen color by pen transparency
-        const penColor = penAttributes.color4f || DefaultPenAttributes.color4f;
-        __premultipliedColor[0] = penColor[0] * penColor[3];
-        __premultipliedColor[1] = penColor[1] * penColor[3];
-        __premultipliedColor[2] = penColor[2] * penColor[3];
-        __premultipliedColor[3] = penColor[3];
-
         const uniforms = {
             u_positionScalar: yScalar,
             u_capScale: diameter,
@@ -391,7 +398,7 @@ class PenSkin extends Skin {
                 twgl.m4.scaling(scalingVector, __modelScalingMatrix),
                 __modelMatrix
             ),
-            u_lineColor: __premultipliedColor
+            u_lineColor: penAttributes.color4f || DefaultPenAttributes.color4f
         };
 
         twgl.setUniforms(currentShader, uniforms);
@@ -467,7 +474,8 @@ class PenSkin extends Skin {
                     0
                 ), __modelScalingMatrix),
                 __modelMatrix
-            )
+            ),
+            u_fudge: 0
         };
 
         twgl.setTextureParameters(gl, texture, {minMag: gl.NEAREST});
@@ -484,6 +492,8 @@ class PenSkin extends Skin {
 
         twgl.bindFramebufferInfo(gl, this._framebuffer);
 
+        gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+
         this._drawRectangleRegionEnter(this._stampShader, this._bounds);
     }
 
@@ -493,6 +503,8 @@ class PenSkin extends Skin {
     _exitDrawToBuffer () {
         const gl = this._renderer.gl;
 
+        gl.blendFuncSeparate(gl.ONE, gl.ONE_MINUS_SRC_ALPHA, gl.ZERO, gl.ONE);
+
         twgl.bindFramebufferInfo(gl, null);
     }
 
@@ -651,7 +663,7 @@ class PenSkin extends Skin {
             skinImageData.data.set(skinPixels);
             skinContext.putImageData(skinImageData, 0, 0);
 
-            this._silhouette.update(this._canvas, true /* isPremultiplied */);
+            this._silhouette.update(this._canvas);
 
             this._silhouetteDirty = false;
         }

src/RenderWebGL.js

@@ -196,7 +196,7 @@ class RenderWebGL extends EventEmitter {
         gl.disable(gl.DEPTH_TEST);
         /** @todo disable when no partial transparency? */
         gl.enable(gl.BLEND);
-        gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+        gl.blendFuncSeparate(gl.ONE, gl.ONE_MINUS_SRC_ALPHA, gl.ZERO, gl.ONE);
     }
 
     /**
@@ -394,6 +394,8 @@ class RenderWebGL extends EventEmitter {
         for (const drawable of this._allDrawables) {
             if (drawable && drawable.skin === oldSkin) {
                 drawable.skin = newSkin;
+                drawable.setConvexHullDirty();
+                drawable.setTransformDirty();
             }
         }
         oldSkin.dispose();
@@ -834,8 +836,7 @@ class RenderWebGL extends EventEmitter {
                 projection,
                 {
                     extraUniforms,
-                    ignoreVisibility: true, // Touching color ignores sprite visibility,
-                    effectMask: ~ShaderManager.EFFECT_INFO.ghost.mask
+                    ignoreVisibility: true // Touching color ignores sprite visibility
                 });
 
             gl.stencilFunc(gl.EQUAL, 1, 1);
@@ -973,7 +974,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}`);
         }
@@ -1009,7 +1010,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}`);
                 }
@@ -1244,7 +1245,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.
@@ -1282,7 +1283,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({
@@ -1313,122 +1314,9 @@ class RenderWebGL extends EventEmitter {
         }, null);
     }
 
-    /**
-     * Update a drawable's skin.
-     * @param {number} drawableID The drawable's id.
-     * @param {number} skinId The skin to update to.
-     */
-    updateDrawableSkinId (drawableID, skinId) {
-        const drawable = this._allDrawables[drawableID];
-        // TODO: https://github.com/LLK/scratch-vm/issues/2288
-        if (!drawable) return;
-        drawable.skin = this._allSkins[skinId];
-    }
-
-    /**
-     * Update a drawable's skin rotation center.
-     * @param {number} drawableID The drawable's id.
-     * @param {Array.<number>} rotationCenter The rotation center for the skin.
-     */
-    updateDrawableRotationCenter (drawableID, rotationCenter) {
-        const drawable = this._allDrawables[drawableID];
-        // TODO: https://github.com/LLK/scratch-vm/issues/2288
-        if (!drawable) return;
-        drawable.skin.setRotationCenter(rotationCenter[0], rotationCenter[1]);
-    }
-
-    /**
-     * Update a drawable's skin and rotation center together.
-     * @param {number} drawableID The drawable's id.
-     * @param {number} skinId The skin to update to.
-     * @param {Array.<number>} rotationCenter The rotation center for the skin.
-     */
-    updateDrawableSkinIdRotationCenter (drawableID, skinId, rotationCenter) {
-        const drawable = this._allDrawables[drawableID];
-        // TODO: https://github.com/LLK/scratch-vm/issues/2288
-        if (!drawable) return;
-        drawable.skin = this._allSkins[skinId];
-        drawable.skin.setRotationCenter(rotationCenter[0], rotationCenter[1]);
-    }
-
-    /**
-     * Update a drawable's position.
-     * @param {number} drawableID The drawable's id.
-     * @param {Array.<number>} position The new position.
-     */
-    updateDrawablePosition (drawableID, position) {
-        const drawable = this._allDrawables[drawableID];
-        // TODO: https://github.com/LLK/scratch-vm/issues/2288
-        if (!drawable) return;
-        drawable.updatePosition(position);
-    }
-
-    /**
-     * Update a drawable's direction.
-     * @param {number} drawableID The drawable's id.
-     * @param {number} direction A new direction.
-     */
-    updateDrawableDirection (drawableID, direction) {
-        const drawable = this._allDrawables[drawableID];
-        // TODO: https://github.com/LLK/scratch-vm/issues/2288
-        if (!drawable) return;
-        drawable.updateDirection(direction);
-    }
-
-    /**
-     * Update a drawable's scale.
-     * @param {number} drawableID The drawable's id.
-     * @param {Array.<number>} scale A new scale.
-     */
-    updateDrawableScale (drawableID, scale) {
-        const drawable = this._allDrawables[drawableID];
-        // TODO: https://github.com/LLK/scratch-vm/issues/2288
-        if (!drawable) return;
-        drawable.updateScale(scale);
-    }
-
-    /**
-     * Update a drawable's direction and scale together.
-     * @param {number} drawableID The drawable's id.
-     * @param {number} direction A new direction.
-     * @param {Array.<number>} scale A new scale.
-     */
-    updateDrawableDirectionScale (drawableID, direction, scale) {
-        const drawable = this._allDrawables[drawableID];
-        // TODO: https://github.com/LLK/scratch-vm/issues/2288
-        if (!drawable) return;
-        drawable.updateDirection(direction);
-        drawable.updateScale(scale);
-    }
-
-    /**
-     * Update a drawable's visibility.
-     * @param {number} drawableID The drawable's id.
-     * @param {boolean} visible Will the drawable be visible?
-     */
-    updateDrawableVisible (drawableID, visible) {
-        const drawable = this._allDrawables[drawableID];
-        // TODO: https://github.com/LLK/scratch-vm/issues/2288
-        if (!drawable) return;
-        drawable.updateVisible(visible);
-    }
-
-    /**
-     * Update a drawable's visual effect.
-     * @param {number} drawableID The drawable's id.
-     * @param {string} effectName The effect to change.
-     * @param {number} value A new effect value.
-     */
-    updateDrawableEffect (drawableID, effectName, value) {
-        const drawable = this._allDrawables[drawableID];
-        // TODO: https://github.com/LLK/scratch-vm/issues/2288
-        if (!drawable) return;
-        drawable.updateEffect(effectName, value);
-    }
 
     /**
      * Update the position, direction, scale, or effect properties of this Drawable.
-     * @deprecated Use specific updateDrawable* methods instead.
      * @param {int} drawableID The ID of the Drawable to update.
      * @param {object.<string,*>} properties The new property values to set.
      */
@@ -1436,16 +1324,17 @@ class RenderWebGL extends EventEmitter {
         const drawable = this._allDrawables[drawableID];
         if (!drawable) {
             /**
-             * @todo(https://github.com/LLK/scratch-vm/issues/2288) fix whatever's wrong in the VM which causes this, then add a warning or throw here.
+             * @todo fix whatever's wrong in the VM which causes this, then add a warning or throw here.
              * Right now this happens so much on some projects that a warning or exception here can hang the browser.
              */
             return;
         }
         if ('skinId' in properties) {
-            this.updateDrawableSkinId(drawableID, properties.skinId);
+            drawable.skin = this._allSkins[properties.skinId];
         }
         if ('rotationCenter' in properties) {
-            this.updateDrawableRotationCenter(drawableID, properties.rotationCenter);
+            const newRotationCenter = properties.rotationCenter;
+            drawable.skin.setRotationCenter(newRotationCenter[0], newRotationCenter[1]);
         }
         drawable.updateProperties(properties);
     }
@@ -1462,7 +1351,7 @@ class RenderWebGL extends EventEmitter {
 
         const drawable = this._allDrawables[drawableID];
         if (!drawable) {
-            // @todo(https://github.com/LLK/scratch-vm/issues/2288) fix whatever's wrong in the VM which causes this, then add a warning or throw here.
+            // TODO: fix whatever's wrong in the VM which causes this, then add a warning or throw here.
             // Right now this happens so much on some projects that a warning or exception here can hang the browser.
             return [x, y];
         }
@@ -1543,20 +1432,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.default, 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);
     }
 
     /* ******
@@ -1660,18 +1552,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.
@@ -1704,14 +1584,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);
 
@@ -1725,7 +1608,8 @@ class RenderWebGL extends EventEmitter {
                 gl.useProgram(currentShader.program);
                 twgl.setBuffersAndAttributes(gl, currentShader, this._bufferInfo);
                 Object.assign(uniforms, {
-                    u_projectionMatrix: projection
+                    u_projectionMatrix: projection,
+                    u_fudge: window.fudge || 0
                 });
             }
 
@@ -1740,11 +1624,19 @@ class RenderWebGL extends EventEmitter {
 
             if (uniforms.u_skin) {
                 twgl.setTextureParameters(
-                    gl, uniforms.u_skin, {minMag: drawable.useNearest(drawableScale) ? gl.NEAREST : gl.LINEAR}
+                    gl, uniforms.u_skin, {minMag: drawable.useNearest ? gl.NEAREST : gl.LINEAR}
                 );
             }
 
             twgl.setUniforms(currentShader, uniforms);
+
+            /* adjust blend function for this skin */
+            if (drawable.skin.hasPremultipliedAlpha){
+                gl.blendFuncSeparate(gl.ONE, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+            } else {
+                gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+            }
+
             twgl.drawBufferInfo(gl, this._bufferInfo, gl.TRIANGLES);
         }
 
@@ -1895,11 +1787,13 @@ class RenderWebGL extends EventEmitter {
             }
             */
             Drawable.sampleColor4b(vec, drawables[index].drawable, __blendColor);
-            // Equivalent to gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA)
-            dst[0] += __blendColor[0] * blendAlpha;
-            dst[1] += __blendColor[1] * blendAlpha;
-            dst[2] += __blendColor[2] * blendAlpha;
-            blendAlpha *= (1 - (__blendColor[3] / 255));
+            // if we are fully transparent, go to the next one "down"
+            const sampleAlpha = __blendColor[3] / 255;
+            // premultiply alpha
+            dst[0] += __blendColor[0] * blendAlpha * sampleAlpha;
+            dst[1] += __blendColor[1] * blendAlpha * sampleAlpha;
+            dst[2] += __blendColor[2] * blendAlpha * sampleAlpha;
+            blendAlpha *= (1 - sampleAlpha);
         }
         // Backdrop could be transparent, so we need to go to the "clear color" of the
         // draw scene (white) as a fallback if everything was alpha

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,111 +60,79 @@ 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,
-            premultiplyAlpha: true
-        };
-
-        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) {
         // 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) {
-                super.setEmptyImageData();
-                return;
+        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;
+            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.ceil(Math.max(this.size[0], this.size[1]));
+            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);

src/ShaderManager.js

@@ -171,7 +171,12 @@ ShaderManager.DRAW_MODE = {
     /**
      * Sample a "texture" to draw a line with caps.
      */
-    lineSample: 'lineSample'
+    lineSample: 'lineSample',
+
+    /**
+     * Draw normally except for pre-multiplied alpha
+     */
+    stamp: 'stamp'
 };
 
 module.exports = ShaderManager;

src/Silhouette.js

@@ -20,7 +20,7 @@ let __SilhouetteUpdateCanvas;
  * @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.
+    // 0 if outside bouds, otherwise read from data.
     if (x >= width || y >= height || x < 0 || y < 0) {
         return 0;
     }
@@ -39,7 +39,6 @@ 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).
@@ -47,31 +46,7 @@ const __cornerWork = [
  * @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);
-    }
-    const offset = ((y * width) + x) * 4;
-    // premultiply alpha
-    const alpha = data[offset + 3] / 255;
-    dst[0] = data[offset] * alpha;
-    dst[1] = data[offset + 1] * alpha;
-    dst[2] = data[offset + 2] * alpha;
-    dst[3] = data[offset + 3];
-    return dst;
-};
-
-/**
- * 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 {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.
+    // 0 if outside bouds, otherwise read from data.
     if (x >= width || y >= height || x < 0 || y < 0) {
         return dst.fill(0);
     }
@@ -103,21 +78,15 @@ class Silhouette {
          */
         this._colorData = null;
 
-        // By default, silhouettes are assumed not to contain premultiplied image data,
-        // so when we get a color, we want to multiply it by its alpha channel.
-        // Point `_getColor` to the version of the function that multiplies.
-        this._getColor = getColor4b;
-
         this.colorAtNearest = this.colorAtLinear = (_, dst) => dst.fill(0);
     }
 
     /**
      * Update this silhouette with the bitmapData for a skin.
-     * @param {ImageData|HTMLCanvasElement|HTMLImageElement} bitmapData An image, canvas or other element that the skin
-     * @param {boolean} isPremultiplied True if the source bitmap data comes premultiplied (e.g. from readPixels).
+     * @param {*} bitmapData An image, canvas or other element that the skin
      * rendering can be queried from.
      */
-    update (bitmapData, isPremultiplied = false) {
+    update (bitmapData) {
         let imageData;
         if (bitmapData instanceof ImageData) {
             // If handed ImageData directly, use it directly.
@@ -140,12 +109,6 @@ class Silhouette {
             imageData = ctx.getImageData(0, 0, width, height);
         }
 
-        if (isPremultiplied) {
-            this._getColor = getPremultipliedColor4b;
-        } else {
-            this._getColor = getColor4b;
-        }
-
         this._colorData = imageData.data;
         // delete our custom overriden "uninitalized" color functions
         // let the prototype work for itself
@@ -161,7 +124,7 @@ class Silhouette {
      * @returns {Uint8ClampedArray} dst
      */
     colorAtNearest (vec, dst) {
-        return this._getColor(
+        return getColor4b(
             this,
             Math.floor(vec[0] * (this._width - 1)),
             Math.floor(vec[1] * (this._height - 1)),
@@ -188,10 +151,10 @@ class Silhouette {
         const xFloor = Math.floor(x);
         const yFloor = Math.floor(y);
 
-        const x0y0 = this._getColor(this, xFloor, yFloor, __cornerWork[0]);
-        const x1y0 = this._getColor(this, xFloor + 1, yFloor, __cornerWork[1]);
-        const x0y1 = this._getColor(this, xFloor, yFloor + 1, __cornerWork[2]);
-        const x1y1 = this._getColor(this, xFloor + 1, yFloor + 1, __cornerWork[3]);
+        const x0y0 = getColor4b(this, xFloor, yFloor, __cornerWork[0]);
+        const x1y0 = getColor4b(this, xFloor + 1, yFloor, __cornerWork[1]);
+        const x0y1 = getColor4b(this, xFloor, yFloor + 1, __cornerWork[2]);
+        const x1y1 = getColor4b(this, xFloor + 1, yFloor + 1, __cornerWork[3]);
 
         dst[0] = (x0y0[0] * x0D * y0D) + (x0y1[0] * x0D * y1D) + (x1y0[0] * x1D * y0D) + (x1y1[0] * x1D * y1D);
         dst[1] = (x0y0[1] * x0D * y0D) + (x0y1[1] * x0D * y1D) + (x1y0[1] * x1D * y0D) + (x1y1[1] * x1D * y1D);

src/Skin.js

@@ -33,9 +33,6 @@ class Skin extends EventEmitter {
         /** @type {Vec3} */
         this._rotationCenter = twgl.v3.create(0, 0);
 
-        /** @type {WebGLTexture} */
-        this._texture = null;
-
         /**
          * The uniforms to be used by the vertex and pixel shaders.
          * Some of these are used by other parts of the renderer as well.
@@ -79,6 +76,13 @@ class Skin extends EventEmitter {
         return false;
     }
 
+    /**
+     * @returns {boolean} true if alpha is premultiplied, false otherwise
+     */
+    get hasPremultipliedAlpha () {
+        return false;
+    }
+
     /**
      * @return {int} the unique ID for this Skin.
      */
@@ -136,7 +140,7 @@ class Skin extends EventEmitter {
      */
     // eslint-disable-next-line no-unused-vars
     getTexture (scale) {
-        return this._emptyImageTexture;
+        return null;
     }
 
     /**
@@ -167,55 +171,6 @@ class Skin extends EventEmitter {
      */
     updateSilhouette () {}
 
-    /**
-     * Set this skin's texture to the given image.
-     * @param {ImageData|HTMLCanvasElement} textureData - The canvas or image data to set the texture to.
-     */
-    _setTexture (textureData) {
-        const gl = this._renderer.gl;
-
-        gl.bindTexture(gl.TEXTURE_2D, this._texture);
-        // Premultiplied alpha is necessary for proper blending.
-        // See http://www.realtimerendering.com/blog/gpus-prefer-premultiplication/
-        gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureData);
-        gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
-
-        this._silhouette.update(textureData);
-    }
-
-    /**
-     * Set the contents of this skin to an empty skin.
-     * @fires Skin.event:WasAltered
-     */
-    setEmptyImageData () {
-        // Free up the current reference to the _texture
-        this._texture = null;
-
-        if (!this._emptyImageData) {
-            // Create a transparent pixel
-            this._emptyImageData = new ImageData(1, 1);
-
-            // Create a new texture and update the silhouette
-            const gl = this._renderer.gl;
-
-            const textureOptions = {
-                auto: true,
-                wrap: gl.CLAMP_TO_EDGE,
-                src: this._emptyImageData
-            };
-
-            // Note: we're using _emptyImageTexture here instead of _texture
-            // so that we can cache this empty texture for later use as needed.
-            // this._texture can get modified by other skins (e.g. BitmapSkin
-            // and SVGSkin, so we can't use that same field for caching)
-            this._emptyImageTexture = twgl.createTexture(gl, textureOptions);
-        }
-
-        this._silhouette.update(this._emptyImageData);
-        this.emit(Skin.Events.WasAltered);
-    }
-
     /**
      * Does this point touch an opaque or translucent point on this skin?
      * Nearest Neighbor version

src/TextBubbleSkin.js

@@ -42,6 +42,9 @@ class TextBubbleSkin extends Skin {
         /** @type {HTMLCanvasElement} */
         this._canvas = document.createElement('canvas');
 
+        /** @type {WebGLTexture} */
+        this._texture = null;
+
         /** @type {Array<number>} */
         this._size = [0, 0];
 
@@ -51,7 +54,7 @@ class TextBubbleSkin extends Skin {
         /** @type {Array<string>} */
         this._lines = [];
 
-        /** @type {object} */
+        this._textSize = {width: 0, height: 0};
         this._textAreaSize = {width: 0, height: 0};
 
         /** @type {string} */
@@ -124,14 +127,17 @@ class TextBubbleSkin extends Skin {
         this._lines = this.textWrapper.wrapText(BubbleStyle.MAX_LINE_WIDTH, this._text);
 
         // Measure width of longest line to avoid extra-wide bubbles
-        let longestLineWidth = 0;
+        let longestLine = 0;
         for (const line of this._lines) {
-            longestLineWidth = Math.max(longestLineWidth, this.measurementProvider.measureText(line));
+            longestLine = Math.max(longestLine, this.measurementProvider.measureText(line));
         }
 
+        this._textSize.width = longestLine;
+        this._textSize.height = BubbleStyle.LINE_HEIGHT * this._lines.length;
+
         // Calculate the canvas-space sizes of the padded text area and full text bubble
-        const paddedWidth = Math.max(longestLineWidth, BubbleStyle.MIN_WIDTH) + (BubbleStyle.PADDING * 2);
-        const paddedHeight = (BubbleStyle.LINE_HEIGHT * this._lines.length) + (BubbleStyle.PADDING * 2);
+        const paddedWidth = Math.max(this._textSize.width, BubbleStyle.MIN_WIDTH) + (BubbleStyle.PADDING * 2);
+        const paddedHeight = this._textSize.height + (BubbleStyle.PADDING * 2);
 
         this._textAreaSize.width = paddedWidth;
         this._textAreaSize.height = paddedHeight;
@@ -177,7 +183,6 @@ class TextBubbleSkin extends Skin {
         }
 
         // Draw the bubble's rounded borders
-        ctx.beginPath();
         ctx.moveTo(BubbleStyle.CORNER_RADIUS, paddedHeight);
         ctx.arcTo(0, paddedHeight, 0, paddedHeight - BubbleStyle.CORNER_RADIUS, BubbleStyle.CORNER_RADIUS);
         ctx.arcTo(0, 0, paddedWidth, 0, BubbleStyle.CORNER_RADIUS);
@@ -262,14 +267,17 @@ class TextBubbleSkin extends Skin {
 
             if (this._texture === null) {
                 const textureOptions = {
-                    auto: false,
-                    wrap: gl.CLAMP_TO_EDGE
+                    auto: true,
+                    wrap: gl.CLAMP_TO_EDGE,
+                    src: textureData
                 };
 
                 this._texture = twgl.createTexture(gl, textureOptions);
             }
-
-            this._setTexture(textureData);
+    
+            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);
         }
 
         return this._texture;

src/shaders/sprite.frag

@@ -1,5 +1,7 @@
 precision mediump float;
 
+uniform float u_fudge;
+
 #ifdef DRAW_MODE_silhouette
 uniform vec4 u_silhouetteColor;
 #else // DRAW_MODE_silhouette
@@ -43,16 +45,14 @@ uniform sampler2D u_skin;
 
 varying vec2 v_texCoord;
 
-// Add this to divisors to prevent division by 0, which results in NaNs propagating through calculations.
-// Smaller values can cause problems on some mobile devices.
-const float epsilon = 1e-3;
-
 #if !defined(DRAW_MODE_silhouette) && (defined(ENABLE_color))
 // Branchless color conversions based on code from:
 // http://www.chilliant.com/rgb2hsv.html by Ian Taylor
 // Based in part on work by Sam Hocevar and Emil Persson
 // See also: https://en.wikipedia.org/wiki/HSL_and_HSV#Formal_derivation
 
+// Smaller values can cause problems on some mobile devices
+const float epsilon = 1e-3;
 
 // Convert an RGB color to Hue, Saturation, and Value.
 // All components of input and output are expected to be in the [0,1] range.
@@ -155,12 +155,16 @@ void main()
 
 	gl_FragColor = texture2D(u_skin, texcoord0);
 
-	#if defined(ENABLE_color) || defined(ENABLE_brightness)
-	// Divide premultiplied alpha values for proper color processing
-	// Add epsilon to avoid dividing by 0 for fully transparent pixels
-	gl_FragColor.rgb = clamp(gl_FragColor.rgb / (gl_FragColor.a + epsilon), 0.0, 1.0);
+    #ifdef ENABLE_ghost
+    gl_FragColor.a *= u_ghost;
+    #endif // ENABLE_ghost
 
-	#ifdef ENABLE_color
+	#ifdef DRAW_MODE_silhouette
+	// switch to u_silhouetteColor only AFTER the alpha test
+	gl_FragColor = u_silhouetteColor;
+	#else // DRAW_MODE_silhouette
+
+	#if defined(ENABLE_color)
 	{
 		vec3 hsv = convertRGB2HSV(gl_FragColor.xyz);
 
@@ -176,29 +180,11 @@ void main()
 
 		gl_FragColor.rgb = convertHSV2RGB(hsv);
 	}
-	#endif // ENABLE_color
+	#endif // defined(ENABLE_color)
 
-	#ifdef ENABLE_brightness
+	#if defined(ENABLE_brightness)
 	gl_FragColor.rgb = clamp(gl_FragColor.rgb + vec3(u_brightness), vec3(0), vec3(1));
-	#endif // ENABLE_brightness
-
-	// Re-multiply color values
-	gl_FragColor.rgb *= gl_FragColor.a + epsilon;
-
-	#endif // defined(ENABLE_color) || defined(ENABLE_brightness)
-
-	#ifdef ENABLE_ghost
-	gl_FragColor *= u_ghost;
-	#endif // ENABLE_ghost
-
-	#ifdef DRAW_MODE_silhouette
-	// Discard fully transparent pixels for stencil test
-	if (gl_FragColor.a == 0.0) {
-		discard;
-	}
-	// switch to u_silhouetteColor only AFTER the alpha test
-	gl_FragColor = u_silhouetteColor;
-	#else // DRAW_MODE_silhouette
+	#endif // defined(ENABLE_brightness)
 
 	#ifdef DRAW_MODE_colorMask
 	vec3 maskDistance = abs(gl_FragColor.rgb - u_colorMask);
@@ -211,7 +197,8 @@ void main()
 	#endif // DRAW_MODE_silhouette
 
 	#else // DRAW_MODE_lineSample
-	gl_FragColor = u_lineColor * clamp(
+	gl_FragColor = u_lineColor;
+	gl_FragColor.a *= clamp(
 		// Scale the capScale a little to have an aliased region.
 		(u_capScale + u_aliasAmount -
 			u_capScale * 2.0 * distance(v_texCoord, vec2(0.5, 0.5))

tap-snapshots/test-integration-scratch-tests.js-TAP.test.js

@@ -0,0 +1,10 @@
+/* IMPORTANT
+ * This snapshot file is auto-generated, but designed for humans.
+ * It should be checked into source control and tracked carefully.
+ * Re-generate by setting TAP_SNAPSHOT=1 and running tests.
+ * Make sure to inspect the output below.  Do not ignore changes!
+ */
+'use strict'
+exports[`test/integration/scratch-tests.js TAP bubble snapshot > bubble-text-snapshot 1`] = `
+<text xmlns="http://www.w3.org/2000/svg" alignment-baseline="text-before-edge" font-size="14" fill="#575E75" font-family="Helvetica"><tspan x="0" dy="1.2em">&lt;e*&amp;%$&amp;^$&gt;&lt;/!abc'&gt;</tspan></text>
+`