diff --git a/src/components/postprocessing/vanruesc/Effect.js b/src/components/postprocessing/vanruesc/Effect.js index fdf7247..17b5606 100644 --- a/src/components/postprocessing/vanruesc/Effect.js +++ b/src/components/postprocessing/vanruesc/Effect.js @@ -1,4 +1,4 @@ -import { defineComponent, inject, onMounted, onUnmounted } from 'vue' +import { defineComponent, inject, onMounted, onUnmounted, watch } from 'vue' import { LoadingManager } from 'three' import { BloomEffect, DepthOfFieldEffect, EdgeDetectionMode, GodRaysEffect, SMAAEffect, SMAAImageLoader, SMAAPreset } from 'postprocessing' import { EffectPassInjectionKey } from './EffectPass' @@ -22,7 +22,7 @@ export default defineComponent({ const effectIndex = effectPass.getEffectIndex() const initEffect = (params) => { - effect = createEffect(effectPass, props.type, props.options, params) + effect = createEffect(effectPass, props, params) if (!effect) { console.error('Invalid effect type') return @@ -52,34 +52,51 @@ export default defineComponent({ render() { return [] }, }) -function createEffect(effectPass, type, options, assets) { +function createEffect(effectPass, props, assets) { let effect - switch (type) { + switch (props.type) { case 'bloom' : - effect = new BloomEffect(options) + effect = createBloomEffect(props) break case 'dof' : - effect = new DepthOfFieldEffect(effectPass.composer.renderer, options) + effect = createDepthOfFieldEffect(effectPass, props) break case 'godrays' : - effect = createGodraysEffect(effectPass, options) + effect = createGodraysEffect(effectPass, props) break case 'smaa' : - effect = createSmaaEffect(options, assets) + effect = createSmaaEffect(props, assets) break } return effect } -function createSmaaEffect(options, assets) { +function createBloomEffect(props) { + const effect = new BloomEffect(props.options) + watch(() => props.options.luminanceThreshold, (value) => { effect.luminanceMaterial.threshold = value }) + watch(() => props.options.luminanceSmoothing, (value) => { effect.luminanceMaterial.smoothing = value }) + watch(() => props.options.intensity, (value) => { effect.intensity = value }) + return effect +} + +function createDepthOfFieldEffect(effectPass, props) { + const effect = new DepthOfFieldEffect(effectPass.composer.renderer, props.options) + const uniforms = effect.circleOfConfusionMaterial.uniforms + watch(() => props.options.focusDistance, (value) => { uniforms.focusDistance.value = value }) + watch(() => props.options.focalLength, (value) => { uniforms.focalLength.value = value }) + watch(() => props.options.bokehScale, (value) => { effect.bokehScale = value }) + return effect +} + +function createSmaaEffect(props, assets) { const { smaaSearch, smaaArea } = assets - const params = [options.preset ?? SMAAPreset.HIGH, options.edgeDetectionMode ?? EdgeDetectionMode.COLOR] + const params = [props.options.preset ?? SMAAPreset.HIGH, props.options.edgeDetectionMode ?? EdgeDetectionMode.COLOR] return new SMAAEffect(smaaSearch, smaaArea, ...params) } -function createGodraysEffect(effectPass, options) { - const opts = { ...options } - const { lightSource } = options +function createGodraysEffect(effectPass, props) { + const opts = { ...props.options } + const { lightSource } = props.options if (typeof lightSource !== 'string') { console.error('Invalid lightSource') return diff --git a/src/components/postprocessing/vanruesc/EffectComposer.js b/src/components/postprocessing/vanruesc/EffectComposer.js index 74c6d52..a98a050 100644 --- a/src/components/postprocessing/vanruesc/EffectComposer.js +++ b/src/components/postprocessing/vanruesc/EffectComposer.js @@ -2,6 +2,7 @@ import { inject, onUnmounted, provide } from 'vue' import { Clock } from 'three' import { EffectComposer } from 'postprocessing' import { RendererInjectionKey } from '../../../../build/trois.module.js' +// import { RendererInjectionKey } from '../../../core' export const ComposerInjectionKey = Symbol('Composer')