lab/video-sprites: quick fixes

extensions/lab/video-sprites.js

@@ -1,4 +1,4 @@
-// Name: Video sprites
+// Name: Video Sprites
 // ID: videoSprites
 // Description: Replace sprites with a live video feed. Compatible with Scratch Lab's Animated Text experiment.
 // By: Staevski_G <https://scratch.mit.edu/users/Staevski_G/>
@@ -115,7 +115,7 @@
    * @returns {boolean} true if a frame was drawn
    */
   const sampleVideoToWorkCanvas = (width, height, zoom) => {
     const videoCanvas = videoDevice.getFrame({
       format: "canvas",
     });
 
@@ -125,8 +125,7 @@
 
     const videoWidth = videoCanvas.width;
     const videoHeight = videoCanvas.height;
-    const upscaleFactor =
-      width > height ? videoWidth / width : videoHeight / height;
+    const upscaleFactor = Math.min(videoWidth / width, videoHeight / height);
     const zoomFactor = zoom / 100;
     const cropWidth = (width * upscaleFactor) / zoomFactor;
     const cropHeight = (height * upscaleFactor) / zoomFactor;
@@ -186,8 +185,11 @@
       /** @type {import('scratch-vm').Target} */
       this.target = target;
 
-      /** @type {boolean} */
-      this._useParentTexture = false;
+      /**
+       * Cached image data to reduce unnecessary allocations
+       * @type {Uint8ClampedArray|null}
+       */
+      this._outData = null;
     }
 
     dispose() {
@@ -206,11 +208,7 @@
       return renderer._allSkins[costume.skinId] || null;
     }
 
-    _renderAsParent() {
-      this._useParentTexture = true;
-    }
-
     get size() {
       const parent = this._getParentSkin();
       return parent ? parent.size : [0, 0];
     }
@@ -228,47 +226,35 @@
     updateSilhouette(scale) {
       const parent = this._getParentSkin();
       if (parent) {
         parent.updateSilhouette(scale);
         this._silhouette = parent._silhouette;
       }
     }
 
+    _getParentTexture(scale) {
+      return (
+        this._getParentSkin()?.getTexture(scale) || super.getTexture(scale)
+      );
+    }
+
     getTexture(scale) {
-      // Re-render the parent at current scale so that we can get the most accurate silhouette
+      const parentTexture = this._getParentTexture(scale);
       const parent = this._getParentSkin();
-      const parentTexture = parent?.getTexture(scale);
-
-      this._render();
 
-      if (parent && this._useParentTexture) {
-        return parentTexture;
-      }
-      return this._texture || super.getTexture(scale);
-    }
-
-    _render() {
       const state = getState(this.target);
-      if (!state) {
-        this._renderAsParent();
-        return;
-      }
-
-      const parent = this._getParentSkin();
-      if (!parent) {
-        this._renderAsParent();
-        return;
+      if (!state || !parent) {
+        return parentTexture;
       }
 
-      parent.updateSilhouette();
+      parent.updateSilhouette(scale);
       const silhouette = parent._silhouette;
       this._silhouette = silhouette;
 
-      const silhouetteData = silhouette._colorData;
-      const width = silhouette._width;
-      const height = silhouette._height;
+      const silhouetteData = silhouette?._colorData;
+      const width = silhouette?._width;
+      const height = silhouette?._height;
       if (!width || !height || !silhouetteData) {
-        this._renderAsParent();
-        return;
+        return parentTexture;
       }
 
       if (workCanvas.width !== width || workCanvas.height !== height) {
@@ -277,26 +263,31 @@
       }
 
       if (!sampleVideoToWorkCanvas(width, height, state.zoom)) {
-        this._useParentTexture = true;
-        return;
+        return parentTexture;
       }
 
-      this._useParentTexture = false;
-
       const sampledVideoData = workContext.getImageData(
         0,
         0,
         width,
         height
       ).data;
-      const outData = new Uint8ClampedArray(silhouetteData.length);
+
+      if (!this._outData || this._outData.length !== silhouetteData.length) {
+        this._outData = new Uint8ClampedArray(silhouetteData.length);
+      }
+      const outData = this._outData;
 
       const isMask = state.mode === "mask";
       const maskColor = state.maskColor;
 
       for (let i = 0; i < silhouetteData.length; i += 4) {
         const parentA = silhouetteData[i + 3];
         if (parentA === 0) {
+          outData[i] = 0;
+          outData[i + 1] = 0;
+          outData[i + 2] = 0;
+          outData[i + 3] = 0;
           continue;
         }
 
@@ -329,7 +320,7 @@
       }
 
       if (!this._texture) {
         this._texture = twgl.createTexture(gl, {
           auto: false,
           wrap: gl.CLAMP_TO_EDGE,
         });
@@ -344,9 +335,11 @@
         gl.RGBA,
         gl.RGBA,
         gl.UNSIGNED_BYTE,
         new ImageData(outData, width, height)
       );
       gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
+
+      return this._texture;
     }
   }
 
@@ -358,7 +351,7 @@
     if (!state.skin) {
       const id = renderer._nextSkinId++;
       state.skin = new VideoSpriteSkin(id, target);
       renderer._allSkins[id] = state.skin;
     }
 
     renderer.updateDrawableSkinId(target.drawableID, state.skin.id);
@@ -401,10 +394,10 @@
   let hidPreview = false;
   const ensureCamera = async () => {
     try {
       await videoDevice.enableVideo();
       if (!hidPreview) {
         hidPreview = true;
         videoDevice.setPreviewGhost(100);
       }
       return true;
     } catch (error) {
@@ -425,7 +418,7 @@
 
       // If another script override the costume, switch it back to the video sprite one.
       const drawable = renderer._allDrawables[target.drawableID];
       if (drawable && drawable.skin !== skin) {
         renderer.updateDrawableSkinId(target.drawableID, skin.id);
       }