added invalidation on prop change for pmndrs effects

playground/src/pages/postprocessing/pixelation.vue

@@ -18,7 +18,7 @@ const { granularity } = useControls({
 
 <template>
   <TresLeches />
-  <TresCanvas>
+  <TresCanvas render-mode="on-demand">
     <TresPerspectiveCamera
       :position="[5, 5, 5]"
       :look-at="[0, 0, 0]"

src/core/pmndrs/Bloom.vue

@@ -65,7 +65,7 @@ const props = withDefaults(
   },
 )
 
-const { pass, effect } = useEffect(() => new BloomEffect(props))
+const { pass, effect } = useEffect(() => new BloomEffect(props), props)
 
 defineExpose({ pass, effect })
 

src/core/pmndrs/DepthOfField.vue

@@ -44,7 +44,7 @@ export interface DepthOfFieldProps {
 const props = defineProps<DepthOfFieldProps>()
 const { camera } = useTresContext()
 
-const { pass, effect } = useEffect(() => new DepthOfFieldEffect(camera.value, props))
+const { pass, effect } = useEffect(() => new DepthOfFieldEffect(camera.value, props), props)
 defineExpose({ pass, effect })
 
 makePropWatchers(

src/core/pmndrs/Glitch.vue

@@ -54,7 +54,7 @@ export interface GlitchProps {
 
 const props = defineProps<GlitchProps>()
 
-const { pass, effect } = useEffect(() => new GlitchEffect(props))
+const { pass, effect } = useEffect(() => new GlitchEffect(props), props)
 defineExpose({ pass, effect })
 
 watchEffect(() => {

src/core/pmndrs/Noise.vue

@@ -17,7 +17,7 @@ const props = withDefaults(defineProps<NoiseProps>(), {
   blendFunction: BlendFunction.SCREEN,
 })
 
-const { pass, effect } = useEffect(() => new NoiseEffect(props))
+const { pass, effect } = useEffect(() => new NoiseEffect(props), props)
 defineExpose({ pass, effect })
 
 makePropWatchersUsingAllProps(

src/core/pmndrs/Outline.vue

@@ -86,7 +86,7 @@ const params: OutlineEffectParameters = {
   visibleEdgeColor: colorToNumber(props.visibleEdgeColor),
 }
 
-const { pass, effect } = useEffect(() => new OutlineEffect(scene.value, camera.value, params))
+const { pass, effect } = useEffect(() => new OutlineEffect(scene.value, camera.value, params), props)
 
 defineExpose({ pass, effect })
 

src/core/pmndrs/Pixelation.vue

@@ -12,7 +12,7 @@ export interface PixelationProps {
 
 const props = defineProps<PixelationProps>()
 
-const { pass, effect } = useEffect(() => new PixelationEffect(props.granularity))
+const { pass, effect } = useEffect(() => new PixelationEffect(props.granularity), props)
 defineExpose({ pass, effect })
 
 makePropWatchersUsingAllProps(

src/core/pmndrs/Vignette.vue

@@ -21,7 +21,7 @@ const props = withDefaults(defineProps<VignetteProps>(), {
   darkness: 0.5,
 })
 
-const { pass, effect } = useEffect(() => new VignetteEffect(props))
+const { pass, effect } = useEffect(() => new VignetteEffect(props), props)
 defineExpose({ pass, effect })
 
 makePropWatchersUsingAllProps(

src/core/pmndrs/composables/useEffect.ts

@@ -1,19 +1,26 @@
 import { useTresContext } from '@tresjs/core'
 import { EffectPass } from 'postprocessing'
-import { inject, nextTick, onUnmounted, shallowRef, watchEffect } from 'vue'
+import { inject, nextTick, onUnmounted, shallowRef, watch, watchEffect } from 'vue'
 import type { Effect } from 'postprocessing'
-import type { ShallowRef } from 'vue'
+import type { Reactive, ShallowRef } from 'vue'
 import { effectComposerInjectionKey } from '../EffectComposer.vue'
 
-export const useEffect = <T extends Effect>(newEffectFunction: () => T): {
+export const useEffect = <T extends Effect>(
+  newEffectFunction: () => T,
+  passDependencies: Reactive<object>,
+): {
   pass: ShallowRef<EffectPass | null>
   effect: ShallowRef<T | null>
 } => {
   const composer = inject(effectComposerInjectionKey)
   const pass = shallowRef<EffectPass | null>(null) as ShallowRef<EffectPass | null>
   const effect = shallowRef<T | null>(null) as ShallowRef<T | null>
 
-  const { scene, camera } = useTresContext()
+  const { scene, camera, invalidate } = useTresContext()
+
+  if (passDependencies) {
+    watch(passDependencies, () => invalidate())
+  }
 
   watchEffect(() => {
     if (!camera.value || !effect?.value) { return }