From 1fe694743c4b9c3183f105a77408cd6a745f9cb0 Mon Sep 17 00:00:00 2001 From: Kevin Levron Date: Sun, 2 May 2021 20:16:23 +0200 Subject: [PATCH] wip : godrays --- .../postprocessing/vanruesc/Effect.ts | 57 +++++++++++++------ 1 file changed, 39 insertions(+), 18 deletions(-) diff --git a/src/components/postprocessing/vanruesc/Effect.ts b/src/components/postprocessing/vanruesc/Effect.ts index 0555d69..5757b4e 100644 --- a/src/components/postprocessing/vanruesc/Effect.ts +++ b/src/components/postprocessing/vanruesc/Effect.ts @@ -1,12 +1,10 @@ -import { defineComponent, inject, onUnmounted, PropType } from 'vue' +import { defineComponent, inject, onMounted, onUnmounted, PropType } from 'vue' import { LoadingManager } from 'three' // @ts-ignore import * as PP from 'postprocessing' -// import { RendererInterface } from '../../../build/trois' -import { RendererInterface } from '../../../export' -import { EffectPassInjectionKey } from './EffectPass' +import { EffectPassInjectionKey, EffectPassInterface } from './EffectPass' -type EffectTypes = 'bloom' | 'dof' | 'smaa' +type EffectTypes = 'bloom' | 'dof' | 'godrays' | 'smaa' export default defineComponent({ props: { @@ -22,10 +20,9 @@ export default defineComponent({ let effect: undefined | PP.Effect // not useful const effectIndex = effectPass.getEffectIndex() - // console.log(effectIndex) const initEffect = (params: any = undefined) => { - effect = createEffect(effectPass.composer.renderer, props.type, props.options, params) + effect = createEffect(effectPass, props.type, props.options, params) if (!effect) { console.error('Invalid effect type') return @@ -33,27 +30,29 @@ export default defineComponent({ effectPass.addEffect(effect, effectIndex) } + onMounted(() => { + if (props.type === 'smaa') { + const smaaImageLoader = new PP.SMAAImageLoader(new LoadingManager()) + smaaImageLoader.load(([search, area]: [HTMLImageElement, HTMLImageElement]) => { + initEffect({ smaaSearch: search, smaaArea: area }) + }) + } else { + initEffect() + } + }) + onUnmounted(() => { if (effect) { effectPass.removeEffect(effect) effect.dispose() } }) - - if (props.type === 'smaa') { - const smaaImageLoader = new PP.SMAAImageLoader(new LoadingManager()) - smaaImageLoader.load(([search, area]: [HTMLImageElement, HTMLImageElement]) => { - initEffect({ smaaSearch: search, smaaArea: area }) - }) - } else { - initEffect() - } }, render() { return [] }, }) function createEffect( - renderer: RendererInterface, + effectPass: EffectPassInterface, type: string, options: Record, assets: any = undefined @@ -64,7 +63,10 @@ function createEffect( effect = new PP.BloomEffect(options) break case 'dof' : - effect = new PP.DepthOfFieldEffect(renderer, options) + effect = new PP.DepthOfFieldEffect(effectPass.composer.renderer, options) + break + case 'godrays' : + effect = createGodraysEffect(effectPass, options) break case 'smaa' : effect = createSmaaEffect(options, assets) @@ -78,3 +80,22 @@ function createSmaaEffect(options: Record, assets: any): PP.Pass { // TODO : options return new PP.SMAAEffect(smaaSearch, smaaArea) } + +function createGodraysEffect(effectPass: EffectPassInterface, options: Record): PP.Pass { + const opts = { ...options } + const { lightSource } = options + if (!lightSource) { + console.error('Invalid lightSource') + return + } + delete opts.lightSource + + // @ts-ignore + const lightSourceMesh = effectPass.composer.renderer.$root.$refs[lightSource]?.mesh + if (!lightSourceMesh) { + console.error('Invalid lightSource ref') + return + } + + return new PP.GodRaysEffect(effectPass.composer.renderer.camera, lightSourceMesh, opts) +}