wip : postprocessing

Author: klevron

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

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