@scratch/scratch-render 11.0.0-beta.1

package/src/Skin.js

@@ -0,0 +1,235 @@
+const EventEmitter = require('events');
+
+const twgl = require('twgl.js');
+
+const RenderConstants = require('./RenderConstants');
+const Silhouette = require('./Silhouette');
+
+class Skin extends EventEmitter {
+    /**
+     * Create a Skin, which stores and/or generates textures for use in rendering.
+     * @param {int} id - The unique ID for this Skin.
+     * @constructor
+     */
+    constructor (id) {
+        super();
+
+        /** @type {int} */
+        this._id = id;
+
+        /** @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.
+         * @type {Object.<string,*>}
+         * @private
+         */
+        this._uniforms = {
+            /**
+             * The nominal (not necessarily current) size of the current skin.
+             * @type {Array<number>}
+             */
+            u_skinSize: [0, 0],
+
+            /**
+             * The actual WebGL texture object for the skin.
+             * @type {WebGLTexture}
+             */
+            u_skin: null
+        };
+
+        /**
+         * A silhouette to store touching data, skins are responsible for keeping it up to date.
+         * @private
+         */
+        this._silhouette = new Silhouette();
+
+        this.setMaxListeners(RenderConstants.SKIN_SHARE_SOFT_LIMIT);
+    }
+
+    /**
+     * Dispose of this object. Do not use it after calling this method.
+     */
+    dispose () {
+        this._id = RenderConstants.ID_NONE;
+    }
+
+    /**
+     * @return {int} the unique ID for this Skin.
+     */
+    get id () {
+        return this._id;
+    }
+
+    /**
+     * @returns {Vec3} the origin, in object space, about which this Skin should rotate.
+     */
+    get rotationCenter () {
+        return this._rotationCenter;
+    }
+
+    /**
+     * @abstract
+     * @return {Array<number>} the "native" size, in texels, of this skin.
+     */
+    get size () {
+        return [0, 0];
+    }
+
+    /**
+     * Should this skin's texture be filtered with nearest-neighbor or linear interpolation at the given scale?
+     * @param {?Array<Number>} scale The screen-space X and Y scaling factors at which this skin's texture will be
+     * displayed, as percentages (100 means 1 "native size" unit is 1 screen pixel; 200 means 2 screen pixels, etc).
+     * @param {Drawable} drawable The drawable that this skin's texture will be applied to.
+     * @return {boolean} True if this skin's texture, as returned by {@link getTexture}, should be filtered with
+     * nearest-neighbor interpolation.
+     */
+    // eslint-disable-next-line no-unused-vars
+    useNearest (scale, drawable) {
+        return true;
+    }
+
+    /**
+     * Get the center of the current bounding box
+     * @return {Array<number>} the center of the current bounding box
+     */
+    calculateRotationCenter () {
+        return [this.size[0] / 2, this.size[1] / 2];
+    }
+
+    /**
+     * @abstract
+     * @param {Array<number>} scale - The scaling factors to be used.
+     * @return {WebGLTexture} The GL texture representation of this skin when drawing at the given size.
+     */
+    // eslint-disable-next-line no-unused-vars
+    getTexture (scale) {
+        return this._emptyImageTexture;
+    }
+
+    /**
+     * Get the bounds of the drawable for determining its fenced position.
+     * @param {Array<number>} drawable - The Drawable instance this skin is using.
+     * @param {?Rectangle} result - Optional destination for bounds calculation.
+     * @return {!Rectangle} The drawable's bounds. For compatibility with Scratch 2, we always use getAABB.
+     */
+    getFenceBounds (drawable, result) {
+        return drawable.getAABB(result);
+    }
+
+    /**
+     * Update and returns the uniforms for this skin.
+     * @param {Array<number>} scale - The scaling factors to be used.
+     * @returns {object.<string, *>} the shader uniforms to be used when rendering with this Skin.
+     */
+    getUniforms (scale) {
+        this._uniforms.u_skin = this.getTexture(scale);
+        this._uniforms.u_skinSize = this.size;
+        return this._uniforms;
+    }
+
+    /**
+     * If the skin defers silhouette operations until the last possible minute,
+     * this will be called before isTouching uses the silhouette.
+     * @abstract
+     */
+    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._rotationCenter[0] = 0;
+        this._rotationCenter[1] = 0;
+
+        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
+     * The caller is responsible for ensuring this skin's silhouette is up-to-date.
+     * @see updateSilhouette
+     * @see Drawable.updateCPURenderAttributes
+     * @param {twgl.v3} vec A texture coordinate.
+     * @return {boolean} Did it touch?
+     */
+    isTouchingNearest (vec) {
+        return this._silhouette.isTouchingNearest(vec);
+    }
+
+    /**
+     * Does this point touch an opaque or translucent point on this skin?
+     * Linear Interpolation version
+     * The caller is responsible for ensuring this skin's silhouette is up-to-date.
+     * @see updateSilhouette
+     * @see Drawable.updateCPURenderAttributes
+     * @param {twgl.v3} vec A texture coordinate.
+     * @return {boolean} Did it touch?
+     */
+    isTouchingLinear (vec) {
+        return this._silhouette.isTouchingLinear(vec);
+    }
+
+}
+
+/**
+ * These are the events which can be emitted by instances of this class.
+ * @enum {string}
+ */
+Skin.Events = {
+    /**
+     * Emitted when anything about the Skin has been altered, such as the appearance or rotation center.
+     * @event Skin.event:WasAltered
+     */
+    WasAltered: 'WasAltered'
+};
+
+module.exports = Skin;

package/src/TextBubbleSkin.js

@@ -0,0 +1,284 @@
+const twgl = require('twgl.js');
+
+const TextWrapper = require('./util/text-wrapper');
+const CanvasMeasurementProvider = require('./util/canvas-measurement-provider');
+const Skin = require('./Skin');
+
+const BubbleStyle = {
+    MAX_LINE_WIDTH: 170, // Maximum width, in Scratch pixels, of a single line of text
+
+    MIN_WIDTH: 50, // Minimum width, in Scratch pixels, of a text bubble
+    STROKE_WIDTH: 4, // Thickness of the stroke around the bubble. Only half's visible because it's drawn under the fill
+    PADDING: 10, // Padding around the text area
+    CORNER_RADIUS: 16, // Radius of the rounded corners
+    TAIL_HEIGHT: 12, // Height of the speech bubble's "tail". Probably should be a constant.
+
+    FONT: 'Helvetica', // Font to render the text with
+    FONT_SIZE: 14, // Font size, in Scratch pixels
+    FONT_HEIGHT_RATIO: 0.9, // Height, in Scratch pixels, of the text, as a proportion of the font's size
+    LINE_HEIGHT: 16, // Spacing between each line of text
+
+    COLORS: {
+        BUBBLE_FILL: 'white',
+        BUBBLE_STROKE: 'rgba(0, 0, 0, 0.15)',
+        TEXT_FILL: '#575E75'
+    }
+};
+
+class TextBubbleSkin extends Skin {
+    /**
+     * Create a new text bubble 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 {HTMLCanvasElement} */
+        this._canvas = document.createElement('canvas');
+
+        /** @type {Array<number>} */
+        this._size = [0, 0];
+
+        /** @type {number} */
+        this._renderedScale = 0;
+
+        /** @type {Array<string>} */
+        this._lines = [];
+
+        /** @type {object} */
+        this._textAreaSize = {width: 0, height: 0};
+
+        /** @type {string} */
+        this._bubbleType = '';
+
+        /** @type {boolean} */
+        this._pointsLeft = false;
+
+        /** @type {boolean} */
+        this._textDirty = true;
+
+        /** @type {boolean} */
+        this._textureDirty = true;
+
+        this.measurementProvider = new CanvasMeasurementProvider(this._canvas.getContext('2d'));
+        this.textWrapper = new TextWrapper(this.measurementProvider);
+
+        this._restyleCanvas();
+    }
+
+    /**
+     * Dispose of this object. Do not use it after calling this method.
+     */
+    dispose () {
+        if (this._texture) {
+            this._renderer.gl.deleteTexture(this._texture);
+            this._texture = null;
+        }
+        this._canvas = null;
+        super.dispose();
+    }
+
+    /**
+     * @return {Array<number>} the dimensions, in Scratch units, of this skin.
+     */
+    get size () {
+        if (this._textDirty) {
+            this._reflowLines();
+        }
+        return this._size;
+    }
+
+    /**
+     * Set parameters for this text bubble.
+     * @param {!string} type - either "say" or "think".
+     * @param {!string} text - the text for the bubble.
+     * @param {!boolean} pointsLeft - which side the bubble is pointing.
+     */
+    setTextBubble (type, text, pointsLeft) {
+        this._text = text;
+        this._bubbleType = type;
+        this._pointsLeft = pointsLeft;
+
+        this._textDirty = true;
+        this._textureDirty = true;
+        this.emit(Skin.Events.WasAltered);
+    }
+
+    /**
+     * Re-style the canvas after resizing it. This is necessary to ensure proper text measurement.
+     */
+    _restyleCanvas () {
+        this._canvas.getContext('2d').font = `${BubbleStyle.FONT_SIZE}px ${BubbleStyle.FONT}, sans-serif`;
+    }
+
+    /**
+     * Update the array of wrapped lines and the text dimensions.
+     */
+    _reflowLines () {
+        this._lines = this.textWrapper.wrapText(BubbleStyle.MAX_LINE_WIDTH, this._text);
+
+        // Measure width of longest line to avoid extra-wide bubbles
+        let longestLineWidth = 0;
+        for (const line of this._lines) {
+            longestLineWidth = Math.max(longestLineWidth, this.measurementProvider.measureText(line));
+        }
+
+        // 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);
+
+        this._textAreaSize.width = paddedWidth;
+        this._textAreaSize.height = paddedHeight;
+
+        this._size[0] = paddedWidth + BubbleStyle.STROKE_WIDTH;
+        this._size[1] = paddedHeight + BubbleStyle.STROKE_WIDTH + BubbleStyle.TAIL_HEIGHT;
+
+        this._textDirty = false;
+    }
+
+    /**
+     * Render this text bubble at a certain scale, using the current parameters, to the canvas.
+     * @param {number} scale The scale to render the bubble at
+     */
+    _renderTextBubble (scale) {
+        const ctx = this._canvas.getContext('2d');
+
+        if (this._textDirty) {
+            this._reflowLines();
+        }
+
+        // Calculate the canvas-space sizes of the padded text area and full text bubble
+        const paddedWidth = this._textAreaSize.width;
+        const paddedHeight = this._textAreaSize.height;
+
+        // Resize the canvas to the correct screen-space size
+        this._canvas.width = Math.ceil(this._size[0] * scale);
+        this._canvas.height = Math.ceil(this._size[1] * scale);
+        this._restyleCanvas();
+
+        // Reset the transform before clearing to ensure 100% clearage
+        ctx.setTransform(1, 0, 0, 1, 0, 0);
+        ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);
+
+        ctx.scale(scale, scale);
+        ctx.translate(BubbleStyle.STROKE_WIDTH * 0.5, BubbleStyle.STROKE_WIDTH * 0.5);
+
+        // If the text bubble points leftward, flip the canvas
+        ctx.save();
+        if (this._pointsLeft) {
+            ctx.scale(-1, 1);
+            ctx.translate(-paddedWidth, 0);
+        }
+
+        // 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);
+        ctx.arcTo(paddedWidth, 0, paddedWidth, paddedHeight, BubbleStyle.CORNER_RADIUS);
+        ctx.arcTo(paddedWidth, paddedHeight, paddedWidth - BubbleStyle.CORNER_RADIUS, paddedHeight,
+            BubbleStyle.CORNER_RADIUS);
+
+        // Translate the canvas so we don't have to do a bunch of width/height arithmetic
+        ctx.save();
+        ctx.translate(paddedWidth - BubbleStyle.CORNER_RADIUS, paddedHeight);
+
+        // Draw the bubble's "tail"
+        if (this._bubbleType === 'say') {
+            // For a speech bubble, draw one swoopy thing
+            ctx.bezierCurveTo(0, 4, 4, 8, 4, 10);
+            ctx.arcTo(4, 12, 2, 12, 2);
+            ctx.bezierCurveTo(-1, 12, -11, 8, -16, 0);
+
+            ctx.closePath();
+        } else {
+            // For a thinking bubble, draw a partial circle attached to the bubble...
+            ctx.arc(-16, 0, 4, 0, Math.PI);
+
+            ctx.closePath();
+
+            // and two circles detached from it
+            ctx.moveTo(-7, 7.25);
+            ctx.arc(-9.25, 7.25, 2.25, 0, Math.PI * 2);
+
+            ctx.moveTo(0, 9.5);
+            ctx.arc(-1.5, 9.5, 1.5, 0, Math.PI * 2);
+        }
+
+        // Un-translate the canvas and fill + stroke the text bubble
+        ctx.restore();
+
+        ctx.fillStyle = BubbleStyle.COLORS.BUBBLE_FILL;
+        ctx.strokeStyle = BubbleStyle.COLORS.BUBBLE_STROKE;
+        ctx.lineWidth = BubbleStyle.STROKE_WIDTH;
+
+        ctx.stroke();
+        ctx.fill();
+
+        // Un-flip the canvas if it was flipped
+        ctx.restore();
+
+        // Draw each line of text
+        ctx.fillStyle = BubbleStyle.COLORS.TEXT_FILL;
+        ctx.font = `${BubbleStyle.FONT_SIZE}px ${BubbleStyle.FONT}, sans-serif`;
+        const lines = this._lines;
+        for (let lineNumber = 0; lineNumber < lines.length; lineNumber++) {
+            const line = lines[lineNumber];
+            ctx.fillText(
+                line,
+                BubbleStyle.PADDING,
+                BubbleStyle.PADDING + (BubbleStyle.LINE_HEIGHT * lineNumber) +
+                    (BubbleStyle.FONT_HEIGHT_RATIO * BubbleStyle.FONT_SIZE)
+            );
+        }
+
+        this._renderedScale = scale;
+    }
+
+    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 = scaleMax / 100;
+
+        // If we already rendered the text bubble at this scale, we can skip re-rendering it.
+        if (this._textureDirty || this._renderedScale !== requestedScale) {
+            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) {
+                const textureOptions = {
+                    auto: false,
+                    wrap: gl.CLAMP_TO_EDGE
+                };
+
+                this._texture = twgl.createTexture(gl, textureOptions);
+            }
+
+            this._setTexture(textureData);
+        }
+
+        return this._texture;
+    }
+}
+
+module.exports = TextBubbleSkin;

package/src/index.js

@@ -0,0 +1,7 @@
+const RenderWebGL = require('./RenderWebGL');
+
+/**
+ * Export for NPM & Node.js
+ * @type {RenderWebGL}
+ */
+module.exports = RenderWebGL;

package/src/playground/getMousePosition.js

@@ -0,0 +1,37 @@
+// Adapted from code by Simon Sarris: http://stackoverflow.com/a/10450761
+const getMousePos = function (event, element) {
+    const stylePaddingLeft = parseInt(document.defaultView.getComputedStyle(element, null).paddingLeft, 10) || 0;
+    const stylePaddingTop = parseInt(document.defaultView.getComputedStyle(element, null).paddingTop, 10) || 0;
+    const styleBorderLeft = parseInt(document.defaultView.getComputedStyle(element, null).borderLeftWidth, 10) || 0;
+    const styleBorderTop = parseInt(document.defaultView.getComputedStyle(element, null).borderTopWidth, 10) || 0;
+
+    // Some pages have fixed-position bars at the top or left of the page
+    // They will mess up mouse coordinates and this fixes that
+    const html = document.body.parentNode;
+    const htmlTop = html.offsetTop;
+    const htmlLeft = html.offsetLeft;
+
+    // Compute the total offset. It's possible to cache this if you want
+    let offsetX = 0;
+    let offsetY = 0;
+    if (typeof element.offsetParent !== 'undefined') {
+        do {
+            offsetX += element.offsetLeft;
+            offsetY += element.offsetTop;
+        } while ((element = element.offsetParent));
+    }
+
+    // Add padding and border style widths to offset
+    // Also add the <html> offsets in case there's a position:fixed bar
+    // This part is not strictly necessary, it depends on your styling
+    offsetX += stylePaddingLeft + styleBorderLeft + htmlLeft;
+    offsetY += stylePaddingTop + styleBorderTop + htmlTop;
+
+    // We return a simple javascript object with x and y defined
+    return {
+        x: event.pageX - offsetX,
+        y: event.pageY - offsetY
+    };
+};
+
+module.exports = getMousePos;

package/src/playground/index.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Scratch WebGL rendering demo</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+<body>
+<canvas id="scratch-stage" width="10" height="10"></canvas>
+<canvas id="debug-canvas" width="10" height="10"></canvas>
+<p>
+    <label for="fudgeproperty">Property to tweak:</label>
+    <select id="fudgeproperty">
+        <option value="posx">Position X</option>
+        <option value="posy">Position Y</option>
+        <option value="direction">Direction</option>
+        <option value="scalex">Scale X</option>
+        <option value="scaley">Scale Y</option>
+        <option value="scaleboth">Scale (both dimensions)</option>
+        <option value="color">Color</option>
+        <option value="fisheye">Fisheye</option>
+        <option value="whirl">Whirl</option>
+        <option value="pixelate">Pixelate</option>
+        <option value="mosaic">Mosaic</option>
+        <option value="brightness">Brightness</option>
+        <option value="ghost">Ghost</option>
+    </select>
+    <label for="fudge">Property Value:</label>
+    <input type="range" id="fudge" style="width:50%" value="90" min="-90" max="270" step="any">
+</p>
+<p>
+    <label for="stage-scale">Stage scale:</label>
+    <input type="range" style="width:50%" id="stage-scale" value="1" min="1" max="2.5" step="any">
+</p>
+<p>
+    <label for="fudgeMin">Min:</label><input id="fudgeMin" type="number" value="0">
+    <label for="fudgeMax">Max:</label><input id="fudgeMax" type="number" value="200">
+</p>
+<script src="playground.js"></script>
+</body>
+</html>