Outline

An outline effect.

Requires <EffectComposer autoClear={false}> - without it, outlines don't render at all.

import { Outline } from '@react-three/postprocessing'
import { BlendFunction, Resolution, KernelSize } from 'postprocessing'

return (
  <Outline
    selection={[meshRef1, meshRef2]} // selection of objects that will be outlined
    selectionLayer={10} // selection layer
    blendFunction={BlendFunction.SCREEN} // set this to BlendFunction.ALPHA for dark outlines
    patternTexture={null} // a pattern texture
    patternScale={1.0} // the pattern texture scale
    edgeStrength={1.0} // the edge strength
    pulseSpeed={0.0} // a pulse speed. A value of zero disables the pulse effect
    visibleEdgeColor={0xffffff} // the color of visible edges
    hiddenEdgeColor={0x22090a} // the color of hidden edges
    multisampling={0} // the number of samples used for multisample antialiasing, requires WebGL 2
    resolutionScale={0.5} // render resolution scale
    resolutionX={Resolution.AUTO_SIZE} // render width
    resolutionY={Resolution.AUTO_SIZE} // render height
    kernelSize={KernelSize.VERY_SMALL} // blur kernel size
    blur={false} // whether the outline should be blurred
    xRay={true} // indicates whether X-Ray outlines are enabled
  />
)

Example

Outline demo

Props

NameTypeDefaultDescription
selectionObjectsSelection of objects that will be outlined
selectionLayerNumber10The selection layer
blendFunctionBlendFunctionBlendFunction.SCREENThe blend function of this effect.
patternTextureTHREE.TexturenullA pattern texture.
patternScaleNumber1.0The pattern texture scale.
edgeStrengthNumber1.0The edge strength.
pulseSpeedNumber0The pulse speed. A value of zero disables the pulse effect.
visibleEdgeColorColorRepresentation0xffffffThe color of visible edges.
hiddenEdgeColorColorRepresentation0x22090aThe color of hidden edges.
multisamplingNumber0The number of samples used for multisample antialiasing. Requires WebGL 2.
resolutionScaleNumber0.5The render resolution scale. Applied at construction only.
resolutionXNumberResolution.AUTO_SIZEThe render width. Applied at construction only.
resolutionYNumberResolution.AUTO_SIZEThe render height. Applied at construction only.
widthNumberResizer.AUTO_SIZEThe render width. Unlike resolutionX, updates live without reconstructing the effect.
heightNumberResizer.AUTO_SIZEThe render height. Unlike resolutionY, updates live without reconstructing the effect.
kernelSizeKernelSizeKernelSize.VERY_SMALLThe blur kernel size.
blurBooleanfalseWhether the outline should be blurred.
xRayBooleantrueWhether occluded parts of selected objects should be visible.