Set v_texCoord in mystery mode

.gitattributes

@@ -14,7 +14,6 @@
 *.js text eol=lf
 *.js.map text eol=lf
 *.json text eol=lf
-*.json5 text eol=lf
 *.md text eol=lf
 *.vert text eol=lf
 *.xml text eol=lf

.travis.yml

@@ -19,6 +19,10 @@ cache:
 jobs:
   include:
     - stage: test
+      script:
+      - npm run lint
+      - npm run docs
+      - npm run tap
     - stage: deploy
       node_js: 10
       script: npm run build

package.json

@@ -24,30 +24,26 @@
     "watch": "webpack --progress --colors --watch --watch-poll"
   },
   "devDependencies": {
-    "babel-core": "6.26.3",
-    "babel-eslint": "10.1.0",
-    "babel-loader": "7.1.5",
-    "babel-polyfill": "6.26.0",
-    "babel-preset-env": "1.7.0",
-    "copy-webpack-plugin": "4.6.0",
-    "docdash": "0.4.0",
-    "eslint": "7.31.0",
-    "eslint-config-scratch": "6.0.0",
-    "gh-pages": "1.2.0",
-    "jsdoc": "3.6.7",
-    "json": "10.0.0",
-    "playwright-chromium": "1.13.0",
-    "scratch-render-fonts": "1.0.0-prerelease.20210401210003",
+    "babel-core": "^6.23.1",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^7.1.4",
+    "babel-polyfill": "^6.22.0",
+    "babel-preset-env": "^1.6.1",
+    "copy-webpack-plugin": "^4.5.1",
+    "docdash": "^0.4.0",
+    "eslint": "^7.13.0",
+    "eslint-config-scratch": "^6.0.0",
+    "gh-pages": "^1.0.0",
+    "jsdoc": "^3.6.0",
+    "json": "^9.0.4",
+    "playwright-chromium": "^1.0.1",
     "scratch-vm": "0.2.0-prerelease.20201125065300",
-    "tap": "11.1.5",
-    "travis-after-all": "1.4.5",
-    "uglifyjs-webpack-plugin": "1.3.0",
-    "webpack": "4.46.0",
-    "webpack-cli": "3.3.12",
-    "webpack-dev-server": "3.11.2"
-  },
-  "peerDependencies": {
-    "scratch-render-fonts": "^1.0.0-prerelease"
+    "tap": "^11.0.0",
+    "travis-after-all": "^1.4.4",
+    "uglifyjs-webpack-plugin": "^1.2.5",
+    "webpack": "^4.8.0",
+    "webpack-cli": "^3.1.0",
+    "webpack-dev-server": "^3.1.4"
   },
   "dependencies": {
     "grapheme-breaker": "0.3.2",
@@ -57,7 +53,7 @@
     "minilog": "3.1.0",
     "raw-loader": "^0.5.1",
     "scratch-storage": "^1.0.0",
-    "scratch-svg-renderer": "0.2.0-prerelease.20210511195415",
+    "scratch-svg-renderer": "0.2.0-prerelease.20210317184701",
     "twgl.js": "4.4.0"
   }
 }

renovate.json5

@@ -1,16 +0,0 @@
-{
-  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-
-  "extends": [
-    "github>LLK/scratch-renovate-config:conservative"
-  ],
-
-  "packageRules": [
-    // Don't auto-merge scratch-vm since that will cause a never-ending cycle of dependency updates. Ideally, updating
-    // scratch-vm in scratch-render shouldn't make a scratch-render release. Once that's true we can remove this rule.
-    {
-      "matchPackageNames": ["scratch-vm"],
-      "automerge": false
-    }
-  ]
-}

src/RenderWebGL.js

@@ -139,6 +139,13 @@ class RenderWebGL extends EventEmitter {
             throw new Error('Could not get WebGL context: this browser or environment may not support WebGL.');
         }
 
+        this._mystery = {
+            modeActive: false,
+            mouseMoveListener: null,
+            bufferInfo: null,
+            mouseCoords: [0, 0]
+        };
+
         /** @type {RenderWebGL.UseGpuModes} */
         this._useGpuMode = RenderWebGL.UseGpuModes.Automatic;
 
@@ -242,6 +249,7 @@ class RenderWebGL extends EventEmitter {
     resize (pixelsWide, pixelsTall) {
         const {canvas} = this._gl;
         const pixelRatio = window.devicePixelRatio || 1;
+
         const newWidth = pixelsWide * pixelRatio;
         const newHeight = pixelsTall * pixelRatio;
 
@@ -250,10 +258,16 @@ class RenderWebGL extends EventEmitter {
         if (canvas.width !== newWidth || canvas.height !== newHeight) {
             canvas.width = newWidth;
             canvas.height = newHeight;
+            
+            if (this._mystery.modeActive && this._mystery.bufferInfo) {
+                twgl.resizeFramebufferInfo(this._gl, this._mystery.bufferInfo, [
+                    {format: this._gl.RGBA}
+                ], pixelsWide * pixelRatio, pixelsTall * pixelRatio);
+            }
+
             // Resizing the canvas causes it to be cleared, so redraw it.
             this.draw();
         }
-
     }
 
     /**
@@ -653,10 +667,43 @@ class RenderWebGL extends EventEmitter {
         gl.clearColor(...this._backgroundColor4f);
         gl.clear(gl.COLOR_BUFFER_BIT);
 
-        this._drawThese(this._drawList, ShaderManager.DRAW_MODE.default, this._projection, {
-            framebufferWidth: gl.canvas.width,
-            framebufferHeight: gl.canvas.height
-        });
+        let drawList = this._drawList;
+        if (this._mystery.modeActive) {
+            drawList = drawList.slice(1);
+            twgl.bindFramebufferInfo(gl, this._mystery.bufferInfo);
+            gl.clearColor(0, 0, 0, 0);
+            gl.clear(gl.COLOR_BUFFER_BIT);
+        }
+        this._drawThese(drawList, ShaderManager.DRAW_MODE.default, this._projection);
+
+        if (this._mystery.modeActive) {
+            // draw all layers except for the bottom layer onto the mystery buffer
+            twgl.bindFramebufferInfo(gl, null);
+            gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
+            this._drawThese([this._drawList[0]], ShaderManager.DRAW_MODE.default, this._projection);
+
+            this._doExitDrawRegion();
+            const newShader = this._shaderManager.getShader(ShaderManager.DRAW_MODE.mystery, 0);
+            this._regionId = newShader;
+
+            // draw mystery buffer to main buffer
+            gl.useProgram(newShader.program);
+            twgl.setBuffersAndAttributes(gl, newShader, this._bufferInfo);
+            const uniforms = {
+                u_projectionMatrix: this._projection,
+                u_modelMatrix: twgl.m4.identity(),
+                u_skin: this._mystery.bufferInfo.attachments[0],
+                u_mousePosition: this._mystery.mouseCoords
+            };
+
+            twgl.setTextureParameters(
+                gl, uniforms.u_skin, {minMag: gl.LINEAR}
+            );
+
+            twgl.setUniforms(newShader, uniforms);
+            twgl.drawBufferInfo(gl, this._bufferInfo, gl.TRIANGLES);
+        }
+
         if (this._snapshotCallbacks.length > 0) {
             const snapshot = gl.canvas.toDataURL();
             this._snapshotCallbacks.forEach(cb => cb(snapshot));
@@ -1135,6 +1182,114 @@ class RenderWebGL extends EventEmitter {
         return Number(hit);
     }
 
+    /**
+     * @typedef DrawableExtractionOld
+     * @property {Uint8Array} data Raw pixel data for the drawable
+     * @property {int} width Drawable bounding box width
+     * @property {int} height Drawable bounding box height
+     * @property {Array<number>} scratchOffset [x, y] offset in Scratch coordinates
+     * from the drawable position to the client x, y coordinate
+     * @property {int} x The x coordinate relative to drawable bounding box
+     * @property {int} y The y coordinate relative to drawable bounding box
+     */
+
+    /**
+     * Return drawable pixel data and picking coordinates relative to the drawable bounds
+     * @param {int} drawableID The ID of the drawable to get pixel data for
+     * @param {int} x The client x coordinate of the picking location.
+     * @param {int} y The client y coordinate of the picking location.
+     * @return {?DrawableExtractionOld} Data about the picked drawable
+     * @deprecated Use {@link extractDrawableScreenSpace} instead.
+     */
+    extractDrawable (drawableID, x, y) {
+        this._doExitDrawRegion();
+
+        const drawable = this._allDrawables[drawableID];
+        if (!drawable) return null;
+
+        // Convert client coordinates into absolute scratch units
+        const scratchX = this._nativeSize[0] * ((x / this._gl.canvas.clientWidth) - 0.5);
+        const scratchY = this._nativeSize[1] * ((y / this._gl.canvas.clientHeight) - 0.5);
+
+        const gl = this._gl;
+
+        const bounds = drawable.getFastBounds();
+        bounds.snapToInt();
+
+        // Set a reasonable max limit width and height for the bufferInfo bounds
+        const maxTextureSize = gl.getParameter(gl.MAX_TEXTURE_SIZE);
+        const clampedWidth = Math.min(2048, bounds.width, maxTextureSize);
+        const clampedHeight = Math.min(2048, bounds.height, maxTextureSize);
+
+        // Make a new bufferInfo since this._queryBufferInfo is limited to 480x360
+        const attachments = [
+            {format: gl.RGBA},
+            {format: gl.DEPTH_STENCIL}
+        ];
+        const bufferInfo = twgl.createFramebufferInfo(gl, attachments, clampedWidth, clampedHeight);
+
+        try {
+            // If the new bufferInfo is invalid, fall back to using the smaller _queryBufferInfo
+            twgl.bindFramebufferInfo(gl, bufferInfo);
+            if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) !== gl.FRAMEBUFFER_COMPLETE) {
+                twgl.bindFramebufferInfo(gl, this._queryBufferInfo);
+            }
+
+            // Translate to scratch units relative to the drawable
+            const pickX = scratchX - bounds.left;
+            const pickY = scratchY + bounds.top;
+
+            // Limit size of viewport to the bounds around the target Drawable,
+            // and create the projection matrix for the draw.
+            gl.viewport(0, 0, bounds.width, bounds.height);
+            const projection = twgl.m4.ortho(bounds.left, bounds.right, bounds.top, bounds.bottom, -1, 1);
+
+            gl.clearColor(0, 0, 0, 0);
+            gl.clear(gl.COLOR_BUFFER_BIT);
+            try {
+                gl.disable(gl.BLEND);
+                // ImageData objects store alpha un-premultiplied, so draw with the `straightAlpha` draw mode.
+                this._drawThese([drawableID], ShaderManager.DRAW_MODE.straightAlpha, projection,
+                    {effectMask: ~ShaderManager.EFFECT_INFO.ghost.mask});
+            } finally {
+                gl.enable(gl.BLEND);
+            }
+
+            const data = new Uint8Array(Math.floor(bounds.width * bounds.height * 4));
+            gl.readPixels(0, 0, bounds.width, bounds.height, gl.RGBA, gl.UNSIGNED_BYTE, data);
+
+            if (this._debugCanvas) {
+                this._debugCanvas.width = bounds.width;
+                this._debugCanvas.height = bounds.height;
+                const ctx = this._debugCanvas.getContext('2d');
+                const imageData = ctx.createImageData(bounds.width, bounds.height);
+                imageData.data.set(data);
+                ctx.putImageData(imageData, 0, 0);
+                ctx.beginPath();
+                ctx.arc(pickX, pickY, 3, 0, 2 * Math.PI, false);
+                ctx.fillStyle = 'white';
+                ctx.fill();
+                ctx.lineWidth = 1;
+                ctx.strokeStyle = 'black';
+                ctx.stroke();
+            }
+
+            return {
+                data: data,
+                width: bounds.width,
+                height: bounds.height,
+                scratchOffset: [
+                    -scratchX + drawable._position[0],
+                    -scratchY - drawable._position[1]
+                ],
+                x: pickX,
+                y: pickY
+            };
+        } finally {
+            gl.deleteFramebuffer(bufferInfo.framebuffer);
+        }
+    }
+
     /**
      * @typedef DrawableExtraction
      * @property {ImageData} data Raw pixel data for the drawable
@@ -1212,15 +1367,9 @@ class RenderWebGL extends EventEmitter {
 
             gl.clearColor(0, 0, 0, 0);
             gl.clear(gl.COLOR_BUFFER_BIT);
+            // Don't apply the ghost effect. TODO: is this an intentional design decision?
             this._drawThese([drawableID], ShaderManager.DRAW_MODE.straightAlpha, projection,
-                {
-                    // Don't apply the ghost effect. TODO: is this an intentional design decision?
-                    effectMask: ~ShaderManager.EFFECT_INFO.ghost.mask,
-                    // We're doing this in screen-space, so the framebuffer dimensions should be those of the canvas in
-                    // screen-space. This is used to ensure SVG skins are rendered at the proper resolution.
-                    framebufferWidth: canvas.width,
-                    framebufferHeight: canvas.height
-                });
+                {effectMask: ~ShaderManager.EFFECT_INFO.ghost.mask});
 
             const data = new Uint8Array(Math.floor(clampedWidth * clampedHeight * 4));
             gl.readPixels(0, 0, clampedWidth, clampedHeight, gl.RGBA, gl.UNSIGNED_BYTE, data);
@@ -1722,6 +1871,18 @@ class RenderWebGL extends EventEmitter {
         this._regionId = null;
     }
 
+    /**
+     * Get the screen-space scale of a drawable, as percentages of the drawable's "normal" size.
+     * @param {Drawable} drawable The drawable whose screen-space scale we're fetching.
+     * @returns {Array<number>} The screen-space X and Y dimensions of the drawable's scale, as percentages.
+     */
+    _getDrawableScreenSpaceScale (drawable) {
+        return [
+            drawable.scale[0] * this._gl.canvas.width / this._nativeSize[0],
+            drawable.scale[1] * this._gl.canvas.height / this._nativeSize[1]
+        ];
+    }
+
     /**
      * Draw a set of Drawables, by drawable ID
      * @param {Array<int>} drawables The Drawable IDs to draw, possibly this._drawList.
@@ -1732,8 +1893,6 @@ class RenderWebGL extends EventEmitter {
      * @param {object.<string,*>} opts.extraUniforms Extra uniforms for the shaders.
      * @param {int} opts.effectMask Bitmask for effects to allow
      * @param {boolean} opts.ignoreVisibility Draw all, despite visibility (e.g. stamping, touching color)
-     * @param {int} opts.framebufferWidth The width of the framebuffer being drawn onto. Defaults to "native" width
-     * @param {int} opts.framebufferHeight The height of the framebuffer being drawn onto. Defaults to "native" height
      * @private
      */
     _drawThese (drawables, drawMode, projection, opts = {}) {
@@ -1741,11 +1900,6 @@ class RenderWebGL extends EventEmitter {
         const gl = this._gl;
         let currentShader = null;
 
-        const framebufferSpaceScaleDiffers = (
-            'framebufferWidth' in opts && 'framebufferHeight' in opts &&
-            opts.framebufferWidth !== this._nativeSize[0] && opts.framebufferHeight !== this._nativeSize[1]
-        );
-
         const numDrawables = drawables.length;
         for (let drawableIndex = 0; drawableIndex < numDrawables; ++drawableIndex) {
             const drawableID = drawables[drawableIndex];
@@ -1760,13 +1914,8 @@ class RenderWebGL extends EventEmitter {
             // the ignoreVisibility flag is used (e.g. for stamping or touchingColor).
             if (!drawable.getVisible() && !opts.ignoreVisibility) continue;
 
-            // drawableScale is the "framebuffer-pixel-space" scale of the drawable, as percentages of the drawable's
-            // "native size" (so 100 = same as skin's "native size", 200 = twice "native size").
-            // If the framebuffer dimensions are the same as the stage's "native" size, there's no need to calculate it.
-            const drawableScale = framebufferSpaceScaleDiffers ? [
-                drawable.scale[0] * opts.framebufferWidth / this._nativeSize[0],
-                drawable.scale[1] * opts.framebufferHeight / this._nativeSize[1]
-            ] : drawable.scale;
+            // Combine drawable scale with the native vs. backing pixel ratio
+            const drawableScale = this._getDrawableScreenSpaceScale(drawable);
 
             // If the skin or texture isn't ready yet, skip it.
             if (!drawable.skin || !drawable.skin.getTexture(drawableScale)) continue;
@@ -1984,6 +2133,32 @@ class RenderWebGL extends EventEmitter {
         return dst;
     }
 
+    setMysteryMode (enableMysteryMode) {
+        this._mystery.modeActive = enableMysteryMode;
+
+        if (enableMysteryMode) {
+            this._mystery.bufferInfo = twgl.createFramebufferInfo(
+                this._gl,
+                [{format: this._gl.RGBA}],
+                this._gl.drawingBufferWidth,
+                this._gl.drawingBufferHeight
+            );
+
+            this._mystery.mouseMoveListener = event => {
+                const rect = this.canvas.getBoundingClientRect();
+                this._mystery.mouseCoords[0] = (event.clientX - rect.left) / rect.width;
+                this._mystery.mouseCoords[1] = (event.clientY - rect.top) / rect.height;
+            };
+
+            document.addEventListener('mousemove', this._mystery.mouseMoveListener);
+        } else {
+            if (this._mystery.bufferInfo) {
+                this._gl.deleteFramebuffer(this._mystery.bufferInfo.framebuffer);
+            }
+            document.removeEventListener('mousemove', this._mystery.mouseMoveListener);
+        }
+    }
+
     /**
      * @callback RenderWebGL#snapshotCallback
      * @param {string} dataURI Data URI of the snapshot of the renderer
@@ -1998,7 +2173,7 @@ class RenderWebGL extends EventEmitter {
 }
 
 // :3
-RenderWebGL.prototype.canHazPixels = RenderWebGL.prototype.extractDrawableScreenSpace;
+RenderWebGL.prototype.canHazPixels = RenderWebGL.prototype.extractDrawable;
 
 /**
  * Values for setUseGPU()

src/SVGSkin.js

@@ -1,7 +1,7 @@
 const twgl = require('twgl.js');
 
 const Skin = require('./Skin');
-const {loadSvgString, serializeSvgToString} = require('scratch-svg-renderer');
+const SvgRenderer = require('scratch-svg-renderer').SVGRenderer;
 const ShaderManager = require('./ShaderManager');
 
 const MAX_TEXTURE_DIMENSION = 2048;
@@ -28,20 +28,8 @@ class SVGSkin extends Skin {
         /** @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 {SvgRenderer} */
+        this._svgRenderer = new SvgRenderer();
 
         /** @type {Array<WebGLTexture>} */
         this._scaledMIPs = [];
@@ -68,7 +56,7 @@ class SVGSkin extends Skin {
      * @return {Array<number>} the natural size, in Scratch units, of this skin.
      */
     get size () {
-        return [this._size[0], this._size[1]];
+        return this._svgRenderer.size;
     }
 
     useNearest (scale, drawable) {
@@ -106,27 +94,18 @@ class SVGSkin extends Skin {
      * @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);
+        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 textureData = this._context.getImageData(0, 0, this._canvas.width, this._canvas.height);
+        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,
@@ -168,7 +147,7 @@ class SVGSkin extends Skin {
         // 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]) {
+        if (this._svgRenderer.loaded && !this._scaledMIPs[mipLevel]) {
             this._scaledMIPs[mipLevel] = this.createMIP(mipScale);
         }
 
@@ -177,6 +156,9 @@ class SVGSkin extends Skin {
 
     /**
      * Do a hard reset of the existing MIPs by deleting them.
+     * @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
      */
     resetMIPs () {
         this._scaledMIPs.forEach(oldMIP => this._renderer.gl.deleteTexture(oldMIP));
@@ -187,27 +169,17 @@ class SVGSkin extends Skin {
     /**
      * 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
+     * @param {Array<number>} [rotationCenter] - Optional rotation center for the SVG.
      */
     setSVG (svgData, rotationCenter) {
-        const svgTag = loadSvgString(svgData);
-        const svgText = serializeSvgToString(svgTag, true /* shouldInjectFonts */);
-        this._svgImageLoaded = false;
-
-        // If there is another load already in progress, replace the old onload to effectively cancel the old load
-        this._svgImage.onload = () => {
-            const {x, y, width, height} = svgTag.viewBox.baseVal;
-            this._size[0] = width;
-            this._size[1] = height;
-
-            if (width === 0 || height === 0) {
+        this._svgRenderer.loadSVG(svgData, false, () => {
+            const svgSize = this._svgRenderer.size;
+            if (svgSize[0] === 0 || svgSize[1] === 0) {
                 super.setEmptyImageData();
                 return;
             }
 
-            const maxDimension = Math.ceil(Math.max(width, height));
+            const maxDimension = Math.ceil(Math.max(this.size[0], this.size[1]));
             let testScale = 2;
             for (testScale; maxDimension * testScale <= MAX_TEXTURE_DIMENSION; testScale *= 2) {
                 this._maxTextureScale = testScale;
@@ -216,17 +188,12 @@ class SVGSkin extends Skin {
             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;
+            const viewOffset = this._svgRenderer.viewOffset;
+            this._rotationCenter[0] = rotationCenter[0] - viewOffset[0];
+            this._rotationCenter[1] = rotationCenter[1] - viewOffset[1];
 
             this.emit(Skin.Events.WasAltered);
-        };
-
-        this._svgImage.src = `data:image/svg+xml;utf8,${encodeURIComponent(svgText)}`;
+        });
     }
 
 }

src/ShaderManager.js

@@ -181,7 +181,9 @@ ShaderManager.DRAW_MODE = {
     /**
      * Draw the background in a certain color. Must sometimes be used instead of gl.clear.
      */
-    background: 'background'
+    background: 'background',
+
+    mystery: 'mystery'
 };
 
 module.exports = ShaderManager;

src/playground/playground.js

@@ -186,7 +186,7 @@ canvas.addEventListener('click', event => {
     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));
+        console.dir(renderer.extractDrawable(pickID, mousePos.x, mousePos.y));
     }
 });
 

src/shaders/sprite.frag

@@ -43,6 +43,10 @@ uniform float u_lineLength;
 uniform vec4 u_backgroundColor;
 #endif // DRAW_MODE_background
 
+#ifdef DRAW_MODE_mystery
+uniform vec2 u_mousePosition;
+#endif
+
 uniform sampler2D u_skin;
 
 #ifndef DRAW_MODE_background
@@ -118,6 +122,15 @@ void main()
 	#if !(defined(DRAW_MODE_line) || defined(DRAW_MODE_background))
 	vec2 texcoord0 = v_texCoord;
 
+	#ifdef DRAW_MODE_mystery
+	vec2 mysteryCoord = texcoord0;
+	vec2 offset = vec2(u_mousePosition.x, 1.0 - u_mousePosition.y);
+	mysteryCoord -= offset;
+	const float SCALE_FACTOR = 0.85;
+	mysteryCoord *= vec2(SCALE_FACTOR, SCALE_FACTOR);
+	mysteryCoord += offset;
+	#endif
+
 	#ifdef ENABLE_mosaic
 	texcoord0 = fract(u_mosaic * texcoord0);
 	#endif // ENABLE_mosaic
@@ -161,6 +174,21 @@ void main()
 
 	gl_FragColor = texture2D(u_skin, texcoord0);
 
+	#ifdef DRAW_MODE_mystery
+	const vec4 SHADOW_COLOR = vec4(0.0, 0.0, 0.0, 0.5);
+	const float SHADOW_BLUR = 0.0025;
+
+	float shadowSample1 = texture2D(u_skin, mysteryCoord + vec2(SHADOW_BLUR, SHADOW_BLUR)).a;
+	float shadowSample2 = texture2D(u_skin, mysteryCoord + vec2(-SHADOW_BLUR, SHADOW_BLUR)).a;
+	float shadowSample3 = texture2D(u_skin, mysteryCoord + vec2(SHADOW_BLUR, -SHADOW_BLUR)).a;
+	float shadowSample4 = texture2D(u_skin, mysteryCoord + vec2(-SHADOW_BLUR, -SHADOW_BLUR)).a;
+
+	float shadowAlpha = (shadowSample1 + shadowSample2 + shadowSample3 + shadowSample4) * 0.25;
+
+	vec4 shadow = SHADOW_COLOR * shadowAlpha;
+	gl_FragColor = gl_FragColor + (shadow * (1.0 - gl_FragColor.a));
+	#endif
+
 	#if defined(ENABLE_color) || defined(ENABLE_brightness)
 	// Divide premultiplied alpha values for proper color processing
 	// Add epsilon to avoid dividing by 0 for fully transparent pixels

src/shaders/sprite.vert

@@ -68,6 +68,9 @@ void main() {
 	gl_Position = vec4(position, 0, 1);
 	#elif defined(DRAW_MODE_background)
 	gl_Position = vec4(a_position * 2.0, 0, 1);
+	#elif defined(DRAW_MODE_mystery)
+	gl_Position = vec4(a_position * vec2(-2.0, 2.0), 0.0, 1.0);
+	v_texCoord = a_texCoord;
 	#else
 	gl_Position = u_projectionMatrix * u_modelMatrix * vec4(a_position, 0, 1);
 	v_texCoord = a_texCoord;

test/helper/page-util.js

@@ -14,7 +14,7 @@ window.waitForSVGSkinLoad = renderer => new Promise(resolve => {
         for (const skin of renderer._allSkins) {
             if (skin.constructor.name !== 'SVGSkin') continue;
             numSVGSkins++;
-            if (skin._svgImage.complete) numLoadedSVGSkins++;
+            if (skin._svgRenderer.loaded) numLoadedSVGSkins++;
         }
 
         if (numSVGSkins === numLoadedSVGSkins) {
@@ -47,7 +47,7 @@ window.initVM = render => {
 
     vm.attachStorage(storage);
     vm.attachRenderer(render);
-    vm.attachV2SVGAdapter(ScratchSVGRenderer.V2SVGAdapter);
+    vm.attachV2SVGAdapter(new ScratchSVGRenderer.SVGRenderer());
     vm.attachV2BitmapAdapter(new ScratchSVGRenderer.BitmapAdapter());
 
     return vm;