WasmGPU.createPerformanceStats¶

Summary¶

WasmGPU.createPerformanceStats creates (or replaces) the runtime stats panel bound to the current engine. The panel can show FPS, frame time, CPU/GPU timing, memory, culling stats, and a rolling graph. When showGpuTime is enabled, renderer GPU timing is enabled so GPU frame durations can be sampled.

Syntax¶

WasmGPU.createPerformanceStats(desc?: PerformanceStatsDescriptor): PerformanceStats
const stats = wgpu.createPerformanceStats(desc);

Parameters¶

Name	Type	Required	Description
`desc`	`PerformanceStatsDescriptor`	No	Optional stats-panel configuration: placement, visibility flags, graph dimensions/history, and update cadence.

Returns¶

PerformanceStats - Active stats panel instance attached to the engine.

Type Details¶

PerformanceStatsDescriptor¶

type PerformanceStatsDescriptor = {
    parent?: HTMLElement;
    canvas?: HTMLCanvasElement;
    position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
    zIndex?: number;
    paddingPx?: number;
    label?: string;
    graph?: boolean;
    graphWidthPx?: number;
    graphHeightPx?: number;
    historyLength?: number;
    targetFps?: number;
    updateIntervalMs?: number;
    decimals?: number;
    showFps?: boolean;
    showFrameTime?: boolean;
    showCpuTime?: boolean;
    showGpuTime?: boolean;
    showMemory?: boolean;
    showCulling?: boolean;
    pointerEvents?: "none" | "auto";
};

Defaults are position: "top-left", zIndex: 9999, paddingPx: 8, graph: true, graphWidthPx: 120, graphHeightPx: 40, historyLength: 60, targetFps: 60, updateIntervalMs: 250, decimals: 1, showFps: true, showFrameTime: true, showCpuTime: true, showGpuTime: true, showMemory: true, showCulling: false, and pointerEvents: "none". The panel is appended to desc.parent, otherwise the canvas parent, otherwise document.body.

Creating a new panel destroys and replaces the engine's previous panel.

Example¶

const canvas = document.querySelector("canvas");
const wgpu = await WasmGPU.create(canvas);
const desc = {
    label: "WasmGPU Runtime",
    position: "top-right",
    graph: true,
    showGpuTime: true,
    showCulling: true,
    updateIntervalMs: 200
};
const stats = wgpu.createPerformanceStats(desc);
console.log(stats.element);