Function renderFrameWebGPU

apps/desktop/src/utils/webgpu-renderer.ts:306–407

(
	renderer: WebGPURenderer,
	data: Uint8ClampedArray,
	width: number,
	height: number,
	bytesPerRow: number = width * 4,
)

}

export function renderFrameWebGPU(
	renderer: WebGPURenderer,
	data: Uint8ClampedArray,
	width: number,
	height: number,
	bytesPerRow: number = width * 4,
): WebGPURenderTiming {
	const totalStart = performance.now();
	let resizeMs = 0;
	let textureSetupMs = 0;
	let uploadMs = 0;
	let drawMs = 0;
	const { device, context, pipeline, sampler, bindGroupLayout, canvas } =
		renderer;

	if (canvas.width !== width || canvas.height !== height) {
		const start = performance.now();
		canvas.width = width;
		canvas.height = height;
		const format = navigator.gpu.getPreferredCanvasFormat();
		context.configure({
			device,
			format,
			alphaMode: "opaque",
		});
		resizeMs = performance.now() - start;
	}

	if (renderer.cachedWidth !== width || renderer.cachedHeight !== height) {
		const start = performance.now();
		renderer.frameTexture?.destroy();
		renderer.frameTexture = device.createTexture({
			size: { width, height },
			format: "rgba8unorm",
			usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST,
		});
		renderer.bindGroup = device.createBindGroup({
			layout: bindGroupLayout,
			entries: [
				{ binding: 0, resource: sampler },
				{ binding: 1, resource: renderer.frameTexture.createView() },
			],
		});
		renderer.cachedWidth = width;
		renderer.cachedHeight = height;
		textureSetupMs = performance.now() - start;
	}

	if (!renderer.frameTexture || !renderer.bindGroup) {
		return createEmptyTiming(totalStart);
	}

	const requiredBytes = bytesPerRow * height;
	if (data.byteLength < requiredBytes) {
		console.error(
			`WebGPU renderFrame: buffer too small. Expected at least ${requiredBytes} bytes, got ${data.byteLength}`,
		);
		return createEmptyTiming(totalStart);