fix(virtual-bg): avoid GPU/canvas reallocation every frame

- texMaskFiltered, texBlurred1, texBlurred2 were reallocated on every single render() call
- reallocating GPU texture every frame is a confirmed overhead on some GPUs/drivers
- needs to be only reallocated when the actual size changes
- similar with output canvas element
- impact is negligible, so more a hardening

Assisted-by: ClaudeCode:claude-sonnet-5

Author: Antreesy

src/utils/media/effects/virtual-background/VideoStreamBackgroundEffect.js

@@ -136,6 +136,9 @@ export default class VideoStreamBackgroundEffect {
 						'./vendor/models/selfie_segmenter.tflite',
 						import.meta.url,
 					).pathname,
+					// delegate: 'CPU' was tried as a GPU-load reduction; it
+					// made things worse (no GPU win, added main-thread
+					// stalls). Keeping GPU.
 					delegate: 'GPU',
 				},
 				runningMode: 'VIDEO',
@@ -486,8 +489,13 @@ export default class VideoStreamBackgroundEffect {
 			return
 		}
 
-		this._outputCanvasElement.width = width
-		this._outputCanvasElement.height = height
+		// Assigning canvas dimensions clears and reallocates its backing
+		// buffer even when the values are unchanged, so only set them on
+		// an actual resize.
+		if (this._outputCanvasElement.width !== width || this._outputCanvasElement.height !== height) {
+			this._outputCanvasElement.width = width
+			this._outputCanvasElement.height = height
+		}
 
 		if (this._useWebGL) {
 			if (!this._glFx) {

src/utils/media/effects/virtual-background/WebGLCompositor.js

@@ -291,6 +291,14 @@ export default class WebGLCompositor {
 		this.bgScale = [1.0, 1.0]
 		this.lastOutW = 0
 		this.lastOutH = 0
+
+		// Tracks the size texMaskFiltered/texBlurred{1,2} are currently
+		// allocated at, so their storage is only reallocated on resize
+		// instead of on every render() call.
+		this._maskFilteredW = 0
+		this._maskFilteredH = 0
+		this._blurW = 0
+		this._blurH = 0
 	}
 
 	/**
@@ -527,11 +535,17 @@ export default class WebGLCompositor {
 		const texelWidth = 1 / blurWidth
 		const texelHeight = 1 / blurHeight
 
-		// Allocate blur textures
-		gl.bindTexture(gl.TEXTURE_2D, this.texBlurred1)
-		gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, blurWidth, blurHeight, 0, gl.RGBA, gl.UNSIGNED_BYTE, null)
-		gl.bindTexture(gl.TEXTURE_2D, this.texBlurred2)
-		gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, blurWidth, blurHeight, 0, gl.RGBA, gl.UNSIGNED_BYTE, null)
+		// Allocate blur textures, only reallocating storage when the blur
+		// size actually changes (see the matching comment on texMaskFiltered
+		// in render() for why this check matters).
+		if (this._blurW !== blurWidth || this._blurH !== blurHeight) {
+			gl.bindTexture(gl.TEXTURE_2D, this.texBlurred1)
+			gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, blurWidth, blurHeight, 0, gl.RGBA, gl.UNSIGNED_BYTE, null)
+			gl.bindTexture(gl.TEXTURE_2D, this.texBlurred2)
+			gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, blurWidth, blurHeight, 0, gl.RGBA, gl.UNSIGNED_BYTE, null)
+			this._blurW = blurWidth
+			this._blurH = blurHeight
+		}
 
 		// Setup FBOs
 		gl.bindFramebuffer(gl.FRAMEBUFFER, this.fboBlur1)
@@ -718,9 +732,16 @@ export default class WebGLCompositor {
 			return
 		}
 
-		// Allocate mask filtered texture
-		gl.bindTexture(gl.TEXTURE_2D, this.texMaskFiltered)
-		gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, outW, outH, 0, gl.RGBA, gl.UNSIGNED_BYTE, null)
+		// Allocate mask filtered texture, only reallocating storage when the
+		// output size actually changes (texImage2D(null) forces the GPU to
+		// allocate new backing storage every call, which is wasted work when
+		// called every frame at an unchanged size).
+		if (this._maskFilteredW !== outW || this._maskFilteredH !== outH) {
+			gl.bindTexture(gl.TEXTURE_2D, this.texMaskFiltered)
+			gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, outW, outH, 0, gl.RGBA, gl.UNSIGNED_BYTE, null)
+			this._maskFilteredW = outW
+			this._maskFilteredH = outH
+		}
 
 		// Upload and process mask
 		if (mask) {