Undo ImageData texture uploads

Author: adroitwhiz

src/BitmapSkin.js

@@ -71,17 +71,6 @@ class BitmapSkin extends Skin {
         }
         const gl = this._renderer.gl;
 
-        // Preferably bitmapData is ImageData. ImageData speeds up updating
-        // Silhouette and is better handled by more browsers in regards to
-        // memory.
-        let textureData = bitmapData;
-        if (bitmapData instanceof HTMLCanvasElement) {
-            // Given a HTMLCanvasElement get the image data to pass to webgl and
-            // Silhouette.
-            const context = bitmapData.getContext('2d');
-            textureData = context.getImageData(0, 0, bitmapData.width, bitmapData.height);
-        }
-
         if (this._texture === null) {
             const textureOptions = {
                 auto: false,
@@ -91,7 +80,8 @@ class BitmapSkin extends Skin {
             this._texture = twgl.createTexture(gl, textureOptions);
         }
 
-        this._setTexture(textureData);
+        this._setTexture(bitmapData);
+        this._silhouette.update(bitmapData);
 
         // Do these last in case any of the above throws an exception
         this._costumeResolution = costumeResolution || 2;

src/SVGSkin.js

@@ -66,29 +66,23 @@ class SVGSkin extends Skin {
     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,
+            src: canvas,
             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._silhouette.update(canvas);
             this._largestMIPScale = scale;
         }
 

src/Silhouette.js

@@ -134,9 +134,14 @@ class Silhouette {
             imageData = bitmapData;
             this._width = bitmapData.width;
             this._height = bitmapData.height;
+        } else if (bitmapData instanceof HTMLCanvasElement) {
+            // If passed a <canvas>, grab its image data.
+            const ctx = bitmapData.getContext('2d');
+            imageData = ctx.getImageData(0, 0, bitmapData.width, bitmapData.height);
+            this._width = bitmapData.width;
+            this._height = bitmapData.height;
         } else {
-            // Draw about anything else to our update canvas and poll image data
-            // from that.
+            // Draw about anything else to our update canvas and poll image data from that.
             const canvas = Silhouette._updateCanvas();
             const width = this._width = canvas.width = bitmapData.width;
             const height = this._height = canvas.height = bitmapData.height;

src/Skin.js

@@ -147,8 +147,6 @@ class Skin extends EventEmitter {
         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);
     }
 
     /**

src/TextBubbleSkin.js

@@ -260,9 +260,6 @@ class TextBubbleSkin extends Skin {
             this._renderTextBubble(requestedScale);
             this._textureDirty = false;
 
-            const context = this._canvas.getContext('2d');
-            const textureData = context.getImageData(0, 0, this._canvas.width, this._canvas.height);
-
             const gl = this._renderer.gl;
 
             if (this._texture === null) {
@@ -274,7 +271,7 @@ class TextBubbleSkin extends Skin {
                 this._texture = twgl.createTexture(gl, textureOptions);
             }
 
-            this._setTexture(textureData);
+            this._setTexture(this._canvas);
         }
 
         return this._texture;