Symbols in this topic
frameClock
Creates a monotonic time source with pause/resume support for ad-hoc render loops. Use it when you need consistent elapsed seconds outside the built-in frame() loop.
Import
TypeScript
1
import { frameClock } from "@vgpu/render/utils";Signature
TypeScript
1
export function frameClock(): FrameClock;Parameters
| Param | Type | Required | Default | Notes |
|---|---|---|---|---|
| — | — | — | — | frameClock does not take arguments; it captures performance.now() internally. |
Returns: FrameClock — exposes now(), delta(), reset(), pause(), resume(), and an isPaused getter. All time values are expressed in seconds.
Examples
TypeScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { frameClock } from "@vgpu/render/utils";
const clock = frameClock();
function updateScene(elapsed: number, dt: number): void {
void elapsed;
void dt;
}
function tick() {
if (!clock.isPaused) {
const elapsed = clock.now();
const dt = clock.delta();
updateScene(elapsed, dt);
}
requestAnimationFrame(tick);
}
tick();Notes
delta()returns0while paused, so you can leave animation code untouched and simply togglepause()/resume().reset()zeroes both elapsed time and accumulated pause, making it ideal for restarting demos without allocating a new clock.- Calls to
pause()are idempotent; repeated calls do nothing untilresume()runs. - See also:
canvasMouseTracker,canvasResolution