Chapter 265: RenderPixelatedPass

Core Idea

A special type of render pass that produces a pixelated beauty pass.

Key Concepts

• camera : Camera: The camera.
• depthEdgeStrength : number: The normal edge strength.
• normalEdgeStrength : number: The normal edge strength.
• pixelSize : number: The effect's pixel size.
• pixelatedMaterial : ShaderMaterial: The pixelated material.
• scene : Scene: The scene to render.

Code Examples

const renderPixelatedPass = new RenderPixelatedPass( 6, scene, camera );
composer.addPass( renderPixelatedPass );

• What it demonstrates: Typical usage of RenderPixelatedPass.

Reference Tables

Constructor

Signature
new RenderPixelatedPass( pixelSize : number, scene : Scene, camera : Camera, options : Object )

Properties

Property	Description
.camera : Camera	The camera.
.depthEdgeStrength : number	The normal edge strength.
.normalEdgeStrength : number	The normal edge strength.
.pixelSize : number	The effect's pixel size.
.pixelatedMaterial : ShaderMaterial	The pixelated material.
.scene : Scene	The scene to render.

Methods

Method	Description
.dispose()	Frees the GPU-related resources allocated by this instance. Call this method whenever the pass is no longer used in your app.
.render( renderer : WebGLRenderer, writeBuffer : WebGLRenderTarget, readBuffer : WebGLRenderTarget, deltaTime : number, maskActive : boolean )	Performs the pixelation pass.
.setPixelSize( pixelSize : number )	Sets the effect's pixel size.
.setSize( width : number, height : number )	Sets the size of the pass.

Key Takeaways

1. RenderPixelatedPass extends: Pass
2. Most relevant properties: camera, depthEdgeStrength, normalEdgeStrength, pixelSize.
3. Key methods: dispose, render, setPixelSize, setSize.

Connects To

• Pass: parent class
• Source: examples/jsm/postprocessing/RenderPixelatedPass.js