feat: bloom effect done right

playground/src/components/UnrealBloom.vue

@@ -14,11 +14,10 @@ const gl = {
 }
 
 const bloomParams = reactive({
-  luminanceThreshold: 0.1,
+  luminanceThreshold: 0.2,
   luminanceSmoothing: 0.3,
   mipmapBlur: true,
   intensity: 4.0,
-  radius: 0.85,
 })
 
 const { pane } = useTweakPane()
@@ -27,7 +26,6 @@ pane.addInput(bloomParams, 'luminanceThreshold', { min: 0, max: 1 })
 pane.addInput(bloomParams, 'luminanceSmoothing', { min: 0, max: 1 })
 pane.addInput(bloomParams, 'mipmapBlur')
 pane.addInput(bloomParams, 'intensity', { min: 0, max: 10 })
-pane.addInput(bloomParams, 'radius', { min: 0, max: 1 })
 
 const materialRef = ref(null)
 
@@ -46,7 +44,7 @@ onMounted(() => {
       <TresSphereGeometry :args="[2, 32, 32]" />
       <TresMeshStandardMaterial color="hotpink" :emissive="new Color('hotpink')" :emissive-intensity="9" />
     </TresMesh> -->
-    <TresMesh :position="[2, 2, 2]">
+    <TresMesh :position="[2, 2, -2]">
       <TresSphereGeometry :args="[2, 32, 32]" />
       <TresMeshStandardMaterial color="hotpink" />
     </TresMesh>
@@ -64,7 +62,7 @@ onMounted(() => {
     <TresDirectionalLight :position="[3, 3, 3]" :intensity="2" />
     <Suspense>
       <EffectComposer :depth-buffer="true">
-        <Bloom v-bind="bloomParams"> </Bloom>
+        <Bloom v-bind="bloomParams"></Bloom>
       </EffectComposer>
     </Suspense>
   </TresCanvas>

src/core/effects/Bloom.vue

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import { Ref, defineComponent, inject, ref, toRaw, toRefs, unref, watchEffect } from 'vue'
+import { BlurPass, KernelSize, EffectPass, BloomEffect, EffectComposer, BlendFunction } from 'postprocessing'
+import { useCore } from '../useCore'
+import { watch } from 'vue'
+
+export type BloomProps = {
+  blendFunction?: BlendFunction
+  /**
+   * The intensity of the bloom effect.
+   *
+   * @default 1
+   * @type {number}
+   * @memberof BloomProps
+   */
+  intensity?: number
+  /**
+   *  An efficient, incremental blur pass.
+   *
+   * @type {BlurPass}
+   * @memberof BloomProps
+   */
+  blurPass?: BlurPass
+  /**
+   * The width of the render
+   *
+   * @type {number}
+   * @memberof BloomProps
+   */
+  width?: number
+  /**
+   * The height of the render
+   *
+   * @type {number}
+   * @memberof BloomProps
+   */
+  height?: number
+  /**
+   * The kernel size.
+   *
+   * @default KernelSize.LARGE
+   *
+   * @type {KernelSize}
+   * @memberof BloomProps
+   */
+  kernelSize?: KernelSize
+  /**
+   * The luminance threshold. Raise this value to mask out darker elements in the scene. Range is [0, 1].
+   *
+   * @default 0.9
+   *
+   * @type {number}
+   * @memberof BloomProps
+   */
+  luminanceThreshold?: number
+  /**
+   * Controls the smoothness of the luminance threshold. Range is [0, 1].
+   *
+   * @default 0.025
+   *
+   * @type {number}
+   * @memberof BloomProps
+   */
+  luminanceSmoothing?: number
+  /**
+   * Enables mip map blur.
+   *
+   * @default false
+   *
+   * @type {boolean}
+   * @memberof BloomProps
+   */
+  mipmapBlur?: boolean
+}
+
+const {
+  blendFunction = BlendFunction.ADD,
+  mipmapBlur = false,
+  intensity = 1,
+  luminanceThreshold = 0.9,
+  luminanceSmoothing = 0.025,
+} = defineProps<BloomProps>()
+
+const { state } = useCore()
+
+const composer = inject<Ref<EffectComposer>>('effectComposer')
+const pass = ref<EffectPass | null>(null)
+
+defineExpose({ pass })
+
+watch(
+  () => [state.camera, composer?.value],
+  () => {
+    if (state.camera && composer && composer.value) {
+      pass.value = new EffectPass(
+        unref(state.camera),
+        new BloomEffect({
+          blendFunction,
+          mipmapBlur,
+          intensity,
+          luminanceThreshold,
+          luminanceSmoothing,
+        }),
+      )
+      composer?.value?.addPass(toRaw(pass.value) as EffectPass)
+    }
+  },
+)
+
+watch(
+  () => [blendFunction.value, mipmapBlur.value, intensity.value, luminanceThreshold.value, luminanceSmoothing.value],
+  () => {
+    if (pass.value) {
+      composer?.value.removePass(toRaw(pass.value) as EffectPass)
+      pass.value = new EffectPass(
+        unref(state.camera),
+        new BloomEffect({
+          blendFunction,
+          mipmapBlur,
+          intensity,
+          luminanceThreshold,
+          luminanceSmoothing,
+        }),
+      )
+      composer?.value?.addPass(toRaw(pass.value) as EffectPass)
+    }
+  },
+)
+</script>
+<template></template>

src/index.ts

@@ -1,5 +1,5 @@
 import EffectComposer from './core/EffectComposer.vue'
-import { Bloom } from './core/effects/Bloom'
+import Bloom from './core/effects/Bloom.vue'
 import { Glitch } from './core/effects/Glitch'
 import { Outline } from './core/effects/Outline'