Optimize fullscreen rendering

app/components/Player/Fullscreen/Background/Wash.vue

@@ -10,14 +10,15 @@ import { shapeBeatPulse } from "~/utils/beat"
 
 const props = defineProps<{ src: string; active: boolean }>()
 const ANIMATION_SPEED = 0.3
+const FRAME_RATE = 12
+const FRAME_INTERVAL = 1000 / FRAME_RATE
 const { beatEnergy } = usePlayer()
 const cpuCanvas = ref<HTMLCanvasElement | null>(null)
 const webGpuCanvas = ref<HTMLCanvasElement | null>(null)
 const palette = ref<AlbumPalette | null>(null)
 const backend = ref<"cpu" | "webgpu">("cpu")
-let frame = 0
+let frameTimer: number | null = null
 let startedAt = 0
-let lastFrameAt = 0
 let random: [number, number] = [0, 0]
 let angleJitter = 0
 let flowParams: [number, number, number, number] = [5, 25, 0.75, -0.08]
@@ -111,17 +112,17 @@ function makeFrame(now: number, canvas: HTMLCanvasElement): BackgroundFrame {
 	}
 }
 
+function updateCanvasScale(canvas: HTMLCanvasElement, beat: number) {
+	const transform = `scale(${1.08 + beat * 0.003})`
+	if (canvas.style.transform !== transform) canvas.style.transform = transform
+}
+
 function draw(now: number) {
 	if (!props.active || disposed) return
-	if (now - lastFrameAt < 1000 / 24) {
-		frame = requestAnimationFrame(draw)
-		return
-	}
-	lastFrameAt = now
 	const canvas = backend.value === "webgpu" ? webGpuCanvas.value : cpuCanvas.value
 	if (canvas && activeRenderer) {
 		const renderFrame = makeFrame(now, canvas)
-		canvas.style.transform = `scale(${1.08 + renderFrame.beat * 0.003})`
+		updateCanvasScale(canvas, renderFrame.beat)
 		try {
 			activeRenderer.render(renderFrame)
 		} catch (error) {
@@ -133,10 +134,8 @@ function draw(now: number) {
 				webGpuRenderer?.dispose()
 				webGpuRenderer = null
 				useCpuFallback()
-				cpuCanvas.value?.style.setProperty(
-					"transform",
-					`scale(${1.08 + renderFrame.beat * 0.003})`,
-				)
+				if (cpuCanvas.value)
+					updateCanvasScale(cpuCanvas.value, renderFrame.beat)
 				try {
 					cpuRenderer?.render(renderFrame)
 				} catch (fallbackError) {
@@ -147,15 +146,18 @@ function draw(now: number) {
 			}
 		}
 	}
-	frame = requestAnimationFrame(draw)
+	frameTimer = window.setTimeout(() => {
+		frameTimer = null
+		draw(performance.now())
+	}, FRAME_INTERVAL)
 }
 
 function startAnimation() {
-	cancelAnimationFrame(frame)
+	if (frameTimer !== null) window.clearTimeout(frameTimer)
+	frameTimer = null
 	startedAt = 0
-	lastFrameAt = 0
 	randomizeMotion()
-	frame = requestAnimationFrame(draw)
+	draw(performance.now())
 }
 
 watch(() => props.src, loadArtwork)
@@ -163,7 +165,10 @@ watch(
 	() => props.active,
 	(active) => {
 		if (active) startAnimation()
-		else cancelAnimationFrame(frame)
+		else if (frameTimer !== null) {
+			window.clearTimeout(frameTimer)
+			frameTimer = null
+		}
 	},
 )
 
@@ -175,7 +180,7 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
 	disposed = true
-	cancelAnimationFrame(frame)
+	if (frameTimer !== null) window.clearTimeout(frameTimer)
 	webGpuRenderer?.dispose()
 	cpuRenderer?.dispose()
 })
@@ -200,8 +205,8 @@ onBeforeUnmount(() => {
 .background-wash {
 	position: absolute;
 	inset: 0;
-	width: 50%;
-	height: 50%;
+	width: 100%;
+	height: 100%;
 	filter: blur(6px) saturate(1.08);
 	transform: scale(1.08);
 	visibility: hidden;

app/components/Player/Fullscreen/Background/renderers/webgpu.ts

@@ -43,7 +43,9 @@ interface GpuAdapter {
 }
 
 interface GpuApi {
-	requestAdapter(): Promise<GpuAdapter | null>
+	requestAdapter(options?: {
+		powerPreference?: "low-power" | "high-performance"
+	}): Promise<GpuAdapter | null>
 	getPreferredCanvasFormat(): string
 }
 
@@ -70,7 +72,9 @@ export async function createWebGpuRenderer(
 			console.info("[background renderer] WebGPU API unavailable; using CPU")
 			return null
 		}
-		const adapter = await gpu.requestAdapter()
+		const adapter = await gpu.requestAdapter({
+			powerPreference: "high-performance",
+		})
 		if (!adapter) {
 			console.info("[background renderer] no WebGPU adapter; using CPU")
 			return null
@@ -114,6 +118,11 @@ export async function createWebGpuRenderer(
 		const activeDevice = device
 		const activeContext = context
 		const activeBuffer = uniformBuffer
+		const uniforms = new Float32Array(20)
+		let lastPalette: BackgroundFrame["palette"] | null = null
+		let dominant: [number, number, number] = [0, 0, 0]
+		let accent: [number, number, number] = [0, 0, 0]
+		let maxPaletteLightness = 0
 		let disposed = false
 		void device.lost.then(() => {
 			if (!disposed) onDeviceLost()
@@ -125,27 +134,25 @@ export async function createWebGpuRenderer(
 					canvas.width = frame.width
 					canvas.height = frame.height
 				}
-				const dominant = toOkLab(frame.palette.dominant)
-				const accent = toOkLab(frame.palette.accent)
-				const uniforms = new Float32Array([
-					frame.width,
-					frame.height,
-					frame.time,
-					frame.beat,
-					frame.random[0],
-					frame.random[1],
-					frame.angleJitter,
-					0,
-					...frame.flowParams,
-					dominant[0],
-					dominant[1],
-					dominant[2],
-					Math.max(dominant[0], accent[0]),
-					accent[0],
-					accent[1],
-					accent[2],
-					0,
-				])
+				if (lastPalette !== frame.palette) {
+					dominant = toOkLab(frame.palette.dominant)
+					accent = toOkLab(frame.palette.accent)
+					maxPaletteLightness = Math.max(dominant[0], accent[0])
+					lastPalette = frame.palette
+				}
+				uniforms[0] = frame.width
+				uniforms[1] = frame.height
+				uniforms[2] = frame.time
+				uniforms[3] = frame.beat
+				uniforms[4] = frame.random[0]
+				uniforms[5] = frame.random[1]
+				uniforms[6] = frame.angleJitter
+				uniforms[7] = 0
+				uniforms.set(frame.flowParams, 8)
+				uniforms.set(dominant, 12)
+				uniforms[15] = maxPaletteLightness
+				uniforms.set(accent, 16)
+				uniforms[19] = 0
 				activeDevice.queue.writeBuffer(activeBuffer, 0, uniforms)
 				const encoder = activeDevice.createCommandEncoder()
 				const pass = encoder.beginRenderPass({