fix(package): update twgl.js to version 4.14.2

Closes #352

.travis.yml

@@ -7,7 +7,6 @@ node_js:
 - node
 env:
   - NODE_ENV=production
-  - NPM_TAG=latest
 before_install:
   - google-chrome-stable --headless --no-sandbox --remote-debugging-port=9222 &
 install:
@@ -31,17 +30,13 @@ jobs:
       - VPKG=$($(npm bin)/json -f package.json version)
       - export VERSION=${VPKG}-prerelease.$(date +%Y%m%d%H%M%S)
       - npm --no-git-tag-version version $VERSION
-      - if [[ "$TRAVIS_BRANCH" == hotfix/* ]]; then export NPM_TAG=hotfix; fi # double brackets are important for matching the wildcard
       - git config --global user.email "$(git log --pretty=format:'%ae' -n1)"
       - git config --global user.name "$(git log --pretty=format:'%an' -n1)"
       deploy:
         provider: npm
         skip_cleanup: true
-        on:
-          branch:
-          - master
-          - develop
-          - hotfix/*
+        "on":
+          all_branches: true
+          condition: $RELEASE_BRANCHES =~ $TRAVIS_BRANCH
         email: $NPM_EMAIL
         api_key: $NPM_TOKEN
-        tag: $NPM_TAG

package.json

@@ -37,7 +37,7 @@
     "gh-pages": "^1.0.0",
     "jsdoc": "^3.5.5",
     "json": "^9.0.4",
-    "scratch-vm": "0.2.0-prerelease.20191227164934",
+    "scratch-vm": "0.2.0-prerelease.20190213162739",
     "tap": "^11.0.0",
     "travis-after-all": "^1.4.4",
     "uglifyjs-webpack-plugin": "^1.2.5",
@@ -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",
-    "twgl.js": "4.4.0"
+    "scratch-svg-renderer": "0.2.0-prerelease.20200109070519",
+    "twgl.js": "4.14.2"
   }
 }

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];
     }
@@ -92,17 +95,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

@@ -685,9 +685,6 @@ 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;
         }

src/EffectTransform.js

@@ -130,21 +130,15 @@ class EffectTransform {
         const effects = drawable.enabledEffects;
         const uniforms = drawable.getUniforms();
 
+        if ((effects & ShaderManager.EFFECT_INFO.ghost.mask) !== 0) {
+            // gl_FragColor.a *= u_ghost
+            inOutColor[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);
 
@@ -177,20 +171,6 @@ class EffectTransform {
             }
             // 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;
-        }
-
-        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;

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);
@@ -333,6 +344,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 +384,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 +397,7 @@ class PenSkin extends Skin {
                 twgl.m4.scaling(scalingVector, __modelScalingMatrix),
                 __modelMatrix
             ),
-            u_lineColor: __premultipliedColor
+            u_lineColor: penAttributes.color4f || DefaultPenAttributes.color4f
         };
 
         twgl.setUniforms(currentShader, uniforms);
@@ -484,6 +490,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 +501,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 +661,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

@@ -133,13 +133,6 @@ class RenderWebGL extends EventEmitter {
             throw new Error('Could not get WebGL context: this browser or environment may not support WebGL.');
         }
 
-        this._mystery = {
-            modeActive: false,
-            mouseMoveListener: null,
-            bufferInfo: null,
-            mouseCoords: [0, 0]
-        };
-
         /** @type {RenderWebGL.UseGpuModes} */
         this._useGpuMode = RenderWebGL.UseGpuModes.Automatic;
 
@@ -203,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);
     }
 
     /**
@@ -230,12 +223,6 @@ class RenderWebGL extends EventEmitter {
         const pixelRatio = window.devicePixelRatio || 1;
         this._gl.canvas.width = pixelsWide * pixelRatio;
         this._gl.canvas.height = pixelsTall * pixelRatio;
-
-        if (this._mystery.modeActive && this._mystery.bufferInfo) {
-            twgl.resizeFramebufferInfo(this._gl, this._mystery.bufferInfo, [
-                {format: this._gl.RGBA}
-            ], pixelsWide * pixelRatio, pixelsTall * pixelRatio);
-        }
     }
 
     /**
@@ -628,43 +615,7 @@ class RenderWebGL extends EventEmitter {
         gl.clearColor.apply(gl, this._backgroundColor);
         gl.clear(gl.COLOR_BUFFER_BIT);
 
-        let drawList = this._drawList;
-        if (this._mystery.modeActive) {
-            drawList = drawList.slice(1);
-            twgl.bindFramebufferInfo(gl, this._mystery.bufferInfo);
-            gl.clearColor(0, 0, 0, 0);
-            gl.clear(gl.COLOR_BUFFER_BIT);
-        }
-        this._drawThese(drawList, ShaderManager.DRAW_MODE.default, this._projection);
-
-        if (this._mystery.modeActive) {
-            // draw all layers except for the bottom layer onto the mystery buffer
-            twgl.bindFramebufferInfo(gl, null);
-            gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
-            this._drawThese([this._drawList[0]], ShaderManager.DRAW_MODE.default, this._projection);
-
-            this._doExitDrawRegion();
-            const newShader = this._shaderManager.getShader(ShaderManager.DRAW_MODE.mystery, 0);
-            this._regionId = newShader;
-
-            // draw mystery buffer to main buffer
-            gl.useProgram(newShader.program);
-            twgl.setBuffersAndAttributes(gl, newShader, this._bufferInfo);
-            const uniforms = {
-                u_projectionMatrix: this._projection,
-                u_modelMatrix: twgl.m4.identity(),
-                u_skin: this._mystery.bufferInfo.attachments[0],
-                u_mousePosition: this._mystery.mouseCoords
-            };
-
-            twgl.setTextureParameters(
-                gl, uniforms.u_skin, {minMag: gl.LINEAR}
-            );
-
-            twgl.setUniforms(newShader, uniforms);
-            twgl.drawBufferInfo(gl, this._bufferInfo, gl.TRIANGLES);
-        }
-
+        this._drawThese(this._drawList, ShaderManager.DRAW_MODE.default, this._projection);
         if (this._snapshotCallbacks.length > 0) {
             const snapshot = gl.canvas.toDataURL();
             this._snapshotCallbacks.forEach(cb => cb(snapshot));
@@ -883,8 +834,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);
@@ -1604,7 +1554,7 @@ class RenderWebGL extends EventEmitter {
         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});
+        this._drawThese([stampID], ShaderManager.DRAW_MODE.stamp, projection, {ignoreVisibility: true});
         skin._silhouetteDirty = true;
     }
 
@@ -1794,6 +1744,14 @@ class RenderWebGL extends EventEmitter {
             }
 
             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);
         }
 
@@ -1944,11 +1902,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
@@ -1958,32 +1918,6 @@ class RenderWebGL extends EventEmitter {
         return dst;
     }
 
-    setMysteryMode (enableMysteryMode) {
-        this._mystery.modeActive = enableMysteryMode;
-
-        if (enableMysteryMode) {
-            this._mystery.bufferInfo = twgl.createFramebufferInfo(
-                this._gl,
-                [{format: this._gl.RGBA}],
-                this._gl.drawingBufferWidth,
-                this._gl.drawingBufferHeight
-            );
-
-            this._mystery.mouseMoveListener = event => {
-                const rect = this.canvas.getBoundingClientRect();
-                this._mystery.mouseCoords[0] = (event.clientX - rect.left) / rect.width;
-                this._mystery.mouseCoords[1] = (event.clientY - rect.top) / rect.height;
-            };
-
-            document.addEventListener('mousemove', this._mystery.mouseMoveListener);
-        } else {
-            if (this._mystery.bufferInfo) {
-                this._gl.deleteFramebuffer(this._mystery.bufferInfo.framebuffer);
-            }
-            document.removeEventListener('mousemove', this._mystery.mouseMoveListener);
-        }
-    }
-
     /**
      * @callback RenderWebGL#snapshotCallback
      * @param {string} dataURI Data URI of the snapshot of the renderer

src/SVGSkin.js

@@ -90,8 +90,7 @@ class SVGSkin extends Skin {
         const textureOptions = {
             auto: false,
             wrap: this._renderer.gl.CLAMP_TO_EDGE,
-            src: textureData,
-            premultiplyAlpha: true
+            src: textureData
         };
 
         const mip = twgl.createTexture(this._renderer.gl, textureOptions);

src/ShaderManager.js

@@ -173,7 +173,10 @@ ShaderManager.DRAW_MODE = {
      */
     lineSample: 'lineSample',
 
-    mystery: 'mystery'
+    /**
+     * 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.
      */
@@ -167,23 +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
@@ -212,9 +199,6 @@ class Skin extends EventEmitter {
             this._emptyImageTexture = twgl.createTexture(gl, textureOptions);
         }
 
-        this._rotationCenter[0] = 0;
-        this._rotationCenter[1] = 0;
-
         this._silhouette.update(this._emptyImageData);
         this.emit(Skin.Events.WasAltered);
     }

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];
 
@@ -269,7 +272,9 @@ class TextBubbleSkin extends Skin {
                 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

@@ -39,24 +39,18 @@ uniform float u_capScale;
 uniform float u_aliasAmount;
 #endif // DRAW_MODE_lineSample
 
-#ifdef DRAW_MODE_mystery
-uniform vec2 u_mousePosition;
-#endif
-
 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.
@@ -116,15 +110,6 @@ void main()
 	#ifndef DRAW_MODE_lineSample
 	vec2 texcoord0 = v_texCoord;
 
-	#ifdef DRAW_MODE_mystery
-	vec2 mysteryCoord = texcoord0;
-	vec2 offset = vec2(u_mousePosition.x, 1.0 - u_mousePosition.y);
-	mysteryCoord -= offset;
-	const float SCALE_FACTOR = 0.85;
-	mysteryCoord *= vec2(SCALE_FACTOR, SCALE_FACTOR);
-	mysteryCoord += offset;
-	#endif
-
 	#ifdef ENABLE_mosaic
 	texcoord0 = fract(u_mosaic * texcoord0);
 	#endif // ENABLE_mosaic
@@ -168,27 +153,16 @@ void main()
 
 	gl_FragColor = texture2D(u_skin, texcoord0);
 
-	#ifdef DRAW_MODE_mystery
-	const vec4 SHADOW_COLOR = vec4(0.0, 0.0, 0.0, 0.5);
-	const float SHADOW_BLUR = 0.0025;
+    #ifdef ENABLE_ghost
+    gl_FragColor.a *= u_ghost;
+    #endif // ENABLE_ghost
 
-	float shadowSample1 = texture2D(u_skin, mysteryCoord + vec2(SHADOW_BLUR, SHADOW_BLUR)).a;
-	float shadowSample2 = texture2D(u_skin, mysteryCoord + vec2(-SHADOW_BLUR, SHADOW_BLUR)).a;
-	float shadowSample3 = texture2D(u_skin, mysteryCoord + vec2(SHADOW_BLUR, -SHADOW_BLUR)).a;
-	float shadowSample4 = texture2D(u_skin, mysteryCoord + vec2(-SHADOW_BLUR, -SHADOW_BLUR)).a;
+	#ifdef DRAW_MODE_silhouette
+	// switch to u_silhouetteColor only AFTER the alpha test
+	gl_FragColor = u_silhouetteColor;
+	#else // DRAW_MODE_silhouette
 
-	float shadowAlpha = (shadowSample1 + shadowSample2 + shadowSample3 + shadowSample4) * 0.25;
-
-	vec4 shadow = SHADOW_COLOR * shadowAlpha;
-	gl_FragColor = gl_FragColor + (shadow * (1.0 - gl_FragColor.a));
-	#endif
-
-	#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_color
+	#if defined(ENABLE_color)
 	{
 		vec3 hsv = convertRGB2HSV(gl_FragColor.xyz);
 
@@ -204,29 +178,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);
@@ -239,7 +195,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))

src/shaders/sprite.vert

@@ -15,9 +15,7 @@ void main() {
     vec2 position = a_position;
     position.y = clamp(position.y * u_positionScalar, -0.5, 0.5);
     gl_Position = u_projectionMatrix * u_modelMatrix * vec4(position, 0, 1);
-    #elif defined(DRAW_MODE_mystery)
-	gl_Position = vec4(a_position * vec2(-2.0, 2.0), 0.0, 1.0);
-	#else
+    #else
     gl_Position = u_projectionMatrix * u_modelMatrix * vec4(a_position, 0, 1);
     #endif
     v_texCoord = a_texCoord;