diff --git a/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx b/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx index d931f28fca5..3ff1f1674c5 100755 --- a/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx +++ b/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx @@ -23,10 +23,10 @@ All portions of the code written by the Ethereal Engine team are Copyright © 20 Ethereal Engine. All Rights Reserved. */ -import { BlendFunction, VignetteTechnique } from 'postprocessing' +import { BlendFunction, SMAAPreset, VignetteTechnique } from 'postprocessing' import React, { useState } from 'react' import { useTranslation } from 'react-i18next' -import { Color } from 'three' +import { Color, DisplayP3ColorSpace, LinearDisplayP3ColorSpace, LinearSRGBColorSpace, SRGBColorSpace } from 'three' import { useComponent } from '@etherealengine/ecs/src/ComponentFunctions' import { Effects } from '@etherealengine/spatial/src/renderer/effects/PostProcessing' @@ -43,6 +43,9 @@ import ColorInput from '../inputs/ColorInput' import CompoundNumericInput from '../inputs/CompoundNumericInput' import InputGroup from '../inputs/InputGroup' import SelectInput from '../inputs/SelectInput' +import TexturePreviewInput from '../inputs/TexturePreviewInput' +import Vector2Input from '../inputs/Vector2Input' +import Vector3Input from '../inputs/Vector3Input' import styles from '../styles.module.scss' import PropertyGroup from './PropertyGroup' import { EditorComponentType, commitProperties, commitProperty, updateProperty } from './Util' @@ -52,10 +55,14 @@ enum PropertyTypes { Number, Boolean, Color, + ColorSpace, KernelSize, SMAAPreset, EdgeDetectionMode, PredicationMode, + Texture, + Vector2, + Vector3, VignetteTechnique } @@ -64,6 +71,149 @@ type EffectPropertiesType = { [key: string]: EffectPropertyDetail } type EffectOptionsType = { [key in keyof typeof Effects]: EffectPropertiesType } const EffectsOptions: Partial = { + BloomEffect: { + blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' }, + kernelSize: { propertyType: PropertyTypes.KernelSize, name: 'Kernel Size' }, + intensity: { propertyType: PropertyTypes.Number, name: 'Intensity', min: 0, max: 10, step: 0.01 }, + luminanceSmoothing: { + propertyType: PropertyTypes.Number, + name: 'Luminance Smoothing', + min: 0, + max: 1, + step: 0.01 + }, + luminanceThreshold: { propertyType: PropertyTypes.Number, name: 'Luminance Threshold', min: 0, max: 1, step: 0.01 }, + mipmapBlur: { propertyType: PropertyTypes.Boolean, name: 'Mipmap Blur' }, + radius: { propertyType: PropertyTypes.Number, name: 'Resolution Scale', min: 0, max: 10, step: 0.01 }, + levels: { propertyType: PropertyTypes.Number, name: 'Resolution Scale', min: 1, max: 10, step: 1 } + }, + BrightnessContrastEffect: { + brightness: { propertyType: PropertyTypes.Number, name: 'Brightness', min: -1, max: 1, step: 0.01 }, + contrast: { propertyType: PropertyTypes.Number, name: 'Contrast', min: -1, max: 1, step: 0.01 } + }, + ChromaticAberrationEffect: { + offset: { propertyType: PropertyTypes.Vector2, name: 'Offset' }, + radialModulation: { propertyType: PropertyTypes.Boolean, name: 'Radial Modulation' }, + modulationOffset: { propertyType: PropertyTypes.Number, name: 'Modulation Offset', min: 0, max: 10, step: 0.01 } + }, + ColorAverageEffect: { + blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' } + }, + ColorDepthEffect: { + bits: { propertyType: PropertyTypes.Number, name: 'Bits', min: -1, max: 1, step: 0.01 } + }, + DepthOfFieldEffect: { + blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' }, + bokehScale: { propertyType: PropertyTypes.Number, name: 'Bokeh Scale', min: -10, max: 10, step: 0.01 }, + focalLength: { propertyType: PropertyTypes.Number, name: 'Focal Length', min: 0, max: 1, step: 0.01 }, + focalRange: { propertyType: PropertyTypes.Number, name: 'Focal Range', min: 0, max: 1, step: 0.01 }, + focusDistance: { propertyType: PropertyTypes.Number, name: 'Focus Distance', min: 0, max: 1, step: 0.01 }, + resolutionScale: { propertyType: PropertyTypes.Number, name: 'Resolution Scale', min: -10, max: 10, step: 0.01 } + }, + DotScreenEffect: { + blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' }, + angle: { propertyType: PropertyTypes.Number, name: 'Angle', min: 0, max: 360, step: 0.1 }, + scale: { propertyType: PropertyTypes.Number, name: 'Scale', min: 0, max: 10, step: 0.1 } + }, + FXAAEffect: { + blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' } + }, + GlitchEffect: { + blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' }, + chromaticAberrationOffset: { propertyType: PropertyTypes.Vector2, name: 'Chromatic Aberration Offset' }, + delay: { propertyType: PropertyTypes.Vector2, name: 'Delay' }, + duration: { propertyType: PropertyTypes.Vector2, name: 'Duration' }, + strength: { propertyType: PropertyTypes.Vector2, name: 'Strength' }, + perturbationMap: { propertyType: PropertyTypes.Texture, name: 'Perturbation Map' }, + dtSize: { propertyType: PropertyTypes.Number, name: 'DT Size', min: 0, max: 10, step: 0.1 }, + columns: { propertyType: PropertyTypes.Number, name: 'Columns', min: 0, max: 10, step: 0.1 }, + ratio: { propertyType: PropertyTypes.Number, name: 'Ratio', min: 0, max: 10, step: 0.1 } + }, + GridEffect: { + blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' }, + scale: { propertyType: PropertyTypes.Number, name: 'Scale', min: 0, max: 10, step: 0.1 }, + lineWidth: { propertyType: PropertyTypes.Number, name: 'Line Width', min: 0, max: 10, step: 0.1 } + }, + //GodRaysEffect: { + // blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' }, + // samples: { propertyType: PropertyTypes.Number, name: 'Samples', min: 0, max: 10, step: 0.1 }, + // density: { propertyType: PropertyTypes.Number, name: 'Density', min: 0, max: 10, step: 0.1 }, + // decay: { propertyType: PropertyTypes.Number, name: 'Decay', min: 0, max: 10, step: 0.1 }, + // weight: { propertyType: PropertyTypes.Number, name: 'Weight', min: 0, max: 10, step: 0.1 }, + // exposure: { propertyType: PropertyTypes.Number, name: 'Exposure', min: 0, max: 10, step: 0.1 }, + // clampMax: { propertyType: PropertyTypes.Number, name: 'Clamp Max', min: 0, max: 10, step: 0.1 }, + // resolutionScale: { propertyType: PropertyTypes.Number, name: 'Resolution Scale', min: 0, max: 10, step: 0.1 }, + //resolutionX?: number + //resolutionY?: number + //width?: number + //height?: number + // kernelSize: { propertyType: PropertyTypes.KernelSize, name: 'KernelSize' }, + // blur: { propertyType: PropertyTypes.Boolean, name: 'Blur' } + //}, + HueSaturationEffect: { + hue: { propertyType: PropertyTypes.Number, name: 'Hue', min: -1, max: 1, step: 0.01 }, + saturation: { propertyType: PropertyTypes.Number, name: 'Saturation', min: -1, max: 1, step: 0.01 } + }, + LensDistortionEffect: { + distortion: { propertyType: PropertyTypes.Vector2, name: 'Distortion' }, + principalPoint: { propertyType: PropertyTypes.Vector2, name: 'Principal Point' }, + focalLength: { propertyType: PropertyTypes.Vector2, name: 'Focal Length' }, + skew: { propertyType: PropertyTypes.Number, name: 'Skew', min: 0, max: 10, step: 0.05 } + }, + LinearTosRGBEffect: {}, + LUT1DEffect: { + blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' }, + lutPath: { propertyType: PropertyTypes.Texture, name: 'LUT' } + }, + LUT3DEffect: { + blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' }, + lutPath: { propertyType: PropertyTypes.Texture, name: 'LUT' }, + inputColorSpace: { propertyType: PropertyTypes.ColorSpace, name: 'Input Color Space' } + }, + MotionBlurEffect: { + intensity: { propertyType: PropertyTypes.Number, name: 'Intensity', min: 0, max: 10, step: 0.01 }, + jitter: { propertyType: PropertyTypes.Number, name: 'Jitter', min: 0, max: 10, step: 0.01 }, + samples: { propertyType: PropertyTypes.Number, name: 'Samples', min: 1, max: 64, step: 1 } + }, + NoiseEffect: { + blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' }, + premultiply: { propertyType: PropertyTypes.Boolean, name: 'Premultiply' } + }, + OutlineEffect: { + blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' }, + patternScale: { propertyType: PropertyTypes.Number, name: 'Pattern Scale', min: 0, max: 10, step: 0.01 }, + edgeStrength: { propertyType: PropertyTypes.Number, name: 'Edge Strength', min: 0, max: 10, step: 0.01 }, + pulseSpeed: { propertyType: PropertyTypes.Number, name: 'Pulse Speed', min: 0, max: 10, step: 0.01 }, + visibleEdgeColor: { propertyType: PropertyTypes.Color, name: 'Visible Edge Color' }, + hiddenEdgeColor: { propertyType: PropertyTypes.Color, name: 'Hidden Edge Color' }, + multisampling: { propertyType: PropertyTypes.Number, name: 'Multisampling', min: 0, max: 10, step: 0.01 }, + resolutionScale: { propertyType: PropertyTypes.Number, name: 'ResolutionScale', min: 0, max: 10, step: 0.01 }, + blur: { propertyType: PropertyTypes.Boolean, name: 'Blur' }, + xRay: { propertyType: PropertyTypes.Boolean, name: 'xRay' }, + kernelSize: { propertyType: PropertyTypes.KernelSize, name: 'KernelSize' } + //resolutionX: Resolution.AUTO_SIZE, + //resolutionY: Resolution.AUTO_SIZE, + //width: Resolution.AUTO_SIZE, + //height: 480, + }, + PixelationEffect: { + granularity: { propertyType: PropertyTypes.Number, name: 'Granularity', min: 0, max: 1000, step: 1 } + }, + ScanlineEffect: { + blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' }, + density: { propertyType: PropertyTypes.Number, name: 'Density', min: 0, max: 10, step: 0.05 }, + scrollSpeed: { propertyType: PropertyTypes.Number, name: 'Scroll Speed', min: 0, max: 10, step: 0.05 } + }, + ShockWaveEffect: { + position: { propertyType: PropertyTypes.Vector3, name: 'Position' }, + speed: { propertyType: PropertyTypes.Number, name: 'Speed', min: 0, max: 10, step: 0.05 }, + maxRadius: { propertyType: PropertyTypes.Number, name: 'Max Radius', min: 0, max: 10, step: 0.05 }, + waveSize: { propertyType: PropertyTypes.Number, name: 'Wave Size', min: 0, max: 10, step: 0.05 }, + amplitude: { propertyType: PropertyTypes.Number, name: 'Amplitude', min: 0, max: 10, step: 0.05 } + }, + SMAAEffect: { + preset: { propertyType: PropertyTypes.SMAAPreset, name: 'Preset' } + }, SSAOEffect: { blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' }, distanceScaling: { propertyType: PropertyTypes.Boolean, name: 'Distance Scaling' }, @@ -89,11 +239,9 @@ const EffectsOptions: Partial = { radius: { propertyType: PropertyTypes.Number, name: 'Radius', min: -1, max: 1, step: 0.01 }, intensity: { propertyType: PropertyTypes.Number, name: 'Intensity', min: 0, max: 10, step: 0.01 }, fade: { propertyType: PropertyTypes.Number, name: 'Fade', min: -1, max: 1, step: 0.01 }, - resolutionScale: { propertyType: PropertyTypes.Number, name: 'Resolution Scale', min: -10, max: 10, step: 0.01 }, - kernelSize: { propertyType: PropertyTypes.Number, name: 'Kerne Size', min: 1, max: 5, step: 1 }, - blur: { propertyType: PropertyTypes.Boolean, name: 'Blur' } + resolutionScale: { propertyType: PropertyTypes.Number, name: 'Resolution Scale', min: -10, max: 10, step: 0.01 } }, - SSREffect: { + SSGIEffect: { distance: { propertyType: PropertyTypes.Number, name: 'Distance', min: 0.001, max: 10, step: 0.01 }, thickness: { propertyType: PropertyTypes.Number, name: 'Thickness', min: 0, max: 5, step: 0.01 }, denoiseIterations: { propertyType: PropertyTypes.Number, name: 'Denoise Iterations', min: 0, max: 5, step: 1 }, @@ -114,54 +262,7 @@ const EffectsOptions: Partial = { resolutionScale: { propertyType: PropertyTypes.Number, name: 'Resolution Scale', min: 0.25, max: 1, step: 0.25 }, missedRays: { propertyType: PropertyTypes.Boolean, name: 'Missed Rays' } }, - DepthOfFieldEffect: { - blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' }, - bokehScale: { propertyType: PropertyTypes.Number, name: 'Bokeh Scale', min: -10, max: 10, step: 0.01 }, - focalLength: { propertyType: PropertyTypes.Number, name: 'Focal Length', min: 0, max: 1, step: 0.01 }, - focalRange: { propertyType: PropertyTypes.Number, name: 'Focal Range', min: 0, max: 1, step: 0.01 }, - focusDistance: { propertyType: PropertyTypes.Number, name: 'Focus Distance', min: 0, max: 1, step: 0.01 }, - resolutionScale: { propertyType: PropertyTypes.Number, name: 'Resolution Scale', min: -10, max: 10, step: 0.01 } - }, - BloomEffect: { - blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' }, - kernelSize: { propertyType: PropertyTypes.KernelSize, name: 'Kernel Size' }, - intensity: { propertyType: PropertyTypes.Number, name: 'Intensity', min: 0, max: 10, step: 0.01 }, - luminanceSmoothing: { - propertyType: PropertyTypes.Number, - name: 'Luminance Smoothing', - min: 0, - max: 1, - step: 0.01 - }, - luminanceThreshold: { propertyType: PropertyTypes.Number, name: 'Luminance Threshold', min: 0, max: 1, step: 0.01 }, - mipmapBlur: { propertyType: PropertyTypes.Boolean, name: 'Mipmap Blur' }, - radius: { propertyType: PropertyTypes.Number, name: 'Resolution Scale', min: 0, max: 10, step: 0.01 }, - levels: { propertyType: PropertyTypes.Number, name: 'Resolution Scale', min: 1, max: 10, step: 1 } - }, - ToneMappingEffect: { - blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' }, - adaptive: { propertyType: PropertyTypes.Boolean, name: 'Adaptive' }, - adaptationRate: { propertyType: PropertyTypes.Number, name: 'Adaptation Rate', min: -1, max: 1, step: 0.01 }, - averageLuminance: { propertyType: PropertyTypes.Number, name: 'Average Luminance', min: -1, max: 1, step: 0.01 }, - maxLuminance: { propertyType: PropertyTypes.Number, name: 'Max Luminance', min: -1, max: 1, step: 0.01 }, - middleGrey: { propertyType: PropertyTypes.Number, name: 'Middle Grey', min: -1, max: 1, step: 0.01 }, - resolution: { propertyType: PropertyTypes.Number, name: 'Resolution' }, - whitePoint: { propertyType: PropertyTypes.Number, name: 'Resolution' }, - minLuminance: { propertyType: PropertyTypes.Number, name: 'Resolution' } - }, - BrightnessContrastEffect: { - brightness: { propertyType: PropertyTypes.Number, name: 'Brightness', min: -1, max: 1, step: 0.01 }, - contrast: { propertyType: PropertyTypes.Number, name: 'Contrast', min: -1, max: 1, step: 0.01 } - }, - HueSaturationEffect: { - hue: { propertyType: PropertyTypes.Number, name: 'Hue', min: -1, max: 1, step: 0.01 }, - saturation: { propertyType: PropertyTypes.Number, name: 'Saturation', min: -1, max: 1, step: 0.01 } - }, - ColorDepthEffect: { - bits: { propertyType: PropertyTypes.Number, name: 'Bits', min: -1, max: 1, step: 0.01 } - }, - LinearTosRGBEffect: {}, - SSGIEffect: { + SSREffect: { distance: { propertyType: PropertyTypes.Number, name: 'Distance', min: 0.001, max: 10, step: 0.01 }, thickness: { propertyType: PropertyTypes.Number, name: 'Thickness', min: 0, max: 5, step: 0.01 }, denoiseIterations: { propertyType: PropertyTypes.Number, name: 'Denoise Iterations', min: 0, max: 5, step: 1 }, @@ -182,6 +283,33 @@ const EffectsOptions: Partial = { resolutionScale: { propertyType: PropertyTypes.Number, name: 'Resolution Scale', min: 0.25, max: 1, step: 0.25 }, missedRays: { propertyType: PropertyTypes.Boolean, name: 'Missed Rays' } }, + TextureEffect: { + blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' }, + texturePath: { propertyType: PropertyTypes.Texture, name: 'Texture' }, + aspectCorrection: { propertyType: PropertyTypes.Boolean, name: 'Aspect Correction' } + }, + TiltShiftEffect: { + blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' }, + offset: { propertyType: PropertyTypes.Number, name: 'Offset', min: 0, max: 10, step: 0.1 }, + rotation: { propertyType: PropertyTypes.Number, name: 'Rotation', min: 0, max: 360, step: 0.1 }, + focusArea: { propertyType: PropertyTypes.Number, name: 'Focus Area', min: 0, max: 10, step: 0.1 }, + feather: { propertyType: PropertyTypes.Number, name: 'Feather', min: 0, max: 10, step: 0.1 }, + kernelSize: { propertyType: PropertyTypes.KernelSize, name: 'KernelSize' }, + resolutionScale: { propertyType: PropertyTypes.Number, name: 'Resolution Scale', min: 0, max: 10, step: 0.1 } + //resolutionX: Resolution.AUTO_SIZE, + //resolutionY: Resolution.AUTO_SIZE + }, + ToneMappingEffect: { + blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' }, + adaptive: { propertyType: PropertyTypes.Boolean, name: 'Adaptive' }, + adaptationRate: { propertyType: PropertyTypes.Number, name: 'Adaptation Rate', min: -1, max: 1, step: 0.01 }, + averageLuminance: { propertyType: PropertyTypes.Number, name: 'Average Luminance', min: -1, max: 1, step: 0.01 }, + maxLuminance: { propertyType: PropertyTypes.Number, name: 'Max Luminance', min: -1, max: 1, step: 0.01 }, + middleGrey: { propertyType: PropertyTypes.Number, name: 'Middle Grey', min: -1, max: 1, step: 0.01 }, + resolution: { propertyType: PropertyTypes.Number, name: 'Resolution' }, + whitePoint: { propertyType: PropertyTypes.Number, name: 'Resolution' }, + minLuminance: { propertyType: PropertyTypes.Number, name: 'Resolution' } + }, TRAAEffect: { blend: { propertyType: PropertyTypes.Number, name: 'Blend', min: 0, max: 1, step: 0.001 }, constantBlend: { propertyType: PropertyTypes.Boolean, name: 'Constant Blend' }, @@ -192,11 +320,6 @@ const EffectsOptions: Partial = { worldDistance: { propertyType: PropertyTypes.Number, name: 'World Distance', min: 0.01, max: 100, step: 0.01 }, neighborhoodClamping: { propertyType: PropertyTypes.Boolean, name: 'Neighborhood Clamping' } }, - MotionBlurEffect: { - intensity: { propertyType: PropertyTypes.Number, name: 'Intensity', min: 0, max: 10, step: 0.01 }, - jitter: { propertyType: PropertyTypes.Number, name: 'Jitter', min: 0, max: 10, step: 0.01 }, - samples: { propertyType: PropertyTypes.Number, name: 'Samples', min: 1, max: 64, step: 1 } - }, VignetteEffect: { blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' }, technique: { propertyType: PropertyTypes.VignetteTechnique, name: 'Technique' }, @@ -206,6 +329,10 @@ const EffectsOptions: Partial = { } } +const SMAAPresetSelect = Object.entries(SMAAPreset).map(([label, value]) => { + return { label, value } +}) + const BlendFunctionSelect = Object.entries(BlendFunction).map(([label, value]) => { return { label, value } }) @@ -214,6 +341,14 @@ const VignetteTechniqueSelect = Object.entries(VignetteTechnique).map(([label, v return { label, value } }) +const ColorSpaceSelect = [ + { label: 'NONE', value: '' }, + { label: 'SRGB', value: SRGBColorSpace }, + { label: 'SRGB LINEAR', value: LinearSRGBColorSpace }, + { label: 'DISPLAY P3', value: DisplayP3ColorSpace }, + { label: 'DISPLAY P3 LINEAR', value: LinearDisplayP3ColorSpace } +] + const KernelSizeSelect = [ { label: 'VERY_SMALL', value: 0 }, { label: 'SMALL', value: 1 }, @@ -223,13 +358,6 @@ const KernelSizeSelect = [ { label: 'HUGE', value: 5 } ] -const SMAAPreset = [ - { label: 'LOW', value: 0 }, - { label: 'MEDIUM', value: 1 }, - { label: 'HIGH', value: 2 }, - { label: 'ULTRA', value: 3 } -] - const EdgeDetectionMode = [ { label: 'DEPTH', value: 0 }, { label: 'LUMA', value: 1 }, @@ -281,6 +409,16 @@ export const PostProcessingSettingsEditor: EditorComponentType = (props) => { ) break + case PropertyTypes.SMAAPreset: + renderVal = ( + + ) + break + case PropertyTypes.BlendFunction: renderVal = ( { ) break + case PropertyTypes.Vector2: + renderVal = ( + + ) + break + + case PropertyTypes.Vector3: + renderVal = ( + + ) + break + + case PropertyTypes.Texture: + renderVal = ( + + ) + break case PropertyTypes.Color: renderVal = ( { ) break - case PropertyTypes.SMAAPreset: + case PropertyTypes.ColorSpace: renderVal = ( diff --git a/packages/spatial/src/renderer/components/PostProcessingComponent.tsx b/packages/spatial/src/renderer/components/PostProcessingComponent.tsx index e10ea97e47d..51b02c8a198 100755 --- a/packages/spatial/src/renderer/components/PostProcessingComponent.tsx +++ b/packages/spatial/src/renderer/components/PostProcessingComponent.tsx @@ -23,11 +23,53 @@ All portions of the code written by the Ethereal Engine team are Copyright © 20 Ethereal Engine. All Rights Reserved. */ -import { defineComponent, useComponent, useEntityContext } from '@etherealengine/ecs' -import { NO_PROXY_STEALTH } from '@etherealengine/hyperflux' -import { useEffect } from 'react' -import { defaultPostProcessingSchema } from '../effects/PostProcessing' -import { configureEffectComposer } from '../functions/configureEffectComposer' +import { Entity, defineComponent, useComponent, useEntityContext } from '@etherealengine/ecs' +import { useTexture } from '@etherealengine/engine/src/assets/functions/resourceHooks' +import { NO_PROXY, getState, none, useHookstate } from '@etherealengine/hyperflux' +import { + BloomEffect, + BrightnessContrastEffect, + ChromaticAberrationEffect, + ColorAverageEffect, + ColorDepthEffect, + DepthDownsamplingPass, + DepthOfFieldEffect, + DotScreenEffect, + Effect, + EffectComposer, + EffectPass, + FXAAEffect, + GlitchEffect, + //GodRaysEffect, + GridEffect, + HueSaturationEffect, + LUT1DEffect, + LUT3DEffect, + LensDistortionEffect, + NoiseEffect, + OutlineEffect, + PixelationEffect, + RenderPass, + SMAAEffect, + SSAOEffect, + ScanlineEffect, + ShockWaveEffect, + TextureEffect, + TiltShiftEffect, + ToneMappingEffect, + VignetteEffect +} from 'postprocessing' +import React, { useEffect } from 'react' +import { MotionBlurEffect, SSGIEffect, SSREffect, TRAAEffect, VelocityDepthNormalPass } from 'realism-effects' +import { Scene } from 'three' +import { EngineState } from '../../EngineState' +import { CameraComponent } from '../../camera/components/CameraComponent' +import { LinearTosRGBEffect } from '../../renderer/effects/LinearTosRGBEffect' +import { RendererState } from '../RendererState' +import { RendererComponent } from '../WebGLRendererSystem' +import { Effects, defaultPostProcessingSchema } from '../effects/PostProcessing' +import { changeRenderMode } from '../functions/changeRenderMode' +import { CustomNormalPass } from '../passes/CustomNormalPass' import { useScene } from './SceneComponents' export const PostProcessingComponent = defineComponent({ @@ -59,16 +101,529 @@ export const PostProcessingComponent = defineComponent({ reactor: () => { const entity = useEntityContext() const rendererEntity = useScene(entity) - const postprocessingComponent = useComponent(entity, PostProcessingComponent) - useEffect(() => { - if (!rendererEntity) return - configureEffectComposer( - rendererEntity, - postprocessingComponent.enabled.value ? postprocessingComponent.effects.get(NO_PROXY_STEALTH) : undefined - ) - }, [rendererEntity, postprocessingComponent.enabled, postprocessingComponent.effects]) + if (!rendererEntity) return null - return null + return } }) + +const RendererReactor = (props: { entity: Entity; rendererEntity: Entity }) => { + const { entity, rendererEntity } = props + + const postprocessingComponent = useComponent(entity, PostProcessingComponent) + const camera = useComponent(rendererEntity, CameraComponent) + const renderer = useComponent(rendererEntity, RendererComponent) + const composer = new EffectComposer(renderer.value.renderer) + renderer.value.effectComposer = composer + const renderPass = new RenderPass() + renderer.value.effectComposer.addPass(renderPass) + renderer.value.renderPass = renderPass + + let lut1DEffectTexturePath: string | undefined + if ( + postprocessingComponent.effects[Effects.LUT1DEffect].lutPath && + postprocessingComponent.effects[Effects.LUT1DEffect].isActive.value + ) { + lut1DEffectTexturePath = postprocessingComponent.effects[Effects.LUT1DEffect].lutPath.value + } + let lut3DEffectTexturePath: string | undefined + if ( + postprocessingComponent.effects[Effects.LUT3DEffect].lutPath && + postprocessingComponent.effects[Effects.LUT3DEffect].isActive.value + ) { + lut3DEffectTexturePath = postprocessingComponent.effects[Effects.LUT3DEffect].lutPath.value + } + let textureEffectTexturePath: string | undefined + if ( + postprocessingComponent.effects[Effects.TextureEffect].texturePath && + postprocessingComponent.effects[Effects.TextureEffect].isActive.value + ) { + textureEffectTexturePath = postprocessingComponent.effects[Effects.TextureEffect].texturePath.value + } + + const [lut1DEffectTexture, lut1DEffectTextureError] = useTexture(lut1DEffectTexturePath!, entity) + const [lut3DEffectTexture, lut3DEffectTextureError] = useTexture(lut3DEffectTexturePath!, entity) + const [textureEffectTexture, textureEffectTextureError] = useTexture(textureEffectTexturePath!, entity) + + const scene = useHookstate(() => new Scene()) + const normalPass = useHookstate(() => new CustomNormalPass(scene, camera)) + const depthDownsamplingPass = useHookstate( + () => + new DepthDownsamplingPass({ + normalBuffer: normalPass.value.texture, + resolutionScale: 0.5 + }) + ) + const velocityDepthNormalPass = useHookstate(new VelocityDepthNormalPass(scene, camera)) + const useVelocityDepthNormalPass = useHookstate(false) + const useDepthDownsamplingPass = useHookstate(false) + + //const composer = useHookstate(() => new EffectComposer(renderer.value.renderer)) + const effects = useHookstate>({}) + + useEffect(() => { + velocityDepthNormalPass.set(new VelocityDepthNormalPass(scene, camera)) + }, [scene]) + + useEffect(() => { + const effectOptions = postprocessingComponent.value.effects[Effects.BloomEffect] as any + if (effectOptions && effectOptions.isActive) { + const eff = new BloomEffect(effectOptions) + //composer[Effects.BloomEffect].set(eff) + effects[Effects.BloomEffect].set(eff) + + return () => { + //composer[Effects.BloomEffect].set(none) + effects[Effects.BloomEffect].set(none) + } + } + }, [postprocessingComponent.effects.BloomEffect]) + + useEffect(() => { + const effectOptions = postprocessingComponent.value.effects[Effects.BrightnessContrastEffect] as any + if (effectOptions && effectOptions.isActive) { + const eff = new BrightnessContrastEffect(effectOptions) + //composer[Effects.BrightnessContrastEffect].set(eff) + effects[Effects.BrightnessContrastEffect].set(eff) + + return () => { + //composer[Effects.BrightnessContrastEffect].set(none) + effects[Effects.BrightnessContrastEffect].set(none) + } + } + }, [postprocessingComponent.effects[Effects.BrightnessContrastEffect]]) + + useEffect(() => { + const effectOptions = postprocessingComponent.value.effects[Effects.ChromaticAberrationEffect] as any + if (effectOptions && effectOptions.isActive) { + const eff = new ChromaticAberrationEffect(effectOptions) + //composer[Effects.ChromaticAberrationEffect].set(eff) + effects[Effects.ChromaticAberrationEffect].set(eff) + + return () => { + //composer[Effects.ChromaticAberrationEffect].set(none) + effects[Effects.ChromaticAberrationEffect].set(none) + } + } + }, [postprocessingComponent.effects[Effects.ChromaticAberrationEffect]]) + + useEffect(() => { + const effectOptions = postprocessingComponent.value.effects[Effects.ColorAverageEffect] as any + if (effectOptions && effectOptions.isActive) { + const eff = new ColorAverageEffect(effectOptions.blendFunction) + //composer[Effects.ColorAverageEffect].set(eff) + effects[Effects.ColorAverageEffect].set(eff) + + return () => { + //composer[Effects.ColorAverageEffect].set(none) + effects[Effects.ColorAverageEffect].set(none) + } + } + }, [postprocessingComponent.effects[Effects.ColorAverageEffect]]) + + useEffect(() => { + const effectOptions = postprocessingComponent.value.effects[Effects.ColorDepthEffect] as any + if (effectOptions && effectOptions.isActive) { + const eff = new ColorDepthEffect(effectOptions) + //composer[Effects.ColorDepthEffect].set(eff) + effects[Effects.ColorDepthEffect].set(eff) + + return () => { + //composer[Effects.ColorDepthEffect].set(none) + effects[Effects.ColorDepthEffect].set(none) + } + } + }, [postprocessingComponent.effects[Effects.ColorDepthEffect]]) + + useEffect(() => { + const effectOptions = postprocessingComponent.value.effects[Effects.DepthOfFieldEffect] as any + if (effectOptions && effectOptions.isActive) { + const eff = new DepthOfFieldEffect(camera.value, effectOptions) + //composer[Effects.DepthOfFieldEffect].set(eff) + effects[Effects.DepthOfFieldEffect].set(eff) + + return () => { + //composer[Effects.DepthOfFieldEffect].set(none) + effects[Effects.DepthOfFieldEffect].set(none) + } + } + }, [postprocessingComponent.effects[Effects.DepthOfFieldEffect]]) + + useEffect(() => { + const effectOptions = postprocessingComponent.value.effects[Effects.DotScreenEffect] as any + if (effectOptions && effectOptions.isActive) { + const eff = new DotScreenEffect(effectOptions) + //composer[Effects.DotScreenEffect].set(eff) + effects[Effects.DotScreenEffect].set(eff) + + return () => { + //composer[Effects.DotScreenEffect].set(none) + effects[Effects.DotScreenEffect].set(none) + } + } + }, [postprocessingComponent.effects[Effects.DotScreenEffect]]) + + useEffect(() => { + const effectOptions = postprocessingComponent.value.effects[Effects.FXAAEffect] as any + if (effectOptions && effectOptions.isActive) { + const eff = new FXAAEffect(effectOptions) + //composer[Effects.FXAAEffect].set(eff) + effects[Effects.FXAAEffect].set(eff) + + return () => { + //composer[Effects.FXAAEffect].set(none) + effects[Effects.FXAAEffect].set(none) + } + } + }, [postprocessingComponent.effects[Effects.FXAAEffect]]) + + useEffect(() => { + const effectOptions = postprocessingComponent.value.effects[Effects.GlitchEffect] as any + if (effectOptions && effectOptions.isActive) { + const eff = new GlitchEffect(effectOptions) + //composer[Effects.GlitchEffect].set(eff) + effects[Effects.GlitchEffect].set(eff) + + return () => { + //composer[Effects.GlitchEffect].set(none) + effects[Effects.GlitchEffect].set(none) + } + } + }, [postprocessingComponent.effects[Effects.GlitchEffect]]) + + useEffect(() => { + const effectOptions = postprocessingComponent.value.effects[Effects.GridEffect] as any + if (effectOptions && effectOptions.isActive) { + const eff = new GridEffect(effectOptions) + //composer[Effects.GridEffect].set(eff) + effects[Effects.GridEffect].set(eff) + + return () => { + //composer[Effects.GridEffect].set(none) + effects[Effects.GridEffect].set(none) + } + } + }, [postprocessingComponent.effects[Effects.GridEffect]]) + + useEffect(() => { + const effectOptions = postprocessingComponent.value.effects[Effects.HueSaturationEffect] as any + if (effectOptions && effectOptions.isActive) { + const eff = new HueSaturationEffect(effectOptions) + //composer[Effects.HueSaturationEffect].set(eff) + effects[Effects.HueSaturationEffect].set(eff) + + return () => { + //composer[Effects.HueSaturationEffect].set(none) + effects[Effects.HueSaturationEffect].set(none) + } + } + }, [postprocessingComponent.effects[Effects.HueSaturationEffect]]) + + useEffect(() => { + const effectOptions = postprocessingComponent.value.effects[Effects.LUT1DEffect] as any + if (effectOptions && effectOptions.isActive && lut1DEffectTexture) { + const eff = new LUT1DEffect(lut1DEffectTexture, effectOptions) + //composer[Effects.LUT1DEffect].set(eff) + effects[Effects.LUT1DEffect].set(eff) + + return () => { + //composer[Effects.LUT1DEffect].set(none) + effects[Effects.LUT1DEffect].set(none) + } + } + }, [postprocessingComponent.effects[Effects.LUT1DEffect], lut1DEffectTexture, lut1DEffectTextureError]) + + useEffect(() => { + const effectOptions = postprocessingComponent.value.effects[Effects.LUT3DEffect] as any + if (effectOptions && effectOptions.isActive && lut3DEffectTexture) { + const eff = new LUT3DEffect(lut3DEffectTexture, effectOptions) + //composer[Effects.LUT3DEffect].set(eff) + effects[Effects.LUT3DEffect].set(eff) + + return () => { + //composer[Effects.LUT3DEffect].set(none) + effects[Effects.LUT3DEffect].set(none) + } + } + }, [postprocessingComponent.effects[Effects.LUT3DEffect], lut3DEffectTexture, lut3DEffectTextureError]) + + useEffect(() => { + const effectOptions = postprocessingComponent.value.effects[Effects.LensDistortionEffect] as any + if (effectOptions && effectOptions.isActive) { + const eff = new LensDistortionEffect(effectOptions) + //composer[Effects.LensDistortionEffect].set(eff) + effects[Effects.LensDistortionEffect].set(eff) + + return () => { + //composer[Effects.LensDistortionEffect].set(none) + effects[Effects.LensDistortionEffect].set(none) + } + } + }, [postprocessingComponent.effects[Effects.LensDistortionEffect]]) + + useEffect(() => { + const effectOptions = postprocessingComponent.value.effects[Effects.LinearTosRGBEffect] as any + if (effectOptions && effectOptions.isActive) { + const eff = new LinearTosRGBEffect(effectOptions) + //composer[Effects.LinearTosRGBEffect].set(eff) + effects[Effects.LinearTosRGBEffect].set(eff) + + return () => { + //composer[Effects.LinearTosRGBEffect].set(none) + effects[Effects.LinearTosRGBEffect].set(none) + } + } + }, [postprocessingComponent.effects[Effects.LinearTosRGBEffect]]) + + useEffect(() => { + const effectOptions = postprocessingComponent.value.effects[Effects.MotionBlurEffect] as any + if (effectOptions && effectOptions.isActive) { + const eff = new MotionBlurEffect(velocityDepthNormalPass, effectOptions) + useVelocityDepthNormalPass.set(true) + //composer[Effects.MotionBlurEffect].set(eff) + effects[Effects.MotionBlurEffect].set(eff) + + return () => { + //composer[Effects.MotionBlurEffect].set(none) + effects[Effects.MotionBlurEffect].set(none) + } + } + }, [postprocessingComponent.effects[Effects.MotionBlurEffect]]) + + useEffect(() => { + const effectOptions = postprocessingComponent.value.effects[Effects.NoiseEffect] as any + if (effectOptions && effectOptions.isActive) { + const eff = new NoiseEffect(effectOptions) + //composer[Effects.NoiseEffect].set(eff) + effects[Effects.NoiseEffect].set(eff) + + return () => { + //composer[Effects.NoiseEffect].set(none) + effects[Effects.NoiseEffect].set(none) + } + } + }, [postprocessingComponent.effects[Effects.NoiseEffect]]) + + useEffect(() => { + const effectOptions = postprocessingComponent.value.effects[Effects.OutlineEffect] as any + if (effectOptions && effectOptions.isActive) { + const eff = new OutlineEffect(scene.value, camera.value, effectOptions) + //composer[Effects.OutlineEffect].set(eff) + effects[Effects.OutlineEffect].set(eff) + + return () => { + //composer[Effects.OutlineEffect].set(none) + effects[Effects.OutlineEffect].set(none) + } + } + }, [postprocessingComponent.effects[Effects.OutlineEffect]]) + + useEffect(() => { + const effectOptions = postprocessingComponent.value.effects[Effects.PixelationEffect] as any + if (effectOptions && effectOptions.isActive) { + const eff = new PixelationEffect(effectOptions.granularity) + //composer[Effects.PixelationEffect].set(eff) + effects[Effects.PixelationEffect].set(eff) + + return () => { + //composer[Effects.PixelationEffect].set(none) + effects[Effects.PixelationEffect].set(none) + } + } + }, [postprocessingComponent.effects[Effects.PixelationEffect]]) + + useEffect(() => { + const effectOptions = postprocessingComponent.value.effects[Effects.SMAAEffect] as any + if (effectOptions && effectOptions.isActive) { + const eff = new SMAAEffect(effectOptions) + //composer[Effects.SMAAEffect].set(eff) + effects[Effects.SMAAEffect].set(eff) + + return () => { + //composer[Effects.SMAAEffect].set(none) + effects[Effects.SMAAEffect].set(none) + } + } + }, [postprocessingComponent.effects[Effects.SMAAEffect]]) + + useEffect(() => { + const effectOptions = postprocessingComponent.value.effects[Effects.SSAOEffect] as any + if (effectOptions && effectOptions.isActive) { + const eff = new SSAOEffect(camera.value, normalPass.value.texture, { + ...effectOptions, + normalDepthBuffer: depthDownsamplingPass.value.texture + }) + useDepthDownsamplingPass.set(true) + //composer[Effects.SSAOEffect].set(eff) + effects[Effects.SSAOEffect].set(eff) + + return () => { + //composer[Effects.SSAOEffect].set(none) + effects[Effects.SSAOEffect].set(none) + } + } + }, [postprocessingComponent.effects[Effects.SSAOEffect]]) + + useEffect(() => { + const effectOptions = postprocessingComponent.value.effects[Effects.SSGIEffect] as any + if (effectOptions && effectOptions.isActive) { + const eff = new SSGIEffect(effectOptions) + //composer[Effects.SSGIEffect].set(eff) + effects[Effects.SSGIEffect].set(eff) + + return () => { + //composer[Effects.SSGIEffect].set(none) + effects[Effects.SSGIEffect].set(none) + } + } + }, [postprocessingComponent.effects[Effects.SSGIEffect]]) + + // SSR is just a mode of SSGI, and can't both be run at the same time + useEffect(() => { + let usingSSGI = false + + const ssgiEffectOptions = postprocessingComponent.value.effects[Effects.SSGIEffect] as any + if (ssgiEffectOptions && ssgiEffectOptions.isActive) { + usingSSGI = true + } + + const effectOptions = postprocessingComponent.value.effects[Effects.SSREffect] as any + if (effectOptions && effectOptions.isActive && !usingSSGI) { + const eff = new SSREffect(composer, scene, camera.value, { ...effectOptions, velocityDepthNormalPass }) + useVelocityDepthNormalPass.set(true) + //composer[Effects.SSREffect].set(eff) + effects[Effects.SSREffect].set(eff) + + return () => { + //composer[Effects.SSREffect].set(none) + effects[Effects.SSREffect].set(none) + } + } + }, [postprocessingComponent.effects[Effects.SSREffect]]) + + useEffect(() => { + const effectOptions = postprocessingComponent.value.effects[Effects.ScanlineEffect] as any + if (effectOptions && effectOptions.isActive) { + const eff = new ScanlineEffect(effectOptions) + //composer[Effects.ScanlineEffect].set(eff) + effects[Effects.ScanlineEffect].set(eff) + + return () => { + //composer[Effects.ScanlineEffect].set(none) + effects[Effects.ScanlineEffect].set(none) + } + } + }, [postprocessingComponent.effects[Effects.ScanlineEffect]]) + + useEffect(() => { + const effectOptions = postprocessingComponent.value.effects[Effects.ShockWaveEffect] as any + if (effectOptions && effectOptions.isActive) { + const eff = new ShockWaveEffect(camera.value, effectOptions.position, effectOptions) + //composer[Effects.ShockWaveEffect].set(eff) + effects[Effects.ShockWaveEffect].set(eff) + + return () => { + //composer[Effects.ShockWaveEffect].set(none) + effects[Effects.ShockWaveEffect].set(none) + } + } + }, [postprocessingComponent.effects[Effects.ShockWaveEffect]]) + + useEffect(() => { + const effectOptions = postprocessingComponent.value.effects[Effects.TRAAEffect] as any + if (effectOptions && effectOptions.isActive) { + // todo support more than 1 texture + const textureCount = 1 + const eff = new TRAAEffect(scene, camera.value, velocityDepthNormalPass, textureCount, effectOptions) + useVelocityDepthNormalPass.set(true) + //composer[Effects.TRAAEffect].set(eff) + effects[Effects.TRAAEffect].set(eff) + + return () => { + //composer[Effects.TRAAEffect].set(none) + effects[Effects.TRAAEffect].set(none) + } + } + }, [postprocessingComponent.effects[Effects.TRAAEffect]]) + + useEffect(() => { + const effectOptions = postprocessingComponent.value.effects[Effects.TextureEffect] as any + if (effectOptions && effectOptions.isActive && textureEffectTexture) { + effectOptions.texture = textureEffectTexture + const eff = new TextureEffect(effectOptions) + //composer[Effects.TextureEffect].set(eff) + effects[Effects.TextureEffect].set(eff) + + return () => { + //composer[Effects.TextureEffect].set(none) + effects[Effects.TextureEffect].set(none) + } + } + }, [postprocessingComponent.effects[Effects.TextureEffect], textureEffectTexture, textureEffectTextureError]) + + useEffect(() => { + const effectOptions = postprocessingComponent.value.effects[Effects.TiltShiftEffect] as any + if (effectOptions && effectOptions.isActive) { + const eff = new TiltShiftEffect(effectOptions) + //composer[Effects.TiltShiftEffect].set(eff) + effects[Effects.TiltShiftEffect].set(eff) + + return () => { + //composer[Effects.TiltShiftEffect].set(none) + effects[Effects.TiltShiftEffect].set(none) + } + } + }, [postprocessingComponent.effects[Effects.TiltShiftEffect]]) + + useEffect(() => { + const effectOptions = postprocessingComponent.value.effects[Effects.ToneMappingEffect] as any + if (effectOptions && effectOptions.isActive) { + const eff = new ToneMappingEffect(effectOptions) + //composer[Effects.ToneMappingEffect].set(eff) + effects[Effects.ToneMappingEffect].set(eff) + + return () => { + //composer[Effects.ToneMappingEffect].set(none) + effects[Effects.ToneMappingEffect].set(none) + } + } + }, [postprocessingComponent.effects[Effects.ToneMappingEffect]]) + + useEffect(() => { + const effectOptions = postprocessingComponent.value.effects[Effects.VignetteEffect] as any + if (effectOptions && effectOptions.isActive) { + const eff = new VignetteEffect(effectOptions) + //composer[Effects.VignetteEffect].set(eff) + effects[Effects.VignetteEffect].set(eff) + + return () => { + //composer[Effects.VignetteEffect].set(none) + effects[Effects.VignetteEffect].set(none) + } + } + }, [postprocessingComponent.effects[Effects.VignetteEffect]]) + + useEffect(() => { + const renderSettings = getState(RendererState) + if (!renderSettings.usePostProcessing) return + + const effectsVal = effects.get(NO_PROXY) + for (const key in effectsVal) { + const val = effectsVal[key] + composer[key] = val + } + + const effectArray = Object.values(effectsVal) + composer.EffectPass = new EffectPass(camera.value, ...effectArray) + composer.addPass(composer.EffectPass) + }, [effects]) + + useEffect(() => { + if (!rendererEntity) return + + if (getState(EngineState).isEditor) changeRenderMode() + }, [rendererEntity, postprocessingComponent.enabled, postprocessingComponent.effects]) + + return null +} diff --git a/packages/spatial/src/renderer/effects/PostProcessing.ts b/packages/spatial/src/renderer/effects/PostProcessing.ts index 43400e621a5..18faef7e48a 100644 --- a/packages/spatial/src/renderer/effects/PostProcessing.ts +++ b/packages/spatial/src/renderer/effects/PostProcessing.ts @@ -44,7 +44,7 @@ import { VignetteEffect, VignetteTechnique } from 'postprocessing' -import { Color, ColorSpace, Texture, TextureEncoding, Vector2 } from 'three' +import { Color, ColorSpace, SRGBColorSpace, Texture, TextureEncoding, Vector2, Vector3 } from 'three' import { LinearTosRGBEffect } from '../../renderer/effects/LinearTosRGBEffect' @@ -53,6 +53,7 @@ export const Effects = { OutlineEffect: 'OutlineEffect' as const, SSAOEffect: 'SSAOEffect' as const, SSREffect: 'SSREffect' as const, + SSGIEffect: 'SSGIEffect' as const, DepthOfFieldEffect: 'DepthOfFieldEffect' as const, BloomEffect: 'BloomEffect' as const, ToneMappingEffect: 'ToneMappingEffect' as const, @@ -60,40 +61,26 @@ export const Effects = { HueSaturationEffect: 'HueSaturationEffect' as const, ColorDepthEffect: 'ColorDepthEffect' as const, LinearTosRGBEffect: 'LinearTosRGBEffect' as const, - SSGIEffect: 'SSGIEffect' as const, + //SSGIEffect: 'SSGIEffect' as const, TRAAEffect: 'TRAAEffect' as const, - // ChromaticAberrationEffect: 'ChromaticAberrationEffect' as const, + ChromaticAberrationEffect: 'ChromaticAberrationEffect' as const, MotionBlurEffect: 'MotionBlurEffect' as const, - // ColorAverageEffect: 'ColorAverageEffect' as const, - // DotScreenEffect: 'DotScreenEffect' as const, - // TiltShiftEffect: 'TiltShiftEffect' as const, - // GlitchEffect: 'GlitchEffect' as const, - // GodRaysEffect: 'GodRaysEffect' as const, - // GridEffect: 'GridEffect' as const, - // LUT1DEffect: 'LUT1DEffect' as const, - // LUT3DEffect: 'LUT3DEffect' as const, - // NoiseEffect: 'NoiseEffect' as const, - // PixelationEffect: 'PixelationEffect' as const, - // ScanlineEffect: 'ScanlineEffect' as const, - // ShockWaveEffect: 'ShockWaveEffect' as const, - // FXAAEffect: 'FXAAEffect' as const, - // TextureEffect: 'TextureEffect' as const, - VignetteEffect: 'VignetteEffect' as const - // LensDistortionEffect: 'LensDistortionEffect' as const -} - -export const EffectMap = { - [Effects.SMAAEffect]: SMAAEffect, - [Effects.OutlineEffect]: OutlineEffect, - [Effects.SSAOEffect]: SSAOEffect, - [Effects.DepthOfFieldEffect]: DepthOfFieldEffect, - [Effects.BloomEffect]: BloomEffect, - [Effects.ToneMappingEffect]: ToneMappingEffect, - [Effects.BrightnessContrastEffect]: BrightnessContrastEffect, - [Effects.HueSaturationEffect]: HueSaturationEffect, - [Effects.ColorDepthEffect]: ColorDepthEffect, - [Effects.LinearTosRGBEffect]: LinearTosRGBEffect, - [Effects.VignetteEffect]: VignetteEffect + ColorAverageEffect: 'ColorAverageEffect' as const, + DotScreenEffect: 'DotScreenEffect' as const, + TiltShiftEffect: 'TiltShiftEffect' as const, + GlitchEffect: 'GlitchEffect' as const, + //GodRaysEffect: 'GodRaysEffect' as const, + GridEffect: 'GridEffect' as const, + LUT1DEffect: 'LUT1DEffect' as const, + LUT3DEffect: 'LUT3DEffect' as const, + NoiseEffect: 'NoiseEffect' as const, + PixelationEffect: 'PixelationEffect' as const, + ScanlineEffect: 'ScanlineEffect' as const, + ShockWaveEffect: 'ShockWaveEffect' as const, + FXAAEffect: 'FXAAEffect' as const, + TextureEffect: 'TextureEffect' as const, + VignetteEffect: 'VignetteEffect' as const, + LensDistortionEffect: 'LensDistortionEffect' as const } declare module 'postprocessing' { @@ -115,8 +102,6 @@ declare module 'postprocessing' { } } -export type EffectMapType = (typeof EffectMap)[keyof typeof EffectMap] - export type EffectProps = { isActive: boolean } @@ -173,8 +158,6 @@ export type SSAOEffectProps = EffectProps & { resolutionY?: number width?: number height?: number - blur?: boolean - kernelSize?: KernelSize } const defaultSSROptions = { @@ -286,7 +269,6 @@ export type MotionBlurEffectProps = EffectProps & { } export type ChromaticAberrationEffectProps = EffectProps & { - blendFunction?: BlendFunction offset?: Vector2 radialModulation: boolean modulationOffset: number @@ -306,7 +288,6 @@ export type TiltShiftEffectProps = EffectProps & { rotation?: number focusArea?: number feather?: number - bias?: number kernelSize?: KernelSize resolutionScale?: number resolutionX?: number @@ -323,33 +304,39 @@ export type GlitchEffectProps = EffectProps & { columns?: number ratio?: number } -export type GodRaysEffectProps = EffectProps & { - blendFunction?: BlendFunction - samples?: number - density?: number - decay?: number - weight?: number - exposure?: number - clampMax?: number - resolutionScale?: number - resolutionX?: number - resolutionY?: number - width?: number - height?: number - kernelSize?: KernelSize - blur?: boolean -} +//export type GodRaysEffectProps = EffectProps & { +// blendFunction?: BlendFunction +// samples?: number +// density?: number +// decay?: number +// weight?: number +// exposure?: number +// clampMax?: number +// resolutionScale?: number +// resolutionX?: number +// resolutionY?: number +// width?: number +// height?: number +// kernelSize?: KernelSize +// blur?: boolean +//} export type GridEffectProps = EffectProps & { blendFunction?: BlendFunction scale?: number lineWidth?: number } -export type LUT1DEffectProps = EffectProps & { blendFunction?: BlendFunction } +export type LUT1DEffectProps = EffectProps & { + blendFunction?: BlendFunction + lutPath?: string + lut?: Texture +} export type LUT3DEffectProps = EffectProps & { blendFunction?: BlendFunction tetrahedralInterpolation?: boolean inputEncoding?: TextureEncoding inputColorSpace?: ColorSpace + lutPath?: string + lut?: Texture } export type NoiseEffectProps = EffectProps & { blendFunction?: BlendFunction @@ -359,8 +346,10 @@ export type PixelationEffectProps = EffectProps & { granularity?: number } export type ScanlineEffectProps = EffectProps & { blendFunction?: BlendFunction density?: number + scrollSpeed?: number } export type ShockWaveEffectProps = EffectProps & { + position?: Vector3 speed?: number maxRadius?: number waveSize?: number @@ -369,6 +358,7 @@ export type ShockWaveEffectProps = EffectProps & { export type FXAAEffectProps = EffectProps & { blendFunction?: BlendFunction } export type TextureEffectProps = EffectProps & { blendFunction?: BlendFunction + texturePath?: string texture?: Texture aspectCorrection?: boolean } @@ -387,8 +377,8 @@ export type LensDistortionEffectProps = EffectProps & { } export type EffectPropsSchema = { - // [Effects.SMAAEffect]: SMAAEffectProps - // [Effects.OutlineEffect]: OutlineEffectProps + [Effects.SMAAEffect]: SMAAEffectProps + [Effects.OutlineEffect]: OutlineEffectProps [Effects.SSAOEffect]: SSAOEffectProps [Effects.SSREffect]: SSREffectProps [Effects.DepthOfFieldEffect]: DepthOfFieldEffectProps @@ -398,59 +388,60 @@ export type EffectPropsSchema = { [Effects.HueSaturationEffect]: HueSaturationEffectProps [Effects.ColorDepthEffect]: ColorDepthEffectProps [Effects.LinearTosRGBEffect]: LinearTosRGBEffectProps - [Effects.SSGIEffect]: SSGIEffectProps + //[Effects.SSGIEffect]: SSGIEffectProps [Effects.TRAAEffect]: TRAAEffectProps [Effects.MotionBlurEffect]: MotionBlurEffectProps - // [Effects.ChromaticAberrationEffect]: ChromaticAberrationEffectProps - // [Effects.ColorAverageEffect]: ColorAverageEffectProps - // [Effects.DotScreenEffect]: DotScreenEffectProps - // [Effects.TiltShiftEffect]: TiltShiftEffectProps - // [Effects.GlitchEffect]: GlitchEffectProps - // [Effects.GodRaysEffect]: GodRaysEffectProps - // [Effects.GridEffect]: GridEffectProps - // [Effects.LUT1DEffect]: LUT1DEffectProps - // [Effects.LUT3DEffect]: LUT3DEffectProps - // [Effects.NoiseEffect]: NoiseEffectProps - // [Effects.PixelationEffect]: PixelationEffectProps - // [Effects.ScanlineEffect]: ScanlineEffectProps - // [Effects.ShockWaveEffect]: ShockWaveEffectProps - // [Effects.FXAAEffect]: FXAAEffectProps - // [Effects.TextureEffect]: TextureEffectProps + [Effects.ChromaticAberrationEffect]: ChromaticAberrationEffectProps + [Effects.ColorAverageEffect]: ColorAverageEffectProps + [Effects.DotScreenEffect]: DotScreenEffectProps + [Effects.TiltShiftEffect]: TiltShiftEffectProps + [Effects.GlitchEffect]: GlitchEffectProps + //[Effects.GodRaysEffect]: GodRaysEffectProps + [Effects.GridEffect]: GridEffectProps + [Effects.LUT1DEffect]: LUT1DEffectProps + [Effects.LUT3DEffect]: LUT3DEffectProps + [Effects.NoiseEffect]: NoiseEffectProps + [Effects.PixelationEffect]: PixelationEffectProps + [Effects.ScanlineEffect]: ScanlineEffectProps + [Effects.ShockWaveEffect]: ShockWaveEffectProps + [Effects.FXAAEffect]: FXAAEffectProps + [Effects.TextureEffect]: TextureEffectProps [Effects.VignetteEffect]: VignetteEffectProps - // [Effects.LensDistortionEffect]: LensDistortionEffectProps + [Effects.LensDistortionEffect]: LensDistortionEffectProps } export type EffectPropsSchemaType = (typeof defaultPostProcessingSchema)[keyof typeof defaultPostProcessingSchema] export const defaultPostProcessingSchema: EffectPropsSchema = { - // [Effects.SMAAEffect]: { - // isActive: false, - // preset: SMAAPreset.MEDIUM, - // edgeDetectionMode: EdgeDetectionMode.COLOR, - // predicationMode: PredicationMode.DISABLED - // }, - // [Effects.OutlineEffect]: { - // isActive: false, - // blendFunction: BlendFunction.SCREEN, - // patternScale: 1.0, - // edgeStrength: 1.0, - // pulseSpeed: 0.0, - // visibleEdgeColor: 0xffffff, - // hiddenEdgeColor: 0x22090a, - // multisampling: 0, - // resolutionScale: 0.5, - // resolutionX: Resolution.AUTO_SIZE, - // resolutionY: Resolution.AUTO_SIZE, - // width: Resolution.AUTO_SIZE, - // height: 480, - // kernelSize: KernelSize.VERY_SMALL, - // blur: false, - // xRay: true - // }, + [Effects.SMAAEffect]: { + isActive: false, + preset: SMAAPreset.MEDIUM, + edgeDetectionMode: EdgeDetectionMode.COLOR, + predicationMode: PredicationMode.DISABLED + }, + [Effects.OutlineEffect]: { + isActive: false, + blendFunction: BlendFunction.SCREEN, + patternScale: 1.0, + edgeStrength: 1.0, + pulseSpeed: 0.0, + visibleEdgeColor: 0xffffff, + hiddenEdgeColor: 0x22090a, + multisampling: 0, + resolutionScale: 0.5, + resolutionX: Resolution.AUTO_SIZE, + resolutionY: Resolution.AUTO_SIZE, + width: Resolution.AUTO_SIZE, + height: 480, + kernelSize: KernelSize.VERY_SMALL, + blur: false, + xRay: true + }, [Effects.SSREffect]: { isActive: false, ...defaultSSROptions }, + /* [Effects.SSGIEffect]: { isActive: false, distance: 10, @@ -473,6 +464,7 @@ export const defaultPostProcessingSchema: EffectPropsSchema = { resolutionScale: 1, missedRays: false }, + */ [Effects.SSAOEffect]: { isActive: false, blendFunction: BlendFunction.MULTIPLY, @@ -485,8 +477,8 @@ export const defaultPostProcessingSchema: EffectPropsSchema = { // worldDistanceFalloff: 0.03, // worldProximityThreshold: 0.0005, // worldProximityFalloff: 0.001, - distanceThreshold: 0.125, // Render up to a distance of ~20 world units - distanceFalloff: 0.02, // with an additional ~2.5 units of falloff. + distanceThreshold: 0.97, // Render up to a distance of ~20 world units + distanceFalloff: 0.03, // with an additional ~2.5 units of falloff. rangeThreshold: 0.0005, rangeFalloff: 0.001, minRadiusScale: 0.1, @@ -500,14 +492,12 @@ export const defaultPostProcessingSchema: EffectPropsSchema = { resolutionX: Resolution.AUTO_SIZE, resolutionY: Resolution.AUTO_SIZE, width: Resolution.AUTO_SIZE, - height: Resolution.AUTO_SIZE, - kernelSize: KernelSize.SMALL, - blur: true + height: Resolution.AUTO_SIZE }, [Effects.DepthOfFieldEffect]: { isActive: false, blendFunction: BlendFunction.NORMAL, - focusDistance: 0.1, + focusDistance: 0.0, focalLength: 0.1, focusRange: 0.1, bokehScale: 1.0, @@ -528,9 +518,9 @@ export const defaultPostProcessingSchema: EffectPropsSchema = { }, [Effects.ToneMappingEffect]: { isActive: false, - blendFunction: BlendFunction.NORMAL, + blendFunction: BlendFunction.SRC, adaptive: false, - mode: ToneMappingMode.ACES_FILMIC, + mode: ToneMappingMode.AGX, resolution: 256, maxLuminance: 4.0, whitePoint: 4.0, @@ -541,13 +531,13 @@ export const defaultPostProcessingSchema: EffectPropsSchema = { }, [Effects.BrightnessContrastEffect]: { isActive: false, - blendFunction: BlendFunction.NORMAL, + blendFunction: BlendFunction.SRC, brightness: 0.0, contrast: 0.0 }, [Effects.HueSaturationEffect]: { isActive: false, - blendFunction: BlendFunction.NORMAL, + blendFunction: BlendFunction.SRC, hue: 0, saturation: 0.0 }, @@ -576,85 +566,117 @@ export const defaultPostProcessingSchema: EffectPropsSchema = { jitter: 1, samples: 16 }, - // [Effects.ChromaticAberrationEffect]: { - // isActive: false, - // blendFunction: BlendFunction.NORMAL, - // offset: undefined, - // radialModulation: false, - // modulationOffset: 0.15 - // }, - // [Effects.ColorAverageEffect]: { - // isActive: false, - // blendFunction: BlendFunction.NORMAL - // }, - // [Effects.DotScreenEffect]: { isActive: false, blendFunction: BlendFunction.NORMAL, angle: 1.57, scale: 1.0 }, - // [Effects.TiltShiftEffect]: { - // isActive: false, - // blendFunction: BlendFunction.NORMAL, - // offset: 0.0, - // rotation: 0.0, - // focusArea: 0.4, - // feather: 0.3, - // bias: 0.06, - // kernelSize: KernelSize.MEDIUM, - // resolutionScale: 0.5, - // resolutionX: Resolution.AUTO_SIZE, - // resolutionY: Resolution.AUTO_SIZE - // }, - // [Effects.GlitchEffect]: { - // isActive: false, - // blendFunction: BlendFunction.NORMAL, - // chromaticAberrationOffset: undefined, - // delay: undefined, - // duration: undefined, - // strength: undefined, - // perturbationMap: undefined, - // dtSize: 64, - // columns: 0.05, - // ratio: 0.85 - // }, - // [Effects.GodRaysEffect]: { - // isActive: false, - // blendFunction: BlendFunction.SCREEN, - // samples: 60.0, - // density: 0.96, - // decay: 0.9, - // weight: 0.4, - // exposure: 0.6, - // clampMax: 1.0, - // resolutionScale: 0.5, - // resolutionX: Resolution.AUTO_SIZE, - // resolutionY: Resolution.AUTO_SIZE, - // width: Resolution.AUTO_SIZE, - // height: Resolution.AUTO_SIZE, - // kernelSize: KernelSize.SMALL, - // blur: true - // }, - // [Effects.GridEffect]: { - // isActive: false, - // blendFunction: BlendFunction.OVERLAY, - // scale: 1.0, - // lineWidth: 0.0 - // }, - // [Effects.LUT1DEffect]: { isActive: false, blendFunction: BlendFunction.SET }, - // [Effects.LUT3DEffect]: { isActive: false, blendFunction: BlendFunction.SET, tetrahedralInterpolation: false, inputEncoding: sRGBEncoding, inputColorSpace: SRGBColorSpace }, - // [Effects.NoiseEffect]: { isActive: false, blendFunction: BlendFunction.SCREEN, premultiply: false }, - // [Effects.PixelationEffect]: { isActive: false, granularity: 30 }, - // [Effects.ScanlineEffect]: { isActive: false, blendFunction: BlendFunction.OVERLAY, density: 1.25}, - // [Effects.ShockWaveEffect]: { - // isActive: false, - // speed: 2.0, - // maxRadius: 1.0, - // waveSize: 0.2, - // amplitude: 0.05, - // }, - // [Effects.FXAAEffect]: { isActive: false, blendFunction: BlendFunction.SRC }, - // [Effects.TextureEffect]: { - // isActive: false, - // blendFunction: BlendFunction.NORMAL, - // texture: undefined, - // aspectCorrection: false - // }, + [Effects.ChromaticAberrationEffect]: { + isActive: false, + offset: new Vector2(1e-3, 5e-4), + radialModulation: false, + modulationOffset: 0.15 + }, + [Effects.ColorAverageEffect]: { + isActive: false, + blendFunction: BlendFunction.NORMAL + }, + [Effects.DotScreenEffect]: { + isActive: false, + blendFunction: BlendFunction.NORMAL, + angle: Math.PI * 0.5, + scale: 1.0 + }, + [Effects.TiltShiftEffect]: { + isActive: false, + blendFunction: BlendFunction.NORMAL, + offset: 0.0, + rotation: 0.0, + focusArea: 0.4, + feather: 0.3, + kernelSize: KernelSize.MEDIUM, + resolutionScale: 0.5, + resolutionX: Resolution.AUTO_SIZE, + resolutionY: Resolution.AUTO_SIZE + }, + [Effects.GlitchEffect]: { + isActive: false, + blendFunction: BlendFunction.NORMAL, + chromaticAberrationOffset: undefined, + delay: new Vector2(1.5, 3.5), + duration: new Vector2(0.6, 1.0), + strength: new Vector2(0.3, 1.0), + perturbationMap: undefined, + dtSize: 64, + columns: 0.05, + ratio: 0.85 + }, + //[Effects.GodRaysEffect]: { + // isActive: false, + // blendFunction: BlendFunction.SCREEN, + // samples: 60.0, + // density: 0.96, + // decay: 0.9, + // weight: 0.4, + // exposure: 0.6, + // clampMax: 1.0, + // resolutionScale: 0.5, + // resolutionX: Resolution.AUTO_SIZE, + // resolutionY: Resolution.AUTO_SIZE, + // width: Resolution.AUTO_SIZE, + // height: Resolution.AUTO_SIZE, + // kernelSize: KernelSize.SMALL, + // blur: true + //}, + [Effects.GridEffect]: { + isActive: false, + blendFunction: BlendFunction.OVERLAY, + scale: 1.0, + lineWidth: 0.0 + }, + [Effects.LUT1DEffect]: { + isActive: false, + blendFunction: BlendFunction.SRC, + lutPath: undefined, + lut: undefined + }, + [Effects.LUT3DEffect]: { + isActive: false, + blendFunction: BlendFunction.SRC, + tetrahedralInterpolation: false, + inputColorSpace: SRGBColorSpace, + lutPath: undefined, + lut: undefined + }, + [Effects.NoiseEffect]: { + isActive: false, + blendFunction: BlendFunction.SCREEN, + premultiply: false + }, + [Effects.PixelationEffect]: { + isActive: false, + granularity: 30 + }, + [Effects.ScanlineEffect]: { + isActive: false, + blendFunction: BlendFunction.OVERLAY, + density: 1.25, + scrollSpeed: 0.0 + }, + [Effects.ShockWaveEffect]: { + isActive: false, + position: new Vector3(0, 0, 0), + speed: 2.0, + maxRadius: 1.0, + waveSize: 0.2, + amplitude: 0.05 + }, + [Effects.FXAAEffect]: { + isActive: false, + blendFunction: BlendFunction.SRC + }, + [Effects.TextureEffect]: { + isActive: false, + blendFunction: BlendFunction.NORMAL, + texturePath: undefined, + texture: undefined, + aspectCorrection: false + }, [Effects.VignetteEffect]: { isActive: false, blendFunction: BlendFunction.NORMAL, @@ -662,14 +684,14 @@ export const defaultPostProcessingSchema: EffectPropsSchema = { eskil: false, offset: 0.5, darkness: 0.5 + }, + [Effects.LensDistortionEffect]: { + isActive: false, + distortion: new Vector2(0, 0), + principalPoint: new Vector2(0, 0), + focalLength: new Vector2(1, 1), + skew: 0 } - // [Effects.LensDistortionEffect]: { - // isActive: false, - // distortion: new Vector2(0,0), - // principalPoint: new Vector2(0,0), - // focalLength: new Vector2(0,0), - // skew: 0 - // } } /** @@ -679,23 +701,23 @@ export const defaultPostProcessingSchema: EffectPropsSchema = { * - https://docs.unity3d.com/Packages/com.unity.render-pipelines.core@17.0/manual */ -/** 1. input aliasing */ -// Effects.SMAAEffect, -// Effects.OutlineEffect, - export const effectInOrder = [ + /** 1. input aliasing */ + Effects.SMAAEffect, + Effects.OutlineEffect, + /** 2. world effects */ // Effects.PaniniProjection, Effects.DepthOfFieldEffect, Effects.SSAOEffect, // TODO- add option to use HBAO Effects.SSREffect, - Effects.SSGIEffect, - // Effects.GodRaysEffect, + //Effects.SSGIEffect, + //Effects.GodRaysEffect, /** 3. camera effects */ - // Effects.LensDistortionEffect, + Effects.LensDistortionEffect, //Effects.LensFlareEffect, - // Effects.ChromaticAberrationEffect, + Effects.ChromaticAberrationEffect, Effects.MotionBlurEffect, Effects.BloomEffect, Effects.VignetteEffect, @@ -706,11 +728,11 @@ export const effectInOrder = [ Effects.BrightnessContrastEffect, Effects.HueSaturationEffect, Effects.ColorDepthEffect, - // Effects.LUT1DEffect, - // Effects.LUT3DEffect, + Effects.LUT1DEffect, + Effects.LUT3DEffect, /** 5. final fix, aliasing and noise passes */ Effects.LinearTosRGBEffect, // should this just be always on? - Effects.TRAAEffect - // Effects.FXAAEffect + Effects.TRAAEffect, + Effects.FXAAEffect ] diff --git a/packages/spatial/src/renderer/functions/configureEffectComposer.ts b/packages/spatial/src/renderer/functions/configureEffectComposer.ts deleted file mode 100644 index ee0bc37f78a..00000000000 --- a/packages/spatial/src/renderer/functions/configureEffectComposer.ts +++ /dev/null @@ -1,168 +0,0 @@ -/* -CPAL-1.0 License - -The contents of this file are subject to the Common Public Attribution License -Version 1.0. (the "License"); you may not use this file except in compliance -with the License. You may obtain a copy of the License at -https://github.com/EtherealEngine/etherealengine/blob/dev/LICENSE. -The License is based on the Mozilla Public License Version 1.1, but Sections 14 -and 15 have been added to cover use of software over a computer network and -provide for limited attribution for the Original Developer. In addition, -Exhibit A has been modified to be consistent with Exhibit B. - -Software distributed under the License is distributed on an "AS IS" basis, -WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the -specific language governing rights and limitations under the License. - -The Original Code is Ethereal Engine. - -The Original Developer is the Initial Developer. The Initial Developer of the -Original Code is the Ethereal Engine team. - -All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023 -Ethereal Engine. All Rights Reserved. -*/ - -import { Entity, getComponent } from '@etherealengine/ecs' -import { getState } from '@etherealengine/hyperflux' -import { - BlendFunction, - DepthDownsamplingPass, - EdgeDetectionMode, - EffectComposer, - EffectPass, - OutlineEffect, - RenderPass, - SMAAEffect, - TextureEffect -} from 'postprocessing' -import { VelocityDepthNormalPass } from 'realism-effects' -import { Scene } from 'three' -import { EngineState } from '../../EngineState' -import { CameraComponent } from '../../camera/components/CameraComponent' -import { ObjectLayers } from '../../renderer/constants/ObjectLayers' -import { HighlightState } from '../HighlightState' -import { RendererState } from '../RendererState' -import { RenderSettingsState, RendererComponent } from '../WebGLRendererSystem' -import { EffectMap, Effects, defaultPostProcessingSchema } from '../effects/PostProcessing' -import { CustomNormalPass } from '../passes/CustomNormalPass' -import { changeRenderMode } from './changeRenderMode' - -export const configureEffectComposer = (entity: Entity, schema?: typeof defaultPostProcessingSchema): void => { - const renderer = getComponent(entity, RendererComponent) - const camera = getComponent(entity, CameraComponent) - if (!renderer || !camera) return - - const scene = new Scene() - - if (renderer.effectComposer) { - renderer.effectComposer.dispose() - renderer.renderPass = null! - } - - const composer = new EffectComposer(renderer.renderer) - renderer.effectComposer = composer - - // we always want to have at least the render pass enabled - const renderPass = new RenderPass() - renderer.effectComposer.addPass(renderPass) - renderer.renderPass = renderPass - - const renderSettings = getState(RendererState) - if (!renderSettings.usePostProcessing) return - - const effects: any[] = [] - - const smaaPreset = getState(RenderSettingsState).smaaPreset - const smaaEffect = new SMAAEffect({ - preset: smaaPreset, - edgeDetectionMode: EdgeDetectionMode.COLOR - }) - composer.SMAAEffect = smaaEffect - - const outlineEffect = new OutlineEffect(scene, camera, getState(HighlightState)) - outlineEffect.selectionLayer = ObjectLayers.HighlightEffect - composer.OutlineEffect = outlineEffect - - const SmaaEffectPass = new EffectPass(camera, smaaEffect) - const OutlineEffectPass = new EffectPass(camera, outlineEffect) - composer.addPass(OutlineEffectPass) //outlines don't follow camera - composer.addPass(SmaaEffectPass) - - const effectKeys = Object.keys(EffectMap) - - const normalPass = new CustomNormalPass(scene, camera) - - const depthDownsamplingPass = new DepthDownsamplingPass({ - normalBuffer: normalPass.texture, - resolutionScale: 0.5 - }) - - if (!schema) return - - const velocityDepthNormalPass = new VelocityDepthNormalPass(scene, camera) - let useVelocityDepthNormalPass = false - let useDepthDownsamplingPass = false - - for (const key of effectKeys) { - const effectOptions = schema[key] - - if (!effectOptions || !effectOptions.isActive) continue - const EffectClass = EffectMap[key] - - if (!EffectClass) continue - - if (key === Effects.SSAOEffect) { - const eff = new EffectClass(camera, normalPass.texture, { - ...effectOptions, - normalDepthBuffer: depthDownsamplingPass.texture - }) - useDepthDownsamplingPass = true - composer[key] = eff - effects.push(eff) - } else if (key === Effects.SSREffect || key === Effects.SSGIEffect) { - // SSR is just a mode of SSGI, and can't both be run at the same time - const eff = new EffectClass(composer, scene, camera, { ...effectOptions, velocityDepthNormalPass }) - useVelocityDepthNormalPass = true - composer[key] = eff - effects.push(eff) - } else if (key === Effects.DepthOfFieldEffect) { - const eff = new EffectClass(camera, effectOptions) - composer[key] = eff - effects.push(eff) - } else if (key === Effects.TRAAEffect) { - // todo support more than 1 texture - const textureCount = 1 - const eff = new EffectClass(scene, camera, velocityDepthNormalPass, textureCount, effectOptions) - useVelocityDepthNormalPass = true - composer[key] = eff - effects.push(eff) - } else if (key === Effects.MotionBlurEffect) { - const eff = new EffectClass(velocityDepthNormalPass, effectOptions) - useVelocityDepthNormalPass = true - composer[key] = eff - effects.push(eff) - } else { - const eff = new EffectClass(effectOptions) - composer[key] = eff - effects.push(eff) - } - } - if (effects.length) { - if (useVelocityDepthNormalPass) composer.addPass(velocityDepthNormalPass) - - if (useDepthDownsamplingPass) { - composer.addPass(normalPass) - composer.addPass(depthDownsamplingPass) - const textureEffect = new TextureEffect({ - blendFunction: BlendFunction.SKIP, - texture: depthDownsamplingPass.texture - }) - effects.push(textureEffect) - } - - composer.EffectPass = new EffectPass(camera, ...effects) - composer.addPass(composer.EffectPass) - } - if (getState(EngineState).isEditor) changeRenderMode() -}