Three.js OutlinePass: How to Create Selection Highlights

In Three.js, creating visual feedback for selected objects is a crucial requirement for interactive 3D applications like editors, games, and product configurators. This article explains the purpose of the OutlinePass in the Three.js post-processing pipeline, detailing how it generates clean, customizable outline highlights around selected 3D meshes to improve user experience and spatial awareness.

The Core Purpose of OutlinePass

The primary purpose of OutlinePass is to visually isolate and highlight specific 3D objects in a scene. When a user hovers over or clicks an object, OutlinePass draws a glowing or solid border around its outer edges. This immediately signals to the user which object is currently targeted or active.

Unlike simple material changes (such as changing an object’s color), an outline preserves the original textures and shading of the model while providing a non-intrusive, professional-looking selection state.

How OutlinePass Works under the Hood

OutlinePass is not applied directly to standard materials. Instead, it operates within the Three.js post-processing framework using the EffectComposer. The process occurs in several distinct steps:

1. Object Selection: You pass the specific 3D meshes you want to highlight into the selectedObjects array of the OutlinePass instance.
2. Mask Generation: The pass renders the selected objects to a separate off-screen buffer (render target) to create a mask of their silhouettes.
3. Edge Detection: An edge-detection algorithm (typically a Sobel filter) analyzes the mask to find the boundaries where the object ends and the background or other objects begin.
4. Blur and Color Application: The detected edges are blurred to create a smooth glow, colored according to your configuration, and composited back onto the final rendered image shown on the screen.

Key Properties and Customization

One of the main benefits of OutlinePass is its high degree of customizability. Developers can control exactly how the selection highlight looks using several key properties:

• selectedObjects: An array containing the meshes that should receive the outline.
• edgeStrength: Controls the brightness and intensity of the outline glow.
• edgeGlow: Adjusts the amount of blur applied to the outline, creating either a sharp border or a soft glow.
• edgeThickness: Defines the width of the outline in pixels.
• visibleEdgeColor: Sets the color of the outline for parts of the object that are directly visible to the camera.
• hiddenEdgeColor: Sets the color of the outline for parts of the object that are occluded (blocked) by other geometry in the scene. This is highly useful for showing selected objects through walls or obstacles.

Why Use OutlinePass Over Other Methods?

While there are alternative ways to highlight objects—such as duplicating a mesh, scaling it up slightly, and rendering it in a solid color behind the original mesh—these methods have significant limitations. Scaling-based outlines fail on complex, non-convex geometry and cause rendering artifacts when objects overlap.

OutlinePass solves these issues because it operates in screen space (post-processing). This ensures that the outline perfectly contours the shape of the object, handles overlapping geometry seamlessly, and maintains a consistent stroke width regardless of how far the camera is from the object.