Skip to content

webgpu: minimal-frame

This is the complete, compile-checked package recipe. The caller owns the device and application state.

ts
/**
 * Source: Original ZenFG package recipe.
 * Demonstrates: A clear-only frame and a presentation root.
 * Flow: Import the canvas texture, declare a clear pass, mark present, compile and execute.
 * The caller owns the device and native inputs; ZenFG owns graph execution.
 * Read next: README.md for inputs and related recipes. The Examples adapter
 * and recipeHost.ts provide browser setup and snapshot capture.
 */
import { FrameGraph, type FrameGraphRecording } from '@zenfg/webgpu';

/** Declares one clear-only presentation frame without compiling it. */
export function recordMinimalFrame(
	recorder: FrameGraphRecording,
	backbufferTexture: GPUTexture,
): void {
	const backbuffer = recorder.importSwapchainTexture(
		backbufferTexture,
		{ label: 'backbuffer' },
	);

	recorder.render({
		label: 'clear-backbuffer',
		colorAttachments: [{
			target: backbuffer,
			loadOp: 'clear',
			storeOp: 'store',
			clearValue: { r: 0.04, g: 0.06, b: 0.1, a: 1 },
		}],
	});

	recorder.markPresent(backbuffer);
}

/** Records, executes, and presents one clear-only frame. */
export function renderMinimalFrame(
	graph: FrameGraph,
	context: GPUCanvasContext,
	frameIndex: number,
): void {
	const recorder = graph.beginFrame();
	recordMinimalFrame(recorder, context.getCurrentTexture());
	recorder.compile().execute({ frameIndex });
}

Open source / MIT licensed