mirror of
https://github.com/troisjs/trois.git
synced 2024-11-24 04:12:02 +08:00
wip : godrays
This commit is contained in:
parent
561ae0938d
commit
1fe694743c
@ -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,13 +30,7 @@ export default defineComponent({
|
||||
effectPass.addEffect(effect, effectIndex)
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
if (effect) {
|
||||
effectPass.removeEffect(effect)
|
||||
effect.dispose()
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
if (props.type === 'smaa') {
|
||||
const smaaImageLoader = new PP.SMAAImageLoader(new LoadingManager())
|
||||
smaaImageLoader.load(([search, area]: [HTMLImageElement, HTMLImageElement]) => {
|
||||
@ -48,12 +39,20 @@ export default defineComponent({
|
||||
} else {
|
||||
initEffect()
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (effect) {
|
||||
effectPass.removeEffect(effect)
|
||||
effect.dispose()
|
||||
}
|
||||
})
|
||||
},
|
||||
render() { return [] },
|
||||
})
|
||||
|
||||
function createEffect(
|
||||
renderer: RendererInterface,
|
||||
effectPass: EffectPassInterface,
|
||||
type: string,
|
||||
options: Record<string, any>,
|
||||
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<string, any>, assets: any): PP.Pass {
|
||||
// TODO : options
|
||||
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)
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user