Screen-Space Outlines

Reveal object silhouettes and hard surface transitions by comparing nearby depth and normal values. createOutlineShaderPassPipeline overlays a configurable edge color in one scene-aware fullscreen pass.

GitHub

At a Glance

Property	Value
Export	createOutlineShaderPassPipeline
Shader uniform namespace	screenSpaceOutline
Backend	WebGPU
Render passes	One fullscreen depth/normal edge pass
Required binding	depthTexture
Optional binding	normalTexture when normalSource: 'normal-texture'

Usage

import {ShaderPassRenderer} from '@luma.gl/engine';
import {createOutlineShaderPassPipeline} from '@luma.gl/effects';

const renderer = new ShaderPassRenderer(device, {
  shaderPasses: [createOutlineShaderPassPipeline({normalSource: 'normal-texture'})]
});

renderer.renderToScreen({
  sourceTexture: gBuffer.colorTexture,
  bindings: gBuffer.getShaderPassBindings(),
  uniforms: {
    screenSpaceOutline: {
      color: [0.02, 0.08, 0.12, 0.48],
      thickness: 1.5,
      depthThreshold: 0.003,
      normalThreshold: 0.18
    }
  }
});

Parameters

Parameter	Default	Description
normalSource	'reconstruct-from-depth'	Reconstruct geometric normals or use an explicit scene-normal texture.
color	[0.02, 0.08, 0.12, 0.48]	RGBA outline color; alpha controls the overlay contribution.
thickness	1.5	Neighbor offset in depth-texture pixels.
depthThreshold	0.003	Depth change needed to begin drawing an edge.
normalThreshold	0.18	Normal-direction difference needed to begin drawing an edge.

The pass samples four cardinal neighbors and combines smooth depth and normal edge responses. Supplying authored normals captures material or geometric detail that reconstructed depth normals cannot express.

Performance and Composition

Outlines use one render pass, allocate no history, and require scene attachments to remain aligned with the current color image. Apply them before image-space warps, or transform the auxiliary attachments by the same amount. For a purely color-derived illustrated treatment, compare Ink or Edge Work.

Related Effects

• Ink derives graphic contours directly from image color.
• Edge Work extracts image-frequency differences without scene attachments.
• SSAO can reuse the same depth and normal buffers.