fix: god rays async light source (#194)

* fix: god rays async light source

* fix: direct testing

* fix: lint

* fix: direct testing

* fix: code review

* fix: add reactive computef

* fix: code review and change deprecated

Author: damienmontastier

playground/src/pages/postprocessing/god-rays.vue

@@ -5,6 +5,7 @@ import { TresLeches, useControls } from '@tresjs/leches'
 import { NoToneMapping } from 'three'
 import { BlendFunction, KernelSize, Resolution } from 'postprocessing'
 import { EffectComposerPmndrs, GodRaysPmndrs } from '@tresjs/post-processing'
+import { shallowRef } from 'vue'
 
 import '@tresjs/leches/styles'
 
@@ -14,8 +15,7 @@ const gl = {
   multisampling: 8,
 }
 
-const boxMeshRef = ref(null)
-const sphereMeshRef = ref(null)
+const sphereMeshRef = shallowRef(null)
 
 const { blur, kernelSize, resolutionX, resolutionY, resolutionScale, opacity, blendFunction, density, decay, weight, exposure, samples, clampMax } = useControls({
   blendFunction: {
@@ -69,7 +69,7 @@ const { blur, kernelSize, resolutionX, resolutionY, resolutionScale, opacity, bl
       <TresMeshBasicMaterial color="#FFDDAA" />
     </TresMesh>
 
-    <TresMesh ref="boxMeshRef" :position="[0, .5, 0]">
+    <TresMesh :position="[0, .5, 0]">
       <TresBoxGeometry :args="[2, 2, 2]" />
       <TresMeshBasicMaterial color="white" />
     </TresMesh>

src/core/pmndrs/GodRaysPmndrs.vue

@@ -4,8 +4,9 @@ import { GodRaysEffect } from 'postprocessing'
 import { makePropWatchers } from '../../util/prop'
 import { useEffectPmndrs } from './composables/useEffectPmndrs'
 import { useTresContext } from '@tresjs/core'
-import { toRaw, watch } from 'vue'
-import type { Mesh, Points } from 'three'
+import { computed, toRaw, watch } from 'vue'
+import type { Points } from 'three'
+import { Mesh, MeshBasicMaterial, SphereGeometry } from 'three'
 
 export interface GodRaysPmndrsProps {
   /**
@@ -16,7 +17,7 @@ export interface GodRaysPmndrsProps {
   /**
    * The light source. Must not write depth and has to be flagged as transparent.
    */
-  lightSource?: Mesh | Points
+  lightSource?: Mesh | Points | null
 
   /**
    * The opacity of the God Rays.
@@ -83,8 +84,15 @@ const props = defineProps<GodRaysPmndrsProps>()
 
 const { camera } = useTresContext()
 
+const resolvedLightSource = computed(() =>
+  props.lightSource ?? new Mesh(
+    new SphereGeometry(0.00001),
+    new MeshBasicMaterial({ visible: false }),
+  ),
+)
+
 const { pass, effect } = useEffectPmndrs(
-  () => new GodRaysEffect(camera.value, toRaw(props.lightSource), props),
+  () => new GodRaysEffect(camera.value, resolvedLightSource.value, props),
   props,
 )
 
@@ -102,21 +110,34 @@ makePropWatchers(
     [() => props.resolutionScale, 'resolution.scale'],
     [() => props.resolutionX, 'resolution.width'],
     [() => props.resolutionY, 'resolution.height'],
-    [() => props.kernelSize, 'kernelSize'],
-    [() => props.blur, 'blur'],
+    [() => props.kernelSize, 'blurPass.kernelSize'],
+    [() => props.blur, 'blurPass.enabled'],
   ],
   effect,
   () => new GodRaysEffect(),
 )
 
+watch(
+  [() => props.lightSource, effect],
+  () => {
+    if (effect.value) {
+      effect.value.lightSource = toRaw(resolvedLightSource.value)
+    }
+  },
+  { immediate: true },
+)
+
 watch(
   [() => props.opacity],
   () => {
     if (props.opacity !== undefined) {
       effect.value?.blendMode.setOpacity(props.opacity)
     }
     else {
-      const plainEffect = new GodRaysEffect(camera.value, toRaw(props.lightSource))
+      const plainEffect = new GodRaysEffect(
+        camera.value,
+        toRaw(resolvedLightSource.value),
+      )
       effect.value?.blendMode.setOpacity(plainEffect.blendMode.getOpacity())
       plainEffect.dispose()
     }