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 : postprocessing

Browse Source
This commit is contained in:
Kevin Levron 2021-05-11 21:24:58 +02:00
parent b00c35519b
commit 3a79e5e849
2 changed files with 31 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/postprocessing/vanruesc/Effect.js
View File

@ -1,4 +1,4 @@
import { defineComponent, inject, onMounted, onUnmounted } from 'vue' import { defineComponent, inject, onMounted, onUnmounted, watch } from 'vue'
import { LoadingManager } from 'three' import { LoadingManager } from 'three'
import { BloomEffect, DepthOfFieldEffect, EdgeDetectionMode, GodRaysEffect, SMAAEffect, SMAAImageLoader, SMAAPreset } from 'postprocessing' import { BloomEffect, DepthOfFieldEffect, EdgeDetectionMode, GodRaysEffect, SMAAEffect, SMAAImageLoader, SMAAPreset } from 'postprocessing'
import { EffectPassInjectionKey } from './EffectPass' import { EffectPassInjectionKey } from './EffectPass'
@ -22,7 +22,7 @@ export default defineComponent({
const effectIndex = effectPass.getEffectIndex() const effectIndex = effectPass.getEffectIndex()
const initEffect = (params) => { const initEffect = (params) => {
effect = createEffect(effectPass, props.type, props.options, params) effect = createEffect(effectPass, props, params)
if (!effect) { if (!effect) {
console.error('Invalid effect type') console.error('Invalid effect type')
return return
@ -52,34 +52,51 @@ export default defineComponent({
render() { return [] }, render() { return [] },
}) })
function createEffect(effectPass, type, options, assets) { function createEffect(effectPass, props, assets) {
let effect let effect
switch (type) { switch (props.type) {
case 'bloom' : case 'bloom' :
effect = new BloomEffect(options) effect = createBloomEffect(props)
break break
case 'dof' : case 'dof' :
effect = new DepthOfFieldEffect(effectPass.composer.renderer, options) effect = createDepthOfFieldEffect(effectPass, props)
break break
case 'godrays' : case 'godrays' :
effect = createGodraysEffect(effectPass, options) effect = createGodraysEffect(effectPass, props)
break break
case 'smaa' : case 'smaa' :
effect = createSmaaEffect(options, assets) effect = createSmaaEffect(props, assets)
break break
} }
return effect 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 { 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) return new SMAAEffect(smaaSearch, smaaArea, ...params)
} }
function createGodraysEffect(effectPass, options) { function createGodraysEffect(effectPass, props) {
const opts = { ...options } const opts = { ...props.options }
const { lightSource } = options const { lightSource } = props.options
if (typeof lightSource !== 'string') { if (typeof lightSource !== 'string') {
console.error('Invalid lightSource') console.error('Invalid lightSource')
return return

1
src/components/postprocessing/vanruesc/EffectComposer.js
View File

@ -2,6 +2,7 @@ import { inject, onUnmounted, provide } from 'vue'
import { Clock } from 'three' import { Clock } from 'three'
import { EffectComposer } from 'postprocessing' import { EffectComposer } from 'postprocessing'
import { RendererInjectionKey } from '../../../../build/trois.module.js' import { RendererInjectionKey } from '../../../../build/trois.module.js'
// import { RendererInjectionKey } from '../../../core'
export const ComposerInjectionKey = Symbol('Composer') export const ComposerInjectionKey = Symbol('Composer')