fix(package): update twgl.js to version 4.11.3

Closes #352

package.json

@@ -54,6 +54,6 @@
     "raw-loader": "^0.5.1",
     "scratch-storage": "^1.0.0",
     "scratch-svg-renderer": "0.2.0-prerelease.20190822202608",
-    "twgl.js": "4.4.0"
+    "twgl.js": "4.11.3"
   }
 }

src/Drawable.js

@@ -183,56 +183,99 @@ class Drawable {
         return this._visible;
     }
 
+    /**
+     * Update the position if it is different. Marks the transform as dirty.
+     * @param {Array.<number>} position A new position.
+     */
+    updatePosition (position) {
+        if (this._position[0] !== position[0] ||
+            this._position[1] !== position[1]) {
+            this._position[0] = Math.round(position[0]);
+            this._position[1] = Math.round(position[1]);
+            this.setTransformDirty();
+        }
+    }
+
+    /**
+     * Update the direction if it is different. Marks the transform as dirty.
+     * @param {number} direction A new direction.
+     */
+    updateDirection (direction) {
+        if (this._direction !== direction) {
+            this._direction = direction;
+            this._rotationTransformDirty = true;
+            this.setTransformDirty();
+        }
+    }
+
+    /**
+     * Update the scale if it is different. Marks the transform as dirty.
+     * @param {Array.<number>} scale A new scale.
+     */
+    updateScale (scale) {
+        if (this._scale[0] !== scale[0] ||
+            this._scale[1] !== scale[1]) {
+            this._scale[0] = scale[0];
+            this._scale[1] = scale[1];
+            this._rotationCenterDirty = true;
+            this._skinScaleDirty = true;
+            this.setTransformDirty();
+        }
+    }
+
+    /**
+     * Update visibility if it is different. Marks the convex hull as dirty.
+     * @param {boolean} visible A new visibility state.
+     */
+    updateVisible (visible) {
+        if (this._visible !== visible) {
+            this._visible = visible;
+            this.setConvexHullDirty();
+        }
+    }
+
+    /**
+     * Update an effect. Marks the convex hull as dirty if the effect changes shape.
+     * @param {string} effectName The name of the effect.
+     * @param {number} rawValue A new effect value.
+     */
+    updateEffect (effectName, rawValue) {
+        const effectInfo = ShaderManager.EFFECT_INFO[effectName];
+        if (rawValue) {
+            this._effectBits |= effectInfo.mask;
+        } else {
+            this._effectBits &= ~effectInfo.mask;
+        }
+        const converter = effectInfo.converter;
+        this._uniforms[effectInfo.uniformName] = converter(rawValue);
+        if (effectInfo.shapeChanges) {
+            this.setConvexHullDirty();
+        }
+    }
+
     /**
      * Update the position, direction, scale, or effect properties of this Drawable.
+     * @deprecated Use specific update* methods instead.
      * @param {object.<string,*>} properties The new property values to set.
      */
     updateProperties (properties) {
-        let dirty = false;
-        if ('position' in properties && (
-            this._position[0] !== properties.position[0] ||
-            this._position[1] !== properties.position[1])) {
-            this._position[0] = Math.round(properties.position[0]);
-            this._position[1] = Math.round(properties.position[1]);
-            dirty = true;
+        if ('position' in properties) {
+            this.updatePosition(properties.position);
         }
-        if ('direction' in properties && this._direction !== properties.direction) {
-            this._direction = properties.direction;
-            this._rotationTransformDirty = true;
-            dirty = true;
+        if ('direction' in properties) {
+            this.updateDirection(properties.direction);
         }
-        if ('scale' in properties && (
-            this._scale[0] !== properties.scale[0] ||
-            this._scale[1] !== properties.scale[1])) {
-            this._scale[0] = properties.scale[0];
-            this._scale[1] = properties.scale[1];
-            this._rotationCenterDirty = true;
-            this._skinScaleDirty = true;
-            dirty = true;
+        if ('scale' in properties) {
+            this.updateScale(properties.scale);
         }
         if ('visible' in properties) {
-            this._visible = properties.visible;
-            this.setConvexHullDirty();
-        }
-        if (dirty) {
-            this.setTransformDirty();
+            this.updateVisible(properties.visible);
         }
         const numEffects = ShaderManager.EFFECTS.length;
         for (let index = 0; index < numEffects; ++index) {
             const effectName = ShaderManager.EFFECTS[index];
             if (effectName in properties) {
-                const rawValue = properties[effectName];
-                const effectInfo = ShaderManager.EFFECT_INFO[effectName];
-                if (rawValue) {
-                    this._effectBits |= effectInfo.mask;
-                } else {
-                    this._effectBits &= ~effectInfo.mask;
-                }
-                const converter = effectInfo.converter;
-                this._uniforms[effectInfo.uniformName] = converter(rawValue);
-                if (effectInfo.shapeChanges) {
-                    this.setConvexHullDirty();
-                }
+                this.updateEffect(effectName, properties[effectName]);
             }
         }
     }
@@ -530,7 +573,6 @@ class Drawable {
      * @return {!Rectangle} Bounds for the Drawable.
      */
     getFastBounds (result) {
-        this.updateMatrix();
         if (!this.needsConvexHullPoints()) {
             return this.getBounds(result);
         }

src/PenSkin.js

@@ -332,8 +332,7 @@ class PenSkin extends Skin {
 
         const uniforms = {
             u_skin: this._texture,
-            u_projectionMatrix: projection,
-            u_fudge: 0
+            u_projectionMatrix: projection
         };
 
         twgl.setUniforms(currentShader, uniforms);
@@ -474,8 +473,7 @@ class PenSkin extends Skin {
                     0
                 ), __modelScalingMatrix),
                 __modelMatrix
-            ),
-            u_fudge: 0
+            )
         };
 
         twgl.setTextureParameters(gl, texture, {minMag: gl.NEAREST});

src/RenderWebGL.js

@@ -1314,9 +1314,122 @@ class RenderWebGL extends EventEmitter {
         }, null);
     }
 
+    /**
+     * Update a drawable's skin.
+     * @param {number} drawableID The drawable's id.
+     * @param {number} skinId The skin to update to.
+     */
+    updateDrawableSkinId (drawableID, skinId) {
+        const drawable = this._allDrawables[drawableID];
+        // TODO: https://github.com/LLK/scratch-vm/issues/2288
+        if (!drawable) return;
+        drawable.skin = this._allSkins[skinId];
+    }
+
+    /**
+     * Update a drawable's skin rotation center.
+     * @param {number} drawableID The drawable's id.
+     * @param {Array.<number>} rotationCenter The rotation center for the skin.
+     */
+    updateDrawableRotationCenter (drawableID, rotationCenter) {
+        const drawable = this._allDrawables[drawableID];
+        // TODO: https://github.com/LLK/scratch-vm/issues/2288
+        if (!drawable) return;
+        drawable.skin.setRotationCenter(rotationCenter[0], rotationCenter[1]);
+    }
+
+    /**
+     * Update a drawable's skin and rotation center together.
+     * @param {number} drawableID The drawable's id.
+     * @param {number} skinId The skin to update to.
+     * @param {Array.<number>} rotationCenter The rotation center for the skin.
+     */
+    updateDrawableSkinIdRotationCenter (drawableID, skinId, rotationCenter) {
+        const drawable = this._allDrawables[drawableID];
+        // TODO: https://github.com/LLK/scratch-vm/issues/2288
+        if (!drawable) return;
+        drawable.skin = this._allSkins[skinId];
+        drawable.skin.setRotationCenter(rotationCenter[0], rotationCenter[1]);
+    }
+
+    /**
+     * Update a drawable's position.
+     * @param {number} drawableID The drawable's id.
+     * @param {Array.<number>} position The new position.
+     */
+    updateDrawablePosition (drawableID, position) {
+        const drawable = this._allDrawables[drawableID];
+        // TODO: https://github.com/LLK/scratch-vm/issues/2288
+        if (!drawable) return;
+        drawable.updatePosition(position);
+    }
+
+    /**
+     * Update a drawable's direction.
+     * @param {number} drawableID The drawable's id.
+     * @param {number} direction A new direction.
+     */
+    updateDrawableDirection (drawableID, direction) {
+        const drawable = this._allDrawables[drawableID];
+        // TODO: https://github.com/LLK/scratch-vm/issues/2288
+        if (!drawable) return;
+        drawable.updateDirection(direction);
+    }
+
+    /**
+     * Update a drawable's scale.
+     * @param {number} drawableID The drawable's id.
+     * @param {Array.<number>} scale A new scale.
+     */
+    updateDrawableScale (drawableID, scale) {
+        const drawable = this._allDrawables[drawableID];
+        // TODO: https://github.com/LLK/scratch-vm/issues/2288
+        if (!drawable) return;
+        drawable.updateScale(scale);
+    }
+
+    /**
+     * Update a drawable's direction and scale together.
+     * @param {number} drawableID The drawable's id.
+     * @param {number} direction A new direction.
+     * @param {Array.<number>} scale A new scale.
+     */
+    updateDrawableDirectionScale (drawableID, direction, scale) {
+        const drawable = this._allDrawables[drawableID];
+        // TODO: https://github.com/LLK/scratch-vm/issues/2288
+        if (!drawable) return;
+        drawable.updateDirection(direction);
+        drawable.updateScale(scale);
+    }
+
+    /**
+     * Update a drawable's visibility.
+     * @param {number} drawableID The drawable's id.
+     * @param {boolean} visible Will the drawable be visible?
+     */
+    updateDrawableVisible (drawableID, visible) {
+        const drawable = this._allDrawables[drawableID];
+        // TODO: https://github.com/LLK/scratch-vm/issues/2288
+        if (!drawable) return;
+        drawable.updateVisible(visible);
+    }
+
+    /**
+     * Update a drawable's visual effect.
+     * @param {number} drawableID The drawable's id.
+     * @param {string} effectName The effect to change.
+     * @param {number} value A new effect value.
+     */
+    updateDrawableEffect (drawableID, effectName, value) {
+        const drawable = this._allDrawables[drawableID];
+        // TODO: https://github.com/LLK/scratch-vm/issues/2288
+        if (!drawable) return;
+        drawable.updateEffect(effectName, value);
+    }
 
     /**
      * Update the position, direction, scale, or effect properties of this Drawable.
+     * @deprecated Use specific updateDrawable* methods instead.
      * @param {int} drawableID The ID of the Drawable to update.
      * @param {object.<string,*>} properties The new property values to set.
      */
@@ -1324,17 +1437,16 @@ class RenderWebGL extends EventEmitter {
         const drawable = this._allDrawables[drawableID];
         if (!drawable) {
             /**
-             * @todo fix whatever's wrong in the VM which causes this, then add a warning or throw here.
+             * @todo(https://github.com/LLK/scratch-vm/issues/2288) fix whatever's wrong in the VM which causes this, then add a warning or throw here.
              * Right now this happens so much on some projects that a warning or exception here can hang the browser.
              */
             return;
         }
         if ('skinId' in properties) {
-            drawable.skin = this._allSkins[properties.skinId];
+            this.updateDrawableSkinId(drawableID, properties.skinId);
         }
         if ('rotationCenter' in properties) {
-            const newRotationCenter = properties.rotationCenter;
-            drawable.skin.setRotationCenter(newRotationCenter[0], newRotationCenter[1]);
+            this.updateDrawableRotationCenter(drawableID, properties.rotationCenter);
         }
         drawable.updateProperties(properties);
     }
@@ -1351,7 +1463,7 @@ class RenderWebGL extends EventEmitter {
 
         const drawable = this._allDrawables[drawableID];
         if (!drawable) {
-            // TODO: fix whatever's wrong in the VM which causes this, then add a warning or throw here.
+            // @todo(https://github.com/LLK/scratch-vm/issues/2288) fix whatever's wrong in the VM which causes this, then add a warning or throw here.
             // Right now this happens so much on some projects that a warning or exception here can hang the browser.
             return [x, y];
         }
@@ -1608,8 +1720,7 @@ class RenderWebGL extends EventEmitter {
                 gl.useProgram(currentShader.program);
                 twgl.setBuffersAndAttributes(gl, currentShader, this._bufferInfo);
                 Object.assign(uniforms, {
-                    u_projectionMatrix: projection,
-                    u_fudge: window.fudge || 0
+                    u_projectionMatrix: projection
                 });
             }
 

src/shaders/sprite.frag

@@ -1,7 +1,5 @@
 precision mediump float;
 
-uniform float u_fudge;
-
 #ifdef DRAW_MODE_silhouette
 uniform vec4 u_silhouetteColor;
 #else // DRAW_MODE_silhouette