From 8f51ca222de57f14f59080915e75f9cefb007e2e Mon Sep 17 00:00:00 2001
From: Tino Koch <17991193+Tinoooo@users.noreply.github.com>
Date: Thu, 5 Sep 2024 20:23:15 +0200
Subject: [PATCH] added unreal bloom effect

---
 playground/src/pages/three/unreal-bloom.vue | 25 ++++++++++
 playground/src/router.ts                    |  1 +
 src/core/three/UnrealBloom.vue              | 53 +++++++++++++++++++++
 src/index.ts                                |  6 ++-
 4 files changed, 83 insertions(+), 2 deletions(-)
 create mode 100644 playground/src/pages/three/unreal-bloom.vue
 create mode 100644 src/core/three/UnrealBloom.vue

diff --git a/playground/src/pages/three/unreal-bloom.vue b/playground/src/pages/three/unreal-bloom.vue
new file mode 100644
index 0000000..0cad4f9
--- /dev/null
+++ b/playground/src/pages/three/unreal-bloom.vue
@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import { OutputThree, UnrealBloomThree } from '@tresjs/post-processing'
+import { ref } from 'vue'
+import BasicScene from '../../components/BasicScene.vue'
+
+const enabled = ref(true)
+
+const radius = ref(0.85)
+const strength = ref(0.4)
+const threshold = ref(0.1)
+</script>
+
+<template>
+  <div class="absolute top-0 left-0 z-10">
+    <input v-model="enabled" type="checkbox" /> enabled
+    <input v-model.number="radius" type="range" min="0" max="1" step="0.01" /> radius
+    <input v-model.number="strength" type="range" min="0" max="1" step="0.01" /> strength
+    <input v-model.number="threshold" type="range" min="0" max="1" step="0.01" /> threshold
+  </div>
+  <BasicScene>
+    <template #effects>
+      <UnrealBloomThree v-if="enabled" :radius="radius" :strength="strength" :threshold="threshold" />
+    </template>
+  </BasicScene>
+</template>
diff --git a/playground/src/router.ts b/playground/src/router.ts
index f435839..c0c9ada 100644
--- a/playground/src/router.ts
+++ b/playground/src/router.ts
@@ -28,6 +28,7 @@ export const threeRoutes = [
   makeRoute('Glitch', '📺'),
   makeRoute('SMAA', '📐'),
   makeRoute('Halftone', '🎨'),
+  makeRoute('Unreal Bloom', '🌼'),
 ]
 
 export const postProcessingRoutes = [
diff --git a/src/core/three/UnrealBloom.vue b/src/core/three/UnrealBloom.vue
new file mode 100644
index 0000000..7239570
--- /dev/null
+++ b/src/core/three/UnrealBloom.vue
@@ -0,0 +1,53 @@
+<script lang="ts">
+import { Vector2 } from 'three'
+import { computed, watchEffect } from 'vue'
+import { useTresContext } from '@tresjs/core'
+import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js'
+import { LuminosityHighPassShader } from 'three/examples/jsm/shaders/LuminosityHighPassShader.js'
+import { useEffectThree } from '../composables/useEffectThree'
+
+export interface UnrealBloomProps {
+  radius?: number
+  strength?: number
+  threshold?: number
+}
+</script>
+
+<script lang="ts" setup>
+const props = withDefaults(defineProps<UnrealBloomProps>(), {
+  radius: 0,
+  strength: 1,
+  threshold: 0,
+})
+
+const { sizes } = useTresContext()
+const sizeVector = computed(() => new Vector2(sizes.width.value, sizes.height.value))
+const { pass } = useEffectThree(() => new UnrealBloomPass(sizeVector.value, props.radius, props.strength, props.threshold))
+
+defineExpose({ pass })
+
+watchEffect(() => {
+  // should this be done for all passes? 🤔
+  pass.value.setSize(sizes.width.value, sizes.height.value)
+})
+
+watchEffect(() => {
+  pass.value.radius = props.radius
+  ?? pass.value.getCompositeMaterial().uniforms.bloomRadius?.value
+  ?? 0.1
+})
+
+watchEffect(() => {
+  pass.value.strength
+  = props.strength
+  ?? pass.value.getCompositeMaterial().uniforms.bloomStrength?.value
+  ?? 1
+})
+
+watchEffect(() => {
+  pass.value.threshold
+  = props.threshold
+  ?? LuminosityHighPassShader.uniforms.luminosityThreshold?.value
+  ?? 1
+})
+</script>
diff --git a/src/index.ts b/src/index.ts
index 9beb782..bd831f1 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -11,6 +11,7 @@ import DepthOfField from './core/postprocessing/DepthOfField.vue'
 import HalftoneThree from './core/three/Halftone.vue' // TODO seperate exports differently
 import EffectComposer from './core/EffectComposer.vue'
 import PixelationThree from './core/three/Pixelation.vue' // TODO seperate exports differently
+import UnrealBloomThree from './core/three/UnrealBloom.vue' // TODO seperate exports differently
 import EffectComposerThree from './core/three/EffectComposer.vue'
 
 import { useEffect } from './core/composables/effect'
@@ -24,16 +25,17 @@ export {
   Vignette,
   Pixelation,
   DepthOfField,
-  EffectComposer,
 
   useEffect,
+  EffectComposer,
 
   SMAAThree,
   GlitchThree,
   OutputThree,
   HalftoneThree,
   PixelationThree,
-  EffectComposerThree,
+  UnrealBloomThree,
 
   useEffectThree,
+  EffectComposerThree,
 }