Bloom

Simulate the glow of bright objects in a scene.

Bloom is an effect that simulates the way bright objects in the real world create a "glow" around themselves. The effect works by adding a blurred and brightened version of the scene to the final render, producing a more realistic and visually appealing result.

Usage

<script setup lang="ts">
import { BloomPmndrs, EffectComposerPmndrs } from '@tresjs/post-processing'
</script>

<template>
  <TresCanvas>
    <TresPerspectiveCamera :position="[5, 5, 5]" />

    <!-- Your scene -->

    <Suspense>
      <EffectComposerPmndrs>
        <BloomPmndrs
          :radius="0.85"
          :intensity="4.0"
          :luminance-threshold="0.1"
          :luminance-smoothing="0.3"
          mipmap-blur
        />
      </EffectComposerPmndrs>
    </Suspense>
  </TresCanvas>
</template>

Props

Prop	Description	Default
`blendFunction`	The blend function of this effect.	#L40
`intensity`	The intensity of the bloom effect.	`1`
`kernelSize`	The kernel size.	`KernelSize.LARGE`
`luminanceThreshold`	The luminance threshold. Raise this value to mask out darker elements in the scene. Range is 0, 1.	`0.9`
`luminanceSmoothing`	Controls the smoothness of the luminance threshold. Range is 0, 1.	`0.025`
`mipmapBlur`	Enables mip map blur.	`false`

Bloom

Usage

Props

Further Reading