Web3D/trois
1
0
Fork 0
mirror of https://github.com/troisjs/trois.git synced 2024-11-24 04:12:02 +08:00
Code Issues Projects Releases Wiki Activity

wip : godrays

Browse Source
This commit is contained in:
Kevin Levron 2021-05-02 20:16:23 +02:00
parent 561ae0938d
commit 1fe694743c
1 changed files with 39 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/postprocessing/vanruesc/Effect.ts
View File

@ -1,12 +1,10 @@
import { defineComponent, inject, onUnmounted, PropType } from 'vue' import { defineComponent, inject, onMounted, onUnmounted, PropType } from 'vue'
import { LoadingManager } from 'three' import { LoadingManager } from 'three'
// @ts-ignore // @ts-ignore
import * as PP from 'postprocessing' import * as PP from 'postprocessing'
// import { RendererInterface } from '../../../build/trois' import { EffectPassInjectionKey, EffectPassInterface } from './EffectPass'
import { RendererInterface } from '../../../export'
import { EffectPassInjectionKey } from './EffectPass'
type EffectTypes = 'bloom' | 'dof' | 'smaa' type EffectTypes = 'bloom' | 'dof' | 'godrays' | 'smaa'
export default defineComponent({ export default defineComponent({
props: { props: {
@ -22,10 +20,9 @@ export default defineComponent({
let effect: undefined | PP.Effect // not useful let effect: undefined | PP.Effect // not useful
const effectIndex = effectPass.getEffectIndex() const effectIndex = effectPass.getEffectIndex()
// console.log(effectIndex)
const initEffect = (params: any = undefined) => { 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) { if (!effect) {
console.error('Invalid effect type') console.error('Invalid effect type')
return return
@ -33,27 +30,29 @@ export default defineComponent({
effectPass.addEffect(effect, effectIndex) 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(() => { onUnmounted(() => {
if (effect) { if (effect) {
effectPass.removeEffect(effect) effectPass.removeEffect(effect)
effect.dispose() 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 [] }, render() { return [] },
}) })
function createEffect( function createEffect(
renderer: RendererInterface, effectPass: EffectPassInterface,
type: string, type: string,
options: Record<string, any>, options: Record<string, any>,
assets: any = undefined assets: any = undefined
@ -64,7 +63,10 @@ function createEffect(
effect = new PP.BloomEffect(options) effect = new PP.BloomEffect(options)
break break
case 'dof' : case 'dof' :
effect = new PP.DepthOfFieldEffect(renderer, options) effect = new PP.DepthOfFieldEffect(effectPass.composer.renderer, options)
break
case 'godrays' :
effect = createGodraysEffect(effectPass, options)
break break
case 'smaa' : case 'smaa' :
effect = createSmaaEffect(options, assets) effect = createSmaaEffect(options, assets)
@ -78,3 +80,22 @@ function createSmaaEffect(options: Record<string, any>, assets: any): PP.Pass {
// TODO : options // TODO : options
return new PP.SMAAEffect(smaaSearch, smaaArea) return new PP.SMAAEffect(smaaSearch, smaaArea)
} }
function createGodraysEffect(effectPass: EffectPassInterface, options: Record<string, any>): 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)
}