added invalidation on pass changes for native three effects

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]"

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()

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 })
 

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(() => {

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 })
 

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 })
 

src/core/three/UnrealBloom.vue

@@ -26,7 +26,7 @@ const { pass } = useEffect(() => new UnrealBloomPass(
   props.radius,
   props.strength,
   props.threshold,
-))
+), props)
 
 defineExpose({ pass })
 

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(() => {