---

title: OutlinePass category: Addons layout: docs

OutlinePass

A pass for rendering outlines around selected objects.

Code Example

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

Import

OutlinePass is an addon, and must be imported explicitly, see Installation#Addons.

import { OutlinePass } from 'three/addons/postprocessing/OutlinePass.js';

Constructor

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

Constructs a new outline pass.

resolution | The effect's resolution.
---|---
scene | The scene to render.
camera | The camera.
selectedObjects | The selected 3D objects that should receive an outline.

Properties

.downSampleRatio : number

The downsample ratio. The effect can be rendered in a much lower resolution than the beauty pass.

Default is 2.

.edgeGlow : number

Can be used for an animated glow/pulse effect.

Default is 0.

.edgeStrength : number

The edge strength.

Default is 3.

.edgeThickness : number

The edge thickness.

Default is 1.

.hiddenEdgeColor : Color

The hidden edge color.

Default is (0.1,0.04,0.02).

.patternTexture : Texture

Can be used to highlight selected 3D objects. Requires to set OutlinePass#usePatternTexture to true.

Default is null.

.pulsePeriod : number

The pulse period.

Default is 0.

.renderCamera : Object

The camera.

.renderScene : Object

The scene to render.

.resolution : Vector2

The effect's resolution.

Default is (256,256).

.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.

Default is false.

.visibleEdgeColor : Color

The visible edge color.

Default is (1,1,1).

Methods

.dispose()

Frees the GPU-related resources allocated by this instance. Call this method whenever the pass is no longer used in your app.

Overrides: Pass#dispose

.render( renderer : WebGLRenderer, writeBuffer : WebGLRenderTarget, readBuffer : WebGLRenderTarget, deltaTime : number, maskActive : boolean )

Performs the Outline pass.

renderer | The renderer.
---|---
writeBuffer | The write buffer. This buffer is intended as the rendering destination for the pass.
readBuffer | The read buffer. The pass can access the result from the previous pass from this buffer.
deltaTime | The delta time in seconds.
maskActive | Whether masking is active or not.

Overrides: Pass#render

.setSize( width : number, height : number )

Sets the size of the pass.

width | The width to set.
---|---
height | The height to set.

Overrides: Pass#setSize

Source

examples/jsm/postprocessing/OutlinePass.js