Merge pull request #159 from Ragzouken/video-perf

don't bother using screen blending over black bg
Ragzouken · Nov 13, 2023 · 1ccd873 · 1ccd873
2 parents 5ac4b54 + c4ad90c
commit 1ccd873
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 68 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/client/scene.ts b/src/client/scene.ts
@@ -120,37 +120,6 @@ export class SceneRenderer extends EventEmitter {
             context.fillRect(0, 0, renderer.width, renderer.height);
             context.drawImage(image, inset, inset, 128 * scale, 128 * scale);
 
-            context.save();
-            context.translate(margin, margin);
-            context.scale(scale, scale);
-
-            const prepareAvatar = (user: UserState, ghost: boolean) => {
-                if (!user.position) return;
-
-                let [r, g, b] = [255, 255, 255];
-
-                if (user.emotes && user.emotes.includes('rbw')) {
-                    const h = Math.abs(Math.sin(performance.now() / 600 - user.position![0] / 8));
-                    [r, g, b] = hslToRgb(h, 1, 0.5);
-                    r = Math.round(r);
-                    g = Math.round(g);
-                    b = Math.round(b);
-                }
-
-                pairs.push({
-                    canvas: this.getTile(user.avatar).canvas,
-                    color: `rgb(${r} ${g} ${b})`,
-                    callback: (i) => drawAvatar(user, ghost, i),
-                });
-            }
-
-            const pairs: BatchRecolorItem[] = [];
-            this.zone.users.forEach((user) => prepareAvatar(user, false));
-            this.zone.echoes.forEach((echo) => prepareAvatar(echo, true));
-            batchRecolor(pairs);
-
-            context.restore();
-
             if (!this.mediaElement) {
                 animateLogo();
                 context.drawImage(
@@ -186,7 +155,7 @@ export class SceneRenderer extends EventEmitter {
 
                 context.save();
                 try {
-                    context.globalCompositeOperation = 'screen';
+                    context.globalCompositeOperation = 'source-over';
                     context.drawImage(this.mediaElement, inset + ox, inset + oy, rw, rh);
                 } catch (error) {
                     console.log("ERROR DRAWING VIDEO:", error);
@@ -219,6 +188,37 @@ export class SceneRenderer extends EventEmitter {
                 });
                 context.restore();
             }
+
+            context.save();
+            context.translate(margin, margin);
+            context.scale(scale, scale);
+
+            const prepareAvatar = (user: UserState, ghost: boolean) => {
+                if (!user.position) return;
+
+                let [r, g, b] = [255, 255, 255];
+
+                if (user.emotes && user.emotes.includes('rbw')) {
+                    const h = Math.abs(Math.sin(performance.now() / 600 - user.position![0] / 8));
+                    [r, g, b] = hslToRgb(h, 1, 0.5);
+                    r = Math.round(r);
+                    g = Math.round(g);
+                    b = Math.round(b);
+                }
+
+                pairs.push({
+                    canvas: this.getTile(user.avatar).canvas,
+                    color: `rgb(${r} ${g} ${b})`,
+                    callback: (i) => drawAvatar(user, ghost, i),
+                });
+            }
+
+            const pairs: BatchRecolorItem[] = [];
+            this.zone.users.forEach((user) => prepareAvatar(user, false));
+            this.zone.echoes.forEach((echo) => prepareAvatar(echo, true));
+            batchRecolor(pairs);
+
+            context.restore();
         };
 
         const drawAvatar = (user: UserState, echo: boolean, index: number) => {