npm - @scratch/scratch-render - Versions diffs - 11.0.0-beta.1 - Mend

@scratch/scratch-render 11.0.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (34) hide show

package/.nvmrc +1 -0
package/CHANGELOG.md +2281 -0
package/LICENSE +12 -0
package/README.md +87 -0
package/TRADEMARK +1 -0
package/commitlint.config.js +4 -0
package/docs/Rectangle-AABB-Matrix.md +192 -0
package/package.json +84 -0
package/release.config.js +10 -0
package/src/BitmapSkin.js +120 -0
package/src/Drawable.js +734 -0
package/src/EffectTransform.js +197 -0
package/src/PenSkin.js +350 -0
package/src/Rectangle.js +196 -0
package/src/RenderConstants.js +34 -0
package/src/RenderWebGL.js +2029 -0
package/src/SVGSkin.js +239 -0
package/src/ShaderManager.js +187 -0
package/src/Silhouette.js +257 -0
package/src/Skin.js +235 -0
package/src/TextBubbleSkin.js +284 -0
package/src/index.js +7 -0
package/src/playground/getMousePosition.js +37 -0
package/src/playground/index.html +41 -0
package/src/playground/playground.js +202 -0
package/src/playground/queryPlayground.html +73 -0
package/src/playground/queryPlayground.js +196 -0
package/src/playground/style.css +11 -0
package/src/shaders/sprite.frag +249 -0
package/src/shaders/sprite.vert +75 -0
package/src/util/canvas-measurement-provider.js +41 -0
package/src/util/color-conversions.js +97 -0
package/src/util/log.js +4 -0
package/src/util/text-wrapper.js +112 -0

package/LICENSE ADDED Viewed

@@ -0,0 +1,12 @@
+Copyright (c) 2016, Massachusetts Institute of Technology
+All rights reserved.
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/README.md ADDED Viewed

@@ -0,0 +1,87 @@
+## scratch-render
+#### WebGL-based rendering engine for Scratch 3.0
+[![CircleCI](https://circleci.com/gh/LLK/scratch-render/tree/develop.svg?style=shield&circle-token=310da166a745295d515b3b90f3bad10f23b84405)](https://circleci.com/gh/LLK/scratch-render?branch=develop)
+[![Greenkeeper badge](https://badges.greenkeeper.io/LLK/scratch-render.svg)](https://greenkeeper.io/)
+## Installation
+```bash
+npm install https://github.com/scratchfoundation/scratch-render.git
+```
+## Setup
+```html
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <title>Scratch WebGL rendering demo</title>
+    </head>
+    <body>
+        <canvas id="myStage"></canvas>
+        <canvas id="myDebug"></canvas>
+    </body>
+</html>
+```
+```js
+var canvas = document.getElementById('myStage');
+var debug = document.getElementById('myDebug');
+// Instantiate the renderer
+var renderer = new require('@scratch/scratch-render')(canvas);
+// Connect to debug canvas
+renderer.setDebugCanvas(debug);
+// Start drawing
+function drawStep() {
+    renderer.draw();
+    requestAnimationFrame(drawStep);
+}
+drawStep();
+// Connect to worker (see "playground" example)
+var worker = new Worker('worker.js');
+renderer.connectWorker(worker);
+```
+## Standalone Build
+```bash
+npm run build
+```
+```html
+<script src="/path/to/render.js"></script>
+<script>
+    var renderer = new window.RenderWebGLLocal();
+    // do things
+</script>
+```
+## Testing
+```bash
+npm test
+```
+## Donate
+We provide [Scratch](https://scratch.mit.edu) free of charge, and want to keep it that way! Please consider making a [donation](https://secure.donationpay.org/scratchfoundation/) to support our continued engineering, design, community, and resource development efforts. Donations of any size are appreciated. Thank you!
+## Committing
+This project uses [semantic release](https://github.com/semantic-release/semantic-release) to ensure version bumps
+follow semver so that projects depending on it don't break unexpectedly.
+In order to automatically determine version updates, semantic release expects commit messages to follow the
+[conventional-changelog](https://github.com/bcoe/conventional-changelog-standard/blob/master/convention.md)
+specification.
+You can use the [commitizen CLI](https://github.com/commitizen/cz-cli) to make commits formatted in this way:
+```bash
+npm install -g commitizen@latest cz-conventional-changelog@latest
+```
+Now you're ready to make commits using `git cz`.

package/TRADEMARK ADDED Viewed

	@@ -0,0 +1 @@
1	+ The Scratch trademarks, including the Scratch name, logo, the Scratch Cat, Gobo, Pico, Nano, Tera and Giga graphics (the "Marks"), are property of the Massachusetts Institute of Technology (MIT). Marks may not be used to endorse or promote products derived from this software without specific prior written permission.

package/commitlint.config.js ADDED Viewed

@@ -0,0 +1,4 @@
+module.exports = {
+    extends: ['@commitlint/config-conventional'],
+    ignores: [message => message.startsWith('chore(release):')]
+};

package/docs/Rectangle-AABB-Matrix.md ADDED Viewed

@@ -0,0 +1,192 @@
+# Rectangle AABB Matrix
+Initialize a Rectangle to a 1 unit square centered at 0 x 0 transformed by a model matrix.
+-----
+Every drawable is a 1 x 1 unit square that is rotated by its direction, scaled by its skin size and scale, and offset by its rotation center and position. The square representation is made up of 4 points that are transformed by the drawable properties. Often we want a shape that simplifies those 4 points into a non-rotated shape, a axis aligned bounding box.
+One approach is to compare the x and y components of each transformed vector and find the minimum and maximum x component and the minimum and maximum y component.
+We can start from this approach and determine an alternative one that prodcues the same output with less work.
+Starting with transforming one point, here is a 3D point, `v`, transformation by a matrix, `m`.
+```js
+const v0 = v[0];
+const v1 = v[1];
+const v2 = v[2];
+const d = v0 * m[(0 * 4) + 3] + v1 * m[(1 * 4) + 3] + v2 * m[(2 * 4) + 3] + m[(3 * 4) + 3];
+dst[0] = (v0 * m[(0 * 4) + 0] + v1 * m[(1 * 4) + 0] + v2 * m[(2 * 4) + 0] + m[(3 * 4) + 0]) / d;
+dst[1] = (v0 * m[(0 * 4) + 1] + v1 * m[(1 * 4) + 1] + v2 * m[(2 * 4) + 1] + m[(3 * 4) + 1]) / d;
+dst[2] = (v0 * m[(0 * 4) + 2] + v1 * m[(1 * 4) + 2] + v2 * m[(2 * 4) + 2] + m[(3 * 4) + 2]) / d;
+```
+As this is a 2D rectangle we can cancel out the third dimension, and the determinant, 'd'.
+```js
+const v0 = v[0];
+const v1 = v[1];
+dst = [
+    v0 * m[(0 * 4) + 0] + v1 * m[(1 * 4) + 0] + m[(3 * 4) + 0,
+    v0 * m[(0 * 4) + 1] + v1 * m[(1 * 4) + 1] + m[(3 * 4) + 1
+];
+```
+Let's set the matrix points to shorter names for convenience.
+```js
+const m00 = m[(0 * 4) + 0];
+const m01 = m[(0 * 4) + 1];
+const m10 = m[(1 * 4) + 0];
+const m11 = m[(1 * 4) + 1];
+const m30 = m[(3 * 4) + 0];
+const m31 = m[(3 * 4) + 1];
+```
+We need 4 points with positive and negative 0.5 values so the square has sides of length 1.
+```js
+let p = [0.5, 0.5];
+let q = [-0.5, 0.5];
+let r = [-0.5, -0.5];
+let s = [0.5, -0.5];
+```
+Transform the points by the matrix.
+```js
+p = [
+    0.5 * m00 + 0.5 * m10 + m30,
+    0.5 * m01 + 0.5 * m11 + m31
+];
+q = [
+    -0.5 * m00 + -0.5 * m10 + m30,
+    0.5 * m01 + 0.5 * m11 + m31
+];
+r = [
+    -0.5 * m00 + -0.5 * m10 + m30,
+    -0.5 * m01 + -0.5 * m11 + m31
+];
+s = [
+    0.5 * m00 + 0.5 * m10 + m30,
+    -0.5 * m01 + -0.5 * m11 + m31
+];
+```
+With 4 transformed points we can build the left, right, top, and bottom values for the Rectangle. Each will use the minimum or the maximum of one of the components of all points.
+```js
+const left = Math.min(p[0], q[0], r[0], s[0]);
+const right = Math.max(p[0], q[0], r[0], s[0]);
+const top = Math.max(p[1], q[1], r[1], s[1]);
+const bottom = Math.min(p[1], q[1], r[1], s[1]);
+```
+Fill those calls with the vector expressions.
+```js
+const left = Math.min(
+    0.5 * m00 + 0.5 * m10 + m30,
+    -0.5 * m00 + 0.5 * m10 + m30,
+    -0.5 * m00 + -0.5 * m10 + m30,
+    0.5 * m00 + -0.5 * m10 + m30
+);
+const right = Math.max(
+    0.5 * m00 + 0.5 * m10 + m30,
+    -0.5 * m00 + 0.5 * m10 + m30,
+    -0.5 * m00 + -0.5 * m10 + m30,
+    0.5 * m00 + -0.5 * m10 + m30
+);
+const top = Math.max(
+    0.5 * m01 + 0.5 * m11 + m31,
+    -0.5 * m01 + 0.5 * m11 + m31,
+    -0.5 * m01 + -0.5 * m11 + m31,
+    0.5 * m01 + -0.5 * m11 + m31
+);
+const bottom = Math.min(
+    0.5 * m01 + 0.5 * m11 + m31,
+    -0.5 * m01 + 0.5 * m11 + m31,
+    -0.5 * m01 + -0.5 * m11 + m31,
+    0.5 * m01 + -0.5 * m11 + m31
+);
+```
+Pull out the `0.5 * m??` patterns.
+```js
+const x0 = 0.5 * m00;
+const x1 = 0.5 * m10;
+const y0 = 0.5 * m01;
+const y1 = 0.5 * m11;
+const left = Math.min(x0 + x1 + m30, -x0 + x1 + m30, -x0 + -x1 + m30, x0 + -x1 + m30);
+const right = Math.max(x0 + x1 + m30, -x0 + x1 + m30, -x0 + -x1 + m30, x0 + -x1 + m30);
+const top = Math.max(y0 + y1 + m31, -y0 + y1 + m31, -y0 + -y1 + m31, y0 + -y1 + m31);
+const bottom = Math.min(y0 + y1 + m31, -y0 + y1 + m31, -y0 + -y1 + m31, y0 + -y1 + m31);
+```
+Now each argument for the min and max calls take an expression like `(a * x0 + b * x1 + m3?)`. As each expression has the x0, x1, and m3? variables we can split the min and max calls on the addition operators. Each new call has all the coefficients of that variable.
+```js
+const left = Math.min(x0, -x0) + Math.min(x1, -x1) + Math.min(m30, m30);
+const right = Math.max(x0, -x0) + Math.max(x1, -x1) + Math.max(m30, m30);
+const top = Math.max(y0, -y0) + Math.max(y1, -y1) + Math.max(m31, m31);
+const bottom = Math.min(y0, -y0) + Math.min(y1, -y1) + Math.min(m31, m31);
+```
+The min or max of two copies of the same value will just be that value.
+```js
+const left = Math.min(x0, -x0) + Math.min(x1, -x1) + m30;
+const right = Math.max(x0, -x0) + Math.max(x1, -x1) + m30;
+const top = Math.max(y0, -y0) + Math.max(y1, -y1) + m31;
+const bottom = Math.min(y0, -y0) + Math.min(y1, -y1) + m31;
+```
+The max of a negative and positive variable will be the absolute value of that variable. The min of a negative and positive variable will the negated absolute value of that variable.
+```js
+const left = -Math.abs(x0) + -Math.abs(x1) + m30;
+const right = Math.abs(x0) + Math.abs(x1) + m30;
+const top = Math.abs(y0) + Math.abs(y1) + m31;
+const bottom = -Math.abs(y0) + -Math.abs(y1) + m31;
+```
+Pulling out the negations of the absolute values, left and right as well as top and bottom are the positive or negative sum of the absolute value of the saled and rotated unit value.
+```js
+const left = -(Math.abs(x0) + Math.abs(x1)) + m30;
+const right = Math.abs(x0) + Math.abs(x1) + m30;
+const top = Math.abs(y0) + Math.abs(y1) + m31;
+const bottom = -(Math.abs(y0) + Math.abs(y1)) + m31;
+```
+We call pull out those sums and use them twice.
+```js
+const x = Math.abs(x0) + Math.abs(x1);
+const y = Math.abs(y0) + Math.abs(y1);
+const left = -x + m30;
+const right = x + m30;
+const top = y + m31;
+const bottom = -y + m31;
+```
+This lets us arrive at our goal. Inlining some of our variables we get this block that will initialize a Rectangle to a unit square transformed by a matrix.
+```js
+const m30 = m[(3 * 4) + 0];
+const m31 = m[(3 * 4) + 1];
+const x = Math.abs(0.5 * m[(0 * 4) + 0]) + Math.abs(0.5 * m[(1 * 4) + 0]);
+const y = Math.abs(0.5 * m[(0 * 4) + 1]) + Math.abs(0.5 * m[(1 * 4) + 1]);
+const left = -x + m30;
+const right = x + m30;
+const top = y + m31;
+const bottom = -y + m31;
+```

package/package.json ADDED Viewed

@@ -0,0 +1,84 @@
+{
+  "name": "@scratch/scratch-render",
+  "version": "11.0.0-beta.1",
+  "description": "WebGL Renderer for Scratch 3.0",
+  "author": "Massachusetts Institute of Technology",
+  "license": "AGPL-3.0-only",
+  "homepage": "https://github.com/scratchfoundation/scratch-render#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/scratchfoundation/scratch-editor.git"
+  },
+  "exports": {
+    "webpack": "./src/index.js",
+    "browser": "./dist/web/scratch-render.js",
+    "node": "./dist/node/scratch-render.js",
+    "default": "./src/index.js"
+  },
+  "scripts": {
+    "build": "webpack --progress",
+    "docs": "jsdoc -c .jsdoc.json",
+    "lint": "eslint .",
+    "prepublish": "npm run build",
+    "prepublish-watch": "npm run watch",
+    "start": "webpack-dev-server",
+    "tap": "tap test/unit test/integration",
+    "test": "npm run lint && npm run docs && npm run build && npm run tap",
+    "watch": "webpack --progress --watch --watch-poll"
+  },
+  "tap": {
+    "branches": 10,
+    "functions": 20,
+    "lines": 30,
+    "statements": 30
+  },
+  "browserslist": [
+    "Chrome >= 63",
+    "Edge >= 15",
+    "Firefox >= 57",
+    "Safari >= 8",
+    "Android >= 63",
+    "iOS >= 8"
+  ],
+  "dependencies": {
+    "@scratch/scratch-svg-renderer": "11.0.0-beta.1",
+    "grapheme-breaker": "^0.3.2",
+    "hull.js": "0.2.10",
+    "ify-loader": "^1.0.4",
+    "linebreak": "^0.3.0",
+    "minilog": "^3.1.0",
+    "raw-loader": "^0.5.1",
+    "twgl.js": "^4.4.0"
+  },
+  "peerDependencies": {
+    "scratch-render-fonts": "^1.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "7.25.2",
+    "@babel/eslint-parser": "7.25.1",
+    "@babel/polyfill": "7.12.1",
+    "@babel/preset-env": "7.25.4",
+    "@scratch/scratch-vm": "11.0.0-beta.1",
+    "babel-loader": "9.1.3",
+    "copy-webpack-plugin": "4.6.0",
+    "docdash": "0.4.0",
+    "eslint": "8.57.0",
+    "eslint-config-scratch": "9.0.8",
+    "gh-pages": "1.2.0",
+    "html-webpack-plugin": "5.6.0",
+    "jsdoc": "3.6.11",
+    "json": "9.0.6",
+    "playwright-chromium": "1.46.1",
+    "scratch-render-fonts": "1.0.93",
+    "scratch-semantic-release-config": "1.0.14",
+    "scratch-storage": "^4.0.24",
+    "scratch-webpack-configuration": "1.6.0",
+    "semantic-release": "19.0.5",
+    "tap": "16.3.10",
+    "terser-webpack-plugin": "5.3.10",
+    "travis-after-all": "1.4.5",
+    "webpack": "5.94.0",
+    "webpack-cli": "5.1.4",
+    "webpack-dev-server": "5.0.4"
+  }
+}

package/release.config.js ADDED Viewed

@@ -0,0 +1,10 @@
+module.exports = {
+    extends: 'scratch-semantic-release-config',
+    branches: [
+        {
+            name: 'develop'
+            // default channel
+        }
+        // TODO: add hotfix config after at least one normal release
+    ]
+};

package/src/BitmapSkin.js ADDED Viewed

@@ -0,0 +1,120 @@
+const twgl = require('twgl.js');
+const Skin = require('./Skin');
+class BitmapSkin extends Skin {
+    /**
+     * Create a new Bitmap Skin.
+     * @extends Skin
+     * @param {!int} id - The ID for this Skin.
+     * @param {!RenderWebGL} renderer - The renderer which will use this skin.
+     */
+    constructor (id, renderer) {
+        super(id);
+        /** @type {!int} */
+        this._costumeResolution = 1;
+        /** @type {!RenderWebGL} */
+        this._renderer = renderer;
+        /** @type {Array<int>} */
+        this._textureSize = [0, 0];
+    }
+    /**
+     * 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;
+        }
+        super.dispose();
+    }
+    /**
+     * @return {Array<number>} the "native" size, in texels, of this skin.
+     */
+    get size () {
+        return [this._textureSize[0] / this._costumeResolution, this._textureSize[1] / this._costumeResolution];
+    }
+    /**
+     * @param {Array<number>} scale - The scaling factors to be used.
+     * @return {WebGLTexture} The GL texture representation of this skin when drawing at the given scale.
+     */
+    // eslint-disable-next-line no-unused-vars
+    getTexture (scale) {
+        return this._texture || super.getTexture();
+    }
+    /**
+     * Set the contents of this skin to a snapshot of the provided bitmap data.
+     * @param {ImageData|HTMLImageElement|HTMLCanvasElement|HTMLVideoElement} bitmapData - new contents for this skin.
+     * @param {int} [costumeResolution=1] - The resolution to use for this bitmap.
+     * @param {Array<number>} [rotationCenter] - Optional rotation center for the bitmap. If not supplied, it will be
+     * calculated from the bounding box
+     * @fires Skin.event:WasAltered
+     */
+    setBitmap (bitmapData, costumeResolution, rotationCenter) {
+        if (!bitmapData.width || !bitmapData.height) {
+            super.setEmptyImageData();
+            return;
+        }
+        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,
+                wrap: gl.CLAMP_TO_EDGE
+            };
+            this._texture = twgl.createTexture(gl, textureOptions);
+        }
+        this._setTexture(textureData);
+        // Do these last in case any of the above throws an exception
+        this._costumeResolution = costumeResolution || 2;
+        this._textureSize = BitmapSkin._getBitmapSize(bitmapData);
+        if (typeof rotationCenter === 'undefined') rotationCenter = this.calculateRotationCenter();
+        this._rotationCenter[0] = rotationCenter[0];
+        this._rotationCenter[1] = rotationCenter[1];
+        this.emit(Skin.Events.WasAltered);
+    }
+    /**
+     * @param {ImageData|HTMLImageElement|HTMLCanvasElement|HTMLVideoElement} bitmapData - bitmap data to inspect.
+     * @returns {Array<int>} the width and height of the bitmap data, in pixels.
+     * @private
+     */
+    static _getBitmapSize (bitmapData) {
+        if (bitmapData instanceof HTMLImageElement) {
+            return [bitmapData.naturalWidth || bitmapData.width, bitmapData.naturalHeight || bitmapData.height];
+        }
+        if (bitmapData instanceof HTMLVideoElement) {
+            return [bitmapData.videoWidth || bitmapData.width, bitmapData.videoHeight || bitmapData.height];
+        }
+        // ImageData or HTMLCanvasElement
+        return [bitmapData.width, bitmapData.height];
+    }
+}
+module.exports = BitmapSkin;