Chapter 442: OutlineNode

Core Idea

Post processing node for rendering outlines around selected objects. The node gives you great flexibility in composing the final outline look depending on your requirements.

Key Concepts

camera : Camera: The camera the scene is rendered with.
downSampleRatio : number: The downsample ratio.
edgeGlowNode : Node.<float>: Can be used for an animated glow/pulse effect.
edgeThicknessNode : Node.<float>: The thickness of the edges.
hiddenEdge: A mask value that represents the hidden edge.
scene : Scene: A reference to the scene.
selectedObjects : Array.<Object3D>: An array of selected objects.
updateBeforeType : string: The updateBeforeType is set to NodeUpdateType.FRAME since the node renders its effect once per frame in updateBefore().
visibleEdge: A mask value that represents the visible edge.

Code Examples

const renderPipeline = new THREE.RenderPipeline( renderer );
const scenePass = pass( scene, camera );
// outline parameter
const edgeStrength = uniform( 3.0 );
const edgeGlow = uniform( 0.0 );
const edgeThickness = uniform( 1.0 );
const visibleEdgeColor = uniform( new THREE.Color( 0xffffff ) );
const hiddenEdgeColor = uniform( new THREE.Color( 0x4e3636 ) );
outlinePass = outline( scene, camera, {
	selectedObjects,
	edgeGlow,
	edgeThickness
} );
// compose custom outline
const { visibleEdge, hiddenEdge } = outlinePass;
const outlineColor = visibleEdge.mul( visibleEdgeColor ).add( hiddenEdge.mul( hiddenEdgeColor ) ).mul( edgeStrength );
renderPipeline.outputNode = outlineColor.add( scenePass );

What it demonstrates: Typical usage of OutlineNode.

Reference Tables

Constructor

Signature
`new OutlineNode( scene : Scene, camera : Camera, params : Object )`

Properties

Property	Description
`.camera : Camera`	The camera the scene is rendered with.
`.downSampleRatio : number`	The downsample ratio.
`.edgeGlowNode : Node.<float>`	Can be used for an animated glow/pulse effect.
`.edgeThicknessNode : Node.<float>`	The thickness of the edges.
`.hiddenEdge`	A mask value that represents the hidden edge.
`.scene : Scene`	A reference to the scene.
`.selectedObjects : Array.<Object3D>`	An array of selected objects.
`.updateBeforeType : string`	The `updateBeforeType` is set to `NodeUpdateType.FRAME` since the node renders its effect once per frame in `updateBefore()`.
`.visibleEdge`	A mask value that represents the visible edge.

Methods

Method	Description
`.dispose()`	Frees internal resources. This method should be called when the effect is no longer required.
`.getTextureNode() : PassTextureNode`	Returns the result of the effect as a texture node.
`.setSize( width : number, height : number )`	Sets the size of the effect.
`.setup( builder : NodeBuilder ) : PassTextureNode`	This method is used to setup the effect's TSL code.
`.updateBefore( frame : NodeFrame )`	This method is used to render the effect once per frame.

Key Takeaways

OutlineNode extends: EventDispatcher → Node → TempNode
Most relevant properties: camera, downSampleRatio, edgeGlowNode, edgeThicknessNode.
Key methods: dispose, getTextureNode, setSize, setup.

Connects To

EventDispatcher: parent class
Node: parent class
TempNode: parent class
Source: examples/jsm/tsl/display/OutlineNode.js