Merge pull request #485 from adroitwhiz/effect-transform-optimizations

Optimize effect transforms

Author: fsih

src/Drawable.js

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

src/EffectTransform.js

@@ -114,36 +114,33 @@ const hslToRgb = ([h, s, l]) => {
 class EffectTransform {
 
     /**
-     * Transform a color given the drawables effect uniforms.  Will apply
+     * Transform a color in-place given the drawable's effect uniforms.  Will apply
      * Ghost and Color and Brightness effects.
      * @param {Drawable} drawable The drawable to get uniforms from.
-     * @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.
+     * @param {Uint8ClampedArray} inOutColor The color to transform.
      * @returns {Uint8ClampedArray} dst filled with the transformed color
      */
-    static transformColor (drawable, color4b, dst, effectMask) {
-        dst = dst || new Uint8ClampedArray(4);
-        effectMask = effectMask || 0xffffffff;
-        dst.set(color4b);
-        if (dst[3] === 0) {
-            return dst;
+    static transformColor (drawable, inOutColor) {
+
+        // If the color is fully transparent, don't bother attempting any transformations.
+        if (inOutColor[3] === 0) {
+            return inOutColor;
         }
 
+        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;
+            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) {
             // vec3 hsl = convertRGB2HSL(gl_FragColor.xyz);
-            const hsl = rgbToHsl(dst);
+            const hsl = rgbToHsl(inOutColor);
 
             if (enableColor) {
                 // this code forces grayscale values to be slightly saturated
@@ -173,25 +170,24 @@ class EffectTransform {
                 hsl[2] = Math.min(1, hsl[2] + uniforms.u_brightness);
             }
             // gl_FragColor.rgb = convertHSL2RGB(hsl);
-            dst.set(hslToRgb(hsl));
+            inOutColor.set(hslToRgb(hsl));
         }
 
-        return dst;
+        return inOutColor;
     }
 
     /**
      * 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 = twgl.v3.create()) {
+    static transformPoint (drawable, vec, dst) {
         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

@@ -1701,7 +1701,7 @@ class RenderWebGL extends EventEmitter {
 
             const uniforms = {};
 
-            let effectBits = drawable.getEnabledEffects();
+            let effectBits = drawable.enabledEffects;
             effectBits &= opts.hasOwnProperty('effectMask') ? opts.effectMask : effectBits;
             const newShader = this._shaderManager.getShader(drawMode, effectBits);