@scratch/scratch-render 11.0.0-beta.1

package/src/SVGSkin.js

@@ -0,0 +1,239 @@
+const twgl = require('twgl.js');
+
+const Skin = require('./Skin');
+const {loadSvgString, serializeSvgToString} = require('@scratch/scratch-svg-renderer');
+const ShaderManager = require('./ShaderManager');
+
+const MAX_TEXTURE_DIMENSION = 2048;
+
+/**
+ * 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 {
+    /**
+     * Create a new SVG skin.
+     * @param {!int} id - The ID for this Skin.
+     * @param {!RenderWebGL} renderer - The renderer which will use this skin.
+     * @constructor
+     * @extends Skin
+     */
+    constructor (id, renderer) {
+        super(id);
+
+        /** @type {RenderWebGL} */
+        this._renderer = renderer;
+
+        /** @type {HTMLImageElement} */
+        this._svgImage = document.createElement('img');
+
+        /** @type {boolean} */
+        this._svgImageLoaded = false;
+
+        /** @type {Array<number>} */
+        this._size = [0, 0];
+
+        /** @type {HTMLCanvasElement} */
+        this._canvas = document.createElement('canvas');
+
+        /** @type {CanvasRenderingContext2D} */
+        this._context = this._canvas.getContext('2d');
+
+        /** @type {Array<WebGLTexture>} */
+        this._scaledMIPs = [];
+
+        /** @type {number} */
+        this._largestMIPScale = 0;
+
+        /**
+        * Ratio of the size of the SVG and the max size of the WebGL texture
+        * @type {Number}
+        */
+        this._maxTextureScale = 1;
+    }
+
+    /**
+     * Dispose of this object. Do not use it after calling this method.
+     */
+    dispose () {
+        this.resetMIPs();
+        super.dispose();
+    }
+
+    /**
+     * @return {Array<number>} the natural size, in Scratch units, of this skin.
+     */
+    get size () {
+        return [this._size[0], this._size[1]];
+    }
+
+    useNearest (scale, drawable) {
+        // If the effect bits for mosaic, pixelate, whirl, or fisheye are set, use linear
+        if ((drawable.enabledEffects & (
+            ShaderManager.EFFECT_INFO.fisheye.mask |
+            ShaderManager.EFFECT_INFO.whirl.mask |
+            ShaderManager.EFFECT_INFO.pixelate.mask |
+            ShaderManager.EFFECT_INFO.mosaic.mask
+        )) !== 0) {
+            return false;
+        }
+
+        // We can't use nearest neighbor unless we are a multiple of 90 rotation
+        if (drawable._direction % 90 !== 0) {
+            return false;
+        }
+
+        // Because SVG skins' bounding boxes are currently not pixel-aligned, the idea here is to hide blurriness
+        // by using nearest-neighbor scaling if one screen-space pixel is "close enough" to one texture pixel.
+        // If the scale of the skin is very close to 100 (0.99999 variance is okay I guess)
+        // TODO: Make this check more precise. We should use nearest if there's less than one pixel's difference
+        // between the screen-space and texture-space sizes of the skin. Mipmaps make this harder because there are
+        // multiple textures (and hence multiple texture spaces) and we need to know which one to choose.
+        if (Math.abs(scale[0]) > 99 && Math.abs(scale[0]) < 101 &&
+            Math.abs(scale[1]) > 99 && Math.abs(scale[1]) < 101) {
+            return true;
+        }
+        return false;
+    }
+
+    /**
+     * 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) {
+        const [width, height] = this._size;
+        this._canvas.width = width * scale;
+        this._canvas.height = height * scale;
+        if (
+            this._canvas.width <= 0 ||
+            this._canvas.height <= 0 ||
+            // Even if the canvas at the current scale has a nonzero size, the image's dimensions are floored
+            // pre-scaling; e.g. if an image has a width of 0.4 and is being rendered at 3x scale, the canvas will have
+            // a width of 1, but the image's width will be rounded down to 0 on some browsers (Firefox) prior to being
+            // drawn at that scale, resulting in an IndexSizeError if we attempt to draw it.
+            this._svgImage.naturalWidth <= 0 ||
+            this._svgImage.naturalHeight <= 0
+        ) return super.getTexture();
+        this._context.clearRect(0, 0, this._canvas.width, this._canvas.height);
+        this._context.setTransform(scale, 0, 0, scale, 0, 0);
+        this._context.drawImage(this._svgImage, 0, 0);
+
+        // Pull out the ImageData from the canvas. ImageData speeds up
+        // updating Silhouette and is better handled by more browsers in
+        // regards to memory.
+        const textureData = this._context.getImageData(0, 0, this._canvas.width, this._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 = [100, 100]) {
+        // 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.
+     */
+    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);
+
+        // Math.ceil(Math.log2(scale)) means we use the "1x" texture at (0.5, 1] scale,
+        // the "2x" texture at (1, 2] scale, the "4x" texture at (2, 4] scale, etc.
+        // This means that one texture pixel will always be between 0.5x and 1x the size of one rendered pixel,
+        // but never bigger than one rendered pixel--this prevents blurriness from blowing up the texture too much.
+        const mipLevel = Math.max(Math.ceil(Math.log2(requestedScale)) + INDEX_OFFSET, 0);
+        // Can't use bitwise stuff here because we need to handle negative exponents
+        const mipScale = Math.pow(2, mipLevel - INDEX_OFFSET);
+
+        if (this._svgImageLoaded && !this._scaledMIPs[mipLevel]) {
+            this._scaledMIPs[mipLevel] = this.createMIP(mipScale);
+        }
+
+        return this._scaledMIPs[mipLevel] || super.getTexture();
+    }
+
+    /**
+     * Do a hard reset of the existing MIPs by deleting them.
+     */
+    resetMIPs () {
+        this._scaledMIPs.forEach(oldMIP => this._renderer.gl.deleteTexture(oldMIP));
+        this._scaledMIPs.length = 0;
+        this._largestMIPScale = 0;
+    }
+
+    /**
+     * 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. If not supplied, it will be
+     * calculated from the bounding box
+     * @fires Skin.event:WasAltered
+     */
+    setSVG (svgData, rotationCenter) {
+        const svgTag = loadSvgString(svgData);
+        const svgText = serializeSvgToString(svgTag, true /* shouldInjectFonts */);
+        this._svgImageLoaded = false;
+
+        const {x, y, width, height} = svgTag.viewBox.baseVal;
+        // While we're setting the size before the image is loaded, this doesn't cause the skin to appear with the wrong
+        // size for a few frames while the new image is loading, because we don't emit the `WasAltered` event, telling
+        // drawables using this skin to update, until the image is loaded.
+        // We need to do this because the VM reads the skin's `size` directly after calling `setSVG`.
+        // TODO: return a Promise so that the VM can read the skin's `size` after the image is loaded.
+        this._size[0] = width;
+        this._size[1] = height;
+
+        // If there is another load already in progress, replace the old onload to effectively cancel the old load
+        this._svgImage.onload = () => {
+            if (width === 0 || height === 0) {
+                super.setEmptyImageData();
+                return;
+            }
+
+            const maxDimension = Math.ceil(Math.max(width, 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();
+            // Compensate for viewbox offset.
+            // See https://github.com/LLK/scratch-render/pull/90.
+            this._rotationCenter[0] = rotationCenter[0] - x;
+            this._rotationCenter[1] = rotationCenter[1] - y;
+
+            this._svgImageLoaded = true;
+
+            this.emit(Skin.Events.WasAltered);
+        };
+
+        this._svgImage.src = `data:image/svg+xml;utf8,${encodeURIComponent(svgText)}`;
+    }
+
+}
+
+module.exports = SVGSkin;

package/src/ShaderManager.js

@@ -0,0 +1,187 @@
+const twgl = require('twgl.js');
+
+
+class ShaderManager {
+    /**
+     * @param {WebGLRenderingContext} gl WebGL rendering context to create shaders for
+     * @constructor
+     */
+    constructor (gl) {
+        this._gl = gl;
+
+        /**
+         * The cache of all shaders compiled so far, filled on demand.
+         * @type {Object<ShaderManager.DRAW_MODE, Array<ProgramInfo>>}
+         * @private
+         */
+        this._shaderCache = {};
+        for (const modeName in ShaderManager.DRAW_MODE) {
+            if (Object.prototype.hasOwnProperty.call(ShaderManager.DRAW_MODE, modeName)) {
+                this._shaderCache[modeName] = [];
+            }
+        }
+    }
+
+    /**
+     * Fetch the shader for a particular set of active effects.
+     * Build the shader if necessary.
+     * @param {ShaderManager.DRAW_MODE} drawMode Draw normally, silhouette, etc.
+     * @param {int} effectBits Bitmask representing the enabled effects.
+     * @returns {ProgramInfo} The shader's program info.
+     */
+    getShader (drawMode, effectBits) {
+        const cache = this._shaderCache[drawMode];
+        if (drawMode === ShaderManager.DRAW_MODE.silhouette) {
+            // Silhouette mode isn't affected by these effects.
+            effectBits &= ~(ShaderManager.EFFECT_INFO.color.mask | ShaderManager.EFFECT_INFO.brightness.mask);
+        }
+        let shader = cache[effectBits];
+        if (!shader) {
+            shader = cache[effectBits] = this._buildShader(drawMode, effectBits);
+        }
+        return shader;
+    }
+
+    /**
+     * Build the shader for a particular set of active effects.
+     * @param {ShaderManager.DRAW_MODE} drawMode Draw normally, silhouette, etc.
+     * @param {int} effectBits Bitmask representing the enabled effects.
+     * @returns {ProgramInfo} The new shader's program info.
+     * @private
+     */
+    _buildShader (drawMode, effectBits) {
+        const numEffects = ShaderManager.EFFECTS.length;
+
+        const defines = [
+            `#define DRAW_MODE_${drawMode}`
+        ];
+        for (let index = 0; index < numEffects; ++index) {
+            if ((effectBits & (1 << index)) !== 0) {
+                defines.push(`#define ENABLE_${ShaderManager.EFFECTS[index]}`);
+            }
+        }
+
+        const definesText = `${defines.join('\n')}\n`;
+
+        /* eslint-disable global-require */
+        const vsFullText = definesText + require('raw-loader!./shaders/sprite.vert');
+        const fsFullText = definesText + require('raw-loader!./shaders/sprite.frag');
+        /* eslint-enable global-require */
+
+        return twgl.createProgramInfo(this._gl, [vsFullText, fsFullText]);
+    }
+}
+
+/**
+ * @typedef {object} ShaderManager.Effect
+ * @prop {int} mask - The bit in 'effectBits' representing the effect.
+ * @prop {function} converter - A conversion function which takes a Scratch value (generally in the range
+ *   0..100 or -100..100) and maps it to a value useful to the shader. This
+ *   mapping may not be reversible.
+ * @prop {boolean} shapeChanges - Whether the effect could change the drawn shape.
+ */
+
+/**
+ * Mapping of each effect name to info about that effect.
+ * @enum {ShaderManager.Effect}
+ */
+ShaderManager.EFFECT_INFO = {
+    /** Color effect */
+    color: {
+        uniformName: 'u_color',
+        mask: 1 << 0,
+        converter: x => (x / 200) % 1,
+        shapeChanges: false
+    },
+    /** Fisheye effect */
+    fisheye: {
+        uniformName: 'u_fisheye',
+        mask: 1 << 1,
+        converter: x => Math.max(0, (x + 100) / 100),
+        shapeChanges: true
+    },
+    /** Whirl effect */
+    whirl: {
+        uniformName: 'u_whirl',
+        mask: 1 << 2,
+        converter: x => -x * Math.PI / 180,
+        shapeChanges: true
+    },
+    /** Pixelate effect */
+    pixelate: {
+        uniformName: 'u_pixelate',
+        mask: 1 << 3,
+        converter: x => Math.abs(x) / 10,
+        shapeChanges: true
+    },
+    /** Mosaic effect */
+    mosaic: {
+        uniformName: 'u_mosaic',
+        mask: 1 << 4,
+        converter: x => {
+            x = Math.round((Math.abs(x) + 10) / 10);
+            /** @todo cap by Math.min(srcWidth, srcHeight) */
+            return Math.max(1, Math.min(x, 512));
+        },
+        shapeChanges: true
+    },
+    /** Brightness effect */
+    brightness: {
+        uniformName: 'u_brightness',
+        mask: 1 << 5,
+        converter: x => Math.max(-100, Math.min(x, 100)) / 100,
+        shapeChanges: false
+    },
+    /** Ghost effect */
+    ghost: {
+        uniformName: 'u_ghost',
+        mask: 1 << 6,
+        converter: x => 1 - (Math.max(0, Math.min(x, 100)) / 100),
+        shapeChanges: false
+    }
+};
+
+/**
+ * The name of each supported effect.
+ * @type {Array}
+ */
+ShaderManager.EFFECTS = Object.keys(ShaderManager.EFFECT_INFO);
+
+/**
+ * The available draw modes.
+ * @readonly
+ * @enum {string}
+ */
+ShaderManager.DRAW_MODE = {
+    /**
+     * Draw normally. Its output will use premultiplied alpha.
+     */
+    default: 'default',
+
+    /**
+     * Draw with non-premultiplied alpha. Useful for reading pixels from GL into an ImageData object.
+     */
+    straightAlpha: 'straightAlpha',
+
+    /**
+     * Draw a silhouette using a solid color.
+     */
+    silhouette: 'silhouette',
+
+    /**
+     * Draw only the parts of the drawable which match a particular color.
+     */
+    colorMask: 'colorMask',
+
+    /**
+     * Draw a line with caps.
+     */
+    line: 'line',
+
+    /**
+     * Draw the background in a certain color. Must sometimes be used instead of gl.clear.
+     */
+    background: 'background'
+};
+
+module.exports = ShaderManager;

package/src/Silhouette.js

@@ -0,0 +1,257 @@
+/**
+ * @fileoverview
+ * A representation of a Skin's silhouette that can test if a point on the skin
+ * renders a pixel where it is drawn.
+ */
+
+/**
+ * <canvas> element used to update Silhouette data from skin bitmap data.
+ * @type {CanvasElement}
+ */
+let __SilhouetteUpdateCanvas;
+
+// Optimized Math.min and Math.max for integers;
+// taken from https://web.archive.org/web/20190716181049/http://guihaire.com/code/?p=549
+const intMin = (i, j) => j ^ ((i ^ j) & ((i - j) >> 31));
+const intMax = (i, j) => i ^ ((i ^ j) & ((i - j) >> 31));
+
+/**
+ * Internal helper function (in hopes that compiler can inline).  Get a pixel
+ * from silhouette data, or 0 if outside it's bounds.
+ * @private
+ * @param {Silhouette} silhouette - has data width and height
+ * @param {number} x - x
+ * @param {number} y - y
+ * @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.
+    if (x >= width || y >= height || x < 0 || y < 0) {
+        return 0;
+    }
+    return data[(((y * width) + x) * 4) + 3];
+};
+
+/**
+ * Memory buffers for doing 4 corner sampling for linear interpolation
+ */
+const __cornerWork = [
+    new Uint8ClampedArray(4),
+    new Uint8ClampedArray(4),
+    new Uint8ClampedArray(4),
+    new Uint8ClampedArray(4)
+];
+
+/**
+ * Get the color from a given silhouette at an x/y local texture position.
+ * Multiply color values by alpha for proper blending.
+ * @param {Silhouette} $0 The silhouette to sample.
+ * @param {number} x X position of texture [0, width).
+ * @param {number} y Y position of texture [0, height).
+ * @param {Uint8ClampedArray} dst A color 4b space.
+ * @return {Uint8ClampedArray} The dst vector.
+ */
+const getColor4b = ({_width: width, _height: height, _colorData: data}, x, y, dst) => {
+    // Clamp coords to edge, matching GL_CLAMP_TO_EDGE.
+    // (See github.com/LLK/scratch-render/blob/954cfff02b08069a082cbedd415c1fecd9b1e4fb/src/BitmapSkin.js#L88)
+    x = intMax(0, intMin(x, width - 1));
+    y = intMax(0, intMin(y, height - 1));
+
+    // 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} $0 The silhouette to sample.
+ * @param {number} x X position of texture [0, width).
+ * @param {number} y Y position of texture [0, height).
+ * @param {Uint8ClampedArray} dst A color 4b space.
+ * @return {Uint8ClampedArray} The dst vector.
+ */
+const getPremultipliedColor4b = ({_width: width, _height: height, _colorData: data}, x, y, dst) => {
+    // Clamp coords to edge, matching GL_CLAMP_TO_EDGE.
+    x = intMax(0, intMin(x, width - 1));
+    y = intMax(0, intMin(y, height - 1));
+
+    const offset = ((y * width) + x) * 4;
+    dst[0] = data[offset];
+    dst[1] = data[offset + 1];
+    dst[2] = data[offset + 2];
+    dst[3] = data[offset + 3];
+    return dst;
+};
+
+class Silhouette {
+    constructor () {
+        /**
+         * The width of the data representing the current skin data.
+         * @type {number}
+         */
+        this._width = 0;
+
+        /**
+         * The height of the data representing the current skin date.
+         * @type {number}
+         */
+        this._height = 0;
+
+        /**
+         * The data representing a skin's silhouette shape.
+         * @type {Uint8ClampedArray}
+         */
+        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).
+     * rendering can be queried from.
+     */
+    update (bitmapData, isPremultiplied = false) {
+        let imageData;
+        if (bitmapData instanceof ImageData) {
+            // If handed ImageData directly, use it directly.
+            imageData = bitmapData;
+            this._width = bitmapData.width;
+            this._height = bitmapData.height;
+        } else {
+            // 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;
+            const ctx = canvas.getContext('2d');
+
+            if (!(width && height)) {
+                return;
+            }
+            ctx.clearRect(0, 0, width, height);
+            ctx.drawImage(bitmapData, 0, 0, width, height);
+            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
+        delete this.colorAtNearest;
+        delete this.colorAtLinear;
+    }
+
+    /**
+     * Sample a color from the silhouette at a given local position using
+     * "nearest neighbor"
+     * @param {twgl.v3} vec [x,y] texture space (0-1)
+     * @param {Uint8ClampedArray} dst The memory buffer to store the value in. (4 bytes)
+     * @returns {Uint8ClampedArray} dst
+     */
+    colorAtNearest (vec, dst) {
+        return this._getColor(
+            this,
+            Math.floor(vec[0] * (this._width - 1)),
+            Math.floor(vec[1] * (this._height - 1)),
+            dst
+        );
+    }
+
+    /**
+     * Sample a color from the silhouette at a given local position using
+     * "linear interpolation"
+     * @param {twgl.v3} vec [x,y] texture space (0-1)
+     * @param {Uint8ClampedArray} dst The memory buffer to store the value in. (4 bytes)
+     * @returns {Uint8ClampedArray} dst
+     */
+    colorAtLinear (vec, dst) {
+        const x = vec[0] * (this._width - 1);
+        const y = vec[1] * (this._height - 1);
+
+        const x1D = x % 1;
+        const y1D = y % 1;
+        const x0D = 1 - x1D;
+        const y0D = 1 - y1D;
+
+        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]);
+
+        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);
+        dst[2] = (x0y0[2] * x0D * y0D) + (x0y1[2] * x0D * y1D) + (x1y0[2] * x1D * y0D) + (x1y1[2] * x1D * y1D);
+        dst[3] = (x0y0[3] * x0D * y0D) + (x0y1[3] * x0D * y1D) + (x1y0[3] * x1D * y0D) + (x1y1[3] * x1D * y1D);
+
+        return dst;
+    }
+
+    /**
+     * Test if texture coordinate touches the silhouette using nearest neighbor.
+     * @param {twgl.v3} vec A texture coordinate.
+     * @return {boolean} If the nearest pixel has an alpha value.
+     */
+    isTouchingNearest (vec) {
+        if (!this._colorData) return;
+        return getPoint(
+            this,
+            Math.floor(vec[0] * (this._width - 1)),
+            Math.floor(vec[1] * (this._height - 1))
+        ) > 0;
+    }
+
+    /**
+     * Test to see if any of the 4 pixels used in the linear interpolate touch
+     * the silhouette.
+     * @param {twgl.v3} vec A texture coordinate.
+     * @return {boolean} Any of the pixels have some alpha.
+     */
+    isTouchingLinear (vec) {
+        if (!this._colorData) return;
+        const x = Math.floor(vec[0] * (this._width - 1));
+        const y = Math.floor(vec[1] * (this._height - 1));
+        return getPoint(this, x, y) > 0 ||
+            getPoint(this, x + 1, y) > 0 ||
+            getPoint(this, x, y + 1) > 0 ||
+            getPoint(this, x + 1, y + 1) > 0;
+    }
+
+    /**
+     * Get the canvas element reused by Silhouettes to update their data with.
+     * @private
+     * @return {CanvasElement} A canvas to draw bitmap data to.
+     */
+    static _updateCanvas () {
+        if (typeof __SilhouetteUpdateCanvas === 'undefined') {
+            __SilhouetteUpdateCanvas = document.createElement('canvas');
+        }
+        return __SilhouetteUpdateCanvas;
+    }
+}
+
+module.exports = Silhouette;