chore(package): update scratch-vm to version 0.2.0-prerelease.20200402182733

Closes #560

package.json

@@ -37,7 +37,7 @@
     "gh-pages": "^1.0.0",
     "jsdoc": "^3.5.5",
     "json": "^9.0.4",
-    "scratch-vm": "0.2.0-prerelease.20191227164934",
+    "scratch-vm": "0.2.0-prerelease.20200402182733",
     "tap": "^11.0.0",
     "travis-after-all": "^1.4.4",
     "uglifyjs-webpack-plugin": "^1.2.5",
@@ -53,7 +53,7 @@
     "minilog": "3.1.0",
     "raw-loader": "^0.5.1",
     "scratch-storage": "^1.0.0",
-    "scratch-svg-renderer": "0.2.0-prerelease.20200507183648",
+    "scratch-svg-renderer": "0.2.0-prerelease.20200205003400",
     "twgl.js": "4.4.0"
   }
 }

src/BitmapSkin.js

@@ -56,6 +56,16 @@ class BitmapSkin extends Skin {
         return this._texture || super.getTexture();
     }
 
+    /**
+     * 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 for bitmaps.
+     */
+    getFenceBounds (drawable, result) {
+        return drawable.getAABB(result);
+    }
+
     /**
      * 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.

src/RenderWebGL.js

@@ -220,20 +220,9 @@ class RenderWebGL extends EventEmitter {
      * @param {int} pixelsTall The desired height in device-independent pixels.
      */
     resize (pixelsWide, pixelsTall) {
-        const {canvas} = this._gl;
         const pixelRatio = window.devicePixelRatio || 1;
-        const newWidth = pixelsWide * pixelRatio;
-        const newHeight = pixelsTall * pixelRatio;
-
-        // Certain operations, such as moving the color picker, call `resize` once per frame, even though the canvas
-        // size doesn't change. To avoid unnecessary canvas updates, check that we *really* need to resize the canvas.
-        if (canvas.width !== newWidth || canvas.height !== newHeight) {
-            canvas.width = newWidth;
-            canvas.height = newHeight;
-            // Resizing the canvas causes it to be cleared, so redraw it.
-            this.draw();
-        }
-
+        this._gl.canvas.width = pixelsWide * pixelRatio;
+        this._gl.canvas.height = pixelsTall * pixelRatio;
     }
 
     /**
@@ -1765,16 +1754,14 @@ class RenderWebGL extends EventEmitter {
 
     /**
      * Get the convex hull points for a particular Drawable.
-     * To do this, calculate it based on the drawable's Silhouette.
+     * To do this, draw the Drawable unrotated, unscaled, and untranslated.
+     * Read back the pixels and find all boundary points.
+     * Finally, apply a convex hull algorithm to simplify the set.
      * @param {int} drawableID The Drawable IDs calculate convex hull for.
      * @return {Array<Array<number>>} points Convex hull points, as [[x, y], ...]
      */
     _getConvexHullPointsForDrawable (drawableID) {
         const drawable = this._allDrawables[drawableID];
-
-        drawable.updateMatrix();
-        drawable.skin.updateSilhouette(this._getDrawableScreenSpaceScale(drawable));
-
         const [width, height] = drawable.skin.size;
         // No points in the hull if invisible or size is 0.
         if (!drawable.getVisible() || width === 0 || height === 0) {
@@ -1782,120 +1769,110 @@ class RenderWebGL extends EventEmitter {
         }
 
         /**
-         * Return the determinant of two vectors, the vector from A to B and the vector from A to C.
+         * Return the determinant of two vectors, the vector from A to B and
+         * the vector from A to C.
          *
-         * The determinant is useful in this case to know if AC is counter-clockwise from AB.
-         * A positive value means that AC is counter-clockwise from AB. A negative value means AC is clockwise from AB.
+         * The determinant is useful in this case to know if AC is counter
+         * clockwise from AB. A positive value means the AC is counter
+         * clockwise from AC. A negative value menas AC is clockwise from AB.
          *
          * @param {Float32Array} A A 2d vector in space.
          * @param {Float32Array} B A 2d vector in space.
          * @param {Float32Array} C A 2d vector in space.
-         * @return {number} Greater than 0 if counter clockwise, less than if clockwise, 0 if all points are on a line.
+         * @return {number} Greater than 0 if counter clockwise, less than if
+         * clockwise, 0 if all points are on a line.
          */
-        const determinant = function (A, B, C) {
+        const CCW = function (A, B, C) {
             // AB = B - A
             // AC = C - A
             // det (AB BC) = AB0 * AC1 - AB1 * AC0
             return (((B[0] - A[0]) * (C[1] - A[1])) - ((B[1] - A[1]) * (C[0] - A[0])));
         };
 
-        // This algorithm for calculating the convex hull somewhat resembles the monotone chain algorithm.
-        // The main difference is that instead of sorting the points by x-coordinate, and y-coordinate in case of ties,
-        // it goes through them by y-coordinate in the outer loop and x-coordinate in the inner loop.
-        // This gives us "left" and "right" hulls, whereas the monotone chain algorithm gives "top" and "bottom" hulls.
-        // Adapted from https://github.com/LLK/scratch-flash/blob/dcbeeb59d44c3be911545dfe54d46a32404f8e69/src/scratch/ScratchCostume.as#L369-L413
-
-        const leftHull = [];
-        const rightHull = [];
-
-        // While convex hull algorithms usually push and pop values from the list of hull points,
-        // here, we keep indices for the "last" point in each array. Any points past these indices are ignored.
-        // This is functionally equivalent to pushing and popping from a "stack" of hull points.
-        let leftEndPointIndex = -1;
-        let rightEndPointIndex = -1;
-
+        // https://github.com/LLK/scratch-flash/blob/dcbeeb59d44c3be911545dfe54d
+        // 46a32404f8e69/src/scratch/ScratchCostume.as#L369-L413 Following
+        // RasterHull creation, compare and store left and right values that
+        // maintain a convex shape until that data can be passed to `hull` for
+        // further work.
+        const L = [];
+        const R = [];
         const _pixelPos = twgl.v3.create();
         const _effectPos = twgl.v3.create();
-
-        let currentPoint;
-
-        // *Not* Scratch Space-- +y is bottom
-        // Loop over all rows of pixels, starting at the top
+        let ll = -1;
+        let rr = -1;
+        let Q;
         for (let y = 0; y < height; y++) {
             _pixelPos[1] = y / height;
-
-            // We start at the leftmost point, then go rightwards until we hit an opaque pixel
+            // Scan from left to right, looking for a touchable spot in the
+            // skin.
             let x = 0;
             for (; x < width; x++) {
                 _pixelPos[0] = x / width;
                 EffectTransform.transformPoint(drawable, _pixelPos, _effectPos);
                 if (drawable.skin.isTouchingLinear(_effectPos)) {
-                    currentPoint = [x, y];
+                    Q = [x, y];
                     break;
                 }
             }
-
-            // If we managed to loop all the way through, there are no opaque pixels on this row. Go to the next one
+            // If x is equal to the width there are no touchable points in the
+            // skin. Nothing we can add to L. And looping for R would find the
+            // same thing.
             if (x >= width) {
                 continue;
             }
-
-            // Because leftEndPointIndex is initialized to -1, this is skipped for the first two rows.
-            // It runs only when there are enough points in the left hull to make at least one line.
-            // If appending the current point to the left hull makes a counter-clockwise turn,
-            // we want to append the current point. Otherwise, we decrement the index of the "last" hull point until the
-            // current point makes a counter-clockwise turn.
-            // This decrementing has the same effect as popping from the point list, but is hopefully faster.
-            while (leftEndPointIndex > 0) {
-                if (determinant(leftHull[leftEndPointIndex], leftHull[leftEndPointIndex - 1], currentPoint) > 0) {
+            // Decrement ll until Q is clockwise (CCW returns negative) from the
+            // last two points in L.
+            while (ll > 0) {
+                if (CCW(L[ll - 1], L[ll], Q) < 0) {
                     break;
                 } else {
-                    // leftHull.pop();
-                    --leftEndPointIndex;
+                    --ll;
                 }
             }
+            // Increment ll and then set L[ll] to Q. If ll was -1 before this
+            // line, this will set L[0] to Q. If ll was 0 before this line, this
+            // will set L[1] to Q.
+            L[++ll] = Q;
 
-            // This has the same effect as pushing to the point list.
-            // This "list head pointer" coding style leaves excess points dangling at the end of the list,
-            // but that doesn't matter; we simply won't copy them over to the final hull.
-
-            // leftHull.push(currentPoint);
-            leftHull[++leftEndPointIndex] = currentPoint;
-
-            // Now we repeat the process for the right side, looking leftwards for a pixel.
+            // Scan from right to left, looking for a touchable spot in the
+            // skin.
             for (x = width - 1; x >= 0; x--) {
                 _pixelPos[0] = x / width;
                 EffectTransform.transformPoint(drawable, _pixelPos, _effectPos);
                 if (drawable.skin.isTouchingLinear(_effectPos)) {
-                    currentPoint = [x, y];
+                    Q = [x, y];
                     break;
                 }
             }
-
-            // Because we're coming at this from the right, it goes clockwise this time.
-            while (rightEndPointIndex > 0) {
-                if (determinant(rightHull[rightEndPointIndex], rightHull[rightEndPointIndex - 1], currentPoint) < 0) {
+            // Decrement rr until Q is counter clockwise (CCW returns positive)
+            // from the last two points in L. L takes clockwise points and R
+            // takes counter clockwise points. if y was decremented instead of
+            // incremented R would take clockwise points. We are going in the
+            // right direction for L and the wrong direction for R, so we
+            // compare the opposite value for R from L.
+            while (rr > 0) {
+                if (CCW(R[rr - 1], R[rr], Q) > 0) {
                     break;
                 } else {
-                    --rightEndPointIndex;
+                    --rr;
                 }
             }
-
-            rightHull[++rightEndPointIndex] = currentPoint;
+            // Increment rr and then set R[rr] to Q.
+            R[++rr] = Q;
         }
 
-        // Start off "hullPoints" with the left hull points.
-        const hullPoints = leftHull;
-        // This is where we get rid of those dangling extra points.
-        hullPoints.length = leftEndPointIndex + 1;
-        // Add points from the right side in reverse order so all points are ordered clockwise.
-        for (let j = rightEndPointIndex; j >= 0; --j) {
-            hullPoints.push(rightHull[j]);
+        // Known boundary points on left/right edges of pixels.
+        const boundaryPoints = L;
+        // Truncate boundaryPoints to the index of the last added Q to L. L may
+        // have more entries than the index for the last Q.
+        boundaryPoints.length = ll + 1;
+        // Add points in R to boundaryPoints in reverse so all points in
+        // boundaryPoints are clockwise from each other.
+        for (let j = rr; j >= 0; --j) {
+            boundaryPoints.push(R[j]);
         }
-
-        // Simplify boundary points using hull.js.
-        // TODO: Remove this; this algorithm already generates convex hulls.
-        return hull(hullPoints, Infinity);
+        // Simplify boundary points using convex hull.
+        return hull(boundaryPoints, Infinity);
     }
 
     /**

src/Skin.js

@@ -143,10 +143,10 @@ class Skin extends EventEmitter {
      * 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.
+     * @return {!Rectangle} The drawable's bounds.
      */
     getFenceBounds (drawable, result) {
-        return drawable.getAABB(result);
+        return drawable.getFastBounds(result);
     }
 
     /**

src/shaders/sprite.frag

@@ -214,34 +214,20 @@ void main()
 	// Un-premultiply alpha.
 	gl_FragColor.rgb /= gl_FragColor.a + epsilon;
 	#endif
-
+  
 	#else // DRAW_MODE_line
 	// Maaaaagic antialiased-line-with-round-caps shader.
 	// Adapted from Inigo Quilez' 2D distance function cheat sheet
 	// https://www.iquilezles.org/www/articles/distfunctions2d/distfunctions2d.htm
 
-	// On (some?) devices with 16-bit float precision, sufficiently long lines will overflow the float's range.
-	// Avoid this by scaling these problematic values down to fit within (-1, 1) then scaling them back up later.
-	// TODO: Is this a problem on all drivers with 16-bit mediump floats, or just Mali?
-	vec2 pointDiff = abs(u_penPoints.zw - u_penPoints.xy);
-	float FLOAT_SCALING_INVERSE = max(1.0, max(pointDiff.x, pointDiff.y));
-	float FLOAT_SCALING = 1.0 / FLOAT_SCALING_INVERSE;
-
 	// The xy component of u_penPoints is the first point; the zw is the second point.
 	// This is done to minimize the number of gl.uniform calls, which can add up.
-	// vec2 pa = v_texCoord - u_penPoints.xy, ba = u_penPoints.zw - u_penPoints.xy;
-	vec2 pa = (v_texCoord - u_penPoints.xy) * FLOAT_SCALING, ba = (u_penPoints.zw - u_penPoints.xy) * FLOAT_SCALING;
-
-	// Avoid division by zero
-	float baDot = dot(ba, ba);
-	// the dot product of a vector and itself is always positive
-	baDot = max(baDot, epsilon);
-
+	vec2 pa = v_texCoord - u_penPoints.xy, ba = u_penPoints.zw - u_penPoints.xy;
 	// Magnitude of vector projection of this fragment onto the line (both relative to the line's start point).
 	// This results in a "linear gradient" which goes from 0.0 at the start point to 1.0 at the end point.
-	float projMagnitude = clamp(dot(pa, ba) / baDot, 0.0, 1.0);
+	float projMagnitude = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0);
 
-	float lineDistance = length(pa - (ba * projMagnitude)) * FLOAT_SCALING_INVERSE;
+	float lineDistance = length(pa - (ba * projMagnitude));
 
 	// The distance to the line allows us to create lines of any thickness.
 	// Instead of checking whether this fragment's distance < the line thickness,

src/shaders/sprite.vert

@@ -40,13 +40,7 @@ void main() {
 	position -= expandedRadius;
 
 	// Rotate quad to line angle
-	vec2 pointDiff = u_penPoints.zw - u_penPoints.xy;
-	// Ensure line has a nonzero length so it's rendered properly
-	// As long as either component is nonzero, the line length will be nonzero
-	pointDiff.x = abs(pointDiff.x) < epsilon ? epsilon : pointDiff.x;
-	// The `normalized` vector holds rotational values equivalent to sine/cosine
-	// We're applying the standard rotation matrix formula to the position to rotate the quad to the line angle
-	vec2 normalized = pointDiff / max(lineLength, epsilon);
+	vec2 normalized = (u_penPoints.zw - u_penPoints.xy + epsilon) / (lineLength + epsilon);
 	position = mat2(normalized.x, normalized.y, -normalized.y, normalized.x) * position;
 	// Translate quad
 	position += u_penPoints.xy;