three.js/examples/jsm/tsl/display/RetroPassNode.js

import { MeshBasicNodeMaterial, PassNode, UnsignedByteType, NearestFilter, CubeMapNode, MeshPhongNodeMaterial } from 'three/webgpu';
import { float, vec2, vec4, Fn, uv, varying, cameraProjectionMatrix, cameraViewMatrix, positionWorld, screenSize, materialColor, uint, texture, uniform, context, reflectVector } from 'three/tsl';

const _affineUv = varying( vec2() );
const _w = varying( float() );

const _clipSpaceRetro = Fn( () => {

	const defaultPosition = cameraProjectionMatrix
		.mul( cameraViewMatrix )
		.mul( positionWorld );

	const roundedPosition = defaultPosition.xy
		.div( defaultPosition.w.mul( 2 ) )
		.mul( screenSize.xy )
		.round()
		.div( screenSize.xy )
		.mul( defaultPosition.w.mul( 2 ) );

	_affineUv.assign( uv().mul( defaultPosition.w ) );
	_w.assign( defaultPosition.w );

	return vec4( roundedPosition.xy, defaultPosition.zw );

} )();

/**
 * A post-processing pass that applies a retro PS1-style effect to the scene.
 *
 * This node renders the scene with classic PlayStation 1 visual characteristics:
 * - **Vertex snapping**: Vertices are snapped to screen pixels, creating the iconic "wobbly" geometry
 * - **Affine texture mapping**: Textures are sampled without perspective correction, resulting in distortion effects
 * - **Low resolution**: Default 0.25 scale (typical 320x240 equivalent)
 * - **Nearest-neighbor filtering**: Sharp pixelated textures without smoothing
 *
 * @augments PassNode
 */
class RetroPassNode extends PassNode {

	/**
	 * Creates a new RetroPassNode instance.
	 *
	 * @param {Scene} scene - The scene to render.
	 * @param {Camera} camera - The camera to render from.
	 * @param {Object} [options={}] - Additional options for the retro pass.
	 * @param {Node} [options.affineDistortion=null] - An optional node to apply affine distortion to UVs.
	 */
	constructor( scene, camera, options = {} ) {

		super( PassNode.COLOR, scene, camera );

		const {
			affineDistortion = null,
			filterTextures = false
		} = options;

		this.setResolutionScale( .25 );

		this.renderTarget.texture.type = UnsignedByteType;
		this.renderTarget.texture.magFilter = NearestFilter;
		this.renderTarget.texture.minFilter = NearestFilter;

		this.affineDistortionNode = affineDistortion;

		this.filterTextures = filterTextures;

		this._materialCache = new Map();

	}

	/**
	 * Updates the retro pass before rendering.
	 *
	 * @override
	 * @param {Frame} frame - The current frame information.
	 * @returns {void}
	 */
	updateBefore( frame ) {

		const renderer = frame.renderer;

		const currentRenderObjectFunction = renderer.getRenderObjectFunction();

		renderer.setRenderObjectFunction( ( object, scene, camera, geometry, material, ...params ) => {

			const retroMaterialData = this._materialCache.get( material );

			let retroMaterial;

			if ( retroMaterialData === undefined || retroMaterialData.version !== material.version ) {

				if ( retroMaterialData !== undefined ) {

					retroMaterialData.material.dispose();

				}

				if ( material.isMeshBasicMaterial || material.isMeshBasicNodeMaterial ) {

					retroMaterial = new MeshBasicNodeMaterial();

				} else {

					retroMaterial = new MeshPhongNodeMaterial();

				}

				retroMaterial.colorNode = material.colorNode || null;
				retroMaterial.opacityNode = material.opacityNode || null;
				retroMaterial.positionNode = material.positionNode || null;
				retroMaterial.vertexNode = material.vertexNode || _clipSpaceRetro;

				let colorNode = material.colorNode || materialColor;

				if ( material.isMeshStandardNodeMaterial || material.isMeshStandardMaterial ) {

					const envMap = material.envMap || scene.environment;

					if ( envMap ) {

						const reflection = new CubeMapNode( texture( envMap ) );

						let metalness;

						if ( material.metalnessNode ) {

							metalness = material.metalnessNode;

						} else {

							metalness = uniform( material.metalness ).onRenderUpdate( ( { material } ) => material.metalness );

							if ( material.metalnessMap ) {

								const textureUniform = texture( material.metalnessMap ).onRenderUpdate( ( { material } ) => material.metalnessMap );

								metalness = metalness.mul( textureUniform.b );

							}

						}

						colorNode = metalness.mix( colorNode, reflection );

					}

				}

				retroMaterial.colorNode = colorNode;

				//

				const contextData = {};

				if ( this.affineDistortionNode ) {

					contextData.getUV = ( texture ) => {

						let finalUV;

						if ( texture.isCubeTextureNode ) {

							finalUV = reflectVector;

						} else {

							finalUV = this.affineDistortionNode.mix( uv(), _affineUv.div( _w ) );

						}

						return finalUV;

					};

				}

				if ( this.filterTextures !== true ) {

					contextData.getTextureLevel = () => uint( 0 );

				}

				retroMaterial.contextNode = context( contextData );

				//

				this._materialCache.set( material, {
					material: retroMaterial,
					version: material.version
				} );

			} else {

				retroMaterial = retroMaterialData.material;

			}

			for ( const property in material ) {

				if ( retroMaterial[ property ] === undefined ) continue;

				retroMaterial[ property ] = material[ property ];

			}

			renderer.renderObject( object, scene, camera, geometry, retroMaterial, ...params );

		} );

		super.updateBefore( frame );

		renderer.setRenderObjectFunction( currentRenderObjectFunction );

	}

	/**
	 * Disposes the retro pass and its internal resources.
	 *
	 * @override
	 * @returns {void}
	 */
	dispose() {

		super.dispose();

		this._materialCache.forEach( ( data ) => {

			data.material.dispose();

		} );

		this._materialCache.clear();

	}

}

export default RetroPassNode;

/**
 * Creates a new RetroPassNode instance for PS1-style rendering.
 *
 * The retro pass applies vertex snapping, affine texture mapping, and low-resolution
 * rendering to achieve an authentic PlayStation 1 aesthetic. Combine with other
 * post-processing effects like dithering, posterization, and scanlines for full retro look.
 *
 * ```js
 * // Combined with other effects
 * let pipeline = retroPass( scene, camera );
 * pipeline = bayerDither( pipeline, 32 );
 * pipeline = posterize( pipeline, 32 );
 * renderPipeline.outputNode = pipeline;
 * ```
 *
 * @tsl
 * @function
 * @param {Scene} scene - The scene to render.
 * @param {Camera} camera - The camera to render from.
 * @param {Object} [options={}] - Additional options for the retro pass.
 * @param {Node} [options.affineDistortion=null] - An optional node to apply affine distortion to UVs.
 * @return {RetroPassNode} A new RetroPassNode instance.
 */
export const retroPass = ( scene, camera, options = {} ) => new RetroPassNode( scene, camera, options );