@pmndrs/upscaler — Examples

FSR1 spatial + FSR2/3-style temporal upscaling for the three.js WebGPURenderer.

WebGPU-only — open in Chrome/Edge 113+ (or a browser with WebGPU enabled). Each demo renders the scene at a lower resolution and upscales it back to full size.

Showcases

What the upscaler buys you, made visible — bigger scenes built to be looked at rather than to test one feature.

Reinvest the savings

One GPU budget, two ways to spend it: render a quarter of the pixels and buy SSGI + SSR with the difference, or render every pixel plain. A mouse wipe compares them; each side's GPU milliseconds are measured live with timestamp queries, and auto-balance finds the render scale where the effects fit native's budget.

Raymarched fractal

A Mandelbox flight where every pixel runs a long raymarch — a 2–3× render scale turns a slideshow into a smooth framerate. No meshes: the raymarcher supplies its own depth and motion vectors.

How low can you go

One slider drags the render resolution down to 1/8 per axis — 1.6% of the pixels. FSR vs bilinear from the same render, with a pixel loupe.

Watch it converge

Step the real temporal pipeline one frame at a time: the jittered low-res input, every debug buffer, the Halton jitter filling the pixel, and a magnifier where detail appears frame by frame.

Radiance cascades GI

zalo's real-time GI demo (three.js#35349) with its TRAA swapped for the upscaler: the G-buffer and every GI pass run at a reduced render scale. A one-click benchmark times both.

Examples

Single-purpose demos — one feature or integration each.

The minimal temporal upscale — one model, a slow orbit, no UI. The copy-paste starting point.

Switch between paths and toggle features one at a time to see what each stage of the upscaler buys you.

Native vs FSR side-by-side with a wipe slider — the same scene, the same moment, at two pixel budgets.

Aliasing torture

Dense thin geometry and a moiré floor under a moving camera — where naive upscaling falls apart and temporal holds.

Transparency & particles

Particles and transparent geometry have no reliable motion — an honest look at ghosting and why reactive masks matter.

Screen-space effects

Expensive GTAO / SSR / SSGI rendered at low resolution, then upscaled back to full size through FSR3.

FSR3 as a TSL node

The declarative drop-in — post.outputNode = upscaleScene(scene, camera). The whole upscaler as one node in a THREE.RenderPipeline graph.

The upscaler node feeding a downstream TSL effect — upscaleScene(...).mul(vignette) — showing it lives in a post graph.

Kitchen sink — SSGI + SSR

A full screen-space stack (SSGI + SSR) rendered at low res and upscaled by the composable upscale(...) node — one TSL post graph, effects and all.

SSGI denoise A/B

Experimental scratchpad comparing SSGI denoisers before FSR3 upscales — documents why a second temporal resolver (recurrentDenoise) fights FSR3's jitter. Not part of the library.

Reactive mask (node)

The reactive mask through the composable upscale() node — transparents and particles authored as an in-graph coverage pass. Toggle it to A/B the ghost trails.

Temporal guides

The upscaler as a data-products provider: the split dispatchGuides() / dispatchUpscale() frame, with the published dilated motion, disocclusion, and depth guides sampled live as TSL texture nodes.

The guides bundle as TSL: temporalGuides() publishes the products into the post graph, a toy effect tints disoccluded pixels pre-upscale, and upscale({ guides }) shares one computation across both — the split frame, declaratively.

Path tracer · alpha

A transparent canvas over page content: three-gpu-pathtracer's WebGPU renderer accumulates at half resolution with a zero-alpha background, and the FSR1 spatial path upscales coverage along with color.

Transparent canvas

Alpha on the temporal path: coverage reconstructed from jitter rather than interpolated. Thin sub-texel wires over page content, with a temporal/spatial toggle to see the difference.

upscaleSpatial(color) for inputs with no depth or motion: an in-graph pass() or an external texture, with RCAS sharpness and denoise controls and HDR highlights sharpened in conditioned space.

Other engines

@pmndrs/upscaler/core on a bare GPUDevice — the contract every engine adapter is written against — and the adapters built on it.

No three.js: a hand-written WebGPU scene renders color, depth and motion, applies the core's jitter to its own projection, and encodes the upscale into its own command encoder — scene, upscale and present in one submit.

The experimental Babylon adapter in a frame graph: geometry renderer → upscale task → image processing, jittered through Babylon's own TAA material plugin so the velocity buffer stays jitter-free.

The experimental pixi adapter: a pixi stage rendered anti-aliased at half resolution, upscaled by FSR1 between pixi renders, presented on a Sprite.

The same adapter under a pixi-3d scene: a View3D rendered at half resolution and upscaled by FSR1. Runs locally with the pixi-3d closed-beta package; without it the page shows how to add it.