Chapter 259: OutlinePass

Core Idea

A pass for rendering outlines around selected objects.

Key Concepts

downSampleRatio : number: The downsample ratio. The effect can be rendered in a much lower resolution than the beauty pass.
edgeGlow : number: Can be used for an animated glow/pulse effect.
edgeStrength : number: The edge strength.
edgeThickness : number: The edge thickness.
hiddenEdgeColor : Color: The hidden edge color.
patternTexture : Texture: Can be used to highlight selected 3D objects. Requires to set OutlinePass#usePatternTexture to true.
pulsePeriod : number: The pulse period.
renderCamera : Object: The camera.
renderScene : Object: The scene to render.
resolution : Vector2: The effect's resolution.

Code Examples

const resolution = new THREE.Vector2( window.innerWidth, window.innerHeight );
const outlinePass = new OutlinePass( resolution, scene, camera );
composer.addPass( outlinePass );

What it demonstrates: Typical usage of OutlinePass.

Reference Tables

Constructor

Signature
`new OutlinePass( resolution : Vector2, scene : Scene, camera : Camera, selectedObjects : Array.<Object3D> )`

Properties

Property	Description
`.downSampleRatio : number`	The downsample ratio. The effect can be rendered in a much lower resolution than the beauty pass.
`.edgeGlow : number`	Can be used for an animated glow/pulse effect.
`.edgeStrength : number`	The edge strength.
`.edgeThickness : number`	The edge thickness.
`.hiddenEdgeColor : Color`	The hidden edge color.
`.patternTexture : Texture`	Can be used to highlight selected 3D objects. Requires to set OutlinePass#usePatternTexture to `true`.
`.pulsePeriod : number`	The pulse period.
`.renderCamera : Object`	The camera.
`.renderScene : Object`	The scene to render.
`.resolution : Vector2`	The effect's resolution.
`.selectedObjects : Array.<Object3D>`	The selected 3D objects that should receive an outline.
`.usePatternTexture : boolean`	Whether to use a pattern texture for to highlight selected 3D objects or not.
`.visibleEdgeColor : Color`	The visible edge color.

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 Outline pass.
`.setSize( width : number, height : number )`	Sets the size of the pass.

Key Takeaways

OutlinePass extends: Pass
Most relevant properties: downSampleRatio, edgeGlow, edgeStrength, edgeThickness.
Key methods: dispose, render, setSize.

Connects To

Pass: parent class
Source: examples/jsm/postprocessing/OutlinePass.js