Weighted blended OIT remains the fastest practical WebGPU path for dense transparent scenes. Use this 2026 reference to ship it safely. Read now.
Why weighted blended OIT is still the practical default
Order-independent transparency (OIT) solves a familiar problem: when many transparent surfaces overlap, sorting them per frame is expensive, fragile under motion, and often wrong for intersecting geometry. Weighted blended OIT avoids that sort. It accumulates color and opacity into a small number of render targets with a fixed blend setup, then resolves a composite color in a final full-screen pass. The result is approximate, not perfect, but for dense particle fields, foliage, glass stacks, and UI overlays in 3D, the cost stays predictable while visual quality stays usable.
On WebGPU this matters because bandwidth, bind-group limits, and pass structure reward simple multipass designs over deep per-pixel linked lists or multi-layer A-buffer schemes. Weighted blending keeps the path short: one geometry pass that writes accumulation buffers, one resolve pass that reconstructs RGBA. That shape is what makes it the fastest practical route for dense transparent scenes when you need something shippable rather than research-grade exactness.
Core pattern: accumulate, then resolve
The geometry pass draws every transparent fragment without depth write (depth test usually stays on so solids still occlude). Each fragment contributes a premultiplied color weighted by a function of opacity and view depth, plus a separate opacity term used later for normalization. Those values land in floating-point or high-precision color attachments so the sum does not clip early. Blending is additive (or a close variant) so order of draw does not change the final accumulation.
The resolve pass samples the accumulated color and opacity, divides color by a factor derived from total opacity, and produces a final premultiplied or straight alpha pixel that composites over the opaque scene. Keep the weight function continuous and biased toward nearer surfaces so the approximation looks plausible; extreme weights that explode at near or far planes are a common source of fireflies and washed-out stacks. Match sample counts and viewport size between accumulate and resolve so you do not introduce sampling skew.
Shipping it safely in WebGPU
Treat OIT as its own render graph slice, not a one-off shader toggle. Bind group layouts for the accumulation targets, clear values that zero the sum, and a consistent color space (linear for accumulation, tone map only after resolve) should be fixed early. Prefer a dedicated transparent queue after opaque geometry so you never interleave solid writes into the OIT targets. Document which materials opt in: only fragments that truly need order independence should hit the path; fully opaque and alpha-tested surfaces stay on the cheaper opaque path.
- Clear accumulation targets every frame; residual values corrupt the resolve.
- Disable depth writes for transparent draws; keep depth test if solids should cut transparency.
- Use high enough attachment precision that long additive chains do not lose low-alpha detail.
- Resolve once per view; multi-view and post stacks should read the resolved color, not raw accumulators.
- Validate under heavy overdraw first—correctness bugs show up there before they show in sparse glass panes.
Quality tradeoffs and when to branch
Weighted blending softens hard edges between crossing transparent layers and can darken or brighten stacks depending on the weight curve. For sparse, artist-sorted layers (two or three UI planes, a single glass pane), classic back-to-front blending can look sharper at lower cost. For extreme density—smoke, sparks, hair cards—accept the approximation and tune weights and opacity clamps instead of chasing perfect order. If you later need higher fidelity, the same accumulate/resolve framing still works as a baseline while you experiment with depth peeling or hybrid sorts for a subset of materials.
Ship with a small debug mode that visualizes total accumulated opacity and the resolve denominator. That single view catches uncleared targets, wrong blend factors, and materials writing zero opacity with non-zero color. Keep the cheat sheet short: one accumulate pipeline, one resolve pipeline, clear rules for who enters the queue. That discipline is what turns weighted blended OIT from a demo technique into a reliable 2026 WebGPU pattern for dense transparent scenes.