Skip to content

Three.js r183: PostProcessing becomes RenderPipeline

Three.js r183 shipped on February 18, and it's a bigger architectural shift than most point releases. The headline change: PostProcessing has been renamed to RenderPipeline. That's not just a rename. It reflects how the class evolved from simple post-processing management into a full pipeline system that handles multiple rendering passes and history buffers.

Introduction to Three.js WebGPU and the TSL shader node system

RenderPipeline replaces PostProcessing

The new RenderPipeline class is designed specifically for WebGPURenderer. It manages the full rendering pipeline setup, post-processing effect chains, and defines the final output through an outputNode. The outputColorTransform property controls default tone mapping and color space transformation.

This matters because the old PostProcessing name was misleading. With temporal anti-aliasing (TRAA) integration for volumetric lighting, screen space reflections with temporal stability, and HDR pipeline support using HalfFloatType output buffers, the class was already doing much more than post-processing. The new name matches reality.

Clock deprecated, Timer arrives

The Clock class is now deprecated in favor of a new Timer class. If you're using Clock in your animation loops, start migrating. The new Timer provides a cleaner API for the same time-tracking functionality.

BatchedMesh gets per-instance control

BatchedMesh gained per-instance opacity and wireframe material support. This is a significant addition for open world scenes and city builders where you need to fade individual instances in and out without creating separate materials. It also means you can selectively apply wireframe rendering to specific instances for debugging or stylistic effects.

WebGPU post-processing in Three.js with React Three Fiber

Material improvements

MeshLambertMaterial and MeshPhongMaterial now support scene.environment image-based lighting (IBL). Previously these cheaper materials couldn't use environment maps for ambient lighting, pushing developers toward the more expensive MeshStandardMaterial. Now you can use IBL with legacy materials where PBR accuracy isn't needed.

MeshPhysicalMaterial adds clearcoat support for rect area lights. If you're rendering car paint or polished surfaces lit by area lights, the clearcoat layer now responds correctly.

Performance optimizations

Matrix4.decompose() now caches the determinant calculation, and invert() has been optimized. These are called thousands of times per frame in scenes with many objects, so the accumulated savings add up.

TSL spec and clipSpace node

Three.js r183 introduces a formal TSL specification document (TSL.md) and a new clipSpace node. TSL (Three.js Shading Language) lets you write shader code in JavaScript that compiles to either WGSL for WebGPU or GLSL for WebGL. The new spec formalizes the node system's API, making it easier for third-party libraries to build on top of it.

The clipSpace node gives direct access to clip-space coordinates in TSL, useful for screen-space effects and custom projection techniques.

References