@scratch/scratch-render 11.0.0-beta.1

package/src/playground/playground.js

@@ -0,0 +1,202 @@
+const ScratchRender = require('../RenderWebGL');
+const getMousePosition = require('./getMousePosition');
+
+const canvas = document.getElementById('scratch-stage');
+let fudge = 90;
+const renderer = new ScratchRender(canvas);
+renderer.setLayerGroupOrdering(['group1']);
+
+const drawableID = renderer.createDrawable('group1');
+renderer.updateDrawableProperties(drawableID, {
+    position: [0, 0],
+    scale: [100, 100],
+    direction: 90
+});
+
+const WantedSkinType = {
+    bitmap: 'bitmap',
+    vector: 'vector',
+    pen: 'pen'
+};
+
+const drawableID2 = renderer.createDrawable('group1');
+const wantedSkin = WantedSkinType.vector;
+
+// Bitmap (squirrel)
+const image = new Image();
+image.addEventListener('load', () => {
+    const bitmapSkinId = renderer.createBitmapSkin(image);
+    if (wantedSkin === WantedSkinType.bitmap) {
+        renderer.updateDrawableProperties(drawableID2, {
+            skinId: bitmapSkinId
+        });
+    }
+});
+image.crossOrigin = 'anonymous';
+image.src = 'https://cdn.assets.scratch.mit.edu/internalapi/asset/7e24c99c1b853e52f8e7f9004416fa34.png/get/';
+
+// SVG (cat 1-a)
+const xhr = new XMLHttpRequest();
+xhr.addEventListener('load', () => {
+    const skinId = renderer.createSVGSkin(xhr.responseText);
+    if (wantedSkin === WantedSkinType.vector) {
+        renderer.updateDrawableProperties(drawableID2, {
+            skinId: skinId
+        });
+    }
+});
+xhr.open('GET', 'https://cdn.assets.scratch.mit.edu/internalapi/asset/b7853f557e4426412e64bb3da6531a99.svg/get/');
+xhr.send();
+
+if (wantedSkin === WantedSkinType.pen) {
+    const penSkinID = renderer.createPenSkin();
+
+    renderer.updateDrawableProperties(drawableID2, {
+        skinId: penSkinID
+    });
+
+    canvas.addEventListener('click', event => {
+        const rect = canvas.getBoundingClientRect();
+
+        const x = event.clientX - rect.left;
+        const y = event.clientY - rect.top;
+
+        renderer.penLine(penSkinID, {
+            color4f: [Math.random(), Math.random(), Math.random(), 1],
+            diameter: 8
+        },
+        x - 240, 180 - y, (Math.random() * 480) - 240, (Math.random() * 360) - 180);
+    });
+}
+
+let posX = 0;
+let posY = 0;
+let scaleX = 100;
+let scaleY = 100;
+let fudgeProperty = 'posx';
+
+const fudgeInput = document.getElementById('fudge');
+const fudgePropertyInput = document.getElementById('fudgeproperty');
+const fudgeMinInput = document.getElementById('fudgeMin');
+const fudgeMaxInput = document.getElementById('fudgeMax');
+
+/* eslint require-jsdoc: 0 */
+const updateFudgeProperty = event => {
+    fudgeProperty = event.target.value;
+};
+
+const updateFudgeMin = event => {
+    fudgeInput.min = event.target.valueAsNumber;
+};
+
+const updateFudgeMax = event => {
+    fudgeInput.max = event.target.valueAsNumber;
+};
+
+fudgePropertyInput.addEventListener('change', updateFudgeProperty);
+fudgePropertyInput.addEventListener('init', updateFudgeProperty);
+
+fudgeMinInput.addEventListener('change', updateFudgeMin);
+fudgeMinInput.addEventListener('init', updateFudgeMin);
+
+fudgeMaxInput.addEventListener('change', updateFudgeMax);
+fudgeMaxInput.addEventListener('init', updateFudgeMax);
+
+// Ugly hack to properly set the values of the inputs on page load,
+// since they persist across reloads, at least in Firefox.
+// The best ugly hacks are the ones that reduce code duplication!
+fudgePropertyInput.dispatchEvent(new CustomEvent('init'));
+fudgeMinInput.dispatchEvent(new CustomEvent('init'));
+fudgeMaxInput.dispatchEvent(new CustomEvent('init'));
+fudgeInput.dispatchEvent(new CustomEvent('init'));
+
+const handleFudgeChanged = function (event) {
+    fudge = event.target.valueAsNumber;
+    const props = {};
+    switch (fudgeProperty) {
+    case 'posx':
+        props.position = [fudge, posY];
+        posX = fudge;
+        break;
+    case 'posy':
+        props.position = [posX, fudge];
+        posY = fudge;
+        break;
+    case 'direction':
+        props.direction = fudge;
+        break;
+    case 'scalex':
+        props.scale = [fudge, scaleY];
+        scaleX = fudge;
+        break;
+    case 'scaley':
+        props.scale = [scaleX, fudge];
+        scaleY = fudge;
+        break;
+    case 'scaleboth':
+        props.scale = [fudge, fudge];
+        scaleX = fudge;
+        scaleY = fudge;
+        break;
+    case 'color':
+        props.color = fudge;
+        break;
+    case 'whirl':
+        props.whirl = fudge;
+        break;
+    case 'fisheye':
+        props.fisheye = fudge;
+        break;
+    case 'pixelate':
+        props.pixelate = fudge;
+        break;
+    case 'mosaic':
+        props.mosaic = fudge;
+        break;
+    case 'brightness':
+        props.brightness = fudge;
+        break;
+    case 'ghost':
+        props.ghost = fudge;
+        break;
+    }
+    renderer.updateDrawableProperties(drawableID2, props);
+};
+
+fudgeInput.addEventListener('input', handleFudgeChanged);
+fudgeInput.addEventListener('change', handleFudgeChanged);
+fudgeInput.addEventListener('init', handleFudgeChanged);
+
+const updateStageScale = event => {
+    renderer.resize(480 * event.target.valueAsNumber, 360 * event.target.valueAsNumber);
+};
+
+const stageScaleInput = document.getElementById('stage-scale');
+
+stageScaleInput.addEventListener('input', updateStageScale);
+stageScaleInput.addEventListener('change', updateStageScale);
+
+canvas.addEventListener('mousemove', event => {
+    const mousePos = getMousePosition(event, canvas);
+    renderer.extractColor(mousePos.x, mousePos.y, 30);
+});
+
+canvas.addEventListener('click', event => {
+    const mousePos = getMousePosition(event, canvas);
+    const pickID = renderer.pick(mousePos.x, mousePos.y);
+    console.log(`You clicked on ${(pickID < 0 ? 'nothing' : `ID# ${pickID}`)}`);
+    if (pickID >= 0) {
+        console.dir(renderer.extractDrawableScreenSpace(pickID, mousePos.x, mousePos.y));
+    }
+});
+
+const drawStep = function () {
+    renderer.draw();
+    // renderer.getBounds(drawableID2);
+    // renderer.isTouchingColor(drawableID2, [255,255,255]);
+    requestAnimationFrame(drawStep);
+};
+drawStep();
+
+const debugCanvas = /** @type {canvas} */ document.getElementById('debug-canvas');
+renderer.setDebugCanvas(debugCanvas);

package/src/playground/queryPlayground.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Scratch WebGL Query Playground</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <style>
+        input[type=range][orient=vertical] {
+            writing-mode: bt-lr; /* IE */
+            -webkit-appearance: slider-vertical;
+            width: 1rem;
+            padding: 0 0.5rem;
+        }
+        canvas {
+            /* https://stackoverflow.com/a/7665647 */
+            image-rendering: optimizeSpeed; /* Older versions of FF */
+            image-rendering: -moz-crisp-edges; /* FF 6.0+ */
+            image-rendering: -webkit-optimize-contrast; /* Safari */
+            image-rendering: -o-crisp-edges; /* OS X & Windows Opera (12.02+) */
+            image-rendering: pixelated; /* Awesome future-browsers */
+            -ms-interpolation-mode: nearest-neighbor; /* IE */
+        }
+    </style>
+</head>
+<body>
+    <div>
+        <fieldset>
+            <legend>Query Canvases</legend>
+            <table>
+                <tr>
+                    <td>
+                        <fieldset>
+                            <legend>GPU</legend>
+                            <div>Touching color A? <span id="gpuTouchingA">maybe</span></div>
+                            <div>Touching color B? <span id="gpuTouchingB">maybe</span></div>
+                            <canvas id="gpuQueryCanvas" width="480" height="360" style="height: 20rem"></canvas>
+                        </fieldset>
+                    </td>
+                    <td>
+                        <fieldset>
+                            <legend>CPU</legend>
+                            <div>Touching color A? <span id="cpuTouchingA">maybe</span></div>
+                            <div>Touching color B? <span id="cpuTouchingB">maybe</span></div>
+                            <canvas id="cpuQueryCanvas" width="480" height="360" style="height: 20rem"></canvas>
+                        </fieldset>
+                    </td>
+                </tr>
+            </table>
+        </fieldset>
+        <fieldset>
+            <legend>Render Canvas</legend>
+            <div>Cursor Position: <span id="cursorPosition">somewhere</span></div>
+            <table>
+                <tr>
+                    <td></td>
+                    <td>
+                        <input id="cursorX" type="range" step="0.25" value="0" />
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <input id="cursorY" type="range" orient="vertical" step="0.25" value="0" />
+                    </td>
+                    <td>
+                        <canvas id="renderCanvas" width="480" height="360"></canvas>
+                    </td>
+                </tr>
+            </table>
+        </fieldset>
+    </div>
+</body>
+<script src="queryPlayground.js"></script>
+</html>

package/src/playground/queryPlayground.js

@@ -0,0 +1,196 @@
+const ScratchRender = require('../RenderWebGL');
+const getMousePosition = require('./getMousePosition');
+
+const renderCanvas = document.getElementById('renderCanvas');
+const gpuQueryCanvas = document.getElementById('gpuQueryCanvas');
+const cpuQueryCanvas = document.getElementById('cpuQueryCanvas');
+const inputCursorX = document.getElementById('cursorX');
+const inputCursorY = document.getElementById('cursorY');
+const labelCursorPosition = document.getElementById('cursorPosition');
+const labelGpuTouchingA = document.getElementById('gpuTouchingA');
+const labelGpuTouchingB = document.getElementById('gpuTouchingB');
+const labelCpuTouchingA = document.getElementById('cpuTouchingA');
+const labelCpuTouchingB = document.getElementById('cpuTouchingB');
+
+const drawables = {
+    testPattern: -1,
+    cursor: -1
+};
+
+const colors = {
+    cursor: [255, 0, 0],
+    patternA: [0, 255, 0],
+    patternB: [0, 0, 255]
+};
+
+const renderer = new ScratchRender(renderCanvas);
+
+const handleResizeRenderCanvas = () => {
+    const halfWidth = renderCanvas.clientWidth / 2;
+    const halfHeight = renderCanvas.clientHeight / 2;
+
+    inputCursorX.style.width = `${renderCanvas.clientWidth}px`;
+    inputCursorY.style.height = `${renderCanvas.clientHeight}px`;
+    inputCursorX.min = -halfWidth;
+    inputCursorX.max = halfWidth;
+    inputCursorY.min = -halfHeight;
+    inputCursorY.max = halfHeight;
+};
+renderCanvas.addEventListener('resize', handleResizeRenderCanvas);
+handleResizeRenderCanvas();
+
+const handleCursorPositionChanged = () => {
+    const devicePixelRatio = window.devicePixelRatio || 1;
+    const cursorX = inputCursorX.valueAsNumber / devicePixelRatio;
+    const cursorY = inputCursorY.valueAsNumber / devicePixelRatio;
+    const positionHTML = `${cursorX}, ${cursorY}`;
+    labelCursorPosition.innerHTML = positionHTML;
+    if (drawables.cursor >= 0) {
+        renderer.draw();
+        renderer.updateDrawableProperties(drawables.cursor, {
+            position: [cursorX, cursorY]
+        });
+
+        renderer.setUseGpuMode(ScratchRender.UseGpuModes.ForceGPU);
+        renderer.setDebugCanvas(gpuQueryCanvas);
+        const isGpuTouchingA = renderer.isTouchingColor(drawables.cursor, colors.patternA);
+        const isGpuTouchingB = renderer.isTouchingColor(drawables.cursor, colors.patternB);
+        labelGpuTouchingA.innerHTML = isGpuTouchingA ? 'yes' : 'no';
+        labelGpuTouchingB.innerHTML = isGpuTouchingB ? 'yes' : 'no';
+
+        renderer.setUseGpuMode(ScratchRender.UseGpuModes.ForceCPU);
+        renderer.setDebugCanvas(cpuQueryCanvas);
+        const isCpuTouchingA = renderer.isTouchingColor(drawables.cursor, colors.patternA);
+        const isCpuTouchingB = renderer.isTouchingColor(drawables.cursor, colors.patternB);
+        labelCpuTouchingA.innerHTML = isCpuTouchingA ? 'yes' : 'no';
+        labelCpuTouchingB.innerHTML = isCpuTouchingB ? 'yes' : 'no';
+
+        renderer.setUseGpuMode(ScratchRender.UseGpuModes.Automatic);
+    }
+};
+inputCursorX.addEventListener('change', handleCursorPositionChanged);
+inputCursorY.addEventListener('change', handleCursorPositionChanged);
+inputCursorX.addEventListener('input', handleCursorPositionChanged);
+inputCursorY.addEventListener('input', handleCursorPositionChanged);
+handleCursorPositionChanged();
+
+let trackingMouse = true;
+const handleMouseMove = event => {
+    if (trackingMouse) {
+        const mousePosition = getMousePosition(event, renderCanvas);
+        inputCursorX.value = mousePosition.x - (renderCanvas.clientWidth / 2);
+        inputCursorY.value = (renderCanvas.clientHeight / 2) - mousePosition.y;
+        handleCursorPositionChanged();
+    }
+};
+renderCanvas.addEventListener('mousemove', handleMouseMove);
+
+renderCanvas.addEventListener('click', event => {
+    trackingMouse = !trackingMouse;
+    if (trackingMouse) {
+        handleMouseMove(event);
+    }
+});
+
+const rgb2fillStyle = rgb => (
+    `rgb(${rgb[0]},${rgb[1]},${rgb[2]})`
+);
+
+const makeCursorImage = () => {
+    const canvas = document.createElement('canvas');
+    canvas.width = canvas.height = 1;
+
+    const context = canvas.getContext('2d');
+    context.fillStyle = rgb2fillStyle(colors.cursor);
+    context.fillRect(0, 0, 1, 1);
+
+    return canvas;
+};
+
+const makeTestPatternImage = () => {
+    const canvas = document.createElement('canvas');
+    canvas.width = 480;
+    canvas.height = 360;
+
+    const patternA = rgb2fillStyle(colors.patternA);
+    const patternB = rgb2fillStyle(colors.patternB);
+
+    const context = canvas.getContext('2d');
+    context.fillStyle = patternA;
+    context.fillRect(0, 0, canvas.width, canvas.height);
+
+    context.fillStyle = patternB;
+    const xSplit1 = Math.floor(canvas.width * 0.25);
+    const xSplit2 = Math.floor(canvas.width * 0.5);
+    const xSplit3 = Math.floor(canvas.width * 0.75);
+    const ySplit = Math.floor(canvas.height * 0.5);
+    for (let y = 0; y < ySplit; y += 2) {
+        context.fillRect(0, y, xSplit2, 1);
+    }
+    for (let x = xSplit2; x < canvas.width; x += 2) {
+        context.fillRect(x, 0, 1, ySplit);
+    }
+    for (let x = 0; x < xSplit1; x += 2) {
+        for (let y = ySplit; y < canvas.height; y += 2) {
+            context.fillRect(x, y, 1, 1);
+        }
+    }
+    for (let x = xSplit1; x < xSplit2; x += 3) {
+        for (let y = ySplit; y < canvas.height; y += 3) {
+            context.fillRect(x, y, 2, 2);
+        }
+    }
+    for (let x = xSplit2; x < xSplit3; ++x) {
+        for (let y = ySplit; y < canvas.height; ++y) {
+            context.fillStyle = (x + y) % 2 ? patternB : patternA;
+            context.fillRect(x, y, 1, 1);
+        }
+    }
+    for (let x = xSplit3; x < canvas.width; x += 2) {
+        for (let y = ySplit; y < canvas.height; y += 2) {
+            context.fillStyle = (x + y) % 4 ? patternB : patternA;
+            context.fillRect(x, y, 2, 2);
+        }
+    }
+
+    return canvas;
+};
+
+const makeTestPatternDrawable = function (group) {
+    const image = makeTestPatternImage();
+    const skinId = renderer.createBitmapSkin(image, 1);
+    const drawableId = renderer.createDrawable(group);
+    renderer.updateDrawableProperties(drawableId, {skinId});
+    return drawableId;
+};
+
+const makeCursorDrawable = function (group) {
+    const image = makeCursorImage();
+    const skinId = renderer.createBitmapSkin(image, 1, [0, 0]);
+    const drawableId = renderer.createDrawable(group);
+    renderer.updateDrawableProperties(drawableId, {skinId});
+    return drawableId;
+};
+
+const initRendering = () => {
+    const layerGroup = {
+        testPattern: 'testPattern',
+        cursor: 'cursor'
+    };
+    renderer.setLayerGroupOrdering([layerGroup.testPattern, layerGroup.cursor]);
+    drawables.testPattern = makeTestPatternDrawable(layerGroup.testPattern);
+    drawables.cursor = makeCursorDrawable(layerGroup.cursor);
+
+    const corner00 = makeCursorDrawable(layerGroup.cursor);
+    const corner01 = makeCursorDrawable(layerGroup.cursor);
+    const corner10 = makeCursorDrawable(layerGroup.cursor);
+    const corner11 = makeCursorDrawable(layerGroup.cursor);
+
+    renderer.updateDrawableProperties(corner00, {position: [-240, -179]});
+    renderer.updateDrawableProperties(corner01, {position: [-240, 180]});
+    renderer.updateDrawableProperties(corner10, {position: [239, -179]});
+    renderer.updateDrawableProperties(corner11, {position: [239, 180]});
+};
+
+initRendering();
+renderer.draw();

package/src/playground/style.css

@@ -0,0 +1,11 @@
+body {
+	background: lightsteelblue;
+}
+
+canvas {
+	border: 3px dashed black;
+}
+
+#debug-canvas {
+	border-color: red;
+}