Pmndrs.docs

SelectiveBloom

A selective bloom effect.

This effect applies bloom to selected objects only.

Attention: If you don't need to limit bloom to a subset of objects, consider using the BloomEffect instead for better performance.

import { SelectiveBloom } from '@react-three/postprocessing'
import { BlurPass, Resizer, KernelSize } from 'postprocessing'

return (
  <SelectiveBloom
    lights={[lightRef1, lightRef2]} // โš ๏ธ REQUIRED! all relevant lights
    selection={[meshRef1, meshRef2]} // selection of objects that will have bloom effect
    selectionLayer={10} // selection layer
    intensity={1.0} // The bloom intensity.
    blurPass={undefined} // A blur pass.
    width={Resizer.AUTO_SIZE} // render width
    height={Resizer.AUTO_SIZE} // render height
    kernelSize={KernelSize.LARGE} // blur kernel size
    luminanceThreshold={0.9} // luminance threshold. Raise this value to mask out darker elements in the scene.
    luminanceSmoothing={0.025} // smoothness of the luminance threshold. Range is [0, 1]
  />
)

Props

NameTypeDefaultDescription
selectionObjectsSelection of objects that will be outlined
lightsLightsAll lights that will affect the effect
blendFunctionBlendFunctionBlendFunction.SCREENThe blend function of this effect.
widthNumberResizer.AUTO_SIZEThe render width.
heightNumberResizer.AUTO_SIZEThe render height.
selectionLayerNumberThe selection layer
blurPassBlurPassnullAn efficient, incremental blur pass.
kernelSizeKernelSizeKernelSize.LARGEThe blur kernel size.
luminanceThresholdNumber0.9The luminance threshold. Raise this value to mask out darker elements in the scene. Range is [0, 1].
luminanceSmoothingNumber0.025Controls the smoothness of the luminance threshold. Range is [0, 1].
intensityNumber1Intensity of the effect