diff --git a/CHANGELOG.md b/CHANGELOG.md index 9ec9793e..fb44d01e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # Changelog +## [2.3.1](https://github.com/Tresjs/post-processing/compare/2.3.0...2.3.1) (2025-03-29) + +### Bug Fixes + +* god rays async light source ([#194](https://github.com/Tresjs/post-processing/issues/194)) ([7c5bfe0](https://github.com/Tresjs/post-processing/commit/7c5bfe0344d21d63a468a5553b5bdd39d7dd8388)) + ## [2.3.0](https://github.com/Tresjs/post-processing/compare/2.2.0...2.3.0) (2025-03-26) ### Features diff --git a/package.json b/package.json index 03dc67dc..35cb1081 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@tresjs/post-processing", "type": "module", - "version": "2.3.0", + "version": "2.3.1", "packageManager": "pnpm@10.6.3", "description": "Post-processing library for TresJS", "author": "Alvaro Saburido (https://github.com/alvarosabu/)", diff --git a/playground/src/pages/postprocessing/god-rays.vue b/playground/src/pages/postprocessing/god-rays.vue index a319c76c..f66b520b 100644 --- a/playground/src/pages/postprocessing/god-rays.vue +++ b/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 - + diff --git a/src/core/pmndrs/GodRaysPmndrs.vue b/src/core/pmndrs/GodRaysPmndrs.vue index 332c6c8b..6836af50 100644 --- a/src/core/pmndrs/GodRaysPmndrs.vue +++ b/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() 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,13 +110,23 @@ 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], () => { @@ -116,7 +134,10 @@ watch( 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() }