docs: unreal bloom

docs/.vitepress/theme/components/three/UnrealBloomThreeDemo.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { EffectComposer, UnrealBloom } from '@tresjs/post-processing/three'
+import { Color } from 'three'
+import { reactive } from 'vue'
+
+import { useRouteDisposal } from '../../composables/useRouteDisposal'
+
+const gl = {
+  clearColor: '#121212',
+  shadows: true,
+  alpha: false,
+}
+
+const bloomParams = reactive({
+  radius: 0.5,
+  strength: 0.9,
+  threshold: 0.5,
+})
+
+// Need to dispose of the effect composer when the route changes because Vitepress doesnt unmount the components
+const { effectComposer } = useRouteDisposal()
+</script>
+
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera
+      :position="[5, 5, 5]"
+      :look-at="[0, 0, 0]"
+    />
+    <TresMesh>
+      <TresSphereGeometry :args="[2, 32, 32]" />
+      <TresMeshStandardMaterial
+        color="hotpink"
+        :emissive="new Color('hotpink')"
+        :emissive-intensity="1.2"
+      />
+    </TresMesh>
+    <TresGridHelper />
+
+    <TresAmbientLight :intensity="2" />
+    <TresDirectionalLight
+      :position="[3, 3, 3]"
+      :intensity="1"
+    />
+    <Suspense>
+      <EffectComposer ref="effectComposer">
+        <UnrealBloom v-bind="bloomParams" />
+      </EffectComposer>
+    </Suspense>
+  </TresCanvas>
+</template>

docs/components.d.ts

@@ -24,6 +24,7 @@ declare module 'vue' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SMAAThreeDemo: typeof import('./.vitepress/theme/components/three/SMAAThreeDemo.vue')['default']
+    UnrealBloomThreeDemo: typeof import('./.vitepress/theme/components/three/UnrealBloomThreeDemo.vue')['default']
     VignetteDemo: typeof import('./.vitepress/theme/components/pmdrs/VignetteDemo.vue')['default']
   }
 }

docs/guide/three/unreal-bloom.md

@@ -0,0 +1,29 @@
+# Unreal Bloom
+
+<DocsDemo>
+  <UnrealBloomThreeDemo />
+</DocsDemo>
+
+Unreal Bloom is an effect that simulates the bloom effect seen in many modern video games. It creates a glow around bright areas of the scene, giving it a more vibrant and dynamic look.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { EffectComposer, UnrealBloom } from '@tresjs/post-processing/three'
+</script>
+
+<template>
+  <EffectComposer>
+    <UnrealBloom :radius="0.5" :strength="1.5" :threshold="0.8" />
+  </EffectComposer>
+</template>
+```
+
+## Props
+
+| Prop       | Description                                                                                       | Default |
+|------------|---------------------------------------------------------------------------------------------------|---------|
+| `radius`   | The radius of the bloom effect.                                                                   | `0`     |
+| `strength` | The strength of the bloom effect.                                                                 | `1`     |
+| `threshold`| The threshold luminance for the bloom effect.                                                     | `0`     |