From 8e9c5343af1f883987155d415316d6b1815321ee Mon Sep 17 00:00:00 2001
From: Tino Koch <17991193+Tinoooo@users.noreply.github.com>
Date: Thu, 12 Sep 2024 23:47:40 +0200
Subject: [PATCH] added invalidation on pass changes for native three effects

---
 playground/src/components/BasicScene.vue |  2 +-
 src/core/pmndrs/composables/useEffect.ts |  8 +++-----
 src/core/three/Glitch.vue                |  2 +-
 src/core/three/Halftone.vue              |  3 ++-
 src/core/three/Pixelation.vue            |  2 +-
 src/core/three/SMAA.vue                  |  2 +-
 src/core/three/UnrealBloom.vue           |  2 +-
 src/core/three/composables/useEffect.ts  | 24 +++++++++++++++++-------
 8 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/playground/src/components/BasicScene.vue b/playground/src/components/BasicScene.vue
index 94aa6499..bdfe136a 100644
--- a/playground/src/components/BasicScene.vue
+++ b/playground/src/components/BasicScene.vue
@@ -9,7 +9,7 @@ defineProps<{
 </script>
 
 <template>
-  <TresCanvas>
+  <TresCanvas render-mode="on-demand">
     <TresPerspectiveCamera
       :position="[5, 5, 5]"
       :look-at="[0, 0, 0]"
diff --git a/src/core/pmndrs/composables/useEffect.ts b/src/core/pmndrs/composables/useEffect.ts
index 034cb75e..d3d74864 100644
--- a/src/core/pmndrs/composables/useEffect.ts
+++ b/src/core/pmndrs/composables/useEffect.ts
@@ -1,6 +1,6 @@
 import { useTresContext } from '@tresjs/core'
 import { EffectPass } from 'postprocessing'
-import { inject, onUnmounted, shallowRef, watchEffect } from 'vue'
+import { inject, nextTick, onUnmounted, shallowRef, watchEffect } from 'vue'
 import type { Effect } from 'postprocessing'
 import type { ShallowRef } from 'vue'
 import { effectComposerInjectionKey } from '../EffectComposer.vue'
@@ -21,12 +21,10 @@ export const useEffect = <T extends Effect>(newEffectFunction: () => T): {
     effect.value.mainCamera = camera.value
   })
 
-  let unwatch = () => {} // seperate declaration prevents error in HMR
-
-  unwatch = watchEffect(() => {
+  const unwatch = watchEffect(() => {
     if (!camera.value || !composer?.value || !scene.value) { return }
 
-    unwatch()
+    nextTick(() => unwatch())
     if (effect.value) { return }
 
     effect.value = newEffectFunction()
diff --git a/src/core/three/Glitch.vue b/src/core/three/Glitch.vue
index 49bc1d63..a7751616 100644
--- a/src/core/three/Glitch.vue
+++ b/src/core/three/Glitch.vue
@@ -18,7 +18,7 @@ export interface GlitchProps {
 <script lang="ts" setup>
 const props = defineProps<GlitchProps>()
 
-const { pass } = useEffect(() => new GlitchPass(props.dtSize))
+const { pass } = useEffect(() => new GlitchPass(props.dtSize), props)
 
 defineExpose({ pass })
 
diff --git a/src/core/three/Halftone.vue b/src/core/three/Halftone.vue
index 8357782d..dedfe8d7 100644
--- a/src/core/three/Halftone.vue
+++ b/src/core/three/Halftone.vue
@@ -40,7 +40,8 @@ const { pass } = useEffect(() => new HalftonePass(
   sizes.width.value,
   sizes.height.value,
   shakedProps.value,
-))
+), props)
+
 defineExpose({ pass })
 
 watchEffect(() => {
diff --git a/src/core/three/Pixelation.vue b/src/core/three/Pixelation.vue
index 475ad97f..e52f2e4c 100644
--- a/src/core/three/Pixelation.vue
+++ b/src/core/three/Pixelation.vue
@@ -17,7 +17,7 @@ const props = defineProps<PixelationProps>()
 
 const { scene, camera } = useTresContext()
 
-const { pass } = useEffect(() => new RenderPixelatedPass(props.pixelSize, scene.value, camera.value!))
+const { pass } = useEffect(() => new RenderPixelatedPass(props.pixelSize, scene.value, camera.value!), props)
 
 defineExpose({ pass })
 
diff --git a/src/core/three/SMAA.vue b/src/core/three/SMAA.vue
index 6e93d0a9..65ed8c47 100644
--- a/src/core/three/SMAA.vue
+++ b/src/core/three/SMAA.vue
@@ -16,7 +16,7 @@ const { pixelRatio } = useDevicePixelRatio() // the renderers pixel ratio is not
 const width = computed(() => props.width ?? sizes.width.value * pixelRatio.value)
 const height = computed(() => props.height ?? sizes.height.value * pixelRatio.value)
 
-const { pass } = useEffect(() => new SMAAPass(width.value, height.value))
+const { pass } = useEffect(() => new SMAAPass(width.value, height.value), props)
 
 defineExpose({ pass })
 
diff --git a/src/core/three/UnrealBloom.vue b/src/core/three/UnrealBloom.vue
index 731cc6f3..14eb38e7 100644
--- a/src/core/three/UnrealBloom.vue
+++ b/src/core/three/UnrealBloom.vue
@@ -26,7 +26,7 @@ const { pass } = useEffect(() => new UnrealBloomPass(
   props.radius,
   props.strength,
   props.threshold,
-))
+), props)
 
 defineExpose({ pass })
 
diff --git a/src/core/three/composables/useEffect.ts b/src/core/three/composables/useEffect.ts
index f2a7a33e..343a44c3 100644
--- a/src/core/three/composables/useEffect.ts
+++ b/src/core/three/composables/useEffect.ts
@@ -1,21 +1,31 @@
 import { useTresContext } from '@tresjs/core'
-import { inject, onUnmounted, shallowRef, watchEffect } from 'vue'
+import { inject, nextTick, onUnmounted, shallowRef, watch, watchEffect } from 'vue'
 import type { Pass } from 'three/examples/jsm/postprocessing/Pass.js'
-import type { ShallowRef } from 'vue'
+import type { Reactive, ShallowRef } from 'vue'
 import { effectComposerInjectionKey } from '../EffectComposer.vue'
 
-export const useEffect = <T extends Pass>(newPassFunction: () => T): { pass: ShallowRef<T> } => {
+/**
+ * @param newPassFunction - A function that returns a new pass instance.
+ * @param passDependencies - A reactive object that the pass depends on (usually props). Changes to this object will trigger re-rendering.
+ */
+export const useEffect = <T extends Pass>(
+  newPassFunction: () => T,
+  passDependencies?: Reactive<object>,
+): { pass: ShallowRef<T> } => {
   const composer = inject(effectComposerInjectionKey)
 
   const pass = shallowRef<T>(newPassFunction()) as ShallowRef<T>
-  const { sizes } = useTresContext()
+  const { sizes, invalidate } = useTresContext()
 
-  let unwatch = () => {} // seperate declaration prevents error in HMR
-  unwatch = watchEffect(() => {
+  if (passDependencies) {
+    watch(passDependencies, () => invalidate())
+  }
+
+  const unwatch = watchEffect(() => {
     if (!composer?.value || !sizes.height.value || !sizes.width.value) { return }
 
     composer.value.addPass(pass.value)
-    unwatch()
+    nextTick(() => unwatch())
   })
 
   onUnmounted(() => {