From 2830f0840f30984d0fc30800479afd693ef144b7 Mon Sep 17 00:00:00 2001 From: Michael Floyd Date: Thu, 18 Apr 2024 11:25:11 -0700 Subject: [PATCH 01/34] added color average effect --- .../PostProcessingSettingsEditor.tsx | 3 ++ .../src/renderer/effects/PostProcessing.ts | 41 ++++++++++--------- 2 files changed, 24 insertions(+), 20 deletions(-) diff --git a/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx b/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx index 96372cb8bb7..a5f61e1e87f 100755 --- a/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx +++ b/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx @@ -64,6 +64,9 @@ type EffectPropertiesType = { [key: string]: EffectPropertyDetail } type EffectOptionsType = { [key in keyof typeof Effects]: EffectPropertiesType } const EffectsOptions: EffectOptionsType = { + ColorAverageEffect: { + blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' } + }, SSAOEffect: { blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' }, distanceScaling: { propertyType: PropertyTypes.Boolean, name: 'Distance Scaling' }, diff --git a/packages/spatial/src/renderer/effects/PostProcessing.ts b/packages/spatial/src/renderer/effects/PostProcessing.ts index fb97aa68391..2e78631ba9d 100644 --- a/packages/spatial/src/renderer/effects/PostProcessing.ts +++ b/packages/spatial/src/renderer/effects/PostProcessing.ts @@ -28,6 +28,7 @@ import { BloomEffect, BloomEffectOptions, BrightnessContrastEffect, + ColorAverageEffect, ColorDepthEffect, DepthOfFieldEffect, EdgeDetectionMode, @@ -63,7 +64,7 @@ export const Effects = { TRAAEffect: 'TRAAEffect' as const, // ChromaticAberrationEffect: 'ChromaticAberrationEffect' as const, MotionBlurEffect: 'MotionBlurEffect' as const, - // ColorAverageEffect: 'ColorAverageEffect' as const, + ColorAverageEffect: 'ColorAverageEffect' as const, // DotScreenEffect: 'DotScreenEffect' as const, // TiltShiftEffect: 'TiltShiftEffect' as const, // GlitchEffect: 'GlitchEffect' as const, @@ -97,7 +98,7 @@ export const EffectMap = { [Effects.TRAAEffect]: TRAAEffect, // [Effects.ChromaticAberrationEffect]: ChromaticAberrationEffect, // [Effects.MotionBlurEffect]: MotionBlurEffect, - // [Effects.ColorAverageEffect]: ColorAverageEffect, + [Effects.ColorAverageEffect]: ColorAverageEffect, // [Effects.DotScreenEffect]: DotScreenEffect, // [Effects.TiltShiftEffect]: TiltShiftEffect, // [Effects.GlitchEffect]: GlitchEffect, @@ -402,7 +403,7 @@ export type EffectPropsSchema = { [Effects.TRAAEffect]: TRAAEffectProps [Effects.MotionBlurEffect]: MotionBlurEffectProps // [Effects.ChromaticAberrationEffect]: ChromaticAberrationEffectProps - // [Effects.ColorAverageEffect]: ColorAverageEffectProps + [Effects.ColorAverageEffect]: ColorAverageEffectProps // [Effects.DotScreenEffect]: DotScreenEffectProps // [Effects.TiltShiftEffect]: TiltShiftEffectProps // [Effects.GlitchEffect]: GlitchEffectProps @@ -475,33 +476,33 @@ export const defaultPostProcessingSchema: EffectPropsSchema = { }, [Effects.SSAOEffect]: { isActive: false, - blendFunction: BlendFunction.MULTIPLY, + blendFunction: BlendFunction.LINEAR_LIGHT, distanceScaling: true, depthAwareUpsampling: true, normalDepthBuffer: undefined, - samples: 9, - rings: 7, + samples: 23, + rings: 0.29, // worldDistanceThreshold: 0.97, // 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.06, // Render up to a distance of ~20 world units + distanceFalloff: 0.494, // with an additional ~2.5 units of falloff. rangeThreshold: 0.0005, - rangeFalloff: 0.001, - minRadiusScale: 0.1, - luminanceInfluence: 0.7, - bias: 0.025, - radius: 0.1825, - intensity: 1.0, - fade: 0.01, + rangeFalloff: 0.537, + minRadiusScale: -0.64, + luminanceInfluence: 0.52, + bias: -0.04, + radius: 0.09, + intensity: 3, + fade: 0.09, color: undefined, resolutionScale: 1.0, resolutionX: Resolution.AUTO_SIZE, resolutionY: Resolution.AUTO_SIZE, width: Resolution.AUTO_SIZE, height: Resolution.AUTO_SIZE, - kernelSize: KernelSize.SMALL, + kernelSize: KernelSize.VERY_LARGE, blur: true }, [Effects.DepthOfFieldEffect]: { @@ -583,10 +584,10 @@ export const defaultPostProcessingSchema: EffectPropsSchema = { // radialModulation: false, // modulationOffset: 0.15 // }, - // [Effects.ColorAverageEffect]: { - // isActive: false, - // blendFunction: BlendFunction.NORMAL - // }, + [Effects.ColorAverageEffect]: { + isActive: false, + blendFunction: BlendFunction.NORMAL + }, // [Effects.DotScreenEffect]: { isActive: false, blendFunction: BlendFunction.NORMAL, angle: 1.57, scale: 1.0 }, // [Effects.TiltShiftEffect]: { // isActive: false, From c7a0f4e5dc97dd4f2526563c153c4704d24bb5a2 Mon Sep 17 00:00:00 2001 From: Michael Floyd Date: Fri, 19 Apr 2024 11:31:20 -0700 Subject: [PATCH 02/34] added the outline effect to the post processing --- .../PostProcessingSettingsEditor.tsx | 18 ++++++++ .../src/renderer/effects/PostProcessing.ts | 43 ++++++++++--------- .../functions/configureEffectComposer.ts | 8 ++++ 3 files changed, 48 insertions(+), 21 deletions(-) diff --git a/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx b/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx index a5f61e1e87f..8516dc6ce41 100755 --- a/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx +++ b/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx @@ -64,6 +64,24 @@ type EffectPropertiesType = { [key: string]: EffectPropertyDetail } type EffectOptionsType = { [key in keyof typeof Effects]: EffectPropertiesType } const EffectsOptions: EffectOptionsType = { + 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' } + + //resolutionX: Resolution.AUTO_SIZE, + //resolutionY: Resolution.AUTO_SIZE, + //width: Resolution.AUTO_SIZE, + //height: 480, + //kernelSize: KernelSize.VERY_SMALL, + }, ColorAverageEffect: { blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' } }, diff --git a/packages/spatial/src/renderer/effects/PostProcessing.ts b/packages/spatial/src/renderer/effects/PostProcessing.ts index 2e78631ba9d..4ae99ce79e4 100644 --- a/packages/spatial/src/renderer/effects/PostProcessing.ts +++ b/packages/spatial/src/renderer/effects/PostProcessing.ts @@ -34,6 +34,7 @@ import { EdgeDetectionMode, HueSaturationEffect, KernelSize, + OutlineEffect, PredicationMode, Resolution, SMAAPreset, @@ -50,7 +51,7 @@ import { LinearTosRGBEffect } from '../../renderer/effects/LinearTosRGBEffect' export const Effects = { // SMAAEffect: 'SMAAEffect' as const, - // OutlineEffect: 'OutlineEffect' as const, + OutlineEffect: 'OutlineEffect' as const, SSAOEffect: 'SSAOEffect' as const, SSREffect: 'SSREffect' as const, DepthOfFieldEffect: 'DepthOfFieldEffect' as const, @@ -84,7 +85,7 @@ export const Effects = { export const EffectMap = { // [Effects.SMAAEffect]: SMAAEffect, - // [Effects.OutlineEffect]: OutlineEffect, + [Effects.OutlineEffect]: OutlineEffect, [Effects.SSAOEffect]: SSAOEffect, [Effects.SSREffect]: SSREffect, [Effects.DepthOfFieldEffect]: DepthOfFieldEffect, @@ -389,7 +390,7 @@ export type LensDistortionEffectProps = EffectProps & { export type EffectPropsSchema = { // [Effects.SMAAEffect]: SMAAEffectProps - // [Effects.OutlineEffect]: OutlineEffectProps + [Effects.OutlineEffect]: OutlineEffectProps [Effects.SSAOEffect]: SSAOEffectProps [Effects.SSREffect]: SSREffectProps [Effects.DepthOfFieldEffect]: DepthOfFieldEffectProps @@ -430,24 +431,24 @@ export const defaultPostProcessingSchema: EffectPropsSchema = { // 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.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 diff --git a/packages/spatial/src/renderer/functions/configureEffectComposer.ts b/packages/spatial/src/renderer/functions/configureEffectComposer.ts index 48739311685..474688bf51a 100644 --- a/packages/spatial/src/renderer/functions/configureEffectComposer.ts +++ b/packages/spatial/src/renderer/functions/configureEffectComposer.ts @@ -176,6 +176,14 @@ export const configureEffectComposer = (entity: Entity): void => { useVelocityDepthNormalPass = true composer[key] = eff effects.push(eff) + } else if (key === Effects.ColorAverageEffect) { + const eff = new EffectClass(effectOptions.blendFunction) + composer[key] = eff + effects.push(eff) + } else if (key === Effects.OutlineEffect) { + const eff = new EffectClass(scene, camera, effectOptions) + composer[key] = eff + effects.push(eff) } else { const eff = new EffectClass(effectOptions) composer[key] = eff From 3096f996f708051c679931a44e84c3a31584154f Mon Sep 17 00:00:00 2001 From: Michael Floyd Date: Fri, 19 Apr 2024 16:02:57 -0700 Subject: [PATCH 03/34] added smaa effect for post processing --- .../PostProcessingSettingsEditor.tsx | 38 ++++++++++++------- .../src/renderer/effects/PostProcessing.ts | 27 ++++++------- 2 files changed, 38 insertions(+), 27 deletions(-) diff --git a/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx b/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx index 8516dc6ce41..f18a3a7f6fb 100755 --- a/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx +++ b/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx @@ -23,7 +23,7 @@ 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' @@ -64,6 +64,13 @@ type EffectPropertiesType = { [key: string]: EffectPropertyDetail } type EffectOptionsType = { [key in keyof typeof Effects]: EffectPropertiesType } const EffectsOptions: EffectOptionsType = { + SMAAEffect: { + preset: { propertyType: PropertyTypes.SMAAPreset, name: 'Preset' } + }, + ColorAverageEffect: { + blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' } + }, + OutlineEffect: { blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' }, patternScale: { propertyType: PropertyTypes.Number, name: 'Pattern Scale', min: 0, max: 10, step: 0.01 }, @@ -74,16 +81,12 @@ const EffectsOptions: EffectOptionsType = { 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' } - + xRay: { propertyType: PropertyTypes.Boolean, name: 'xRay' }, + kernelSize: { propertyType: PropertyTypes.Number, name: 'Kernel Size', min: 1, max: 5, step: 1 } //resolutionX: Resolution.AUTO_SIZE, //resolutionY: Resolution.AUTO_SIZE, //width: Resolution.AUTO_SIZE, //height: 480, - //kernelSize: KernelSize.VERY_SMALL, - }, - ColorAverageEffect: { - blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' } }, SSAOEffect: { blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' }, @@ -227,6 +230,10 @@ const EffectsOptions: EffectOptionsType = { } } +const SMAAPresetSelect = Object.entries(SMAAPreset).map(([label, value]) => { + return { label, value } +}) + const BlendFunctionSelect = Object.entries(BlendFunction).map(([label, value]) => { return { label, value } }) @@ -244,13 +251,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 }, @@ -302,6 +302,16 @@ export const PostProcessingSettingsEditor: EditorComponentType = (props) => { ) break + case PropertyTypes.SMAAPreset: + renderVal = ( + + ) + break + case PropertyTypes.BlendFunction: renderVal = ( Date: Mon, 22 Apr 2024 09:01:03 -0700 Subject: [PATCH 04/34] added ChromaticAberrationEffect to post processing --- .../PostProcessingSettingsEditor.tsx | 6 ++++- .../src/renderer/effects/PostProcessing.ts | 27 +++++++++---------- 2 files changed, 18 insertions(+), 15 deletions(-) diff --git a/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx b/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx index f18a3a7f6fb..8067e7b61f0 100755 --- a/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx +++ b/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx @@ -70,7 +70,6 @@ const EffectsOptions: EffectOptionsType = { ColorAverageEffect: { blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' } }, - OutlineEffect: { blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' }, patternScale: { propertyType: PropertyTypes.Number, name: 'Pattern Scale', min: 0, max: 10, step: 0.01 }, @@ -88,6 +87,11 @@ const EffectsOptions: EffectOptionsType = { //width: Resolution.AUTO_SIZE, //height: 480, }, + ChromaticAberrationEffect: { + //offset?: Vector2 + radialModulation: { propertyType: PropertyTypes.Boolean, name: 'Radial Modulation' }, + modulationOffset: { propertyType: PropertyTypes.Number, name: 'Modulation Offset', min: 0, max: 10, step: 0.01 } + }, SSAOEffect: { blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' }, distanceScaling: { propertyType: PropertyTypes.Boolean, name: 'Distance Scaling' }, diff --git a/packages/spatial/src/renderer/effects/PostProcessing.ts b/packages/spatial/src/renderer/effects/PostProcessing.ts index b8332818bfa..110fb445fdd 100644 --- a/packages/spatial/src/renderer/effects/PostProcessing.ts +++ b/packages/spatial/src/renderer/effects/PostProcessing.ts @@ -28,6 +28,7 @@ import { BloomEffect, BloomEffectOptions, BrightnessContrastEffect, + ChromaticAberrationEffect, ColorAverageEffect, ColorDepthEffect, DepthOfFieldEffect, @@ -51,7 +52,7 @@ import { Color, ColorSpace, Texture, TextureEncoding, Vector2 } from 'three' import { LinearTosRGBEffect } from '../../renderer/effects/LinearTosRGBEffect' export const Effects = { - ç: 'SMAAEffect' as const, + SMAAEffect: 'SMAAEffect' as const, OutlineEffect: 'OutlineEffect' as const, SSAOEffect: 'SSAOEffect' as const, SSREffect: 'SSREffect' as const, @@ -64,7 +65,7 @@ export const Effects = { LinearTosRGBEffect: 'LinearTosRGBEffect' 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, @@ -98,7 +99,7 @@ export const EffectMap = { [Effects.LinearTosRGBEffect]: LinearTosRGBEffect, [Effects.SSGIEffect]: SSGIEffect, [Effects.TRAAEffect]: TRAAEffect, - // [Effects.ChromaticAberrationEffect]: ChromaticAberrationEffect, + [Effects.ChromaticAberrationEffect]: ChromaticAberrationEffect, // [Effects.MotionBlurEffect]: MotionBlurEffect, [Effects.ColorAverageEffect]: ColorAverageEffect, // [Effects.DotScreenEffect]: DotScreenEffect, @@ -289,7 +290,6 @@ export type MotionBlurEffectProps = EffectProps & { } export type ChromaticAberrationEffectProps = EffectProps & { - blendFunction?: BlendFunction offset?: Vector2 radialModulation: boolean modulationOffset: number @@ -404,7 +404,7 @@ export type EffectPropsSchema = { [Effects.SSGIEffect]: SSGIEffectProps [Effects.TRAAEffect]: TRAAEffectProps [Effects.MotionBlurEffect]: MotionBlurEffectProps - // [Effects.ChromaticAberrationEffect]: ChromaticAberrationEffectProps + [Effects.ChromaticAberrationEffect]: ChromaticAberrationEffectProps [Effects.ColorAverageEffect]: ColorAverageEffectProps // [Effects.DotScreenEffect]: DotScreenEffectProps // [Effects.TiltShiftEffect]: TiltShiftEffectProps @@ -579,13 +579,12 @@ export const defaultPostProcessingSchema: EffectPropsSchema = { jitter: 1, samples: 16 }, - // [Effects.ChromaticAberrationEffect]: { - // isActive: false, - // blendFunction: BlendFunction.NORMAL, - // offset: undefined, - // radialModulation: false, - // modulationOffset: 0.15 - // }, + [Effects.ChromaticAberrationEffect]: { + isActive: false, + offset: undefined, + radialModulation: false, + modulationOffset: 0.15 + }, [Effects.ColorAverageEffect]: { isActive: false, blendFunction: BlendFunction.NORMAL @@ -685,7 +684,7 @@ export const defaultPostProcessingSchema: EffectPropsSchema = { export const effectInOrder = [ /** 1. input aliasing */ Effects.SMAAEffect, - // Effects.OutlineEffect, + Effects.OutlineEffect, /** 2. world effects */ // Effects.PaniniProjection, @@ -698,7 +697,7 @@ export const effectInOrder = [ /** 3. camera effects */ // Effects.LensDistortionEffect, //Effects.LensFlareEffect, - // Effects.ChromaticAberrationEffect, + Effects.ChromaticAberrationEffect, Effects.MotionBlurEffect, Effects.BloomEffect, Effects.VignetteEffect, From 4f186661609ecf071b0611491bfadddcb3da59a9 Mon Sep 17 00:00:00 2001 From: Michael Floyd Date: Mon, 22 Apr 2024 09:14:24 -0700 Subject: [PATCH 05/34] added DotScreenEffect post processing effect --- .../properties/PostProcessingSettingsEditor.tsx | 5 +++++ .../spatial/src/renderer/effects/PostProcessing.ts | 14 ++++++++++---- 2 files changed, 15 insertions(+), 4 deletions(-) diff --git a/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx b/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx index 8067e7b61f0..aa681efffb9 100755 --- a/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx +++ b/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx @@ -92,6 +92,11 @@ const EffectsOptions: EffectOptionsType = { radialModulation: { propertyType: PropertyTypes.Boolean, name: 'Radial Modulation' }, modulationOffset: { propertyType: PropertyTypes.Number, name: 'Modulation Offset', min: 0, 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 } + }, SSAOEffect: { blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' }, distanceScaling: { propertyType: PropertyTypes.Boolean, name: 'Distance Scaling' }, diff --git a/packages/spatial/src/renderer/effects/PostProcessing.ts b/packages/spatial/src/renderer/effects/PostProcessing.ts index 110fb445fdd..88d3144017c 100644 --- a/packages/spatial/src/renderer/effects/PostProcessing.ts +++ b/packages/spatial/src/renderer/effects/PostProcessing.ts @@ -32,6 +32,7 @@ import { ColorAverageEffect, ColorDepthEffect, DepthOfFieldEffect, + DotScreenEffect, EdgeDetectionMode, HueSaturationEffect, KernelSize, @@ -68,7 +69,7 @@ export const Effects = { ChromaticAberrationEffect: 'ChromaticAberrationEffect' as const, MotionBlurEffect: 'MotionBlurEffect' as const, ColorAverageEffect: 'ColorAverageEffect' as const, - // DotScreenEffect: 'DotScreenEffect' as const, + DotScreenEffect: 'DotScreenEffect' as const, // TiltShiftEffect: 'TiltShiftEffect' as const, // GlitchEffect: 'GlitchEffect' as const, // GodRaysEffect: 'GodRaysEffect' as const, @@ -102,7 +103,7 @@ export const EffectMap = { [Effects.ChromaticAberrationEffect]: ChromaticAberrationEffect, // [Effects.MotionBlurEffect]: MotionBlurEffect, [Effects.ColorAverageEffect]: ColorAverageEffect, - // [Effects.DotScreenEffect]: DotScreenEffect, + [Effects.DotScreenEffect]: DotScreenEffect, // [Effects.TiltShiftEffect]: TiltShiftEffect, // [Effects.GlitchEffect]: GlitchEffect, // [Effects.GodRaysEffect]: GodRaysEffect, @@ -406,7 +407,7 @@ export type EffectPropsSchema = { [Effects.MotionBlurEffect]: MotionBlurEffectProps [Effects.ChromaticAberrationEffect]: ChromaticAberrationEffectProps [Effects.ColorAverageEffect]: ColorAverageEffectProps - // [Effects.DotScreenEffect]: DotScreenEffectProps + [Effects.DotScreenEffect]: DotScreenEffectProps // [Effects.TiltShiftEffect]: TiltShiftEffectProps // [Effects.GlitchEffect]: GlitchEffectProps // [Effects.GodRaysEffect]: GodRaysEffectProps @@ -589,7 +590,12 @@ export const defaultPostProcessingSchema: EffectPropsSchema = { isActive: false, blendFunction: BlendFunction.NORMAL }, - // [Effects.DotScreenEffect]: { isActive: false, blendFunction: BlendFunction.NORMAL, angle: 1.57, scale: 1.0 }, + [Effects.DotScreenEffect]: { + isActive: false, + blendFunction: BlendFunction.NORMAL, + angle: 1.57, + scale: 1.0 + }, // [Effects.TiltShiftEffect]: { // isActive: false, // blendFunction: BlendFunction.NORMAL, From ff3956a343752093a8cefe05361cc0f2f822692d Mon Sep 17 00:00:00 2001 From: Michael Floyd Date: Mon, 22 Apr 2024 09:33:41 -0700 Subject: [PATCH 06/34] added TiltShiftEffect post processing effect --- .../PostProcessingSettingsEditor.tsx | 12 +++++++ .../src/renderer/effects/PostProcessing.ts | 33 ++++++++++--------- 2 files changed, 29 insertions(+), 16 deletions(-) diff --git a/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx b/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx index aa681efffb9..a1a545461cb 100755 --- a/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx +++ b/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx @@ -97,6 +97,18 @@ const EffectsOptions: EffectOptionsType = { 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 } }, + 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 }, + bias: { propertyType: PropertyTypes.Number, name: 'Bias', min: 0, max: 10, step: 0.1 }, + kernelSize: { propertyType: PropertyTypes.Number, name: 'Kerne Size', min: 1, max: 5, step: 1 }, + resolutionScale: { propertyType: PropertyTypes.Number, name: 'Resolution Scale', min: 0, max: 10, step: 0.1 } + //resolutionX: Resolution.AUTO_SIZE, + //resolutionY: Resolution.AUTO_SIZE + }, SSAOEffect: { blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' }, distanceScaling: { propertyType: PropertyTypes.Boolean, name: 'Distance Scaling' }, diff --git a/packages/spatial/src/renderer/effects/PostProcessing.ts b/packages/spatial/src/renderer/effects/PostProcessing.ts index 88d3144017c..2c810830d30 100644 --- a/packages/spatial/src/renderer/effects/PostProcessing.ts +++ b/packages/spatial/src/renderer/effects/PostProcessing.ts @@ -42,6 +42,7 @@ import { SMAAEffect, SMAAPreset, SSAOEffect, + TiltShiftEffect, ToneMappingEffect, ToneMappingMode, VignetteEffect, @@ -70,7 +71,7 @@ export const Effects = { MotionBlurEffect: 'MotionBlurEffect' as const, ColorAverageEffect: 'ColorAverageEffect' as const, DotScreenEffect: 'DotScreenEffect' as const, - // TiltShiftEffect: 'TiltShiftEffect' as const, + TiltShiftEffect: 'TiltShiftEffect' as const, // GlitchEffect: 'GlitchEffect' as const, // GodRaysEffect: 'GodRaysEffect' as const, // GridEffect: 'GridEffect' as const, @@ -104,7 +105,7 @@ export const EffectMap = { // [Effects.MotionBlurEffect]: MotionBlurEffect, [Effects.ColorAverageEffect]: ColorAverageEffect, [Effects.DotScreenEffect]: DotScreenEffect, - // [Effects.TiltShiftEffect]: TiltShiftEffect, + [Effects.TiltShiftEffect]: TiltShiftEffect, // [Effects.GlitchEffect]: GlitchEffect, // [Effects.GodRaysEffect]: GodRaysEffect, // [Effects.GridEffect]: GridEffect, @@ -408,7 +409,7 @@ export type EffectPropsSchema = { [Effects.ChromaticAberrationEffect]: ChromaticAberrationEffectProps [Effects.ColorAverageEffect]: ColorAverageEffectProps [Effects.DotScreenEffect]: DotScreenEffectProps - // [Effects.TiltShiftEffect]: TiltShiftEffectProps + [Effects.TiltShiftEffect]: TiltShiftEffectProps // [Effects.GlitchEffect]: GlitchEffectProps // [Effects.GodRaysEffect]: GodRaysEffectProps // [Effects.GridEffect]: GridEffectProps @@ -596,19 +597,19 @@ export const defaultPostProcessingSchema: EffectPropsSchema = { 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.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, From eca10595b8d10aeb1179718036c77b93f4737c9f Mon Sep 17 00:00:00 2001 From: Michael Floyd Date: Mon, 22 Apr 2024 14:40:51 -0700 Subject: [PATCH 07/34] Added motion blur post processing effect --- packages/spatial/src/renderer/effects/PostProcessing.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/spatial/src/renderer/effects/PostProcessing.ts b/packages/spatial/src/renderer/effects/PostProcessing.ts index 2c810830d30..9ca168d6d6f 100644 --- a/packages/spatial/src/renderer/effects/PostProcessing.ts +++ b/packages/spatial/src/renderer/effects/PostProcessing.ts @@ -48,7 +48,7 @@ import { VignetteEffect, VignetteTechnique } from 'postprocessing' -import { SSGIEffect, SSREffect, TRAAEffect } from 'realism-effects' +import { MotionBlurEffect, SSGIEffect, SSREffect, TRAAEffect } from 'realism-effects' import { Color, ColorSpace, Texture, TextureEncoding, Vector2 } from 'three' import { LinearTosRGBEffect } from '../../renderer/effects/LinearTosRGBEffect' @@ -102,7 +102,7 @@ export const EffectMap = { [Effects.SSGIEffect]: SSGIEffect, [Effects.TRAAEffect]: TRAAEffect, [Effects.ChromaticAberrationEffect]: ChromaticAberrationEffect, - // [Effects.MotionBlurEffect]: MotionBlurEffect, + [Effects.MotionBlurEffect]: MotionBlurEffect, [Effects.ColorAverageEffect]: ColorAverageEffect, [Effects.DotScreenEffect]: DotScreenEffect, [Effects.TiltShiftEffect]: TiltShiftEffect, From 1f91ee69450cb7c5cbc2b21f88bf58c2b8cfcda3 Mon Sep 17 00:00:00 2001 From: Michael Floyd Date: Mon, 22 Apr 2024 15:28:56 -0700 Subject: [PATCH 08/34] added Glitch Effect to post processing --- .../PostProcessingSettingsEditor.tsx | 24 +++++++++++++- .../src/renderer/effects/PostProcessing.ts | 31 ++++++++++--------- 2 files changed, 39 insertions(+), 16 deletions(-) diff --git a/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx b/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx index a1a545461cb..25b89ec6792 100755 --- a/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx +++ b/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx @@ -43,6 +43,7 @@ import ColorInput from '../inputs/ColorInput' import CompoundNumericInput from '../inputs/CompoundNumericInput' import InputGroup from '../inputs/InputGroup' import SelectInput from '../inputs/SelectInput' +import Vector2Input from '../inputs/Vector2Input' import styles from '../styles.module.scss' import PropertyGroup from './PropertyGroup' import { EditorComponentType, commitProperties, commitProperty, updateProperty } from './Util' @@ -56,6 +57,7 @@ enum PropertyTypes { SMAAPreset, EdgeDetectionMode, PredicationMode, + Vector2, VignetteTechnique } @@ -88,7 +90,7 @@ const EffectsOptions: EffectOptionsType = { //height: 480, }, ChromaticAberrationEffect: { - //offset?: Vector2 + 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 } }, @@ -248,6 +250,17 @@ const EffectsOptions: EffectOptionsType = { eskil: { propertyType: PropertyTypes.Boolean, name: 'Eskil' }, offset: { propertyType: PropertyTypes.Number, name: 'Offset', min: 0, max: 10, step: 0.1 }, darkness: { propertyType: PropertyTypes.Number, name: 'Darkness', min: 0, max: 10, step: 0.1 } + }, + 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?: Texture + 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 } } } @@ -353,6 +366,15 @@ export const PostProcessingSettingsEditor: EditorComponentType = (props) => { ) break + case PropertyTypes.Vector2: + renderVal = ( + + ) + break + case PropertyTypes.Color: renderVal = ( Date: Tue, 23 Apr 2024 08:37:14 -0700 Subject: [PATCH 09/34] added lineWidth GodRaysEffect and GridEffect to post processing --- .../PostProcessingSettingsEditor.tsx | 27 +++++++- .../src/renderer/effects/PostProcessing.ts | 62 ++++++++++--------- .../functions/configureEffectComposer.ts | 5 ++ 3 files changed, 61 insertions(+), 33 deletions(-) diff --git a/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx b/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx index 25b89ec6792..754246c1a3f 100755 --- a/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx +++ b/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx @@ -83,7 +83,7 @@ const EffectsOptions: EffectOptionsType = { 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.Number, name: 'Kernel Size', min: 1, max: 5, step: 1 } + kernelSize: { propertyType: PropertyTypes.KernelSize, name: 'KernelSize' } //resolutionX: Resolution.AUTO_SIZE, //resolutionY: Resolution.AUTO_SIZE, //width: Resolution.AUTO_SIZE, @@ -106,7 +106,7 @@ const EffectsOptions: EffectOptionsType = { 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 }, bias: { propertyType: PropertyTypes.Number, name: 'Bias', min: 0, max: 10, step: 0.1 }, - kernelSize: { propertyType: PropertyTypes.Number, name: 'Kerne Size', min: 1, max: 5, step: 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 @@ -137,7 +137,7 @@ const EffectsOptions: EffectOptionsType = { 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 }, + kernelSize: { propertyType: PropertyTypes.KernelSize, name: 'KernelSize' }, blur: { propertyType: PropertyTypes.Boolean, name: 'Blur' } }, SSREffect: { @@ -261,6 +261,27 @@ const EffectsOptions: EffectOptionsType = { 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 } + }, + 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' } + }, + 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 } } } diff --git a/packages/spatial/src/renderer/effects/PostProcessing.ts b/packages/spatial/src/renderer/effects/PostProcessing.ts index 4a638e749df..9bae5a18d85 100644 --- a/packages/spatial/src/renderer/effects/PostProcessing.ts +++ b/packages/spatial/src/renderer/effects/PostProcessing.ts @@ -35,6 +35,8 @@ import { DotScreenEffect, EdgeDetectionMode, GlitchEffect, + GodRaysEffect, + GridEffect, HueSaturationEffect, KernelSize, OutlineEffect, @@ -74,8 +76,8 @@ export const Effects = { DotScreenEffect: 'DotScreenEffect' as const, TiltShiftEffect: 'TiltShiftEffect' as const, GlitchEffect: 'GlitchEffect' as const, - // GodRaysEffect: 'GodRaysEffect' as const, - // GridEffect: 'GridEffect' as const, + GodRaysEffect: 'GodRaysEffect' as const, + GridEffect: 'GridEffect' as const, // LUT1DEffect: 'LUT1DEffect' as const, // LUT3DEffect: 'LUT3DEffect' as const, // NoiseEffect: 'NoiseEffect' as const, @@ -108,8 +110,8 @@ export const EffectMap = { [Effects.DotScreenEffect]: DotScreenEffect, [Effects.TiltShiftEffect]: TiltShiftEffect, [Effects.GlitchEffect]: GlitchEffect, - // [Effects.GodRaysEffect]: GodRaysEffect, - // [Effects.GridEffect]: GridEffect, + [Effects.GodRaysEffect]: GodRaysEffect, + [Effects.GridEffect]: GridEffect, // [Effects.LUT1DEffect]: LUT1DEffect, // [Effects.LUT3DEffect]: LUT3DEffect, // [Effects.NoiseEffect]: NoiseEffect, @@ -412,8 +414,8 @@ export type EffectPropsSchema = { [Effects.DotScreenEffect]: DotScreenEffectProps [Effects.TiltShiftEffect]: TiltShiftEffectProps [Effects.GlitchEffect]: GlitchEffectProps - // [Effects.GodRaysEffect]: GodRaysEffectProps - // [Effects.GridEffect]: GridEffectProps + [Effects.GodRaysEffect]: GodRaysEffectProps + [Effects.GridEffect]: GridEffectProps // [Effects.LUT1DEffect]: LUT1DEffectProps // [Effects.LUT3DEffect]: LUT3DEffectProps // [Effects.NoiseEffect]: NoiseEffectProps @@ -623,29 +625,29 @@ export const defaultPostProcessingSchema: EffectPropsSchema = { 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.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 }, @@ -700,7 +702,7 @@ export const effectInOrder = [ Effects.SSAOEffect, // TODO- add option to use HBAO Effects.SSREffect, Effects.SSGIEffect, - // Effects.GodRaysEffect, + Effects.GodRaysEffect, /** 3. camera effects */ // Effects.LensDistortionEffect, diff --git a/packages/spatial/src/renderer/functions/configureEffectComposer.ts b/packages/spatial/src/renderer/functions/configureEffectComposer.ts index 474688bf51a..d643f733246 100644 --- a/packages/spatial/src/renderer/functions/configureEffectComposer.ts +++ b/packages/spatial/src/renderer/functions/configureEffectComposer.ts @@ -184,6 +184,11 @@ export const configureEffectComposer = (entity: Entity): void => { const eff = new EffectClass(scene, camera, effectOptions) composer[key] = eff effects.push(eff) + } else if (key == Effects.GodRaysEffect) { + const lightsource = null //tbd + const eff = new EffectClass(camera, lightsource, effectOptions) + composer[key] = eff + effects.push(camera, eff) } else { const eff = new EffectClass(effectOptions) composer[key] = eff From 653fe76ae51b425ea5bdbad63cde2d19479c1fb1 Mon Sep 17 00:00:00 2001 From: Michael Floyd Date: Tue, 23 Apr 2024 10:22:49 -0700 Subject: [PATCH 10/34] added LUT1DEffect to post processing --- .../PostProcessingSettingsEditor.tsx | 148 ++++++++++-------- .../src/renderer/effects/PostProcessing.ts | 95 +++++------ .../functions/configureEffectComposer.ts | 11 +- 3 files changed, 140 insertions(+), 114 deletions(-) diff --git a/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx b/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx index 754246c1a3f..1d8e838358e 100755 --- a/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx +++ b/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx @@ -43,6 +43,7 @@ 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 styles from '../styles.module.scss' import PropertyGroup from './PropertyGroup' @@ -57,6 +58,7 @@ enum PropertyTypes { SMAAPreset, EdgeDetectionMode, PredicationMode, + Texture, Vector2, VignetteTechnique } @@ -66,51 +68,6 @@ type EffectPropertiesType = { [key: string]: EffectPropertyDetail } type EffectOptionsType = { [key in keyof typeof Effects]: EffectPropertiesType } const EffectsOptions: EffectOptionsType = { - SMAAEffect: { - preset: { propertyType: PropertyTypes.SMAAPreset, name: 'Preset' } - }, - ColorAverageEffect: { - blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' } - }, - 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, - }, - 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 } - }, - 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 } - }, - 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 }, - bias: { propertyType: PropertyTypes.Number, name: 'Bias', 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 - }, SSAOEffect: { blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' }, distanceScaling: { propertyType: PropertyTypes.Boolean, name: 'Distance Scaling' }, @@ -239,11 +196,6 @@ const EffectsOptions: EffectOptionsType = { 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' }, @@ -251,37 +203,91 @@ const EffectsOptions: EffectOptionsType = { offset: { propertyType: PropertyTypes.Number, name: 'Offset', min: 0, max: 10, step: 0.1 }, darkness: { propertyType: PropertyTypes.Number, name: 'Darkness', min: 0, max: 10, step: 0.1 } }, + 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' } + }, + 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 } + }, 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?: Texture + 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 } }, - 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' } - }, + //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' } + //}, 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 } + }, + LUT1DEffect: { + blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' }, + lut: { propertyType: PropertyTypes.Texture, name: 'LUT' } + }, + 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 } + }, + 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, + }, + SMAAEffect: { + preset: { propertyType: PropertyTypes.SMAAPreset, name: 'Preset' } + }, + 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 }, + bias: { propertyType: PropertyTypes.Number, name: 'Bias', 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 } } @@ -396,6 +402,14 @@ export const PostProcessingSettingsEditor: EditorComponentType = (props) => { ) break + case PropertyTypes.Texture: + renderVal = ( + + ) + break case PropertyTypes.Color: renderVal = ( { const eff = new EffectClass(scene, camera, effectOptions) composer[key] = eff effects.push(eff) - } else if (key == Effects.GodRaysEffect) { - const lightsource = null //tbd - const eff = new EffectClass(camera, lightsource, effectOptions) + //} else if (key == Effects.GodRaysEffect) { + // const lightsource = null //tbd + // const eff = new EffectClass(camera, lightsource, effectOptions) + // composer[key] = eff + // effects.push(eff) + } else if (key == Effects.LUT1DEffect) { + const lut = effectOptions.lut + const eff = new EffectClass(lut, effectOptions) composer[key] = eff effects.push(camera, eff) } else { From fcf1c3fafeeeee71e6d67aa732a2cc735f75a7c3 Mon Sep 17 00:00:00 2001 From: Michael Floyd Date: Tue, 23 Apr 2024 15:59:22 -0700 Subject: [PATCH 11/34] added LUT3DEffect post processing effect --- .../PostProcessingSettingsEditor.tsx | 30 ++++++- .../src/renderer/effects/PostProcessing.ts | 44 +++++----- .../functions/configureEffectComposer.ts | 81 ++++++++++++++----- 3 files changed, 112 insertions(+), 43 deletions(-) diff --git a/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx b/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx index 1d8e838358e..b0f3803ca20 100755 --- a/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx +++ b/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx @@ -26,7 +26,7 @@ Ethereal Engine. All Rights Reserved. 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 { PostProcessingComponent } from '@etherealengine/engine/src/scene/components/PostProcessingComponent' @@ -54,6 +54,7 @@ enum PropertyTypes { Number, Boolean, Color, + ColorSpace, KernelSize, SMAAPreset, EdgeDetectionMode, @@ -248,9 +249,14 @@ const EffectsOptions: EffectOptionsType = { 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 } }, - LUT1DEffect: { + //LUT1DEffect: { + // blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' }, + // lut: { propertyType: PropertyTypes.Texture, name: 'LUT' } + //}, + LUT3DEffect: { blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' }, - lut: { propertyType: PropertyTypes.Texture, name: 'LUT' } + lut: { 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 }, @@ -303,6 +309,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 }, @@ -434,6 +448,16 @@ export const PostProcessingSettingsEditor: EditorComponentType = (props) => { ) break + case PropertyTypes.ColorSpace: + renderVal = ( + + ) + break + case PropertyTypes.SMAAPreset: renderVal = ( { resolutionScale: 0.5 }) + const AddPass = () => { + 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() + } + const SDFSetting = getState(SDFSettingsState) if (SDFSetting.enabled) { const depthRenderTarget = new WebGLRenderTarget(window.innerWidth, window.innerHeight) @@ -189,32 +218,40 @@ export const configureEffectComposer = (entity: Entity): void => { // const eff = new EffectClass(camera, lightsource, effectOptions) // composer[key] = eff // effects.push(eff) - } else if (key == Effects.LUT1DEffect) { - const lut = effectOptions.lut - const eff = new EffectClass(lut, effectOptions) - composer[key] = eff - effects.push(camera, eff) + //} else if (key == Effects.LUT1DEffect) { + // let lut = effectOptions.lut + // if (lut == undefined) { + // lut = null + // } + // const eff = new EffectClass(lut, effectOptions) + // composer[key] = eff + // effects.push(eff) + } else if (key == Effects.LUT3DEffect) { + let lutPath = effectOptions.lut + if (lutPath == undefined) { + lutPath = null + } + let lut: Texture | null = null + if (lutPath != null) { + let textLoad = new TextureLoader() + //have to wait for the texture's image to load and then add the pass to the composer + lut = textLoad.load(lutPath, (texture) => { + const eff = new EffectClass(texture, effectOptions) + composer[key] = eff + effects.push(eff) + AddPass() + }) + } else { + const eff = new EffectClass(lut, effectOptions) + 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() + AddPass() } From 13aa5f99f6ba307b9e1bc5f3f0b9b2e0b698994e Mon Sep 17 00:00:00 2001 From: Michael Floyd Date: Tue, 23 Apr 2024 16:14:10 -0700 Subject: [PATCH 12/34] added LUT1DEffect post processing effect --- .../PostProcessingSettingsEditor.tsx | 8 +++--- .../src/renderer/effects/PostProcessing.ts | 28 +++++++++---------- .../functions/configureEffectComposer.ts | 28 +++++++++++++------ 3 files changed, 38 insertions(+), 26 deletions(-) diff --git a/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx b/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx index b0f3803ca20..a21541ac86c 100755 --- a/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx +++ b/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx @@ -249,10 +249,10 @@ const EffectsOptions: EffectOptionsType = { 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 } }, - //LUT1DEffect: { - // blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' }, - // lut: { propertyType: PropertyTypes.Texture, name: 'LUT' } - //}, + LUT1DEffect: { + blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' }, + lut: { propertyType: PropertyTypes.Texture, name: 'LUT' } + }, LUT3DEffect: { blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' }, lut: { propertyType: PropertyTypes.Texture, name: 'LUT' }, diff --git a/packages/spatial/src/renderer/effects/PostProcessing.ts b/packages/spatial/src/renderer/effects/PostProcessing.ts index 2a8cee9efd4..1076b95a83c 100644 --- a/packages/spatial/src/renderer/effects/PostProcessing.ts +++ b/packages/spatial/src/renderer/effects/PostProcessing.ts @@ -39,7 +39,7 @@ import { GridEffect, HueSaturationEffect, KernelSize, - //LUT1DEffect, + LUT1DEffect, LUT3DEffect, OutlineEffect, PredicationMode, @@ -80,7 +80,7 @@ export const Effects = { GlitchEffect: 'GlitchEffect' as const, //GodRaysEffect: 'GodRaysEffect' as const, GridEffect: 'GridEffect' as const, - //LUT1DEffect: 'LUT1DEffect' as const, + LUT1DEffect: 'LUT1DEffect' as const, LUT3DEffect: 'LUT3DEffect' as const, // NoiseEffect: 'NoiseEffect' as const, // PixelationEffect: 'PixelationEffect' as const, @@ -114,7 +114,7 @@ export const EffectMap = { [Effects.GlitchEffect]: GlitchEffect, //[Effects.GodRaysEffect]: GodRaysEffect, [Effects.GridEffect]: GridEffect, - //[Effects.LUT1DEffect]: LUT1DEffect, + [Effects.LUT1DEffect]: LUT1DEffect, [Effects.LUT3DEffect]: LUT3DEffect, // [Effects.NoiseEffect]: NoiseEffect, // [Effects.PixelationEffect]: PixelationEffect, //cant be used with convolution effects(blur) @@ -354,10 +354,10 @@ export type GridEffectProps = EffectProps & { scale?: number lineWidth?: number } -//export type LUT1DEffectProps = EffectProps & { -// blendFunction?: BlendFunction -// lut?: Texture | null -//} +export type LUT1DEffectProps = EffectProps & { + blendFunction?: BlendFunction + lut?: Texture | null +} export type LUT3DEffectProps = EffectProps & { blendFunction?: BlendFunction tetrahedralInterpolation?: boolean @@ -421,7 +421,7 @@ export type EffectPropsSchema = { [Effects.GlitchEffect]: GlitchEffectProps //[Effects.GodRaysEffect]: GodRaysEffectProps [Effects.GridEffect]: GridEffectProps - //[Effects.LUT1DEffect]: LUT1DEffectProps + [Effects.LUT1DEffect]: LUT1DEffectProps [Effects.LUT3DEffect]: LUT3DEffectProps // [Effects.NoiseEffect]: NoiseEffectProps // [Effects.PixelationEffect]: PixelationEffectProps @@ -653,11 +653,11 @@ export const defaultPostProcessingSchema: EffectPropsSchema = { scale: 1.0, lineWidth: 0.0 }, - //[Effects.LUT1DEffect]: { - // isActive: false, - // blendFunction: BlendFunction.SET, - // lut: null - //}, + [Effects.LUT1DEffect]: { + isActive: false, + blendFunction: BlendFunction.SET, + lut: null + }, [Effects.LUT3DEffect]: { isActive: false, blendFunction: BlendFunction.SET, @@ -733,7 +733,7 @@ export const effectInOrder = [ Effects.BrightnessContrastEffect, Effects.HueSaturationEffect, Effects.ColorDepthEffect, - //Effects.LUT1DEffect, + Effects.LUT1DEffect, Effects.LUT3DEffect, /** 5. final fix, aliasing and noise passes */ diff --git a/packages/spatial/src/renderer/functions/configureEffectComposer.ts b/packages/spatial/src/renderer/functions/configureEffectComposer.ts index 05b523c8f60..d19a1e65426 100644 --- a/packages/spatial/src/renderer/functions/configureEffectComposer.ts +++ b/packages/spatial/src/renderer/functions/configureEffectComposer.ts @@ -218,14 +218,26 @@ export const configureEffectComposer = (entity: Entity): void => { // const eff = new EffectClass(camera, lightsource, effectOptions) // composer[key] = eff // effects.push(eff) - //} else if (key == Effects.LUT1DEffect) { - // let lut = effectOptions.lut - // if (lut == undefined) { - // lut = null - // } - // const eff = new EffectClass(lut, effectOptions) - // composer[key] = eff - // effects.push(eff) + } else if (key == Effects.LUT1DEffect) { + let lutPath = effectOptions.lut + if (lutPath == undefined) { + lutPath = null + } + let lut: Texture | null = null + if (lutPath != null) { + let textLoad = new TextureLoader() + //have to wait for the texture's image to load and then add the pass to the composer + lut = textLoad.load(lutPath, (texture) => { + const eff = new EffectClass(texture, effectOptions) + composer[key] = eff + effects.push(eff) + AddPass() + }) + } else { + const eff = new EffectClass(lut, effectOptions) + composer[key] = eff + effects.push(eff) + } } else if (key == Effects.LUT3DEffect) { let lutPath = effectOptions.lut if (lutPath == undefined) { From c74906425bfd87b83c4ddb1ab3c1234da47c180d Mon Sep 17 00:00:00 2001 From: Michael Floyd Date: Mon, 29 Apr 2024 09:40:12 -0700 Subject: [PATCH 13/34] added NoiseEffect to post processing --- .../properties/PostProcessingSettingsEditor.tsx | 4 ++++ .../spatial/src/renderer/effects/PostProcessing.ts | 13 +++++++++---- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx b/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx index a21541ac86c..8954ec2d8c4 100755 --- a/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx +++ b/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx @@ -294,6 +294,10 @@ const EffectsOptions: EffectOptionsType = { resolutionScale: { propertyType: PropertyTypes.Number, name: 'Resolution Scale', min: 0, max: 10, step: 0.1 } //resolutionX: Resolution.AUTO_SIZE, //resolutionY: Resolution.AUTO_SIZE + }, + NoiseEffect: { + blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' }, + premultiply: { propertyType: PropertyTypes.Boolean, name: 'Premultiply' } } } diff --git a/packages/spatial/src/renderer/effects/PostProcessing.ts b/packages/spatial/src/renderer/effects/PostProcessing.ts index 1076b95a83c..1229ae96ba9 100644 --- a/packages/spatial/src/renderer/effects/PostProcessing.ts +++ b/packages/spatial/src/renderer/effects/PostProcessing.ts @@ -41,6 +41,7 @@ import { KernelSize, LUT1DEffect, LUT3DEffect, + NoiseEffect, OutlineEffect, PredicationMode, Resolution, @@ -82,7 +83,7 @@ export const Effects = { GridEffect: 'GridEffect' as const, LUT1DEffect: 'LUT1DEffect' as const, LUT3DEffect: 'LUT3DEffect' as const, - // NoiseEffect: 'NoiseEffect' as const, + NoiseEffect: 'NoiseEffect' as const, // PixelationEffect: 'PixelationEffect' as const, // ScanlineEffect: 'ScanlineEffect' as const, // ShockWaveEffect: 'ShockWaveEffect' as const, @@ -116,7 +117,7 @@ export const EffectMap = { [Effects.GridEffect]: GridEffect, [Effects.LUT1DEffect]: LUT1DEffect, [Effects.LUT3DEffect]: LUT3DEffect, - // [Effects.NoiseEffect]: NoiseEffect, + [Effects.NoiseEffect]: NoiseEffect, // [Effects.PixelationEffect]: PixelationEffect, //cant be used with convolution effects(blur) // [Effects.ScanlineEffect]: ScanlineEffect, // [Effects.ShockWaveEffect]: ShockWaveEffect, @@ -423,7 +424,7 @@ export type EffectPropsSchema = { [Effects.GridEffect]: GridEffectProps [Effects.LUT1DEffect]: LUT1DEffectProps [Effects.LUT3DEffect]: LUT3DEffectProps - // [Effects.NoiseEffect]: NoiseEffectProps + [Effects.NoiseEffect]: NoiseEffectProps // [Effects.PixelationEffect]: PixelationEffectProps // [Effects.ScanlineEffect]: ScanlineEffectProps // [Effects.ShockWaveEffect]: ShockWaveEffectProps @@ -665,7 +666,11 @@ export const defaultPostProcessingSchema: EffectPropsSchema = { inputColorSpace: SRGBColorSpace, lut: null }, - // [Effects.NoiseEffect]: { isActive: false, blendFunction: BlendFunction.SCREEN, premultiply: false }, + [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]: { From 65c60c8516be849dfa6e86ecde5f0086c1d88a9a Mon Sep 17 00:00:00 2001 From: Michael Floyd Date: Mon, 29 Apr 2024 09:50:50 -0700 Subject: [PATCH 14/34] added the PixelationEffect to post processing --- .../properties/PostProcessingSettingsEditor.tsx | 3 +++ .../spatial/src/renderer/effects/PostProcessing.ts | 12 ++++++++---- .../renderer/functions/configureEffectComposer.ts | 4 ++++ 3 files changed, 15 insertions(+), 4 deletions(-) diff --git a/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx b/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx index 8954ec2d8c4..05f65d975b3 100755 --- a/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx +++ b/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx @@ -298,6 +298,9 @@ const EffectsOptions: EffectOptionsType = { NoiseEffect: { blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' }, premultiply: { propertyType: PropertyTypes.Boolean, name: 'Premultiply' } + }, + PixelationEffect: { + granularity: { propertyType: PropertyTypes.Number, name: 'granularity', min: 0, max: 1000, step: 1 } } } diff --git a/packages/spatial/src/renderer/effects/PostProcessing.ts b/packages/spatial/src/renderer/effects/PostProcessing.ts index 1229ae96ba9..a2cec16c351 100644 --- a/packages/spatial/src/renderer/effects/PostProcessing.ts +++ b/packages/spatial/src/renderer/effects/PostProcessing.ts @@ -43,6 +43,7 @@ import { LUT3DEffect, NoiseEffect, OutlineEffect, + PixelationEffect, PredicationMode, Resolution, SMAAEffect, @@ -84,7 +85,7 @@ export const Effects = { LUT1DEffect: 'LUT1DEffect' as const, LUT3DEffect: 'LUT3DEffect' as const, NoiseEffect: 'NoiseEffect' as const, - // PixelationEffect: 'PixelationEffect' as const, + PixelationEffect: 'PixelationEffect' as const, // ScanlineEffect: 'ScanlineEffect' as const, // ShockWaveEffect: 'ShockWaveEffect' as const, // FXAAEffect: 'FXAAEffect' as const, @@ -118,7 +119,7 @@ export const EffectMap = { [Effects.LUT1DEffect]: LUT1DEffect, [Effects.LUT3DEffect]: LUT3DEffect, [Effects.NoiseEffect]: NoiseEffect, - // [Effects.PixelationEffect]: PixelationEffect, //cant be used with convolution effects(blur) + [Effects.PixelationEffect]: PixelationEffect, //cant be used with convolution effects(blur) // [Effects.ScanlineEffect]: ScanlineEffect, // [Effects.ShockWaveEffect]: ShockWaveEffect, // [Effects.FXAAEffect]: FXAAEffect, @@ -425,7 +426,7 @@ export type EffectPropsSchema = { [Effects.LUT1DEffect]: LUT1DEffectProps [Effects.LUT3DEffect]: LUT3DEffectProps [Effects.NoiseEffect]: NoiseEffectProps - // [Effects.PixelationEffect]: PixelationEffectProps + [Effects.PixelationEffect]: PixelationEffectProps // [Effects.ScanlineEffect]: ScanlineEffectProps // [Effects.ShockWaveEffect]: ShockWaveEffectProps // [Effects.FXAAEffect]: FXAAEffectProps @@ -671,7 +672,10 @@ export const defaultPostProcessingSchema: EffectPropsSchema = { blendFunction: BlendFunction.SCREEN, premultiply: false }, - // [Effects.PixelationEffect]: { isActive: false, granularity: 30 }, + [Effects.PixelationEffect]: { + isActive: false, + granularity: 30 + }, // [Effects.ScanlineEffect]: { isActive: false, blendFunction: BlendFunction.OVERLAY, density: 1.25}, // [Effects.ShockWaveEffect]: { // isActive: false, diff --git a/packages/spatial/src/renderer/functions/configureEffectComposer.ts b/packages/spatial/src/renderer/functions/configureEffectComposer.ts index d19a1e65426..84cb27b1616 100644 --- a/packages/spatial/src/renderer/functions/configureEffectComposer.ts +++ b/packages/spatial/src/renderer/functions/configureEffectComposer.ts @@ -258,6 +258,10 @@ export const configureEffectComposer = (entity: Entity): void => { composer[key] = eff effects.push(eff) } + } else if (key == Effects.PixelationEffect) { + const eff = new EffectClass(effectOptions.granularity) + composer[key] = eff + effects.push(eff) } else { const eff = new EffectClass(effectOptions) composer[key] = eff From 655336b4a05eb343e093c35d5ce0c5b292a2dc60 Mon Sep 17 00:00:00 2001 From: Michael Floyd Date: Mon, 29 Apr 2024 09:55:16 -0700 Subject: [PATCH 15/34] added ScanlineEffect to post processing effects --- .../properties/PostProcessingSettingsEditor.tsx | 6 +++++- .../spatial/src/renderer/effects/PostProcessing.ts | 13 +++++++++---- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx b/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx index 05f65d975b3..dd22eab4401 100755 --- a/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx +++ b/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx @@ -300,7 +300,11 @@ const EffectsOptions: EffectOptionsType = { premultiply: { propertyType: PropertyTypes.Boolean, name: 'Premultiply' } }, PixelationEffect: { - granularity: { propertyType: PropertyTypes.Number, name: 'granularity', min: 0, max: 1000, step: 1 } + 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 } } } diff --git a/packages/spatial/src/renderer/effects/PostProcessing.ts b/packages/spatial/src/renderer/effects/PostProcessing.ts index a2cec16c351..f15f87b7b37 100644 --- a/packages/spatial/src/renderer/effects/PostProcessing.ts +++ b/packages/spatial/src/renderer/effects/PostProcessing.ts @@ -46,6 +46,7 @@ import { PixelationEffect, PredicationMode, Resolution, + ScanlineEffect, SMAAEffect, SMAAPreset, SSAOEffect, @@ -86,7 +87,7 @@ export const Effects = { LUT3DEffect: 'LUT3DEffect' as const, NoiseEffect: 'NoiseEffect' as const, PixelationEffect: 'PixelationEffect' as const, - // ScanlineEffect: 'ScanlineEffect' as const, + ScanlineEffect: 'ScanlineEffect' as const, // ShockWaveEffect: 'ShockWaveEffect' as const, // FXAAEffect: 'FXAAEffect' as const, // TextureEffect: 'TextureEffect' as const, @@ -120,7 +121,7 @@ export const EffectMap = { [Effects.LUT3DEffect]: LUT3DEffect, [Effects.NoiseEffect]: NoiseEffect, [Effects.PixelationEffect]: PixelationEffect, //cant be used with convolution effects(blur) - // [Effects.ScanlineEffect]: ScanlineEffect, + [Effects.ScanlineEffect]: ScanlineEffect, // [Effects.ShockWaveEffect]: ShockWaveEffect, // [Effects.FXAAEffect]: FXAAEffect, // [Effects.TextureEffect]: TextureEffect, @@ -427,7 +428,7 @@ export type EffectPropsSchema = { [Effects.LUT3DEffect]: LUT3DEffectProps [Effects.NoiseEffect]: NoiseEffectProps [Effects.PixelationEffect]: PixelationEffectProps - // [Effects.ScanlineEffect]: ScanlineEffectProps + [Effects.ScanlineEffect]: ScanlineEffectProps // [Effects.ShockWaveEffect]: ShockWaveEffectProps // [Effects.FXAAEffect]: FXAAEffectProps // [Effects.TextureEffect]: TextureEffectProps @@ -676,7 +677,11 @@ export const defaultPostProcessingSchema: EffectPropsSchema = { isActive: false, granularity: 30 }, - // [Effects.ScanlineEffect]: { isActive: false, blendFunction: BlendFunction.OVERLAY, density: 1.25}, + [Effects.ScanlineEffect]: { + isActive: false, + blendFunction: BlendFunction.OVERLAY, + density: 1.25 + }, // [Effects.ShockWaveEffect]: { // isActive: false, // speed: 2.0, From daceee69e44ae1b6a25ad70d1282701e0d322714 Mon Sep 17 00:00:00 2001 From: Michael Floyd Date: Mon, 29 Apr 2024 10:10:47 -0700 Subject: [PATCH 16/34] added FXAAEffect and ShockWaveEffect to post processing --- .../PostProcessingSettingsEditor.tsx | 21 ++++++++++ .../src/renderer/effects/PostProcessing.ts | 41 +++++++++++-------- .../functions/configureEffectComposer.ts | 4 ++ 3 files changed, 49 insertions(+), 17 deletions(-) diff --git a/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx b/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx index dd22eab4401..111e5f69df3 100755 --- a/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx +++ b/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx @@ -45,6 +45,7 @@ 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' @@ -61,6 +62,7 @@ enum PropertyTypes { PredicationMode, Texture, Vector2, + Vector3, VignetteTechnique } @@ -305,6 +307,16 @@ const EffectsOptions: EffectOptionsType = { ScanlineEffect: { blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' }, density: { propertyType: PropertyTypes.Number, name: 'Density', 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 } + }, + FXAAEffect: { + blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' } } } @@ -427,6 +439,15 @@ export const PostProcessingSettingsEditor: EditorComponentType = (props) => { ) break + case PropertyTypes.Vector3: + renderVal = ( + + ) + break + case PropertyTypes.Texture: renderVal = ( { const eff = new EffectClass(effectOptions.granularity) composer[key] = eff effects.push(eff) + } else if (key == Effects.ShockWaveEffect) { + const eff = new EffectClass(camera, effectOptions.position, effectOptions) + composer[key] = eff + effects.push(eff) } else { const eff = new EffectClass(effectOptions) composer[key] = eff From 956d0a6429221ef91db095639bf9bfb40004e2e4 Mon Sep 17 00:00:00 2001 From: Michael Floyd Date: Mon, 29 Apr 2024 10:21:52 -0700 Subject: [PATCH 17/34] added TextureEffect to post processing effects --- .../PostProcessingSettingsEditor.tsx | 5 +++++ .../src/renderer/effects/PostProcessing.ts | 19 ++++++++-------- .../functions/configureEffectComposer.ts | 22 +++++++++++++++++++ 3 files changed, 37 insertions(+), 9 deletions(-) diff --git a/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx b/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx index 111e5f69df3..34f83b865f0 100755 --- a/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx +++ b/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx @@ -317,6 +317,11 @@ const EffectsOptions: EffectOptionsType = { }, FXAAEffect: { blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' } + }, + TextureEffect: { + blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' }, + texturePath: { propertyType: PropertyTypes.Texture, name: 'Texture' }, + aspectCorrection: { propertyType: PropertyTypes.Boolean, name: 'Aspect Correction' } } } diff --git a/packages/spatial/src/renderer/effects/PostProcessing.ts b/packages/spatial/src/renderer/effects/PostProcessing.ts index f2de9e9ecf1..b00b55ea55e 100644 --- a/packages/spatial/src/renderer/effects/PostProcessing.ts +++ b/packages/spatial/src/renderer/effects/PostProcessing.ts @@ -52,6 +52,7 @@ import { SMAAEffect, SMAAPreset, SSAOEffect, + TextureEffect, TiltShiftEffect, ToneMappingEffect, ToneMappingMode, @@ -92,7 +93,7 @@ export const Effects = { ScanlineEffect: 'ScanlineEffect' as const, ShockWaveEffect: 'ShockWaveEffect' as const, FXAAEffect: 'FXAAEffect' as const, - // TextureEffect: 'TextureEffect' as const, + TextureEffect: 'TextureEffect' as const, VignetteEffect: 'VignetteEffect' as const // LensDistortionEffect: 'LensDistortionEffect' as const } @@ -126,7 +127,7 @@ export const EffectMap = { [Effects.ScanlineEffect]: ScanlineEffect, [Effects.ShockWaveEffect]: ShockWaveEffect, [Effects.FXAAEffect]: FXAAEffect, - // [Effects.TextureEffect]: TextureEffect, + [Effects.TextureEffect]: TextureEffect, [Effects.VignetteEffect]: VignetteEffect // [Effects.LensDistortionEffect]: LensDistortionEffect } @@ -434,7 +435,7 @@ export type EffectPropsSchema = { [Effects.ScanlineEffect]: ScanlineEffectProps [Effects.ShockWaveEffect]: ShockWaveEffectProps [Effects.FXAAEffect]: FXAAEffectProps - // [Effects.TextureEffect]: TextureEffectProps + [Effects.TextureEffect]: TextureEffectProps [Effects.VignetteEffect]: VignetteEffectProps // [Effects.LensDistortionEffect]: LensDistortionEffectProps } @@ -697,12 +698,12 @@ export const defaultPostProcessingSchema: EffectPropsSchema = { isActive: false, blendFunction: BlendFunction.SRC }, - // [Effects.TextureEffect]: { - // isActive: false, - // blendFunction: BlendFunction.NORMAL, - // texture: undefined, - // aspectCorrection: false - // }, + [Effects.TextureEffect]: { + isActive: false, + blendFunction: BlendFunction.NORMAL, + texture: undefined, + aspectCorrection: false + }, [Effects.VignetteEffect]: { isActive: false, blendFunction: BlendFunction.NORMAL, diff --git a/packages/spatial/src/renderer/functions/configureEffectComposer.ts b/packages/spatial/src/renderer/functions/configureEffectComposer.ts index faeed5b0370..0806d6599ac 100644 --- a/packages/spatial/src/renderer/functions/configureEffectComposer.ts +++ b/packages/spatial/src/renderer/functions/configureEffectComposer.ts @@ -266,6 +266,28 @@ export const configureEffectComposer = (entity: Entity): void => { const eff = new EffectClass(camera, effectOptions.position, effectOptions) composer[key] = eff effects.push(eff) + } else if (key == Effects.TextureEffect) { + let texturePath = effectOptions.texturePath + if (texturePath == undefined) { + texturePath = null + } + let texture: Texture | null = null + if (texturePath != null) { + let textLoad = new TextureLoader() + //have to wait for the texture's image to load and then add the pass to the composer + texture = textLoad.load(texturePath, (textureLoaded) => { + effectOptions.texture = textureLoaded + const eff = new EffectClass(effectOptions) + composer[key] = eff + effects.push(eff) + AddPass() + }) + } else { + effectOptions.texture = texture + const eff = new EffectClass(effectOptions) + composer[key] = eff + effects.push(eff) + } } else { const eff = new EffectClass(effectOptions) composer[key] = eff From 51be5c4b849329d11e79f8cee588a142dc830a7d Mon Sep 17 00:00:00 2001 From: Michael Floyd Date: Mon, 29 Apr 2024 10:29:16 -0700 Subject: [PATCH 18/34] added LensDistortionEffect to post processing --- .../PostProcessingSettingsEditor.tsx | 6 ++++ .../src/renderer/effects/PostProcessing.ts | 29 ++++++++++--------- 2 files changed, 22 insertions(+), 13 deletions(-) diff --git a/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx b/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx index 34f83b865f0..f067d27a95c 100755 --- a/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx +++ b/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx @@ -322,6 +322,12 @@ const EffectsOptions: EffectOptionsType = { blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' }, texturePath: { propertyType: PropertyTypes.Texture, name: 'Texture' }, aspectCorrection: { propertyType: PropertyTypes.Boolean, name: 'Aspect Correction' } + }, + 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 } } } diff --git a/packages/spatial/src/renderer/effects/PostProcessing.ts b/packages/spatial/src/renderer/effects/PostProcessing.ts index b00b55ea55e..e09d82ddec1 100644 --- a/packages/spatial/src/renderer/effects/PostProcessing.ts +++ b/packages/spatial/src/renderer/effects/PostProcessing.ts @@ -40,6 +40,7 @@ import { GridEffect, HueSaturationEffect, KernelSize, + LensDistortionEffect, LUT1DEffect, LUT3DEffect, NoiseEffect, @@ -94,8 +95,8 @@ export const Effects = { ShockWaveEffect: 'ShockWaveEffect' as const, FXAAEffect: 'FXAAEffect' as const, TextureEffect: 'TextureEffect' as const, - VignetteEffect: 'VignetteEffect' as const - // LensDistortionEffect: 'LensDistortionEffect' as const + VignetteEffect: 'VignetteEffect' as const, + LensDistortionEffect: 'LensDistortionEffect' as const } export const EffectMap = { @@ -128,8 +129,8 @@ export const EffectMap = { [Effects.ShockWaveEffect]: ShockWaveEffect, [Effects.FXAAEffect]: FXAAEffect, [Effects.TextureEffect]: TextureEffect, - [Effects.VignetteEffect]: VignetteEffect - // [Effects.LensDistortionEffect]: LensDistortionEffect + [Effects.VignetteEffect]: VignetteEffect, + [Effects.LensDistortionEffect]: LensDistortionEffect } export type EffectMapType = (typeof EffectMap)[keyof typeof EffectMap] @@ -389,6 +390,7 @@ export type ShockWaveEffectProps = EffectProps & { export type FXAAEffectProps = EffectProps & { blendFunction?: BlendFunction } export type TextureEffectProps = EffectProps & { blendFunction?: BlendFunction + texturePath?: string texture?: Texture aspectCorrection?: boolean } @@ -437,7 +439,7 @@ export type EffectPropsSchema = { [Effects.FXAAEffect]: FXAAEffectProps [Effects.TextureEffect]: TextureEffectProps [Effects.VignetteEffect]: VignetteEffectProps - // [Effects.LensDistortionEffect]: LensDistortionEffectProps + [Effects.LensDistortionEffect]: LensDistortionEffectProps } export type EffectPropsSchemaType = (typeof defaultPostProcessingSchema)[keyof typeof defaultPostProcessingSchema] @@ -701,6 +703,7 @@ export const defaultPostProcessingSchema: EffectPropsSchema = { [Effects.TextureEffect]: { isActive: false, blendFunction: BlendFunction.NORMAL, + texturePath: undefined, texture: undefined, aspectCorrection: false }, @@ -711,14 +714,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(0, 0), + skew: 0 } - // [Effects.LensDistortionEffect]: { - // isActive: false, - // distortion: new Vector2(0,0), - // principalPoint: new Vector2(0,0), - // focalLength: new Vector2(0,0), - // skew: 0 - // } } /** @@ -742,7 +745,7 @@ export const effectInOrder = [ //Effects.GodRaysEffect, /** 3. camera effects */ - // Effects.LensDistortionEffect, + Effects.LensDistortionEffect, //Effects.LensFlareEffect, Effects.ChromaticAberrationEffect, Effects.MotionBlurEffect, From 41cb567218eeb3740b5445feb33150429e04728a Mon Sep 17 00:00:00 2001 From: Michael Floyd Date: Wed, 1 May 2024 08:44:24 -0700 Subject: [PATCH 19/34] corrected error with duplicate case option --- .../properties/PostProcessingSettingsEditor.tsx | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx b/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx index 194700ee311..35e408b90f1 100755 --- a/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx +++ b/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx @@ -501,16 +501,6 @@ export const PostProcessingSettingsEditor: EditorComponentType = (props) => { ) break - case PropertyTypes.SMAAPreset: - renderVal = ( - - ) - break - case PropertyTypes.EdgeDetectionMode: renderVal = ( Date: Thu, 2 May 2024 14:26:53 -0700 Subject: [PATCH 20/34] moved the effects composer code into the post processing component so we can use texture loading hooks --- .../components/PostProcessingComponent.tsx | 246 ++++++++++++++++- .../functions/configureEffectComposer.ts | 256 ------------------ 2 files changed, 238 insertions(+), 264 deletions(-) delete mode 100644 packages/spatial/src/renderer/functions/configureEffectComposer.ts diff --git a/packages/spatial/src/renderer/components/PostProcessingComponent.tsx b/packages/spatial/src/renderer/components/PostProcessingComponent.tsx index e10ea97e47d..85a4b22f05e 100755 --- a/packages/spatial/src/renderer/components/PostProcessingComponent.tsx +++ b/packages/spatial/src/renderer/components/PostProcessingComponent.tsx @@ -23,11 +23,31 @@ 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 { defineComponent, getComponent, useComponent, useEntityContext } from '@etherealengine/ecs' +import { NO_PROXY_STEALTH, getState } from '@etherealengine/hyperflux' +import { + BlendFunction, + DepthDownsamplingPass, + EdgeDetectionMode, + EffectComposer, + EffectPass, + OutlineEffect, + RenderPass, + SMAAEffect, + TextureEffect +} from 'postprocessing' import { useEffect } from 'react' -import { defaultPostProcessingSchema } from '../effects/PostProcessing' -import { configureEffectComposer } from '../functions/configureEffectComposer' +import { VelocityDepthNormalPass } from 'realism-effects' +import { Scene, Texture, TextureLoader } from 'three' +import { EngineState } from '../../EngineState' +import { CameraComponent } from '../../camera/components/CameraComponent' +import { HighlightState } from '../HighlightState' +import { RendererState } from '../RendererState' +import { RenderSettingsState, RendererComponent } from '../WebGLRendererSystem' +import { ObjectLayers } from '../constants/ObjectLayers' +import { EffectMap, Effects, defaultPostProcessingSchema } from '../effects/PostProcessing' +import { changeRenderMode } from '../functions/changeRenderMode' +import { CustomNormalPass } from '../passes/CustomNormalPass' import { useScene } from './SceneComponents' export const PostProcessingComponent = defineComponent({ @@ -63,10 +83,220 @@ export const PostProcessingComponent = defineComponent({ useEffect(() => { if (!rendererEntity) return - configureEffectComposer( - rendererEntity, - postprocessingComponent.enabled.value ? postprocessingComponent.effects.get(NO_PROXY_STEALTH) : undefined - ) + //configureEffectComposer( + // rendererEntity, + // postprocessingComponent.enabled.value ? postprocessingComponent.effects.get(NO_PROXY_STEALTH) : undefined + //) + //export const configureEffectComposer = (entity: Entity, schema?: typeof defaultPostProcessingSchema): void => { + + let schema = postprocessingComponent.enabled.value + ? postprocessingComponent.effects.get(NO_PROXY_STEALTH) + : undefined + + const renderer = getComponent(rendererEntity, RendererComponent) + const camera = getComponent(rendererEntity, 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 AddPass = () => { + 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) + } + } + + 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 if (key === Effects.ColorAverageEffect) { + const eff = new EffectClass(effectOptions.blendFunction) + composer[key] = eff + effects.push(eff) + } else if (key === Effects.OutlineEffect) { + const eff = new EffectClass(scene, camera, effectOptions) + composer[key] = eff + effects.push(eff) + //} else if (key == Effects.GodRaysEffect) { + // const lightsource = null //tbd + // const eff = new EffectClass(camera, lightsource, effectOptions) + // composer[key] = eff + // effects.push(eff) + } else if (key == Effects.LUT1DEffect) { + let lutPath = effectOptions.lut + if (lutPath == undefined) { + lutPath = null + } + let lut: Texture | null = null + if (lutPath != null) { + let textLoad = new TextureLoader() + //have to wait for the texture's image to load and then add the pass to the composer + lut = textLoad.load(lutPath, (texture) => { + const eff = new EffectClass(texture, effectOptions) + composer[key] = eff + effects.push(eff) + AddPass() + }) + } else { + const eff = new EffectClass(lut, effectOptions) + composer[key] = eff + effects.push(eff) + } + } else if (key == Effects.LUT3DEffect) { + let lutPath = effectOptions.lut + if (lutPath == undefined) { + lutPath = null + } + let lut: Texture | null = null + if (lutPath != null) { + let textLoad = new TextureLoader() + //have to wait for the texture's image to load and then add the pass to the composer + lut = textLoad.load(lutPath, (texture) => { + const eff = new EffectClass(texture, effectOptions) + composer[key] = eff + effects.push(eff) + AddPass() + }) + } else { + const eff = new EffectClass(lut, effectOptions) + composer[key] = eff + effects.push(eff) + } + } else if (key == Effects.PixelationEffect) { + const eff = new EffectClass(effectOptions.granularity) + composer[key] = eff + effects.push(eff) + } else if (key == Effects.ShockWaveEffect) { + const eff = new EffectClass(camera, effectOptions.position, effectOptions) + composer[key] = eff + effects.push(eff) + } else if (key == Effects.TextureEffect) { + let texturePath = effectOptions.texturePath + if (texturePath == undefined) { + texturePath = null + } + let texture: Texture | null = null + if (texturePath != null) { + let textLoad = new TextureLoader() + //have to wait for the texture's image to load and then add the pass to the composer + texture = textLoad.load(texturePath, (textureLoaded) => { + effectOptions.texture = textureLoaded + const eff = new EffectClass(effectOptions) + composer[key] = eff + effects.push(eff) + AddPass() + }) + } else { + effectOptions.texture = texture + const eff = new EffectClass(effectOptions) + composer[key] = eff + effects.push(eff) + } + } else { + const eff = new EffectClass(effectOptions) + composer[key] = eff + effects.push(eff) + } + } + AddPass() + + if (getState(EngineState).isEditor) changeRenderMode() }, [rendererEntity, postprocessingComponent.enabled, postprocessingComponent.effects]) return null diff --git a/packages/spatial/src/renderer/functions/configureEffectComposer.ts b/packages/spatial/src/renderer/functions/configureEffectComposer.ts deleted file mode 100644 index 9f87fa72de8..00000000000 --- a/packages/spatial/src/renderer/functions/configureEffectComposer.ts +++ /dev/null @@ -1,256 +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, Texture, TextureLoader } 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 AddPass = () => { - 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) - } - } - - 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 if (key === Effects.ColorAverageEffect) { - const eff = new EffectClass(effectOptions.blendFunction) - composer[key] = eff - effects.push(eff) - } else if (key === Effects.OutlineEffect) { - const eff = new EffectClass(scene, camera, effectOptions) - composer[key] = eff - effects.push(eff) - //} else if (key == Effects.GodRaysEffect) { - // const lightsource = null //tbd - // const eff = new EffectClass(camera, lightsource, effectOptions) - // composer[key] = eff - // effects.push(eff) - } else if (key == Effects.LUT1DEffect) { - let lutPath = effectOptions.lut - if (lutPath == undefined) { - lutPath = null - } - let lut: Texture | null = null - if (lutPath != null) { - let textLoad = new TextureLoader() - //have to wait for the texture's image to load and then add the pass to the composer - lut = textLoad.load(lutPath, (texture) => { - const eff = new EffectClass(texture, effectOptions) - composer[key] = eff - effects.push(eff) - AddPass() - }) - } else { - const eff = new EffectClass(lut, effectOptions) - composer[key] = eff - effects.push(eff) - } - } else if (key == Effects.LUT3DEffect) { - let lutPath = effectOptions.lut - if (lutPath == undefined) { - lutPath = null - } - let lut: Texture | null = null - if (lutPath != null) { - let textLoad = new TextureLoader() - //have to wait for the texture's image to load and then add the pass to the composer - lut = textLoad.load(lutPath, (texture) => { - const eff = new EffectClass(texture, effectOptions) - composer[key] = eff - effects.push(eff) - AddPass() - }) - } else { - const eff = new EffectClass(lut, effectOptions) - composer[key] = eff - effects.push(eff) - } - } else if (key == Effects.PixelationEffect) { - const eff = new EffectClass(effectOptions.granularity) - composer[key] = eff - effects.push(eff) - } else if (key == Effects.ShockWaveEffect) { - const eff = new EffectClass(camera, effectOptions.position, effectOptions) - composer[key] = eff - effects.push(eff) - } else if (key == Effects.TextureEffect) { - let texturePath = effectOptions.texturePath - if (texturePath == undefined) { - texturePath = null - } - let texture: Texture | null = null - if (texturePath != null) { - let textLoad = new TextureLoader() - //have to wait for the texture's image to load and then add the pass to the composer - texture = textLoad.load(texturePath, (textureLoaded) => { - effectOptions.texture = textureLoaded - const eff = new EffectClass(effectOptions) - composer[key] = eff - effects.push(eff) - AddPass() - }) - } else { - effectOptions.texture = texture - const eff = new EffectClass(effectOptions) - composer[key] = eff - effects.push(eff) - } - } else { - const eff = new EffectClass(effectOptions) - composer[key] = eff - effects.push(eff) - } - } - AddPass() - - if (getState(EngineState).isEditor) changeRenderMode() -} From f1f6d01ba35c0087fb0311560a91627a473cf316 Mon Sep 17 00:00:00 2001 From: Michael Floyd Date: Fri, 3 May 2024 15:36:49 -0700 Subject: [PATCH 21/34] committing latest progress for the post processing effects --- .../components/PostProcessingComponent.tsx | 138 ++++++++---------- .../src/renderer/effects/PostProcessing.ts | 12 +- 2 files changed, 70 insertions(+), 80 deletions(-) diff --git a/packages/spatial/src/renderer/components/PostProcessingComponent.tsx b/packages/spatial/src/renderer/components/PostProcessingComponent.tsx index 85a4b22f05e..9676e517927 100755 --- a/packages/spatial/src/renderer/components/PostProcessingComponent.tsx +++ b/packages/spatial/src/renderer/components/PostProcessingComponent.tsx @@ -24,6 +24,7 @@ Ethereal Engine. All Rights Reserved. */ import { defineComponent, getComponent, useComponent, useEntityContext } from '@etherealengine/ecs' +import { useTexture } from '@etherealengine/engine/src/assets/functions/resourceHooks' import { NO_PROXY_STEALTH, getState } from '@etherealengine/hyperflux' import { BlendFunction, @@ -38,7 +39,7 @@ import { } from 'postprocessing' import { useEffect } from 'react' import { VelocityDepthNormalPass } from 'realism-effects' -import { Scene, Texture, TextureLoader } from 'three' +import { Scene } from 'three' import { EngineState } from '../../EngineState' import { CameraComponent } from '../../camera/components/CameraComponent' import { HighlightState } from '../HighlightState' @@ -81,13 +82,34 @@ export const PostProcessingComponent = defineComponent({ const rendererEntity = useScene(entity) const postprocessingComponent = useComponent(entity, PostProcessingComponent) + 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) + useEffect(() => { if (!rendererEntity) return - //configureEffectComposer( - // rendererEntity, - // postprocessingComponent.enabled.value ? postprocessingComponent.effects.get(NO_PROXY_STEALTH) : undefined - //) - //export const configureEffectComposer = (entity: Entity, schema?: typeof defaultPostProcessingSchema): void => { let schema = postprocessingComponent.enabled.value ? postprocessingComponent.effects.get(NO_PROXY_STEALTH) @@ -144,25 +166,6 @@ export const PostProcessingComponent = defineComponent({ if (!schema) return - const AddPass = () => { - 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) - } - } - const velocityDepthNormalPass = new VelocityDepthNormalPass(scene, camera) let useVelocityDepthNormalPass = false let useDepthDownsamplingPass = false @@ -219,42 +222,14 @@ export const PostProcessingComponent = defineComponent({ // composer[key] = eff // effects.push(eff) } else if (key == Effects.LUT1DEffect) { - let lutPath = effectOptions.lut - if (lutPath == undefined) { - lutPath = null - } - let lut: Texture | null = null - if (lutPath != null) { - let textLoad = new TextureLoader() - //have to wait for the texture's image to load and then add the pass to the composer - lut = textLoad.load(lutPath, (texture) => { - const eff = new EffectClass(texture, effectOptions) - composer[key] = eff - effects.push(eff) - AddPass() - }) - } else { - const eff = new EffectClass(lut, effectOptions) + if (lut1DEffectTexture) { + const eff = new EffectClass(lut1DEffectTexture, effectOptions) composer[key] = eff effects.push(eff) } } else if (key == Effects.LUT3DEffect) { - let lutPath = effectOptions.lut - if (lutPath == undefined) { - lutPath = null - } - let lut: Texture | null = null - if (lutPath != null) { - let textLoad = new TextureLoader() - //have to wait for the texture's image to load and then add the pass to the composer - lut = textLoad.load(lutPath, (texture) => { - const eff = new EffectClass(texture, effectOptions) - composer[key] = eff - effects.push(eff) - AddPass() - }) - } else { - const eff = new EffectClass(lut, effectOptions) + if (lut3DEffectTexture) { + const eff = new EffectClass(lut3DEffectTexture, effectOptions) composer[key] = eff effects.push(eff) } @@ -267,23 +242,8 @@ export const PostProcessingComponent = defineComponent({ composer[key] = eff effects.push(eff) } else if (key == Effects.TextureEffect) { - let texturePath = effectOptions.texturePath - if (texturePath == undefined) { - texturePath = null - } - let texture: Texture | null = null - if (texturePath != null) { - let textLoad = new TextureLoader() - //have to wait for the texture's image to load and then add the pass to the composer - texture = textLoad.load(texturePath, (textureLoaded) => { - effectOptions.texture = textureLoaded - const eff = new EffectClass(effectOptions) - composer[key] = eff - effects.push(eff) - AddPass() - }) - } else { - effectOptions.texture = texture + if (textureEffectTexture) { + effectOptions.texture = textureEffectTexture const eff = new EffectClass(effectOptions) composer[key] = eff effects.push(eff) @@ -294,10 +254,36 @@ export const PostProcessingComponent = defineComponent({ effects.push(eff) } } - AddPass() + + 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() - }, [rendererEntity, postprocessingComponent.enabled, postprocessingComponent.effects]) + }, [ + rendererEntity, + postprocessingComponent.enabled, + postprocessingComponent.effects, + lut1DEffectTexture, + lut1DEffectTextureError, + lut3DEffectTexture, + lut3DEffectTextureError, + textureEffectTexture, + textureEffectTextureError + ]) return null } diff --git a/packages/spatial/src/renderer/effects/PostProcessing.ts b/packages/spatial/src/renderer/effects/PostProcessing.ts index 9c04cfb8faa..f827ed908dc 100644 --- a/packages/spatial/src/renderer/effects/PostProcessing.ts +++ b/packages/spatial/src/renderer/effects/PostProcessing.ts @@ -382,14 +382,16 @@ export type GridEffectProps = EffectProps & { } export type LUT1DEffectProps = EffectProps & { blendFunction?: BlendFunction - lut?: Texture | null + lutPath?: string + lut?: Texture } export type LUT3DEffectProps = EffectProps & { blendFunction?: BlendFunction tetrahedralInterpolation?: boolean inputEncoding?: TextureEncoding inputColorSpace?: ColorSpace - lut?: Texture | null + lutPath?: string + lut?: Texture } export type NoiseEffectProps = EffectProps & { blendFunction?: BlendFunction @@ -685,14 +687,16 @@ export const defaultPostProcessingSchema: EffectPropsSchema = { [Effects.LUT1DEffect]: { isActive: false, blendFunction: BlendFunction.SET, - lut: null + lutPath: undefined, + lut: undefined }, [Effects.LUT3DEffect]: { isActive: false, blendFunction: BlendFunction.SET, tetrahedralInterpolation: false, inputColorSpace: SRGBColorSpace, - lut: null + lutPath: undefined, + lut: undefined }, [Effects.NoiseEffect]: { isActive: false, From 71cac4022704185c8104b2a831f75b565e3a8298 Mon Sep 17 00:00:00 2001 From: Michael Floyd Date: Fri, 3 May 2024 15:56:38 -0700 Subject: [PATCH 22/34] updated the post processing editor to use the lut path --- .../components/properties/PostProcessingSettingsEditor.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx b/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx index 35e408b90f1..4b117e1d7b6 100755 --- a/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx +++ b/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx @@ -253,11 +253,11 @@ const EffectsOptions: Partial = { }, LUT1DEffect: { blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' }, - lut: { propertyType: PropertyTypes.Texture, name: 'LUT' } + lutPath: { propertyType: PropertyTypes.Texture, name: 'LUT' } }, LUT3DEffect: { blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' }, - lut: { propertyType: PropertyTypes.Texture, name: 'LUT' }, + lutPath: { propertyType: PropertyTypes.Texture, name: 'LUT' }, inputColorSpace: { propertyType: PropertyTypes.ColorSpace, name: 'Input Color Space' } }, MotionBlurEffect: { From 4e86b6643995386bfce204c699a01180891fcee9 Mon Sep 17 00:00:00 2001 From: Michael Estes Date: Mon, 6 May 2024 10:55:12 -0700 Subject: [PATCH 23/34] example --- .../components/PostProcessingComponent.tsx | 53 ++++++++++++++++++- 1 file changed, 52 insertions(+), 1 deletion(-) diff --git a/packages/spatial/src/renderer/components/PostProcessingComponent.tsx b/packages/spatial/src/renderer/components/PostProcessingComponent.tsx index 9676e517927..641688b117f 100755 --- a/packages/spatial/src/renderer/components/PostProcessingComponent.tsx +++ b/packages/spatial/src/renderer/components/PostProcessingComponent.tsx @@ -25,11 +25,12 @@ Ethereal Engine. All Rights Reserved. import { defineComponent, getComponent, useComponent, useEntityContext } from '@etherealengine/ecs' import { useTexture } from '@etherealengine/engine/src/assets/functions/resourceHooks' -import { NO_PROXY_STEALTH, getState } from '@etherealengine/hyperflux' +import { NO_PROXY_STEALTH, getState, none, useHookstate } from '@etherealengine/hyperflux' import { BlendFunction, DepthDownsamplingPass, EdgeDetectionMode, + Effect, EffectComposer, EffectPass, OutlineEffect, @@ -81,6 +82,8 @@ export const PostProcessingComponent = defineComponent({ const entity = useEntityContext() const rendererEntity = useScene(entity) const postprocessingComponent = useComponent(entity, PostProcessingComponent) + const camera = useComponent(rendererEntity, CameraComponent) + const renderer = useComponent(rendererEntity, RendererComponent) let lut1DEffectTexturePath: string | undefined if ( @@ -108,6 +111,54 @@ export const PostProcessingComponent = defineComponent({ 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 useVelocityDepthNormalPass = useHookstate(false) + const useDepthDownsamplingPass = useHookstate(false) + + const composer = useHookstate(() => new EffectComposer(renderer.value.renderer)) + const effects = useHookstate>({}) + + useEffect(() => { + const ssaoParams = postprocessingComponent.effects[Effects.SSAOEffect] as any + if (ssaoParams.isActive) { + const SSAO = EffectMap[Effects.SSAOEffect] + const eff = new SSAO(camera.value, normalPass.value.texture, { + ...ssaoParams, + normalDepthBuffer: depthDownsamplingPass.value.texture + }) + useDepthDownsamplingPass.set(true) + composer.merge({ + [Effects.SSAOEffect]: eff + }) + effects.merge({ + [Effects.SSAOEffect]: eff + }) + + return () => { + composer.merge({ + [Effects.SSAOEffect]: none + }) + effects.merge({ + [Effects.SSAOEffect]: none + }) + } + } + }, [postprocessingComponent.effects[Effects.SSAOEffect]]) + + useEffect(() => { + const effectArray = Object.values(effects.value) + composer.EffectPass.set(new EffectPass(camera.value, ...effectArray)) + composer.value.addPass(composer.value.EffectPass) + }, [effects]) + useEffect(() => { if (!rendererEntity) return From 214013ffb3256d7d05ce5c69a5116605b730592f Mon Sep 17 00:00:00 2001 From: Michael Floyd Date: Mon, 6 May 2024 15:11:38 -0700 Subject: [PATCH 24/34] moved the effect logic into individual use effects --- .../components/PostProcessingComponent.tsx | 561 ++++++++++++++++-- 1 file changed, 505 insertions(+), 56 deletions(-) diff --git a/packages/spatial/src/renderer/components/PostProcessingComponent.tsx b/packages/spatial/src/renderer/components/PostProcessingComponent.tsx index 641688b117f..88d70236693 100755 --- a/packages/spatial/src/renderer/components/PostProcessingComponent.tsx +++ b/packages/spatial/src/renderer/components/PostProcessingComponent.tsx @@ -23,11 +23,10 @@ All portions of the code written by the Ethereal Engine team are Copyright © 20 Ethereal Engine. All Rights Reserved. */ -import { defineComponent, getComponent, useComponent, useEntityContext } from '@etherealengine/ecs' +import { defineComponent, useComponent, useEntityContext } from '@etherealengine/ecs' import { useTexture } from '@etherealengine/engine/src/assets/functions/resourceHooks' import { NO_PROXY_STEALTH, getState, none, useHookstate } from '@etherealengine/hyperflux' import { - BlendFunction, DepthDownsamplingPass, EdgeDetectionMode, Effect, @@ -35,8 +34,7 @@ import { EffectPass, OutlineEffect, RenderPass, - SMAAEffect, - TextureEffect + SMAAEffect } from 'postprocessing' import { useEffect } from 'react' import { VelocityDepthNormalPass } from 'realism-effects' @@ -120,6 +118,7 @@ export const PostProcessingComponent = defineComponent({ resolutionScale: 0.5 }) ) + const velocityDepthNormalPass = useHookstate(new VelocityDepthNormalPass(scene, camera)) const useVelocityDepthNormalPass = useHookstate(false) const useDepthDownsamplingPass = useHookstate(false) @@ -127,32 +126,471 @@ export const PostProcessingComponent = defineComponent({ const effects = useHookstate>({}) useEffect(() => { - const ssaoParams = postprocessingComponent.effects[Effects.SSAOEffect] as any - if (ssaoParams.isActive) { - const SSAO = EffectMap[Effects.SSAOEffect] - const eff = new SSAO(camera.value, normalPass.value.texture, { - ...ssaoParams, + velocityDepthNormalPass.set(new VelocityDepthNormalPass(scene, camera)) + }, [scene]) + + useEffect(() => { + const effectOptions = postprocessingComponent.effects[Effects.BloomEffect] as any + if (effectOptions.isActive) { + const EffectClass = EffectMap[Effects.BloomEffect] + const eff = new EffectClass(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.effects[Effects.BrightnessContrastEffect] as any + if (effectOptions.isActive) { + const EffectClass = EffectMap[Effects.BrightnessContrastEffect] + const eff = new EffectClass(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.effects[Effects.ChromaticAberrationEffect] as any + if (effectOptions.isActive) { + const EffectClass = EffectMap[Effects.ChromaticAberrationEffect] + const eff = new EffectClass(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.effects[Effects.ColorAverageEffect] as any + if (effectOptions.isActive) { + const EffectClass = EffectMap[Effects.ColorAverageEffect] + const eff = new EffectClass(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.effects[Effects.ColorDepthEffect] as any + if (effectOptions.isActive) { + const EffectClass = EffectMap[Effects.ColorDepthEffect] + const eff = new EffectClass(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.effects[Effects.DepthOfFieldEffect] as any + if (effectOptions.isActive) { + const EffectClass = EffectMap[Effects.DepthOfFieldEffect] + const eff = new EffectClass(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.effects[Effects.DotScreenEffect] as any + if (effectOptions.isActive) { + const EffectClass = EffectMap[Effects.DotScreenEffect] + const eff = new EffectClass(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.effects[Effects.FXAAEffect] as any + if (effectOptions.isActive) { + const EffectClass = EffectMap[Effects.FXAAEffect] + const eff = new EffectClass(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.effects[Effects.GlitchEffect] as any + if (effectOptions.isActive) { + const EffectClass = EffectMap[Effects.GlitchEffect] + const eff = new EffectClass(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.effects[Effects.GridEffect] as any + if (effectOptions.isActive) { + const EffectClass = EffectMap[Effects.GridEffect] + const eff = new EffectClass(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.effects[Effects.HueSaturationEffect] as any + if (effectOptions.isActive) { + const EffectClass = EffectMap[Effects.HueSaturationEffect] + const eff = new EffectClass(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.effects[Effects.LUT1DEffect] as any + if (effectOptions.isActive && lut1DEffectTexture) { + const EffectClass = EffectMap[Effects.LUT1DEffect] + const eff = new EffectClass(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.effects[Effects.LUT3DEffect] as any + if (effectOptions.isActive && lut3DEffectTexture) { + const EffectClass = EffectMap[Effects.LUT3DEffect] + const eff = new EffectClass(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.effects[Effects.LensDistortionEffect] as any + if (effectOptions.isActive) { + const EffectClass = EffectMap[Effects.LensDistortionEffect] + const eff = new EffectClass(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.effects[Effects.LinearTosRGBEffect] as any + if (effectOptions.isActive) { + const EffectClass = EffectMap[Effects.LinearTosRGBEffect] + const eff = new EffectClass(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.effects[Effects.MotionBlurEffect] as any + if (effectOptions.isActive) { + const EffectClass = EffectMap[Effects.MotionBlurEffect] + const eff = new EffectClass(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.effects[Effects.NoiseEffect] as any + if (effectOptions.isActive) { + const EffectClass = EffectMap[Effects.NoiseEffect] + const eff = new EffectClass(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.effects[Effects.OutlineEffect] as any + if (effectOptions.isActive) { + const EffectClass = EffectMap[Effects.OutlineEffect] + const eff = new EffectClass(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.effects[Effects.PixelationEffect] as any + if (effectOptions.isActive) { + const EffectClass = EffectMap[Effects.PixelationEffect] + const eff = new EffectClass(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.effects[Effects.SMAAEffect] as any + if (effectOptions.isActive) { + const EffectClass = EffectMap[Effects.SMAAEffect] + const eff = new EffectClass(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.effects[Effects.SSAOEffect] as any + if (effectOptions.isActive) { + const EffectClass = EffectMap[Effects.SSAOEffect] + const eff = new EffectClass(camera.value, normalPass.value.texture, { + ...effectOptions, normalDepthBuffer: depthDownsamplingPass.value.texture }) useDepthDownsamplingPass.set(true) - composer.merge({ - [Effects.SSAOEffect]: eff - }) - effects.merge({ - [Effects.SSAOEffect]: eff - }) + composer[Effects.SSAOEffect].set(eff) + effects[Effects.SSAOEffect].set(eff) return () => { - composer.merge({ - [Effects.SSAOEffect]: none - }) - effects.merge({ - [Effects.SSAOEffect]: none - }) + composer[Effects.SSAOEffect].set(none) + effects[Effects.SSAOEffect].set(none) } } }, [postprocessingComponent.effects[Effects.SSAOEffect]]) + useEffect(() => { + const effectOptions = postprocessingComponent.effects[Effects.SSGIEffect] as any + if (effectOptions.isActive) { + const EffectClass = EffectMap[Effects.SSGIEffect] + const eff = new EffectClass(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(() => { + const ssgiEffectOptions = postprocessingComponent.effects[Effects.SSGIEffect] as any + const effectOptions = postprocessingComponent.effects[Effects.SSREffect] as any + if (effectOptions.isActive && !ssgiEffectOptions.isActive) { + const EffectClass = EffectMap[Effects.SSREffect] + const eff = new EffectClass(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.effects[Effects.ScanlineEffect] as any + if (effectOptions.isActive) { + const EffectClass = EffectMap[Effects.ScanlineEffect] + const eff = new EffectClass(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.effects[Effects.ShockWaveEffect] as any + if (effectOptions.isActive) { + const EffectClass = EffectMap[Effects.ShockWaveEffect] + const eff = new EffectClass(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.effects[Effects.TRAAEffect] as any + if (effectOptions.isActive) { + // todo support more than 1 texture + const textureCount = 1 + const EffectClass = EffectMap[Effects.TRAAEffect] + const eff = new EffectClass(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.effects[Effects.TextureEffect] as any + if (effectOptions.isActive && textureEffectTexture) { + effectOptions.texture = textureEffectTexture + const EffectClass = EffectMap[Effects.TextureEffect] + const eff = new EffectClass(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.effects[Effects.TiltShiftEffect] as any + if (effectOptions.isActive) { + const EffectClass = EffectMap[Effects.TiltShiftEffect] + const eff = new EffectClass(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.effects[Effects.ToneMappingEffect] as any + if (effectOptions.isActive) { + const EffectClass = EffectMap[Effects.ToneMappingEffect] + const eff = new EffectClass(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.effects[Effects.VignetteEffect] as any + if (effectOptions.isActive) { + const EffectClass = EffectMap[Effects.VignetteEffect] + const eff = new EffectClass(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 effectArray = Object.values(effects.value) composer.EffectPass.set(new EffectPass(camera.value, ...effectArray)) @@ -166,24 +604,22 @@ export const PostProcessingComponent = defineComponent({ ? postprocessingComponent.effects.get(NO_PROXY_STEALTH) : undefined - const renderer = getComponent(rendererEntity, RendererComponent) - const camera = getComponent(rendererEntity, CameraComponent) - if (!renderer || !camera) return + if (!renderer.value || !camera.value) return const scene = new Scene() - if (renderer.effectComposer) { - renderer.effectComposer.dispose() - renderer.renderPass = null! + if (renderer.value.effectComposer) { + renderer.value.effectComposer.dispose() + renderer.value.renderPass = null! } - const composer = new EffectComposer(renderer.renderer) - renderer.effectComposer = composer + const composer = new EffectComposer(renderer.value.renderer) + renderer.value.effectComposer = composer // we always want to have at least the render pass enabled const renderPass = new RenderPass() - renderer.effectComposer.addPass(renderPass) - renderer.renderPass = renderPass + renderer.value.effectComposer.addPass(renderPass) + renderer.value.renderPass = renderPass const renderSettings = getState(RendererState) if (!renderSettings.usePostProcessing) return @@ -197,15 +633,16 @@ export const PostProcessingComponent = defineComponent({ }) composer.SMAAEffect = smaaEffect - const outlineEffect = new OutlineEffect(scene, camera, getState(HighlightState)) + const outlineEffect = new OutlineEffect(scene, camera.value, getState(HighlightState)) outlineEffect.selectionLayer = ObjectLayers.HighlightEffect composer.OutlineEffect = outlineEffect - const SmaaEffectPass = new EffectPass(camera, smaaEffect) - const OutlineEffectPass = new EffectPass(camera, outlineEffect) + const SmaaEffectPass = new EffectPass(camera.value, smaaEffect) + const OutlineEffectPass = new EffectPass(camera.value, outlineEffect) composer.addPass(OutlineEffectPass) //outlines don't follow camera composer.addPass(SmaaEffectPass) + /* const effectKeys = Object.keys(EffectMap) const normalPass = new CustomNormalPass(scene, camera) @@ -229,6 +666,7 @@ export const PostProcessingComponent = defineComponent({ if (!EffectClass) continue + if (key === Effects.SSAOEffect) { const eff = new EffectClass(camera, normalPass.texture, { ...effectOptions, @@ -237,33 +675,39 @@ export const PostProcessingComponent = defineComponent({ 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 + } 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) { + 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) { + } 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) { + } else + if (key === Effects.MotionBlurEffect) { const eff = new EffectClass(velocityDepthNormalPass, effectOptions) useVelocityDepthNormalPass = true composer[key] = eff effects.push(eff) - } else if (key === Effects.ColorAverageEffect) { + } else + if (key === Effects.ColorAverageEffect) { const eff = new EffectClass(effectOptions.blendFunction) composer[key] = eff effects.push(eff) - } else if (key === Effects.OutlineEffect) { + } else + if (key === Effects.OutlineEffect) { const eff = new EffectClass(scene, camera, effectOptions) composer[key] = eff effects.push(eff) @@ -272,27 +716,32 @@ export const PostProcessingComponent = defineComponent({ // const eff = new EffectClass(camera, lightsource, effectOptions) // composer[key] = eff // effects.push(eff) - } else if (key == Effects.LUT1DEffect) { + } else + if (key == Effects.LUT1DEffect) { if (lut1DEffectTexture) { const eff = new EffectClass(lut1DEffectTexture, effectOptions) composer[key] = eff effects.push(eff) } - } else if (key == Effects.LUT3DEffect) { + } else + if (key == Effects.LUT3DEffect) { if (lut3DEffectTexture) { const eff = new EffectClass(lut3DEffectTexture, effectOptions) composer[key] = eff effects.push(eff) } - } else if (key == Effects.PixelationEffect) { + } else + if (key == Effects.PixelationEffect) { const eff = new EffectClass(effectOptions.granularity) composer[key] = eff effects.push(eff) - } else if (key == Effects.ShockWaveEffect) { + } else + if (key == Effects.ShockWaveEffect) { const eff = new EffectClass(camera, effectOptions.position, effectOptions) composer[key] = eff effects.push(eff) - } else if (key == Effects.TextureEffect) { + } else + if (key == Effects.TextureEffect) { if (textureEffectTexture) { effectOptions.texture = textureEffectTexture const eff = new EffectClass(effectOptions) @@ -305,7 +754,7 @@ export const PostProcessingComponent = defineComponent({ effects.push(eff) } } - + if (effects.length) { if (useVelocityDepthNormalPass) composer.addPass(velocityDepthNormalPass) @@ -322,18 +771,18 @@ export const PostProcessingComponent = defineComponent({ composer.EffectPass = new EffectPass(camera, ...effects) composer.addPass(composer.EffectPass) } - + */ if (getState(EngineState).isEditor) changeRenderMode() }, [ rendererEntity, postprocessingComponent.enabled, - postprocessingComponent.effects, - lut1DEffectTexture, - lut1DEffectTextureError, - lut3DEffectTexture, - lut3DEffectTextureError, - textureEffectTexture, - textureEffectTextureError + postprocessingComponent.effects + //lut1DEffectTexture, + //lut1DEffectTextureError, + //lut3DEffectTexture, + //lut3DEffectTextureError, + //textureEffectTexture, + //textureEffectTextureError ]) return null From 1a61a82a3cdf1e1a25455c661944efa9d01c2f8e Mon Sep 17 00:00:00 2001 From: Michael Floyd Date: Tue, 7 May 2024 08:28:53 -0700 Subject: [PATCH 25/34] added effect options conditional check --- .../components/PostProcessingComponent.tsx | 68 ++++++++++--------- 1 file changed, 36 insertions(+), 32 deletions(-) diff --git a/packages/spatial/src/renderer/components/PostProcessingComponent.tsx b/packages/spatial/src/renderer/components/PostProcessingComponent.tsx index 88d70236693..63e41a2cd94 100755 --- a/packages/spatial/src/renderer/components/PostProcessingComponent.tsx +++ b/packages/spatial/src/renderer/components/PostProcessingComponent.tsx @@ -23,7 +23,7 @@ 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 { Engine, defineComponent, useComponent, useEntityContext } from '@etherealengine/ecs' import { useTexture } from '@etherealengine/engine/src/assets/functions/resourceHooks' import { NO_PROXY_STEALTH, getState, none, useHookstate } from '@etherealengine/hyperflux' import { @@ -78,7 +78,7 @@ export const PostProcessingComponent = defineComponent({ /** @todo this will be replaced with spatial queries or distance checks */ reactor: () => { const entity = useEntityContext() - const rendererEntity = useScene(entity) + const rendererEntity = useScene(Engine.instance.viewerEntity) const postprocessingComponent = useComponent(entity, PostProcessingComponent) const camera = useComponent(rendererEntity, CameraComponent) const renderer = useComponent(rendererEntity, RendererComponent) @@ -131,7 +131,7 @@ export const PostProcessingComponent = defineComponent({ useEffect(() => { const effectOptions = postprocessingComponent.effects[Effects.BloomEffect] as any - if (effectOptions.isActive) { + if (effectOptions && effectOptions.isActive.value) { const EffectClass = EffectMap[Effects.BloomEffect] const eff = new EffectClass(effectOptions) composer[Effects.BloomEffect].set(eff) @@ -146,7 +146,7 @@ export const PostProcessingComponent = defineComponent({ useEffect(() => { const effectOptions = postprocessingComponent.effects[Effects.BrightnessContrastEffect] as any - if (effectOptions.isActive) { + if (effectOptions && effectOptions.isActive.value) { const EffectClass = EffectMap[Effects.BrightnessContrastEffect] const eff = new EffectClass(effectOptions) composer[Effects.BrightnessContrastEffect].set(eff) @@ -161,7 +161,7 @@ export const PostProcessingComponent = defineComponent({ useEffect(() => { const effectOptions = postprocessingComponent.effects[Effects.ChromaticAberrationEffect] as any - if (effectOptions.isActive) { + if (effectOptions && effectOptions.isActive.value) { const EffectClass = EffectMap[Effects.ChromaticAberrationEffect] const eff = new EffectClass(effectOptions) composer[Effects.ChromaticAberrationEffect].set(eff) @@ -176,7 +176,7 @@ export const PostProcessingComponent = defineComponent({ useEffect(() => { const effectOptions = postprocessingComponent.effects[Effects.ColorAverageEffect] as any - if (effectOptions.isActive) { + if (effectOptions && effectOptions.isActive.value) { const EffectClass = EffectMap[Effects.ColorAverageEffect] const eff = new EffectClass(effectOptions.blendFunction) composer[Effects.ColorAverageEffect].set(eff) @@ -191,7 +191,7 @@ export const PostProcessingComponent = defineComponent({ useEffect(() => { const effectOptions = postprocessingComponent.effects[Effects.ColorDepthEffect] as any - if (effectOptions.isActive) { + if (effectOptions && effectOptions.isActive.value) { const EffectClass = EffectMap[Effects.ColorDepthEffect] const eff = new EffectClass(effectOptions) composer[Effects.ColorDepthEffect].set(eff) @@ -206,7 +206,7 @@ export const PostProcessingComponent = defineComponent({ useEffect(() => { const effectOptions = postprocessingComponent.effects[Effects.DepthOfFieldEffect] as any - if (effectOptions.isActive) { + if (effectOptions && effectOptions.isActive.value) { const EffectClass = EffectMap[Effects.DepthOfFieldEffect] const eff = new EffectClass(camera.value, effectOptions) composer[Effects.DepthOfFieldEffect].set(eff) @@ -221,7 +221,7 @@ export const PostProcessingComponent = defineComponent({ useEffect(() => { const effectOptions = postprocessingComponent.effects[Effects.DotScreenEffect] as any - if (effectOptions.isActive) { + if (effectOptions && effectOptions.isActive.value) { const EffectClass = EffectMap[Effects.DotScreenEffect] const eff = new EffectClass(effectOptions) composer[Effects.DotScreenEffect].set(eff) @@ -236,7 +236,7 @@ export const PostProcessingComponent = defineComponent({ useEffect(() => { const effectOptions = postprocessingComponent.effects[Effects.FXAAEffect] as any - if (effectOptions.isActive) { + if (effectOptions && effectOptions.isActive.value) { const EffectClass = EffectMap[Effects.FXAAEffect] const eff = new EffectClass(effectOptions) composer[Effects.FXAAEffect].set(eff) @@ -251,7 +251,7 @@ export const PostProcessingComponent = defineComponent({ useEffect(() => { const effectOptions = postprocessingComponent.effects[Effects.GlitchEffect] as any - if (effectOptions.isActive) { + if (effectOptions && effectOptions.isActive.value) { const EffectClass = EffectMap[Effects.GlitchEffect] const eff = new EffectClass(effectOptions) composer[Effects.GlitchEffect].set(eff) @@ -266,7 +266,7 @@ export const PostProcessingComponent = defineComponent({ useEffect(() => { const effectOptions = postprocessingComponent.effects[Effects.GridEffect] as any - if (effectOptions.isActive) { + if (effectOptions && effectOptions.isActive.value) { const EffectClass = EffectMap[Effects.GridEffect] const eff = new EffectClass(effectOptions) composer[Effects.GridEffect].set(eff) @@ -281,7 +281,7 @@ export const PostProcessingComponent = defineComponent({ useEffect(() => { const effectOptions = postprocessingComponent.effects[Effects.HueSaturationEffect] as any - if (effectOptions.isActive) { + if (effectOptions && effectOptions.isActive.value) { const EffectClass = EffectMap[Effects.HueSaturationEffect] const eff = new EffectClass(effectOptions) composer[Effects.HueSaturationEffect].set(eff) @@ -296,7 +296,7 @@ export const PostProcessingComponent = defineComponent({ useEffect(() => { const effectOptions = postprocessingComponent.effects[Effects.LUT1DEffect] as any - if (effectOptions.isActive && lut1DEffectTexture) { + if (effectOptions && effectOptions.isActive.value && lut1DEffectTexture) { const EffectClass = EffectMap[Effects.LUT1DEffect] const eff = new EffectClass(lut1DEffectTexture, effectOptions) composer[Effects.LUT1DEffect].set(eff) @@ -311,7 +311,7 @@ export const PostProcessingComponent = defineComponent({ useEffect(() => { const effectOptions = postprocessingComponent.effects[Effects.LUT3DEffect] as any - if (effectOptions.isActive && lut3DEffectTexture) { + if (effectOptions && effectOptions.isActive.value && lut3DEffectTexture) { const EffectClass = EffectMap[Effects.LUT3DEffect] const eff = new EffectClass(lut3DEffectTexture, effectOptions) composer[Effects.LUT3DEffect].set(eff) @@ -326,7 +326,7 @@ export const PostProcessingComponent = defineComponent({ useEffect(() => { const effectOptions = postprocessingComponent.effects[Effects.LensDistortionEffect] as any - if (effectOptions.isActive) { + if (effectOptions && effectOptions.isActive.value) { const EffectClass = EffectMap[Effects.LensDistortionEffect] const eff = new EffectClass(effectOptions) composer[Effects.LensDistortionEffect].set(eff) @@ -341,7 +341,7 @@ export const PostProcessingComponent = defineComponent({ useEffect(() => { const effectOptions = postprocessingComponent.effects[Effects.LinearTosRGBEffect] as any - if (effectOptions.isActive) { + if (effectOptions && effectOptions.isActive.value) { const EffectClass = EffectMap[Effects.LinearTosRGBEffect] const eff = new EffectClass(effectOptions) composer[Effects.LinearTosRGBEffect].set(eff) @@ -356,7 +356,7 @@ export const PostProcessingComponent = defineComponent({ useEffect(() => { const effectOptions = postprocessingComponent.effects[Effects.MotionBlurEffect] as any - if (effectOptions.isActive) { + if (effectOptions && effectOptions.isActive.value) { const EffectClass = EffectMap[Effects.MotionBlurEffect] const eff = new EffectClass(velocityDepthNormalPass, effectOptions) useVelocityDepthNormalPass.set(true) @@ -372,7 +372,7 @@ export const PostProcessingComponent = defineComponent({ useEffect(() => { const effectOptions = postprocessingComponent.effects[Effects.NoiseEffect] as any - if (effectOptions.isActive) { + if (effectOptions && effectOptions.isActive.value) { const EffectClass = EffectMap[Effects.NoiseEffect] const eff = new EffectClass(effectOptions) composer[Effects.NoiseEffect].set(eff) @@ -387,7 +387,7 @@ export const PostProcessingComponent = defineComponent({ useEffect(() => { const effectOptions = postprocessingComponent.effects[Effects.OutlineEffect] as any - if (effectOptions.isActive) { + if (effectOptions && effectOptions.isActive.value) { const EffectClass = EffectMap[Effects.OutlineEffect] const eff = new EffectClass(scene.value, camera.value, effectOptions) composer[Effects.OutlineEffect].set(eff) @@ -402,7 +402,7 @@ export const PostProcessingComponent = defineComponent({ useEffect(() => { const effectOptions = postprocessingComponent.effects[Effects.PixelationEffect] as any - if (effectOptions.isActive) { + if (effectOptions && effectOptions.isActive.value) { const EffectClass = EffectMap[Effects.PixelationEffect] const eff = new EffectClass(effectOptions.granularity) composer[Effects.PixelationEffect].set(eff) @@ -417,7 +417,7 @@ export const PostProcessingComponent = defineComponent({ useEffect(() => { const effectOptions = postprocessingComponent.effects[Effects.SMAAEffect] as any - if (effectOptions.isActive) { + if (effectOptions && effectOptions.isActive.value) { const EffectClass = EffectMap[Effects.SMAAEffect] const eff = new EffectClass(effectOptions) composer[Effects.SMAAEffect].set(eff) @@ -432,7 +432,7 @@ export const PostProcessingComponent = defineComponent({ useEffect(() => { const effectOptions = postprocessingComponent.effects[Effects.SSAOEffect] as any - if (effectOptions.isActive) { + if (effectOptions && effectOptions.isActive.value) { const EffectClass = EffectMap[Effects.SSAOEffect] const eff = new EffectClass(camera.value, normalPass.value.texture, { ...effectOptions, @@ -451,7 +451,7 @@ export const PostProcessingComponent = defineComponent({ useEffect(() => { const effectOptions = postprocessingComponent.effects[Effects.SSGIEffect] as any - if (effectOptions.isActive) { + if (effectOptions && effectOptions.isActive.value) { const EffectClass = EffectMap[Effects.SSGIEffect] const eff = new EffectClass(effectOptions) composer[Effects.SSGIEffect].set(eff) @@ -466,9 +466,13 @@ export const PostProcessingComponent = defineComponent({ // SSR is just a mode of SSGI, and can't both be run at the same time useEffect(() => { + let usingSSGI = false const ssgiEffectOptions = postprocessingComponent.effects[Effects.SSGIEffect] as any + if (ssgiEffectOptions && ssgiEffectOptions.isActive.value) { + usingSSGI = true + } const effectOptions = postprocessingComponent.effects[Effects.SSREffect] as any - if (effectOptions.isActive && !ssgiEffectOptions.isActive) { + if (effectOptions && effectOptions.isActive && !usingSSGI) { const EffectClass = EffectMap[Effects.SSREffect] const eff = new EffectClass(composer, scene, camera.value, { ...effectOptions, velocityDepthNormalPass }) useVelocityDepthNormalPass.set(true) @@ -484,7 +488,7 @@ export const PostProcessingComponent = defineComponent({ useEffect(() => { const effectOptions = postprocessingComponent.effects[Effects.ScanlineEffect] as any - if (effectOptions.isActive) { + if (effectOptions && effectOptions.isActive.value) { const EffectClass = EffectMap[Effects.ScanlineEffect] const eff = new EffectClass(effectOptions) composer[Effects.ScanlineEffect].set(eff) @@ -499,7 +503,7 @@ export const PostProcessingComponent = defineComponent({ useEffect(() => { const effectOptions = postprocessingComponent.effects[Effects.ShockWaveEffect] as any - if (effectOptions.isActive) { + if (effectOptions && effectOptions.isActive.value) { const EffectClass = EffectMap[Effects.ShockWaveEffect] const eff = new EffectClass(camera.value, effectOptions.position, effectOptions) composer[Effects.ShockWaveEffect].set(eff) @@ -514,7 +518,7 @@ export const PostProcessingComponent = defineComponent({ useEffect(() => { const effectOptions = postprocessingComponent.effects[Effects.TRAAEffect] as any - if (effectOptions.isActive) { + if (effectOptions && effectOptions.isActive.value) { // todo support more than 1 texture const textureCount = 1 const EffectClass = EffectMap[Effects.TRAAEffect] @@ -532,7 +536,7 @@ export const PostProcessingComponent = defineComponent({ useEffect(() => { const effectOptions = postprocessingComponent.effects[Effects.TextureEffect] as any - if (effectOptions.isActive && textureEffectTexture) { + if (effectOptions && effectOptions.isActive.value && textureEffectTexture) { effectOptions.texture = textureEffectTexture const EffectClass = EffectMap[Effects.TextureEffect] const eff = new EffectClass(effectOptions) @@ -548,7 +552,7 @@ export const PostProcessingComponent = defineComponent({ useEffect(() => { const effectOptions = postprocessingComponent.effects[Effects.TiltShiftEffect] as any - if (effectOptions.isActive) { + if (effectOptions && effectOptions.isActive.value) { const EffectClass = EffectMap[Effects.TiltShiftEffect] const eff = new EffectClass(effectOptions) composer[Effects.TiltShiftEffect].set(eff) @@ -563,7 +567,7 @@ export const PostProcessingComponent = defineComponent({ useEffect(() => { const effectOptions = postprocessingComponent.effects[Effects.ToneMappingEffect] as any - if (effectOptions.isActive) { + if (effectOptions && effectOptions.isActive.value) { const EffectClass = EffectMap[Effects.ToneMappingEffect] const eff = new EffectClass(effectOptions) composer[Effects.ToneMappingEffect].set(eff) @@ -578,7 +582,7 @@ export const PostProcessingComponent = defineComponent({ useEffect(() => { const effectOptions = postprocessingComponent.effects[Effects.VignetteEffect] as any - if (effectOptions.isActive) { + if (effectOptions && effectOptions.isActive.value) { const EffectClass = EffectMap[Effects.VignetteEffect] const eff = new EffectClass(effectOptions) composer[Effects.VignetteEffect].set(eff) From d63877336e13e0a58dcbb8739af2b0e2130b3285 Mon Sep 17 00:00:00 2001 From: Michael Floyd Date: Tue, 7 May 2024 14:03:40 -0700 Subject: [PATCH 26/34] removed the associative array map to the effects class since it is not being used in a for loop any longer --- .../components/PostProcessingComponent.tsx | 248 +++++++++--------- .../src/renderer/effects/PostProcessing.ts | 51 ---- 2 files changed, 121 insertions(+), 178 deletions(-) diff --git a/packages/spatial/src/renderer/components/PostProcessingComponent.tsx b/packages/spatial/src/renderer/components/PostProcessingComponent.tsx index 63e41a2cd94..19cca87db77 100755 --- a/packages/spatial/src/renderer/components/PostProcessingComponent.tsx +++ b/packages/spatial/src/renderer/components/PostProcessingComponent.tsx @@ -27,28 +27,52 @@ import { Engine, defineComponent, useComponent, useEntityContext } from '@ethere import { useTexture } from '@etherealengine/engine/src/assets/functions/resourceHooks' import { NO_PROXY_STEALTH, getState, none, useHookstate } from '@etherealengine/hyperflux' import { + BloomEffect, + BrightnessContrastEffect, + ChromaticAberrationEffect, + ColorAverageEffect, + ColorDepthEffect, DepthDownsamplingPass, + DepthOfFieldEffect, + DotScreenEffect, EdgeDetectionMode, Effect, EffectComposer, EffectPass, + FXAAEffect, + GlitchEffect, + //GodRaysEffect, + GridEffect, + HueSaturationEffect, + LUT1DEffect, + LUT3DEffect, + LensDistortionEffect, + NoiseEffect, OutlineEffect, + PixelationEffect, RenderPass, - SMAAEffect + SMAAEffect, + SSAOEffect, + ScanlineEffect, + ShockWaveEffect, + TextureEffect, + TiltShiftEffect, + ToneMappingEffect, + VignetteEffect } from 'postprocessing' import { useEffect } from 'react' -import { VelocityDepthNormalPass } from 'realism-effects' +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 { HighlightState } from '../HighlightState' import { RendererState } from '../RendererState' import { RenderSettingsState, RendererComponent } from '../WebGLRendererSystem' import { ObjectLayers } from '../constants/ObjectLayers' -import { EffectMap, Effects, defaultPostProcessingSchema } from '../effects/PostProcessing' +import { Effects, defaultPostProcessingSchema } from '../effects/PostProcessing' import { changeRenderMode } from '../functions/changeRenderMode' import { CustomNormalPass } from '../passes/CustomNormalPass' -import { useScene } from './SceneComponents' export const PostProcessingComponent = defineComponent({ name: 'PostProcessingComponent', @@ -78,7 +102,7 @@ export const PostProcessingComponent = defineComponent({ /** @todo this will be replaced with spatial queries or distance checks */ reactor: () => { const entity = useEntityContext() - const rendererEntity = useScene(Engine.instance.viewerEntity) + const rendererEntity = Engine.instance.viewerEntity const postprocessingComponent = useComponent(entity, PostProcessingComponent) const camera = useComponent(rendererEntity, CameraComponent) const renderer = useComponent(rendererEntity, RendererComponent) @@ -130,10 +154,9 @@ export const PostProcessingComponent = defineComponent({ }, [scene]) useEffect(() => { - const effectOptions = postprocessingComponent.effects[Effects.BloomEffect] as any - if (effectOptions && effectOptions.isActive.value) { - const EffectClass = EffectMap[Effects.BloomEffect] - const eff = new EffectClass(effectOptions) + 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) @@ -145,10 +168,9 @@ export const PostProcessingComponent = defineComponent({ }, [postprocessingComponent.effects.BloomEffect]) useEffect(() => { - const effectOptions = postprocessingComponent.effects[Effects.BrightnessContrastEffect] as any - if (effectOptions && effectOptions.isActive.value) { - const EffectClass = EffectMap[Effects.BrightnessContrastEffect] - const eff = new EffectClass(effectOptions) + 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) @@ -160,10 +182,9 @@ export const PostProcessingComponent = defineComponent({ }, [postprocessingComponent.effects[Effects.BrightnessContrastEffect]]) useEffect(() => { - const effectOptions = postprocessingComponent.effects[Effects.ChromaticAberrationEffect] as any - if (effectOptions && effectOptions.isActive.value) { - const EffectClass = EffectMap[Effects.ChromaticAberrationEffect] - const eff = new EffectClass(effectOptions) + 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) @@ -175,10 +196,9 @@ export const PostProcessingComponent = defineComponent({ }, [postprocessingComponent.effects[Effects.ChromaticAberrationEffect]]) useEffect(() => { - const effectOptions = postprocessingComponent.effects[Effects.ColorAverageEffect] as any - if (effectOptions && effectOptions.isActive.value) { - const EffectClass = EffectMap[Effects.ColorAverageEffect] - const eff = new EffectClass(effectOptions.blendFunction) + 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) @@ -190,10 +210,9 @@ export const PostProcessingComponent = defineComponent({ }, [postprocessingComponent.effects[Effects.ColorAverageEffect]]) useEffect(() => { - const effectOptions = postprocessingComponent.effects[Effects.ColorDepthEffect] as any - if (effectOptions && effectOptions.isActive.value) { - const EffectClass = EffectMap[Effects.ColorDepthEffect] - const eff = new EffectClass(effectOptions) + 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) @@ -205,10 +224,9 @@ export const PostProcessingComponent = defineComponent({ }, [postprocessingComponent.effects[Effects.ColorDepthEffect]]) useEffect(() => { - const effectOptions = postprocessingComponent.effects[Effects.DepthOfFieldEffect] as any - if (effectOptions && effectOptions.isActive.value) { - const EffectClass = EffectMap[Effects.DepthOfFieldEffect] - const eff = new EffectClass(camera.value, effectOptions) + 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) @@ -220,10 +238,9 @@ export const PostProcessingComponent = defineComponent({ }, [postprocessingComponent.effects[Effects.DepthOfFieldEffect]]) useEffect(() => { - const effectOptions = postprocessingComponent.effects[Effects.DotScreenEffect] as any - if (effectOptions && effectOptions.isActive.value) { - const EffectClass = EffectMap[Effects.DotScreenEffect] - const eff = new EffectClass(effectOptions) + 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) @@ -235,10 +252,9 @@ export const PostProcessingComponent = defineComponent({ }, [postprocessingComponent.effects[Effects.DotScreenEffect]]) useEffect(() => { - const effectOptions = postprocessingComponent.effects[Effects.FXAAEffect] as any - if (effectOptions && effectOptions.isActive.value) { - const EffectClass = EffectMap[Effects.FXAAEffect] - const eff = new EffectClass(effectOptions) + 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) @@ -250,10 +266,9 @@ export const PostProcessingComponent = defineComponent({ }, [postprocessingComponent.effects[Effects.FXAAEffect]]) useEffect(() => { - const effectOptions = postprocessingComponent.effects[Effects.GlitchEffect] as any - if (effectOptions && effectOptions.isActive.value) { - const EffectClass = EffectMap[Effects.GlitchEffect] - const eff = new EffectClass(effectOptions) + 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) @@ -265,10 +280,9 @@ export const PostProcessingComponent = defineComponent({ }, [postprocessingComponent.effects[Effects.GlitchEffect]]) useEffect(() => { - const effectOptions = postprocessingComponent.effects[Effects.GridEffect] as any - if (effectOptions && effectOptions.isActive.value) { - const EffectClass = EffectMap[Effects.GridEffect] - const eff = new EffectClass(effectOptions) + 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) @@ -280,10 +294,9 @@ export const PostProcessingComponent = defineComponent({ }, [postprocessingComponent.effects[Effects.GridEffect]]) useEffect(() => { - const effectOptions = postprocessingComponent.effects[Effects.HueSaturationEffect] as any - if (effectOptions && effectOptions.isActive.value) { - const EffectClass = EffectMap[Effects.HueSaturationEffect] - const eff = new EffectClass(effectOptions) + 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) @@ -295,10 +308,9 @@ export const PostProcessingComponent = defineComponent({ }, [postprocessingComponent.effects[Effects.HueSaturationEffect]]) useEffect(() => { - const effectOptions = postprocessingComponent.effects[Effects.LUT1DEffect] as any - if (effectOptions && effectOptions.isActive.value && lut1DEffectTexture) { - const EffectClass = EffectMap[Effects.LUT1DEffect] - const eff = new EffectClass(lut1DEffectTexture, effectOptions) + 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) @@ -310,10 +322,9 @@ export const PostProcessingComponent = defineComponent({ }, [postprocessingComponent.effects[Effects.LUT1DEffect], lut1DEffectTexture, lut1DEffectTextureError]) useEffect(() => { - const effectOptions = postprocessingComponent.effects[Effects.LUT3DEffect] as any - if (effectOptions && effectOptions.isActive.value && lut3DEffectTexture) { - const EffectClass = EffectMap[Effects.LUT3DEffect] - const eff = new EffectClass(lut3DEffectTexture, effectOptions) + 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) @@ -325,10 +336,9 @@ export const PostProcessingComponent = defineComponent({ }, [postprocessingComponent.effects[Effects.LUT3DEffect], lut3DEffectTexture, lut3DEffectTextureError]) useEffect(() => { - const effectOptions = postprocessingComponent.effects[Effects.LensDistortionEffect] as any - if (effectOptions && effectOptions.isActive.value) { - const EffectClass = EffectMap[Effects.LensDistortionEffect] - const eff = new EffectClass(effectOptions) + 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) @@ -340,10 +350,9 @@ export const PostProcessingComponent = defineComponent({ }, [postprocessingComponent.effects[Effects.LensDistortionEffect]]) useEffect(() => { - const effectOptions = postprocessingComponent.effects[Effects.LinearTosRGBEffect] as any - if (effectOptions && effectOptions.isActive.value) { - const EffectClass = EffectMap[Effects.LinearTosRGBEffect] - const eff = new EffectClass(effectOptions) + 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) @@ -355,10 +364,9 @@ export const PostProcessingComponent = defineComponent({ }, [postprocessingComponent.effects[Effects.LinearTosRGBEffect]]) useEffect(() => { - const effectOptions = postprocessingComponent.effects[Effects.MotionBlurEffect] as any - if (effectOptions && effectOptions.isActive.value) { - const EffectClass = EffectMap[Effects.MotionBlurEffect] - const eff = new EffectClass(velocityDepthNormalPass, effectOptions) + 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) @@ -371,10 +379,9 @@ export const PostProcessingComponent = defineComponent({ }, [postprocessingComponent.effects[Effects.MotionBlurEffect]]) useEffect(() => { - const effectOptions = postprocessingComponent.effects[Effects.NoiseEffect] as any - if (effectOptions && effectOptions.isActive.value) { - const EffectClass = EffectMap[Effects.NoiseEffect] - const eff = new EffectClass(effectOptions) + 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) @@ -386,10 +393,9 @@ export const PostProcessingComponent = defineComponent({ }, [postprocessingComponent.effects[Effects.NoiseEffect]]) useEffect(() => { - const effectOptions = postprocessingComponent.effects[Effects.OutlineEffect] as any - if (effectOptions && effectOptions.isActive.value) { - const EffectClass = EffectMap[Effects.OutlineEffect] - const eff = new EffectClass(scene.value, camera.value, effectOptions) + 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) @@ -401,10 +407,9 @@ export const PostProcessingComponent = defineComponent({ }, [postprocessingComponent.effects[Effects.OutlineEffect]]) useEffect(() => { - const effectOptions = postprocessingComponent.effects[Effects.PixelationEffect] as any - if (effectOptions && effectOptions.isActive.value) { - const EffectClass = EffectMap[Effects.PixelationEffect] - const eff = new EffectClass(effectOptions.granularity) + 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) @@ -416,10 +421,9 @@ export const PostProcessingComponent = defineComponent({ }, [postprocessingComponent.effects[Effects.PixelationEffect]]) useEffect(() => { - const effectOptions = postprocessingComponent.effects[Effects.SMAAEffect] as any - if (effectOptions && effectOptions.isActive.value) { - const EffectClass = EffectMap[Effects.SMAAEffect] - const eff = new EffectClass(effectOptions) + 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) @@ -431,10 +435,9 @@ export const PostProcessingComponent = defineComponent({ }, [postprocessingComponent.effects[Effects.SMAAEffect]]) useEffect(() => { - const effectOptions = postprocessingComponent.effects[Effects.SSAOEffect] as any - if (effectOptions && effectOptions.isActive.value) { - const EffectClass = EffectMap[Effects.SSAOEffect] - const eff = new EffectClass(camera.value, normalPass.value.texture, { + 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 }) @@ -450,10 +453,9 @@ export const PostProcessingComponent = defineComponent({ }, [postprocessingComponent.effects[Effects.SSAOEffect]]) useEffect(() => { - const effectOptions = postprocessingComponent.effects[Effects.SSGIEffect] as any - if (effectOptions && effectOptions.isActive.value) { - const EffectClass = EffectMap[Effects.SSGIEffect] - const eff = new EffectClass(effectOptions) + 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) @@ -467,14 +469,13 @@ export const PostProcessingComponent = defineComponent({ // SSR is just a mode of SSGI, and can't both be run at the same time useEffect(() => { let usingSSGI = false - const ssgiEffectOptions = postprocessingComponent.effects[Effects.SSGIEffect] as any - if (ssgiEffectOptions && ssgiEffectOptions.isActive.value) { + const ssgiEffectOptions = postprocessingComponent.value.effects[Effects.SSGIEffect] as any + if (ssgiEffectOptions && ssgiEffectOptions.isActive) { usingSSGI = true } - const effectOptions = postprocessingComponent.effects[Effects.SSREffect] as any - if (effectOptions && effectOptions.isActive && !usingSSGI) { - const EffectClass = EffectMap[Effects.SSREffect] - const eff = new EffectClass(composer, scene, camera.value, { ...effectOptions, velocityDepthNormalPass }) + const effectOptions = postprocessingComponent.value.effects[Effects.SSREffect] as any + if (effectOptions && effectOptions && !usingSSGI) { + const eff = new SSREffect(composer, scene, camera.value, { ...effectOptions, velocityDepthNormalPass }) useVelocityDepthNormalPass.set(true) composer[Effects.SSREffect].set(eff) effects[Effects.SSREffect].set(eff) @@ -487,10 +488,9 @@ export const PostProcessingComponent = defineComponent({ }, [postprocessingComponent.effects[Effects.SSREffect]]) useEffect(() => { - const effectOptions = postprocessingComponent.effects[Effects.ScanlineEffect] as any - if (effectOptions && effectOptions.isActive.value) { - const EffectClass = EffectMap[Effects.ScanlineEffect] - const eff = new EffectClass(effectOptions) + 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) @@ -502,10 +502,9 @@ export const PostProcessingComponent = defineComponent({ }, [postprocessingComponent.effects[Effects.ScanlineEffect]]) useEffect(() => { - const effectOptions = postprocessingComponent.effects[Effects.ShockWaveEffect] as any - if (effectOptions && effectOptions.isActive.value) { - const EffectClass = EffectMap[Effects.ShockWaveEffect] - const eff = new EffectClass(camera.value, effectOptions.position, effectOptions) + 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) @@ -517,12 +516,11 @@ export const PostProcessingComponent = defineComponent({ }, [postprocessingComponent.effects[Effects.ShockWaveEffect]]) useEffect(() => { - const effectOptions = postprocessingComponent.effects[Effects.TRAAEffect] as any - if (effectOptions && effectOptions.isActive.value) { + const effectOptions = postprocessingComponent.value.effects[Effects.TRAAEffect] as any + if (effectOptions && effectOptions.isActive) { // todo support more than 1 texture const textureCount = 1 - const EffectClass = EffectMap[Effects.TRAAEffect] - const eff = new EffectClass(scene, camera.value, velocityDepthNormalPass, textureCount, effectOptions) + const eff = new TRAAEffect(scene, camera.value, velocityDepthNormalPass, textureCount, effectOptions) useVelocityDepthNormalPass.set(true) composer[Effects.TRAAEffect].set(eff) effects[Effects.TRAAEffect].set(eff) @@ -535,11 +533,10 @@ export const PostProcessingComponent = defineComponent({ }, [postprocessingComponent.effects[Effects.TRAAEffect]]) useEffect(() => { - const effectOptions = postprocessingComponent.effects[Effects.TextureEffect] as any - if (effectOptions && effectOptions.isActive.value && textureEffectTexture) { + const effectOptions = postprocessingComponent.value.effects[Effects.TextureEffect] as any + if (effectOptions && effectOptions.isActive && textureEffectTexture) { effectOptions.texture = textureEffectTexture - const EffectClass = EffectMap[Effects.TextureEffect] - const eff = new EffectClass(effectOptions) + const eff = new TextureEffect(effectOptions) composer[Effects.TextureEffect].set(eff) effects[Effects.TextureEffect].set(eff) @@ -551,10 +548,9 @@ export const PostProcessingComponent = defineComponent({ }, [postprocessingComponent.effects[Effects.TextureEffect], textureEffectTexture, textureEffectTextureError]) useEffect(() => { - const effectOptions = postprocessingComponent.effects[Effects.TiltShiftEffect] as any - if (effectOptions && effectOptions.isActive.value) { - const EffectClass = EffectMap[Effects.TiltShiftEffect] - const eff = new EffectClass(effectOptions) + 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) @@ -566,10 +562,9 @@ export const PostProcessingComponent = defineComponent({ }, [postprocessingComponent.effects[Effects.TiltShiftEffect]]) useEffect(() => { - const effectOptions = postprocessingComponent.effects[Effects.ToneMappingEffect] as any - if (effectOptions && effectOptions.isActive.value) { - const EffectClass = EffectMap[Effects.ToneMappingEffect] - const eff = new EffectClass(effectOptions) + 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) @@ -581,10 +576,9 @@ export const PostProcessingComponent = defineComponent({ }, [postprocessingComponent.effects[Effects.ToneMappingEffect]]) useEffect(() => { - const effectOptions = postprocessingComponent.effects[Effects.VignetteEffect] as any - if (effectOptions && effectOptions.isActive.value) { - const EffectClass = EffectMap[Effects.VignetteEffect] - const eff = new EffectClass(effectOptions) + 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) diff --git a/packages/spatial/src/renderer/effects/PostProcessing.ts b/packages/spatial/src/renderer/effects/PostProcessing.ts index f827ed908dc..817b3a22789 100644 --- a/packages/spatial/src/renderer/effects/PostProcessing.ts +++ b/packages/spatial/src/renderer/effects/PostProcessing.ts @@ -28,39 +28,22 @@ import { BloomEffect, BloomEffectOptions, BrightnessContrastEffect, - ChromaticAberrationEffect, - ColorAverageEffect, ColorDepthEffect, DepthOfFieldEffect, - DotScreenEffect, EdgeDetectionMode, - FXAAEffect, - GlitchEffect, - //GodRaysEffect, - GridEffect, HueSaturationEffect, KernelSize, - LensDistortionEffect, - LUT1DEffect, - LUT3DEffect, - NoiseEffect, OutlineEffect, - PixelationEffect, PredicationMode, Resolution, - ScanlineEffect, - ShockWaveEffect, SMAAEffect, SMAAPreset, SSAOEffect, - TextureEffect, - TiltShiftEffect, ToneMappingEffect, ToneMappingMode, VignetteEffect, VignetteTechnique } from 'postprocessing' -import { MotionBlurEffect, SSGIEffect, SSREffect, TRAAEffect } from 'realism-effects' import { Color, ColorSpace, SRGBColorSpace, Texture, TextureEncoding, Vector2, Vector3 } from 'three' import { LinearTosRGBEffect } from '../../renderer/effects/LinearTosRGBEffect' @@ -99,40 +82,6 @@ export const Effects = { LensDistortionEffect: 'LensDistortionEffect' as const } -export const EffectMap = { - [Effects.SMAAEffect]: SMAAEffect, - [Effects.OutlineEffect]: OutlineEffect, - [Effects.SSAOEffect]: SSAOEffect, - [Effects.SSREffect]: SSREffect, - [Effects.DepthOfFieldEffect]: DepthOfFieldEffect, - [Effects.BloomEffect]: BloomEffect, - [Effects.ToneMappingEffect]: ToneMappingEffect, - [Effects.BrightnessContrastEffect]: BrightnessContrastEffect, - [Effects.HueSaturationEffect]: HueSaturationEffect, - [Effects.ColorDepthEffect]: ColorDepthEffect, - [Effects.LinearTosRGBEffect]: LinearTosRGBEffect, - [Effects.SSGIEffect]: SSGIEffect, - [Effects.TRAAEffect]: TRAAEffect, - [Effects.ChromaticAberrationEffect]: ChromaticAberrationEffect, - [Effects.MotionBlurEffect]: MotionBlurEffect, - [Effects.ColorAverageEffect]: ColorAverageEffect, - [Effects.DotScreenEffect]: DotScreenEffect, - [Effects.TiltShiftEffect]: TiltShiftEffect, - [Effects.GlitchEffect]: GlitchEffect, - //[Effects.GodRaysEffect]: GodRaysEffect, - [Effects.GridEffect]: GridEffect, - [Effects.LUT1DEffect]: LUT1DEffect, - [Effects.LUT3DEffect]: LUT3DEffect, - [Effects.NoiseEffect]: NoiseEffect, - [Effects.PixelationEffect]: PixelationEffect, //cant be used with convolution effects(blur) - [Effects.ScanlineEffect]: ScanlineEffect, - [Effects.ShockWaveEffect]: ShockWaveEffect, - [Effects.FXAAEffect]: FXAAEffect, - [Effects.TextureEffect]: TextureEffect, - [Effects.VignetteEffect]: VignetteEffect, - [Effects.LensDistortionEffect]: LensDistortionEffect -} - declare module 'postprocessing' { interface EffectComposer { // passes From 7f5a482b103f6c60c75a6830248b840f7cfc73ed Mon Sep 17 00:00:00 2001 From: Michael Floyd Date: Tue, 7 May 2024 16:28:07 -0700 Subject: [PATCH 27/34] connected the post processing effects up to the individual useEffect --- .../components/PostProcessingComponent.tsx | 162 ++++++++++-------- 1 file changed, 88 insertions(+), 74 deletions(-) diff --git a/packages/spatial/src/renderer/components/PostProcessingComponent.tsx b/packages/spatial/src/renderer/components/PostProcessingComponent.tsx index 19cca87db77..98d7e54bc15 100755 --- a/packages/spatial/src/renderer/components/PostProcessingComponent.tsx +++ b/packages/spatial/src/renderer/components/PostProcessingComponent.tsx @@ -25,7 +25,7 @@ Ethereal Engine. All Rights Reserved. import { Engine, defineComponent, useComponent, useEntityContext } from '@etherealengine/ecs' import { useTexture } from '@etherealengine/engine/src/assets/functions/resourceHooks' -import { NO_PROXY_STEALTH, getState, none, useHookstate } from '@etherealengine/hyperflux' +import { NO_PROXY, getState, none, useHookstate } from '@etherealengine/hyperflux' import { BloomEffect, BrightnessContrastEffect, @@ -35,7 +35,6 @@ import { DepthDownsamplingPass, DepthOfFieldEffect, DotScreenEffect, - EdgeDetectionMode, Effect, EffectComposer, EffectPass, @@ -61,15 +60,13 @@ import { VignetteEffect } from 'postprocessing' import { useEffect } from 'react' -import { MotionBlurEffect, SSGIEffect, SSREffect, TRAAEffect, VelocityDepthNormalPass } from 'realism-effects' +import { MotionBlurEffect, SSGIEffect, 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 { HighlightState } from '../HighlightState' import { RendererState } from '../RendererState' -import { RenderSettingsState, RendererComponent } from '../WebGLRendererSystem' -import { ObjectLayers } from '../constants/ObjectLayers' +import { RendererComponent } from '../WebGLRendererSystem' import { Effects, defaultPostProcessingSchema } from '../effects/PostProcessing' import { changeRenderMode } from '../functions/changeRenderMode' import { CustomNormalPass } from '../passes/CustomNormalPass' @@ -146,7 +143,7 @@ export const PostProcessingComponent = defineComponent({ const useVelocityDepthNormalPass = useHookstate(false) const useDepthDownsamplingPass = useHookstate(false) - const composer = useHookstate(() => new EffectComposer(renderer.value.renderer)) + //const composer = useHookstate(() => new EffectComposer(renderer.value.renderer)) const effects = useHookstate>({}) useEffect(() => { @@ -157,11 +154,11 @@ export const PostProcessingComponent = defineComponent({ const effectOptions = postprocessingComponent.value.effects[Effects.BloomEffect] as any if (effectOptions && effectOptions.isActive) { const eff = new BloomEffect(effectOptions) - composer[Effects.BloomEffect].set(eff) + //composer[Effects.BloomEffect].set(eff) effects[Effects.BloomEffect].set(eff) return () => { - composer[Effects.BloomEffect].set(none) + //composer[Effects.BloomEffect].set(none) effects[Effects.BloomEffect].set(none) } } @@ -171,11 +168,11 @@ export const PostProcessingComponent = defineComponent({ const effectOptions = postprocessingComponent.value.effects[Effects.BrightnessContrastEffect] as any if (effectOptions && effectOptions.isActive) { const eff = new BrightnessContrastEffect(effectOptions) - composer[Effects.BrightnessContrastEffect].set(eff) + //composer[Effects.BrightnessContrastEffect].set(eff) effects[Effects.BrightnessContrastEffect].set(eff) return () => { - composer[Effects.BrightnessContrastEffect].set(none) + //composer[Effects.BrightnessContrastEffect].set(none) effects[Effects.BrightnessContrastEffect].set(none) } } @@ -185,11 +182,11 @@ export const PostProcessingComponent = defineComponent({ const effectOptions = postprocessingComponent.value.effects[Effects.ChromaticAberrationEffect] as any if (effectOptions && effectOptions.isActive) { const eff = new ChromaticAberrationEffect(effectOptions) - composer[Effects.ChromaticAberrationEffect].set(eff) + //composer[Effects.ChromaticAberrationEffect].set(eff) effects[Effects.ChromaticAberrationEffect].set(eff) return () => { - composer[Effects.ChromaticAberrationEffect].set(none) + //composer[Effects.ChromaticAberrationEffect].set(none) effects[Effects.ChromaticAberrationEffect].set(none) } } @@ -199,11 +196,11 @@ export const PostProcessingComponent = defineComponent({ const effectOptions = postprocessingComponent.value.effects[Effects.ColorAverageEffect] as any if (effectOptions && effectOptions.isActive) { const eff = new ColorAverageEffect(effectOptions.blendFunction) - composer[Effects.ColorAverageEffect].set(eff) + //composer[Effects.ColorAverageEffect].set(eff) effects[Effects.ColorAverageEffect].set(eff) return () => { - composer[Effects.ColorAverageEffect].set(none) + //composer[Effects.ColorAverageEffect].set(none) effects[Effects.ColorAverageEffect].set(none) } } @@ -213,11 +210,11 @@ export const PostProcessingComponent = defineComponent({ const effectOptions = postprocessingComponent.value.effects[Effects.ColorDepthEffect] as any if (effectOptions && effectOptions.isActive) { const eff = new ColorDepthEffect(effectOptions) - composer[Effects.ColorDepthEffect].set(eff) + //composer[Effects.ColorDepthEffect].set(eff) effects[Effects.ColorDepthEffect].set(eff) return () => { - composer[Effects.ColorDepthEffect].set(none) + //composer[Effects.ColorDepthEffect].set(none) effects[Effects.ColorDepthEffect].set(none) } } @@ -227,11 +224,11 @@ export const PostProcessingComponent = defineComponent({ 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) + //composer[Effects.DepthOfFieldEffect].set(eff) effects[Effects.DepthOfFieldEffect].set(eff) return () => { - composer[Effects.DepthOfFieldEffect].set(none) + //composer[Effects.DepthOfFieldEffect].set(none) effects[Effects.DepthOfFieldEffect].set(none) } } @@ -241,11 +238,11 @@ export const PostProcessingComponent = defineComponent({ const effectOptions = postprocessingComponent.value.effects[Effects.DotScreenEffect] as any if (effectOptions && effectOptions.isActive) { const eff = new DotScreenEffect(effectOptions) - composer[Effects.DotScreenEffect].set(eff) + //composer[Effects.DotScreenEffect].set(eff) effects[Effects.DotScreenEffect].set(eff) return () => { - composer[Effects.DotScreenEffect].set(none) + //composer[Effects.DotScreenEffect].set(none) effects[Effects.DotScreenEffect].set(none) } } @@ -255,11 +252,11 @@ export const PostProcessingComponent = defineComponent({ const effectOptions = postprocessingComponent.value.effects[Effects.FXAAEffect] as any if (effectOptions && effectOptions.isActive) { const eff = new FXAAEffect(effectOptions) - composer[Effects.FXAAEffect].set(eff) + //composer[Effects.FXAAEffect].set(eff) effects[Effects.FXAAEffect].set(eff) return () => { - composer[Effects.FXAAEffect].set(none) + //composer[Effects.FXAAEffect].set(none) effects[Effects.FXAAEffect].set(none) } } @@ -269,11 +266,11 @@ export const PostProcessingComponent = defineComponent({ const effectOptions = postprocessingComponent.value.effects[Effects.GlitchEffect] as any if (effectOptions && effectOptions.isActive) { const eff = new GlitchEffect(effectOptions) - composer[Effects.GlitchEffect].set(eff) + //composer[Effects.GlitchEffect].set(eff) effects[Effects.GlitchEffect].set(eff) return () => { - composer[Effects.GlitchEffect].set(none) + //composer[Effects.GlitchEffect].set(none) effects[Effects.GlitchEffect].set(none) } } @@ -283,11 +280,11 @@ export const PostProcessingComponent = defineComponent({ const effectOptions = postprocessingComponent.value.effects[Effects.GridEffect] as any if (effectOptions && effectOptions.isActive) { const eff = new GridEffect(effectOptions) - composer[Effects.GridEffect].set(eff) + //composer[Effects.GridEffect].set(eff) effects[Effects.GridEffect].set(eff) return () => { - composer[Effects.GridEffect].set(none) + //composer[Effects.GridEffect].set(none) effects[Effects.GridEffect].set(none) } } @@ -297,11 +294,11 @@ export const PostProcessingComponent = defineComponent({ const effectOptions = postprocessingComponent.value.effects[Effects.HueSaturationEffect] as any if (effectOptions && effectOptions.isActive) { const eff = new HueSaturationEffect(effectOptions) - composer[Effects.HueSaturationEffect].set(eff) + //composer[Effects.HueSaturationEffect].set(eff) effects[Effects.HueSaturationEffect].set(eff) return () => { - composer[Effects.HueSaturationEffect].set(none) + //composer[Effects.HueSaturationEffect].set(none) effects[Effects.HueSaturationEffect].set(none) } } @@ -311,11 +308,11 @@ export const PostProcessingComponent = defineComponent({ 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) + //composer[Effects.LUT1DEffect].set(eff) effects[Effects.LUT1DEffect].set(eff) return () => { - composer[Effects.LUT1DEffect].set(none) + //composer[Effects.LUT1DEffect].set(none) effects[Effects.LUT1DEffect].set(none) } } @@ -325,11 +322,11 @@ export const PostProcessingComponent = defineComponent({ 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) + //composer[Effects.LUT3DEffect].set(eff) effects[Effects.LUT3DEffect].set(eff) return () => { - composer[Effects.LUT3DEffect].set(none) + //composer[Effects.LUT3DEffect].set(none) effects[Effects.LUT3DEffect].set(none) } } @@ -339,11 +336,11 @@ export const PostProcessingComponent = defineComponent({ const effectOptions = postprocessingComponent.value.effects[Effects.LensDistortionEffect] as any if (effectOptions && effectOptions.isActive) { const eff = new LensDistortionEffect(effectOptions) - composer[Effects.LensDistortionEffect].set(eff) + //composer[Effects.LensDistortionEffect].set(eff) effects[Effects.LensDistortionEffect].set(eff) return () => { - composer[Effects.LensDistortionEffect].set(none) + //composer[Effects.LensDistortionEffect].set(none) effects[Effects.LensDistortionEffect].set(none) } } @@ -353,11 +350,11 @@ export const PostProcessingComponent = defineComponent({ const effectOptions = postprocessingComponent.value.effects[Effects.LinearTosRGBEffect] as any if (effectOptions && effectOptions.isActive) { const eff = new LinearTosRGBEffect(effectOptions) - composer[Effects.LinearTosRGBEffect].set(eff) + //composer[Effects.LinearTosRGBEffect].set(eff) effects[Effects.LinearTosRGBEffect].set(eff) return () => { - composer[Effects.LinearTosRGBEffect].set(none) + //composer[Effects.LinearTosRGBEffect].set(none) effects[Effects.LinearTosRGBEffect].set(none) } } @@ -368,11 +365,11 @@ export const PostProcessingComponent = defineComponent({ if (effectOptions && effectOptions.isActive) { const eff = new MotionBlurEffect(velocityDepthNormalPass, effectOptions) useVelocityDepthNormalPass.set(true) - composer[Effects.MotionBlurEffect].set(eff) + //composer[Effects.MotionBlurEffect].set(eff) effects[Effects.MotionBlurEffect].set(eff) return () => { - composer[Effects.MotionBlurEffect].set(none) + //composer[Effects.MotionBlurEffect].set(none) effects[Effects.MotionBlurEffect].set(none) } } @@ -382,11 +379,11 @@ export const PostProcessingComponent = defineComponent({ const effectOptions = postprocessingComponent.value.effects[Effects.NoiseEffect] as any if (effectOptions && effectOptions.isActive) { const eff = new NoiseEffect(effectOptions) - composer[Effects.NoiseEffect].set(eff) + //composer[Effects.NoiseEffect].set(eff) effects[Effects.NoiseEffect].set(eff) return () => { - composer[Effects.NoiseEffect].set(none) + //composer[Effects.NoiseEffect].set(none) effects[Effects.NoiseEffect].set(none) } } @@ -396,11 +393,11 @@ export const PostProcessingComponent = defineComponent({ 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) + //composer[Effects.OutlineEffect].set(eff) effects[Effects.OutlineEffect].set(eff) return () => { - composer[Effects.OutlineEffect].set(none) + //composer[Effects.OutlineEffect].set(none) effects[Effects.OutlineEffect].set(none) } } @@ -410,11 +407,11 @@ export const PostProcessingComponent = defineComponent({ const effectOptions = postprocessingComponent.value.effects[Effects.PixelationEffect] as any if (effectOptions && effectOptions.isActive) { const eff = new PixelationEffect(effectOptions.granularity) - composer[Effects.PixelationEffect].set(eff) + //composer[Effects.PixelationEffect].set(eff) effects[Effects.PixelationEffect].set(eff) return () => { - composer[Effects.PixelationEffect].set(none) + //composer[Effects.PixelationEffect].set(none) effects[Effects.PixelationEffect].set(none) } } @@ -424,11 +421,11 @@ export const PostProcessingComponent = defineComponent({ const effectOptions = postprocessingComponent.value.effects[Effects.SMAAEffect] as any if (effectOptions && effectOptions.isActive) { const eff = new SMAAEffect(effectOptions) - composer[Effects.SMAAEffect].set(eff) + //composer[Effects.SMAAEffect].set(eff) effects[Effects.SMAAEffect].set(eff) return () => { - composer[Effects.SMAAEffect].set(none) + //composer[Effects.SMAAEffect].set(none) effects[Effects.SMAAEffect].set(none) } } @@ -442,11 +439,11 @@ export const PostProcessingComponent = defineComponent({ normalDepthBuffer: depthDownsamplingPass.value.texture }) useDepthDownsamplingPass.set(true) - composer[Effects.SSAOEffect].set(eff) + //composer[Effects.SSAOEffect].set(eff) effects[Effects.SSAOEffect].set(eff) return () => { - composer[Effects.SSAOEffect].set(none) + //composer[Effects.SSAOEffect].set(none) effects[Effects.SSAOEffect].set(none) } } @@ -456,11 +453,11 @@ export const PostProcessingComponent = defineComponent({ const effectOptions = postprocessingComponent.value.effects[Effects.SSGIEffect] as any if (effectOptions && effectOptions.isActive) { const eff = new SSGIEffect(effectOptions) - composer[Effects.SSGIEffect].set(eff) + //composer[Effects.SSGIEffect].set(eff) effects[Effects.SSGIEffect].set(eff) return () => { - composer[Effects.SSGIEffect].set(none) + //composer[Effects.SSGIEffect].set(none) effects[Effects.SSGIEffect].set(none) } } @@ -475,13 +472,13 @@ export const PostProcessingComponent = defineComponent({ } const effectOptions = postprocessingComponent.value.effects[Effects.SSREffect] as any if (effectOptions && effectOptions && !usingSSGI) { - const eff = new SSREffect(composer, scene, camera.value, { ...effectOptions, velocityDepthNormalPass }) + //const eff = new SSREffect(composer, scene, camera.value, { ...effectOptions, velocityDepthNormalPass }) useVelocityDepthNormalPass.set(true) - composer[Effects.SSREffect].set(eff) - effects[Effects.SSREffect].set(eff) + //composer[Effects.SSREffect].set(eff) + //effects[Effects.SSREffect].set(eff) return () => { - composer[Effects.SSREffect].set(none) + //composer[Effects.SSREffect].set(none) effects[Effects.SSREffect].set(none) } } @@ -491,11 +488,11 @@ export const PostProcessingComponent = defineComponent({ const effectOptions = postprocessingComponent.value.effects[Effects.ScanlineEffect] as any if (effectOptions && effectOptions.isActive) { const eff = new ScanlineEffect(effectOptions) - composer[Effects.ScanlineEffect].set(eff) + //composer[Effects.ScanlineEffect].set(eff) effects[Effects.ScanlineEffect].set(eff) return () => { - composer[Effects.ScanlineEffect].set(none) + //composer[Effects.ScanlineEffect].set(none) effects[Effects.ScanlineEffect].set(none) } } @@ -505,11 +502,11 @@ export const PostProcessingComponent = defineComponent({ 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) + //composer[Effects.ShockWaveEffect].set(eff) effects[Effects.ShockWaveEffect].set(eff) return () => { - composer[Effects.ShockWaveEffect].set(none) + //composer[Effects.ShockWaveEffect].set(none) effects[Effects.ShockWaveEffect].set(none) } } @@ -522,11 +519,11 @@ export const PostProcessingComponent = defineComponent({ const textureCount = 1 const eff = new TRAAEffect(scene, camera.value, velocityDepthNormalPass, textureCount, effectOptions) useVelocityDepthNormalPass.set(true) - composer[Effects.TRAAEffect].set(eff) + //composer[Effects.TRAAEffect].set(eff) effects[Effects.TRAAEffect].set(eff) return () => { - composer[Effects.TRAAEffect].set(none) + //composer[Effects.TRAAEffect].set(none) effects[Effects.TRAAEffect].set(none) } } @@ -537,11 +534,11 @@ export const PostProcessingComponent = defineComponent({ if (effectOptions && effectOptions.isActive && textureEffectTexture) { effectOptions.texture = textureEffectTexture const eff = new TextureEffect(effectOptions) - composer[Effects.TextureEffect].set(eff) + //composer[Effects.TextureEffect].set(eff) effects[Effects.TextureEffect].set(eff) return () => { - composer[Effects.TextureEffect].set(none) + //composer[Effects.TextureEffect].set(none) effects[Effects.TextureEffect].set(none) } } @@ -551,11 +548,11 @@ export const PostProcessingComponent = defineComponent({ const effectOptions = postprocessingComponent.value.effects[Effects.TiltShiftEffect] as any if (effectOptions && effectOptions.isActive) { const eff = new TiltShiftEffect(effectOptions) - composer[Effects.TiltShiftEffect].set(eff) + //composer[Effects.TiltShiftEffect].set(eff) effects[Effects.TiltShiftEffect].set(eff) return () => { - composer[Effects.TiltShiftEffect].set(none) + //composer[Effects.TiltShiftEffect].set(none) effects[Effects.TiltShiftEffect].set(none) } } @@ -565,11 +562,11 @@ export const PostProcessingComponent = defineComponent({ const effectOptions = postprocessingComponent.value.effects[Effects.ToneMappingEffect] as any if (effectOptions && effectOptions.isActive) { const eff = new ToneMappingEffect(effectOptions) - composer[Effects.ToneMappingEffect].set(eff) + //composer[Effects.ToneMappingEffect].set(eff) effects[Effects.ToneMappingEffect].set(eff) return () => { - composer[Effects.ToneMappingEffect].set(none) + //composer[Effects.ToneMappingEffect].set(none) effects[Effects.ToneMappingEffect].set(none) } } @@ -579,25 +576,42 @@ export const PostProcessingComponent = defineComponent({ const effectOptions = postprocessingComponent.value.effects[Effects.VignetteEffect] as any if (effectOptions && effectOptions.isActive) { const eff = new VignetteEffect(effectOptions) - composer[Effects.VignetteEffect].set(eff) + //composer[Effects.VignetteEffect].set(eff) effects[Effects.VignetteEffect].set(eff) return () => { - composer[Effects.VignetteEffect].set(none) + //composer[Effects.VignetteEffect].set(none) effects[Effects.VignetteEffect].set(none) } } }, [postprocessingComponent.effects[Effects.VignetteEffect]]) useEffect(() => { - const effectArray = Object.values(effects.value) - composer.EffectPass.set(new EffectPass(camera.value, ...effectArray)) - composer.value.addPass(composer.value.EffectPass) + const composer = new EffectComposer(renderer.value.renderer) + renderer.value.effectComposer = composer + + // we always want to have at least the render pass enabled + const renderPass = new RenderPass() + renderer.value.effectComposer.addPass(renderPass) + renderer.value.renderPass = renderPass + + 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 - + /* let schema = postprocessingComponent.enabled.value ? postprocessingComponent.effects.get(NO_PROXY_STEALTH) : undefined @@ -639,7 +653,7 @@ export const PostProcessingComponent = defineComponent({ const OutlineEffectPass = new EffectPass(camera.value, outlineEffect) composer.addPass(OutlineEffectPass) //outlines don't follow camera composer.addPass(SmaaEffectPass) - +*/ /* const effectKeys = Object.keys(EffectMap) From 222f738f042a55b15077f0f200ea4cdab4f64186 Mon Sep 17 00:00:00 2001 From: Michael Floyd Date: Tue, 7 May 2024 16:38:40 -0700 Subject: [PATCH 28/34] removed the effectMap refs that are no longer needed --- packages/spatial/src/renderer/effects/PostProcessing.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/spatial/src/renderer/effects/PostProcessing.ts b/packages/spatial/src/renderer/effects/PostProcessing.ts index 817b3a22789..ca3492bb25f 100644 --- a/packages/spatial/src/renderer/effects/PostProcessing.ts +++ b/packages/spatial/src/renderer/effects/PostProcessing.ts @@ -101,8 +101,6 @@ declare module 'postprocessing' { } } -export type EffectMapType = (typeof EffectMap)[keyof typeof EffectMap] - export type EffectProps = { isActive: boolean } From e9d757b51b0b84c45a8154d75b1269e98dcadcdc Mon Sep 17 00:00:00 2001 From: Michael Floyd Date: Wed, 8 May 2024 14:47:14 -0700 Subject: [PATCH 29/34] updated default values for post processing effects commented out SSGIEffect since it required the composure before it is available --- .../PostProcessingSettingsEditor.tsx | 10 +-- .../components/PostProcessingComponent.tsx | 2 + .../src/renderer/effects/PostProcessing.ts | 68 +++++++++---------- 3 files changed, 40 insertions(+), 40 deletions(-) diff --git a/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx b/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx index 4b117e1d7b6..0721dc1cc10 100755 --- a/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx +++ b/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx @@ -96,9 +96,7 @@ 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.KernelSize, name: 'KernelSize' }, - blur: { propertyType: PropertyTypes.Boolean, name: 'Blur' } + resolutionScale: { propertyType: PropertyTypes.Number, name: 'Resolution Scale', min: -10, max: 10, step: 0.01 } }, SSREffect: { distance: { propertyType: PropertyTypes.Number, name: 'Distance', min: 0.001, max: 10, step: 0.01 }, @@ -168,6 +166,7 @@ const EffectsOptions: Partial = { bits: { propertyType: PropertyTypes.Number, name: 'Bits', min: -1, max: 1, step: 0.01 } }, LinearTosRGBEffect: {}, + /* 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 }, @@ -189,6 +188,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' } }, + */ TRAAEffect: { blend: { propertyType: PropertyTypes.Number, name: 'Blend', min: 0, max: 1, step: 0.001 }, constantBlend: { propertyType: PropertyTypes.Boolean, name: 'Constant Blend' }, @@ -291,7 +291,6 @@ const EffectsOptions: Partial = { 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 }, - bias: { propertyType: PropertyTypes.Number, name: 'Bias', 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, @@ -306,7 +305,8 @@ const EffectsOptions: Partial = { }, ScanlineEffect: { blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' }, - density: { propertyType: PropertyTypes.Number, name: 'Density', min: 0, max: 10, step: 0.05 } + 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' }, diff --git a/packages/spatial/src/renderer/components/PostProcessingComponent.tsx b/packages/spatial/src/renderer/components/PostProcessingComponent.tsx index 98d7e54bc15..f0213c75663 100755 --- a/packages/spatial/src/renderer/components/PostProcessingComponent.tsx +++ b/packages/spatial/src/renderer/components/PostProcessingComponent.tsx @@ -463,6 +463,7 @@ export const PostProcessingComponent = defineComponent({ } }, [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 @@ -483,6 +484,7 @@ export const PostProcessingComponent = defineComponent({ } } }, [postprocessingComponent.effects[Effects.SSREffect]]) +*/ useEffect(() => { const effectOptions = postprocessingComponent.value.effects[Effects.ScanlineEffect] as any diff --git a/packages/spatial/src/renderer/effects/PostProcessing.ts b/packages/spatial/src/renderer/effects/PostProcessing.ts index ca3492bb25f..cd264ab0eff 100644 --- a/packages/spatial/src/renderer/effects/PostProcessing.ts +++ b/packages/spatial/src/renderer/effects/PostProcessing.ts @@ -60,7 +60,7 @@ 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, MotionBlurEffect: 'MotionBlurEffect' as const, @@ -157,8 +157,6 @@ export type SSAOEffectProps = EffectProps & { resolutionY?: number width?: number height?: number - blur?: boolean - kernelSize?: KernelSize } const defaultSSROptions = { @@ -289,7 +287,6 @@ export type TiltShiftEffectProps = EffectProps & { rotation?: number focusArea?: number feather?: number - bias?: number kernelSize?: KernelSize resolutionScale?: number resolutionX?: number @@ -348,6 +345,7 @@ export type PixelationEffectProps = EffectProps & { granularity?: number } export type ScanlineEffectProps = EffectProps & { blendFunction?: BlendFunction density?: number + scrollSpeed?: number } export type ShockWaveEffectProps = EffectProps & { position?: Vector3 @@ -389,7 +387,7 @@ 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 @@ -442,6 +440,7 @@ export const defaultPostProcessingSchema: EffectPropsSchema = { isActive: false, ...defaultSSROptions }, + /* [Effects.SSGIEffect]: { isActive: false, distance: 10, @@ -464,41 +463,40 @@ export const defaultPostProcessingSchema: EffectPropsSchema = { resolutionScale: 1, missedRays: false }, + */ [Effects.SSAOEffect]: { isActive: false, blendFunction: BlendFunction.MULTIPLY, distanceScaling: true, depthAwareUpsampling: true, normalDepthBuffer: undefined, - samples: 23, - rings: 0.29, + samples: 9, + rings: 7, // worldDistanceThreshold: 0.97, // worldDistanceFalloff: 0.03, // worldProximityThreshold: 0.0005, // worldProximityFalloff: 0.001, - distanceThreshold: 0.06, // Render up to a distance of ~20 world units - distanceFalloff: 0.494, // 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.537, - minRadiusScale: -0.64, - luminanceInfluence: 0.52, - bias: -0.04, - radius: 0.09, - intensity: 3, - fade: 0.09, + rangeFalloff: 0.001, + minRadiusScale: 0.1, + luminanceInfluence: 0.7, + bias: 0.025, + radius: 0.1825, + intensity: 1.0, + fade: 0.01, color: undefined, resolutionScale: 1.0, resolutionX: Resolution.AUTO_SIZE, resolutionY: Resolution.AUTO_SIZE, width: Resolution.AUTO_SIZE, - height: Resolution.AUTO_SIZE, - kernelSize: KernelSize.VERY_LARGE, - 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, @@ -519,9 +517,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, @@ -532,13 +530,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 }, @@ -569,7 +567,7 @@ export const defaultPostProcessingSchema: EffectPropsSchema = { }, [Effects.ChromaticAberrationEffect]: { isActive: false, - offset: undefined, + offset: new Vector2(1e-3, 5e-4), radialModulation: false, modulationOffset: 0.15 }, @@ -580,7 +578,7 @@ export const defaultPostProcessingSchema: EffectPropsSchema = { [Effects.DotScreenEffect]: { isActive: false, blendFunction: BlendFunction.NORMAL, - angle: 1.57, + angle: Math.PI * 0.5, scale: 1.0 }, [Effects.TiltShiftEffect]: { @@ -590,7 +588,6 @@ export const defaultPostProcessingSchema: EffectPropsSchema = { rotation: 0.0, focusArea: 0.4, feather: 0.3, - bias: 0.06, kernelSize: KernelSize.MEDIUM, resolutionScale: 0.5, resolutionX: Resolution.AUTO_SIZE, @@ -600,9 +597,9 @@ export const defaultPostProcessingSchema: EffectPropsSchema = { isActive: false, blendFunction: BlendFunction.NORMAL, chromaticAberrationOffset: undefined, - delay: undefined, - duration: undefined, - strength: 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, @@ -633,13 +630,13 @@ export const defaultPostProcessingSchema: EffectPropsSchema = { }, [Effects.LUT1DEffect]: { isActive: false, - blendFunction: BlendFunction.SET, + blendFunction: BlendFunction.SRC, lutPath: undefined, lut: undefined }, [Effects.LUT3DEffect]: { isActive: false, - blendFunction: BlendFunction.SET, + blendFunction: BlendFunction.SRC, tetrahedralInterpolation: false, inputColorSpace: SRGBColorSpace, lutPath: undefined, @@ -657,7 +654,8 @@ export const defaultPostProcessingSchema: EffectPropsSchema = { [Effects.ScanlineEffect]: { isActive: false, blendFunction: BlendFunction.OVERLAY, - density: 1.25 + density: 1.25, + scrollSpeed: 0.0 }, [Effects.ShockWaveEffect]: { isActive: false, @@ -690,7 +688,7 @@ export const defaultPostProcessingSchema: EffectPropsSchema = { isActive: false, distortion: new Vector2(0, 0), principalPoint: new Vector2(0, 0), - focalLength: new Vector2(0, 0), + focalLength: new Vector2(1, 1), skew: 0 } } @@ -712,7 +710,7 @@ export const effectInOrder = [ Effects.DepthOfFieldEffect, Effects.SSAOEffect, // TODO- add option to use HBAO Effects.SSREffect, - Effects.SSGIEffect, + //Effects.SSGIEffect, //Effects.GodRaysEffect, /** 3. camera effects */ From 7de931fa50bbb17b063f55be64b7496fb81e2451 Mon Sep 17 00:00:00 2001 From: Michael Floyd Date: Wed, 8 May 2024 15:59:23 -0700 Subject: [PATCH 30/34] created child reactor to wait for the useScene to return a render Entity --- .../components/PostProcessingComponent.tsx | 861 +++++++++--------- 1 file changed, 436 insertions(+), 425 deletions(-) diff --git a/packages/spatial/src/renderer/components/PostProcessingComponent.tsx b/packages/spatial/src/renderer/components/PostProcessingComponent.tsx index f0213c75663..310841f4148 100755 --- a/packages/spatial/src/renderer/components/PostProcessingComponent.tsx +++ b/packages/spatial/src/renderer/components/PostProcessingComponent.tsx @@ -23,7 +23,7 @@ All portions of the code written by the Ethereal Engine team are Copyright © 20 Ethereal Engine. All Rights Reserved. */ -import { Engine, defineComponent, useComponent, useEntityContext } from '@etherealengine/ecs' +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 { @@ -59,8 +59,8 @@ import { ToneMappingEffect, VignetteEffect } from 'postprocessing' -import { useEffect } from 'react' -import { MotionBlurEffect, SSGIEffect, TRAAEffect, VelocityDepthNormalPass } from 'realism-effects' +import React, { useEffect } from 'react' +import { MotionBlurEffect, TRAAEffect, VelocityDepthNormalPass } from 'realism-effects' import { Scene } from 'three' import { EngineState } from '../../EngineState' import { CameraComponent } from '../../camera/components/CameraComponent' @@ -70,6 +70,7 @@ 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({ name: 'PostProcessingComponent', @@ -99,356 +100,366 @@ export const PostProcessingComponent = defineComponent({ /** @todo this will be replaced with spatial queries or distance checks */ reactor: () => { const entity = useEntityContext() - const rendererEntity = Engine.instance.viewerEntity - const postprocessingComponent = useComponent(entity, PostProcessingComponent) - const camera = useComponent(rendererEntity, CameraComponent) - const renderer = useComponent(rendererEntity, RendererComponent) - - 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>({}) + const rendererEntity = useScene(entity) - useEffect(() => { - velocityDepthNormalPass.set(new VelocityDepthNormalPass(scene, camera)) - }, [scene]) + if (!rendererEntity) return null - 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 + } +}) - return () => { - //composer[Effects.BloomEffect].set(none) - effects[Effects.BloomEffect].set(none) - } - } - }, [postprocessingComponent.effects.BloomEffect]) +const RendererReactor = (props: { entity: Entity; rendererEntity: Entity }) => { + const { entity, rendererEntity } = props - 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) + const postprocessingComponent = useComponent(entity, PostProcessingComponent) + const camera = useComponent(rendererEntity, CameraComponent) + const renderer = useComponent(rendererEntity, RendererComponent) - return () => { - //composer[Effects.BrightnessContrastEffect].set(none) - effects[Effects.BrightnessContrastEffect].set(none) - } + 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[Effects.BrightnessContrastEffect]]) + } + }, [postprocessingComponent.effects.BloomEffect]) - 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) + 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.ChromaticAberrationEffect].set(none) - effects[Effects.ChromaticAberrationEffect].set(none) - } + return () => { + //composer[Effects.BrightnessContrastEffect].set(none) + effects[Effects.BrightnessContrastEffect].set(none) } - }, [postprocessingComponent.effects[Effects.ChromaticAberrationEffect]]) + } + }, [postprocessingComponent.effects[Effects.BrightnessContrastEffect]]) - 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) + 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.ColorAverageEffect].set(none) - effects[Effects.ColorAverageEffect].set(none) - } + return () => { + //composer[Effects.ChromaticAberrationEffect].set(none) + effects[Effects.ChromaticAberrationEffect].set(none) } - }, [postprocessingComponent.effects[Effects.ColorAverageEffect]]) + } + }, [postprocessingComponent.effects[Effects.ChromaticAberrationEffect]]) - 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) + 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.ColorDepthEffect].set(none) - effects[Effects.ColorDepthEffect].set(none) - } + return () => { + //composer[Effects.ColorAverageEffect].set(none) + effects[Effects.ColorAverageEffect].set(none) } - }, [postprocessingComponent.effects[Effects.ColorDepthEffect]]) + } + }, [postprocessingComponent.effects[Effects.ColorAverageEffect]]) - 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) + 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.DepthOfFieldEffect].set(none) - effects[Effects.DepthOfFieldEffect].set(none) - } + return () => { + //composer[Effects.ColorDepthEffect].set(none) + effects[Effects.ColorDepthEffect].set(none) } - }, [postprocessingComponent.effects[Effects.DepthOfFieldEffect]]) + } + }, [postprocessingComponent.effects[Effects.ColorDepthEffect]]) - 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) + 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.DotScreenEffect].set(none) - effects[Effects.DotScreenEffect].set(none) - } + return () => { + //composer[Effects.DepthOfFieldEffect].set(none) + effects[Effects.DepthOfFieldEffect].set(none) } - }, [postprocessingComponent.effects[Effects.DotScreenEffect]]) + } + }, [postprocessingComponent.effects[Effects.DepthOfFieldEffect]]) - 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) + 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.FXAAEffect].set(none) - effects[Effects.FXAAEffect].set(none) - } + return () => { + //composer[Effects.DotScreenEffect].set(none) + effects[Effects.DotScreenEffect].set(none) } - }, [postprocessingComponent.effects[Effects.FXAAEffect]]) + } + }, [postprocessingComponent.effects[Effects.DotScreenEffect]]) - 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) + 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.GlitchEffect].set(none) - effects[Effects.GlitchEffect].set(none) - } + return () => { + //composer[Effects.FXAAEffect].set(none) + effects[Effects.FXAAEffect].set(none) } - }, [postprocessingComponent.effects[Effects.GlitchEffect]]) + } + }, [postprocessingComponent.effects[Effects.FXAAEffect]]) - 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) + 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.GridEffect].set(none) - effects[Effects.GridEffect].set(none) - } + return () => { + //composer[Effects.GlitchEffect].set(none) + effects[Effects.GlitchEffect].set(none) } - }, [postprocessingComponent.effects[Effects.GridEffect]]) + } + }, [postprocessingComponent.effects[Effects.GlitchEffect]]) - 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) + 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.HueSaturationEffect].set(none) - effects[Effects.HueSaturationEffect].set(none) - } + return () => { + //composer[Effects.GridEffect].set(none) + effects[Effects.GridEffect].set(none) } - }, [postprocessingComponent.effects[Effects.HueSaturationEffect]]) + } + }, [postprocessingComponent.effects[Effects.GridEffect]]) - 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) + 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.LUT1DEffect].set(none) - effects[Effects.LUT1DEffect].set(none) - } + return () => { + //composer[Effects.HueSaturationEffect].set(none) + effects[Effects.HueSaturationEffect].set(none) } - }, [postprocessingComponent.effects[Effects.LUT1DEffect], lut1DEffectTexture, lut1DEffectTextureError]) + } + }, [postprocessingComponent.effects[Effects.HueSaturationEffect]]) - 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) + 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.LUT3DEffect].set(none) - effects[Effects.LUT3DEffect].set(none) - } + return () => { + //composer[Effects.LUT1DEffect].set(none) + effects[Effects.LUT1DEffect].set(none) } - }, [postprocessingComponent.effects[Effects.LUT3DEffect], lut3DEffectTexture, lut3DEffectTextureError]) + } + }, [postprocessingComponent.effects[Effects.LUT1DEffect], lut1DEffectTexture, lut1DEffectTextureError]) - 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) + 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.LensDistortionEffect].set(none) - effects[Effects.LensDistortionEffect].set(none) - } + return () => { + //composer[Effects.LUT3DEffect].set(none) + effects[Effects.LUT3DEffect].set(none) } - }, [postprocessingComponent.effects[Effects.LensDistortionEffect]]) + } + }, [postprocessingComponent.effects[Effects.LUT3DEffect], lut3DEffectTexture, lut3DEffectTextureError]) - 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) + 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.LinearTosRGBEffect].set(none) - effects[Effects.LinearTosRGBEffect].set(none) - } + return () => { + //composer[Effects.LensDistortionEffect].set(none) + effects[Effects.LensDistortionEffect].set(none) } - }, [postprocessingComponent.effects[Effects.LinearTosRGBEffect]]) + } + }, [postprocessingComponent.effects[Effects.LensDistortionEffect]]) - 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) + 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.MotionBlurEffect].set(none) - effects[Effects.MotionBlurEffect].set(none) - } + return () => { + //composer[Effects.LinearTosRGBEffect].set(none) + effects[Effects.LinearTosRGBEffect].set(none) } - }, [postprocessingComponent.effects[Effects.MotionBlurEffect]]) + } + }, [postprocessingComponent.effects[Effects.LinearTosRGBEffect]]) - 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) + 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.NoiseEffect].set(none) - effects[Effects.NoiseEffect].set(none) - } + return () => { + //composer[Effects.MotionBlurEffect].set(none) + effects[Effects.MotionBlurEffect].set(none) } - }, [postprocessingComponent.effects[Effects.NoiseEffect]]) + } + }, [postprocessingComponent.effects[Effects.MotionBlurEffect]]) - 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) + 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.OutlineEffect].set(none) - effects[Effects.OutlineEffect].set(none) - } + return () => { + //composer[Effects.NoiseEffect].set(none) + effects[Effects.NoiseEffect].set(none) } - }, [postprocessingComponent.effects[Effects.OutlineEffect]]) + } + }, [postprocessingComponent.effects[Effects.NoiseEffect]]) - 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) + 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.PixelationEffect].set(none) - effects[Effects.PixelationEffect].set(none) - } + return () => { + //composer[Effects.OutlineEffect].set(none) + effects[Effects.OutlineEffect].set(none) } - }, [postprocessingComponent.effects[Effects.PixelationEffect]]) + } + }, [postprocessingComponent.effects[Effects.OutlineEffect]]) - 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) + 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.SMAAEffect].set(none) - effects[Effects.SMAAEffect].set(none) - } + return () => { + //composer[Effects.PixelationEffect].set(none) + effects[Effects.PixelationEffect].set(none) } - }, [postprocessingComponent.effects[Effects.SMAAEffect]]) + } + }, [postprocessingComponent.effects[Effects.PixelationEffect]]) - 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) + 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.SSAOEffect].set(none) - effects[Effects.SSAOEffect].set(none) - } + return () => { + //composer[Effects.SMAAEffect].set(none) + effects[Effects.SMAAEffect].set(none) } - }, [postprocessingComponent.effects[Effects.SSAOEffect]]) + } + }, [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) { @@ -462,158 +473,159 @@ export const PostProcessingComponent = defineComponent({ } } }, [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 /* - // 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 && !usingSSGI) { - //const eff = new SSREffect(composer, scene, camera.value, { ...effectOptions, velocityDepthNormalPass }) - useVelocityDepthNormalPass.set(true) - //composer[Effects.SSREffect].set(eff) - //effects[Effects.SSREffect].set(eff) + */ + const effectOptions = postprocessingComponent.value.effects[Effects.SSREffect] as any + if (effectOptions && effectOptions && !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) - } + return () => { + //composer[Effects.SSREffect].set(none) + effects[Effects.SSREffect].set(none) } - }, [postprocessingComponent.effects[Effects.SSREffect]]) -*/ + } + }, [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) + 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) - } + return () => { + //composer[Effects.ScanlineEffect].set(none) + effects[Effects.ScanlineEffect].set(none) } - }, [postprocessingComponent.effects[Effects.ScanlineEffect]]) + } + }, [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) + 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) - } + 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.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]]) + } + }, [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) + 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) - } + return () => { + //composer[Effects.TextureEffect].set(none) + effects[Effects.TextureEffect].set(none) } - }, [postprocessingComponent.effects[Effects.TextureEffect], textureEffectTexture, textureEffectTextureError]) + } + }, [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) + 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) - } + return () => { + //composer[Effects.TiltShiftEffect].set(none) + effects[Effects.TiltShiftEffect].set(none) } - }, [postprocessingComponent.effects[Effects.TiltShiftEffect]]) + } + }, [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) + 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) - } + return () => { + //composer[Effects.ToneMappingEffect].set(none) + effects[Effects.ToneMappingEffect].set(none) } - }, [postprocessingComponent.effects[Effects.ToneMappingEffect]]) + } + }, [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) + 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) - } + return () => { + //composer[Effects.VignetteEffect].set(none) + effects[Effects.VignetteEffect].set(none) } - }, [postprocessingComponent.effects[Effects.VignetteEffect]]) + } + }, [postprocessingComponent.effects[Effects.VignetteEffect]]) - useEffect(() => { - const composer = new EffectComposer(renderer.value.renderer) - renderer.value.effectComposer = composer + useEffect(() => { + const composer = new EffectComposer(renderer.value.renderer) + renderer.value.effectComposer = composer - // we always want to have at least the render pass enabled - const renderPass = new RenderPass() - renderer.value.effectComposer.addPass(renderPass) - renderer.value.renderPass = renderPass + // we always want to have at least the render pass enabled + const renderPass = new RenderPass() + renderer.value.effectComposer.addPass(renderPass) + renderer.value.renderPass = renderPass - const renderSettings = getState(RendererState) - if (!renderSettings.usePostProcessing) return + 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 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]) + const effectArray = Object.values(effectsVal) + composer.EffectPass = new EffectPass(camera.value, ...effectArray) + composer.addPass(composer.EffectPass) + }, [effects]) - useEffect(() => { - if (!rendererEntity) return - /* + useEffect(() => { + if (!rendererEntity) return + /* let schema = postprocessingComponent.enabled.value ? postprocessingComponent.effects.get(NO_PROXY_STEALTH) : undefined @@ -656,7 +668,7 @@ export const PostProcessingComponent = defineComponent({ composer.addPass(OutlineEffectPass) //outlines don't follow camera composer.addPass(SmaaEffectPass) */ - /* + /* const effectKeys = Object.keys(EffectMap) const normalPass = new CustomNormalPass(scene, camera) @@ -786,19 +798,18 @@ export const PostProcessingComponent = defineComponent({ composer.addPass(composer.EffectPass) } */ - if (getState(EngineState).isEditor) changeRenderMode() - }, [ - rendererEntity, - postprocessingComponent.enabled, - postprocessingComponent.effects - //lut1DEffectTexture, - //lut1DEffectTextureError, - //lut3DEffectTexture, - //lut3DEffectTextureError, - //textureEffectTexture, - //textureEffectTextureError - ]) - - return null - } -}) + if (getState(EngineState).isEditor) changeRenderMode() + }, [ + rendererEntity, + postprocessingComponent.enabled, + postprocessingComponent.effects + //lut1DEffectTexture, + //lut1DEffectTextureError, + //lut3DEffectTexture, + //lut3DEffectTextureError, + //textureEffectTexture, + //textureEffectTextureError + ]) + + return null +} From d6c9dd697e7c86c8a8ce49d7da9538bd3baeb101 Mon Sep 17 00:00:00 2001 From: Michael Floyd Date: Wed, 8 May 2024 16:22:39 -0700 Subject: [PATCH 31/34] moving composure declaration so it can be used in an effect constructor for SSREffect --- .../PostProcessingSettingsEditor.tsx | 4 +- .../components/PostProcessingComponent.tsx | 236 ++---------------- 2 files changed, 28 insertions(+), 212 deletions(-) diff --git a/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx b/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx index 0721dc1cc10..fb3868257ab 100755 --- a/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx +++ b/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx @@ -166,7 +166,7 @@ const EffectsOptions: Partial = { bits: { propertyType: PropertyTypes.Number, name: 'Bits', min: -1, max: 1, step: 0.01 } }, LinearTosRGBEffect: {}, - /* + 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 }, @@ -188,7 +188,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' } }, - */ + TRAAEffect: { blend: { propertyType: PropertyTypes.Number, name: 'Blend', min: 0, max: 1, step: 0.001 }, constantBlend: { propertyType: PropertyTypes.Boolean, name: 'Constant Blend' }, diff --git a/packages/spatial/src/renderer/components/PostProcessingComponent.tsx b/packages/spatial/src/renderer/components/PostProcessingComponent.tsx index 310841f4148..63d3823b6d9 100755 --- a/packages/spatial/src/renderer/components/PostProcessingComponent.tsx +++ b/packages/spatial/src/renderer/components/PostProcessingComponent.tsx @@ -60,7 +60,7 @@ import { VignetteEffect } from 'postprocessing' import React, { useEffect } from 'react' -import { MotionBlurEffect, TRAAEffect, VelocityDepthNormalPass } from 'realism-effects' +import { MotionBlurEffect, SSGIEffect, SSREffect, TRAAEffect, VelocityDepthNormalPass } from 'realism-effects' import { Scene } from 'three' import { EngineState } from '../../EngineState' import { CameraComponent } from '../../camera/components/CameraComponent' @@ -114,6 +114,8 @@ const RendererReactor = (props: { entity: Entity; rendererEntity: Entity }) => { 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 let lut1DEffectTexturePath: string | undefined if ( @@ -459,37 +461,36 @@ const RendererReactor = (props: { entity: Entity; rendererEntity: Entity }) => { } } }, [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) - } + + 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]]) -*/ + } + }, [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 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 && !usingSSGI) { - //const eff = new SSREffect(composer, scene, camera.value, { ...effectOptions, velocityDepthNormalPass }) + 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) + effects[Effects.SSREffect].set(eff) return () => { //composer[Effects.SSREffect].set(none) @@ -601,9 +602,6 @@ const RendererReactor = (props: { entity: Entity; rendererEntity: Entity }) => { }, [postprocessingComponent.effects[Effects.VignetteEffect]]) useEffect(() => { - const composer = new EffectComposer(renderer.value.renderer) - renderer.value.effectComposer = composer - // we always want to have at least the render pass enabled const renderPass = new RenderPass() renderer.value.effectComposer.addPass(renderPass) @@ -625,191 +623,9 @@ const RendererReactor = (props: { entity: Entity; rendererEntity: Entity }) => { useEffect(() => { if (!rendererEntity) return - /* - let schema = postprocessingComponent.enabled.value - ? postprocessingComponent.effects.get(NO_PROXY_STEALTH) - : undefined - - if (!renderer.value || !camera.value) return - - const scene = new Scene() - - if (renderer.value.effectComposer) { - renderer.value.effectComposer.dispose() - renderer.value.renderPass = null! - } - const composer = new EffectComposer(renderer.value.renderer) - renderer.value.effectComposer = composer - - // we always want to have at least the render pass enabled - const renderPass = new RenderPass() - renderer.value.effectComposer.addPass(renderPass) - renderer.value.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.value, getState(HighlightState)) - outlineEffect.selectionLayer = ObjectLayers.HighlightEffect - composer.OutlineEffect = outlineEffect - - const SmaaEffectPass = new EffectPass(camera.value, smaaEffect) - const OutlineEffectPass = new EffectPass(camera.value, 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 - if (key === Effects.ColorAverageEffect) { - const eff = new EffectClass(effectOptions.blendFunction) - composer[key] = eff - effects.push(eff) - } else - if (key === Effects.OutlineEffect) { - const eff = new EffectClass(scene, camera, effectOptions) - composer[key] = eff - effects.push(eff) - //} else if (key == Effects.GodRaysEffect) { - // const lightsource = null //tbd - // const eff = new EffectClass(camera, lightsource, effectOptions) - // composer[key] = eff - // effects.push(eff) - } else - if (key == Effects.LUT1DEffect) { - if (lut1DEffectTexture) { - const eff = new EffectClass(lut1DEffectTexture, effectOptions) - composer[key] = eff - effects.push(eff) - } - } else - if (key == Effects.LUT3DEffect) { - if (lut3DEffectTexture) { - const eff = new EffectClass(lut3DEffectTexture, effectOptions) - composer[key] = eff - effects.push(eff) - } - } else - if (key == Effects.PixelationEffect) { - const eff = new EffectClass(effectOptions.granularity) - composer[key] = eff - effects.push(eff) - } else - if (key == Effects.ShockWaveEffect) { - const eff = new EffectClass(camera, effectOptions.position, effectOptions) - composer[key] = eff - effects.push(eff) - } else - if (key == Effects.TextureEffect) { - if (textureEffectTexture) { - effectOptions.texture = textureEffectTexture - const eff = new EffectClass(effectOptions) - 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() - }, [ - rendererEntity, - postprocessingComponent.enabled, - postprocessingComponent.effects - //lut1DEffectTexture, - //lut1DEffectTextureError, - //lut3DEffectTexture, - //lut3DEffectTextureError, - //textureEffectTexture, - //textureEffectTextureError - ]) + }, [rendererEntity, postprocessingComponent.enabled, postprocessingComponent.effects]) return null } From 0e1cf9b95a424c2dda8d750aeb743ade27afb035 Mon Sep 17 00:00:00 2001 From: Michael Floyd Date: Wed, 8 May 2024 16:35:32 -0700 Subject: [PATCH 32/34] alphabetized the effects in the editor --- .../PostProcessingSettingsEditor.tsx | 286 +++++++++--------- 1 file changed, 142 insertions(+), 144 deletions(-) diff --git a/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx b/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx index fb3868257ab..3ff1f1674c5 100755 --- a/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx +++ b/packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx @@ -71,62 +71,6 @@ type EffectPropertiesType = { [key: string]: EffectPropertyDetail } type EffectOptionsType = { [key in keyof typeof Effects]: EffectPropertiesType } const EffectsOptions: Partial = { - SSAOEffect: { - blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' }, - distanceScaling: { propertyType: PropertyTypes.Boolean, name: 'Distance Scaling' }, - depthAwareUpsampling: { propertyType: PropertyTypes.Boolean, name: 'Depth Aware Upsampling' }, - samples: { propertyType: PropertyTypes.Number, name: 'Samples', min: 1, max: 32, step: 1 }, - rings: { propertyType: PropertyTypes.Number, name: 'Rings', min: -1, max: 1, step: 0.01 }, - - rangeThreshold: { propertyType: PropertyTypes.Number, name: 'Range Threshold', min: -1, max: 1, step: 0.0001 }, // Occlusion proximity of ~0.3 world units - rangeFalloff: { propertyType: PropertyTypes.Number, name: 'Range Falloff', min: -1, max: 1, step: 0.0001 }, // with ~0.1 units of falloff. - // Render up to a distance of ~20 world units. - distanceThreshold: { propertyType: PropertyTypes.Number, name: 'Distance Threshold', min: -1, max: 1, step: 0.01 }, - luminanceInfluence: { - propertyType: PropertyTypes.Number, - name: 'Luminance Influence', - min: -1, - max: 1, - step: 0.01 - }, - // with an additional ~2.5 units of falloff. - distanceFalloff: { propertyType: PropertyTypes.Number, name: 'Distance Falloff', min: -1, max: 1, step: 0.001 }, - minRadiusScale: { propertyType: PropertyTypes.Number, name: 'Min Radius Scale', min: -1, max: 1, step: 0.01 }, - bias: { propertyType: PropertyTypes.Number, name: 'Bias', min: -1, max: 1, step: 0.01 }, - 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 } - }, - 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 }, - denoiseKernel: { propertyType: PropertyTypes.Number, name: 'Denoise Kernel', min: 1, max: 5, step: 1 }, - denoiseDiffuse: { propertyType: PropertyTypes.Number, name: 'Denoise Diffuse', min: 0, max: 50, step: 0.01 }, - denoiseSpecular: { propertyType: PropertyTypes.Number, name: 'Denoise Specular', min: 0, max: 50, step: 0.01 }, - radius: { propertyType: PropertyTypes.Number, name: 'Radius', min: 0, max: 50, step: 0.01 }, - phi: { propertyType: PropertyTypes.Number, name: 'Phi', min: 0, max: 50, step: 0.01 }, - lumaPhi: { propertyType: PropertyTypes.Number, name: 'Denoise Specular', min: 0, max: 50, step: 0.01 }, - depthPhi: { propertyType: PropertyTypes.Number, name: 'luminosity Phi', min: 0, max: 15, step: 0.001 }, - normalPhi: { propertyType: PropertyTypes.Number, name: 'Normal Phi', min: 0, max: 50, step: 0.001 }, - roughnessPhi: { propertyType: PropertyTypes.Number, name: 'Roughness Phi', min: 0, max: 100, step: 0.001 }, - specularPhi: { propertyType: PropertyTypes.Number, name: 'Specular Phi', min: 0, max: 50, step: 0.01 }, - envBlur: { propertyType: PropertyTypes.Number, name: 'Environment Blur', min: 0, max: 1, step: 0.01 }, - importanceSampling: { propertyType: PropertyTypes.Boolean, name: 'Importance Sampling' }, - steps: { propertyType: PropertyTypes.Number, name: 'Steps', min: 0, max: 256, step: 1 }, - refineSteps: { propertyType: PropertyTypes.Number, name: 'Refine Steps', min: 0, max: 16, step: 1 }, - 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' }, @@ -143,69 +87,10 @@ const EffectsOptions: Partial = { 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: { - 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 }, - denoiseKernel: { propertyType: PropertyTypes.Number, name: 'Denoise Kernel', min: 1, max: 5, step: 1 }, - denoiseDiffuse: { propertyType: PropertyTypes.Number, name: 'Denoise Diffuse', min: 0, max: 50, step: 0.01 }, - denoiseSpecular: { propertyType: PropertyTypes.Number, name: 'Denoise Specular', min: 0, max: 50, step: 0.01 }, - radius: { propertyType: PropertyTypes.Number, name: 'Radius', min: 0, max: 50, step: 0.01 }, - phi: { propertyType: PropertyTypes.Number, name: 'Phi', min: 0, max: 50, step: 0.01 }, - lumaPhi: { propertyType: PropertyTypes.Number, name: 'Denoise Specular', min: 0, max: 50, step: 0.01 }, - depthPhi: { propertyType: PropertyTypes.Number, name: 'luminosity Phi', min: 0, max: 15, step: 0.001 }, - normalPhi: { propertyType: PropertyTypes.Number, name: 'Normal Phi', min: 0, max: 50, step: 0.001 }, - roughnessPhi: { propertyType: PropertyTypes.Number, name: 'Roughness Phi', min: 0, max: 100, step: 0.001 }, - specularPhi: { propertyType: PropertyTypes.Number, name: 'Specular Phi', min: 0, max: 50, step: 0.01 }, - envBlur: { propertyType: PropertyTypes.Number, name: 'Environment Blur', min: 0, max: 1, step: 0.01 }, - importanceSampling: { propertyType: PropertyTypes.Boolean, name: 'Importance Sampling' }, - steps: { propertyType: PropertyTypes.Number, name: 'Steps', min: 0, max: 256, step: 1 }, - refineSteps: { propertyType: PropertyTypes.Number, name: 'Refine Steps', min: 0, max: 16, step: 1 }, - resolutionScale: { propertyType: PropertyTypes.Number, name: 'Resolution Scale', min: 0.25, max: 1, step: 0.25 }, - missedRays: { propertyType: PropertyTypes.Boolean, name: 'Missed Rays' } - }, - - TRAAEffect: { - blend: { propertyType: PropertyTypes.Number, name: 'Blend', min: 0, max: 1, step: 0.001 }, - constantBlend: { propertyType: PropertyTypes.Boolean, name: 'Constant Blend' }, - dilation: { propertyType: PropertyTypes.Boolean, name: 'Dilation' }, - blockySampling: { propertyType: PropertyTypes.Boolean, name: 'Blocky Sampling' }, - logTransform: { propertyType: PropertyTypes.Boolean, name: 'Log Transform' }, - depthDistance: { propertyType: PropertyTypes.Number, name: 'Depth Distance', min: 0.01, max: 100, step: 0.01 }, - worldDistance: { propertyType: PropertyTypes.Number, name: 'World Distance', min: 0.01, max: 100, step: 0.01 }, - neighborhoodClamping: { propertyType: PropertyTypes.Boolean, name: 'Neighborhood Clamping' } - }, - VignetteEffect: { - blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' }, - technique: { propertyType: PropertyTypes.VignetteTechnique, name: 'Technique' }, - eskil: { propertyType: PropertyTypes.Boolean, name: 'Eskil' }, - offset: { propertyType: PropertyTypes.Number, name: 'Offset', min: 0, max: 10, step: 0.1 }, - darkness: { propertyType: PropertyTypes.Number, name: 'Darkness', min: 0, max: 10, step: 0.1 } - }, ChromaticAberrationEffect: { offset: { propertyType: PropertyTypes.Vector2, name: 'Offset' }, radialModulation: { propertyType: PropertyTypes.Boolean, name: 'Radial Modulation' }, @@ -214,11 +99,25 @@ const EffectsOptions: Partial = { 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' }, @@ -230,6 +129,11 @@ const EffectsOptions: Partial = { 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 }, @@ -246,11 +150,17 @@ const EffectsOptions: Partial = { // kernelSize: { propertyType: PropertyTypes.KernelSize, name: 'KernelSize' }, // blur: { propertyType: PropertyTypes.Boolean, name: 'Blur' } //}, - 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 } + 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' } @@ -265,6 +175,10 @@ const EffectsOptions: Partial = { 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 }, @@ -282,24 +196,6 @@ const EffectsOptions: Partial = { //width: Resolution.AUTO_SIZE, //height: 480, }, - SMAAEffect: { - preset: { propertyType: PropertyTypes.SMAAPreset, name: 'Preset' } - }, - 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 - }, - NoiseEffect: { - blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' }, - premultiply: { propertyType: PropertyTypes.Boolean, name: 'Premultiply' } - }, PixelationEffect: { granularity: { propertyType: PropertyTypes.Number, name: 'Granularity', min: 0, max: 1000, step: 1 } }, @@ -315,19 +211,121 @@ const EffectsOptions: Partial = { 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 } }, - FXAAEffect: { - blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' } + SMAAEffect: { + preset: { propertyType: PropertyTypes.SMAAPreset, name: 'Preset' } + }, + SSAOEffect: { + blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' }, + distanceScaling: { propertyType: PropertyTypes.Boolean, name: 'Distance Scaling' }, + depthAwareUpsampling: { propertyType: PropertyTypes.Boolean, name: 'Depth Aware Upsampling' }, + samples: { propertyType: PropertyTypes.Number, name: 'Samples', min: 1, max: 32, step: 1 }, + rings: { propertyType: PropertyTypes.Number, name: 'Rings', min: -1, max: 1, step: 0.01 }, + + rangeThreshold: { propertyType: PropertyTypes.Number, name: 'Range Threshold', min: -1, max: 1, step: 0.0001 }, // Occlusion proximity of ~0.3 world units + rangeFalloff: { propertyType: PropertyTypes.Number, name: 'Range Falloff', min: -1, max: 1, step: 0.0001 }, // with ~0.1 units of falloff. + // Render up to a distance of ~20 world units. + distanceThreshold: { propertyType: PropertyTypes.Number, name: 'Distance Threshold', min: -1, max: 1, step: 0.01 }, + luminanceInfluence: { + propertyType: PropertyTypes.Number, + name: 'Luminance Influence', + min: -1, + max: 1, + step: 0.01 + }, + // with an additional ~2.5 units of falloff. + distanceFalloff: { propertyType: PropertyTypes.Number, name: 'Distance Falloff', min: -1, max: 1, step: 0.001 }, + minRadiusScale: { propertyType: PropertyTypes.Number, name: 'Min Radius Scale', min: -1, max: 1, step: 0.01 }, + bias: { propertyType: PropertyTypes.Number, name: 'Bias', min: -1, max: 1, step: 0.01 }, + 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 } + }, + 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 }, + denoiseKernel: { propertyType: PropertyTypes.Number, name: 'Denoise Kernel', min: 1, max: 5, step: 1 }, + denoiseDiffuse: { propertyType: PropertyTypes.Number, name: 'Denoise Diffuse', min: 0, max: 50, step: 0.01 }, + denoiseSpecular: { propertyType: PropertyTypes.Number, name: 'Denoise Specular', min: 0, max: 50, step: 0.01 }, + radius: { propertyType: PropertyTypes.Number, name: 'Radius', min: 0, max: 50, step: 0.01 }, + phi: { propertyType: PropertyTypes.Number, name: 'Phi', min: 0, max: 50, step: 0.01 }, + lumaPhi: { propertyType: PropertyTypes.Number, name: 'Denoise Specular', min: 0, max: 50, step: 0.01 }, + depthPhi: { propertyType: PropertyTypes.Number, name: 'luminosity Phi', min: 0, max: 15, step: 0.001 }, + normalPhi: { propertyType: PropertyTypes.Number, name: 'Normal Phi', min: 0, max: 50, step: 0.001 }, + roughnessPhi: { propertyType: PropertyTypes.Number, name: 'Roughness Phi', min: 0, max: 100, step: 0.001 }, + specularPhi: { propertyType: PropertyTypes.Number, name: 'Specular Phi', min: 0, max: 50, step: 0.01 }, + envBlur: { propertyType: PropertyTypes.Number, name: 'Environment Blur', min: 0, max: 1, step: 0.01 }, + importanceSampling: { propertyType: PropertyTypes.Boolean, name: 'Importance Sampling' }, + steps: { propertyType: PropertyTypes.Number, name: 'Steps', min: 0, max: 256, step: 1 }, + refineSteps: { propertyType: PropertyTypes.Number, name: 'Refine Steps', min: 0, max: 16, step: 1 }, + resolutionScale: { propertyType: PropertyTypes.Number, name: 'Resolution Scale', min: 0.25, max: 1, step: 0.25 }, + missedRays: { propertyType: PropertyTypes.Boolean, name: 'Missed Rays' } + }, + 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 }, + denoiseKernel: { propertyType: PropertyTypes.Number, name: 'Denoise Kernel', min: 1, max: 5, step: 1 }, + denoiseDiffuse: { propertyType: PropertyTypes.Number, name: 'Denoise Diffuse', min: 0, max: 50, step: 0.01 }, + denoiseSpecular: { propertyType: PropertyTypes.Number, name: 'Denoise Specular', min: 0, max: 50, step: 0.01 }, + radius: { propertyType: PropertyTypes.Number, name: 'Radius', min: 0, max: 50, step: 0.01 }, + phi: { propertyType: PropertyTypes.Number, name: 'Phi', min: 0, max: 50, step: 0.01 }, + lumaPhi: { propertyType: PropertyTypes.Number, name: 'Denoise Specular', min: 0, max: 50, step: 0.01 }, + depthPhi: { propertyType: PropertyTypes.Number, name: 'luminosity Phi', min: 0, max: 15, step: 0.001 }, + normalPhi: { propertyType: PropertyTypes.Number, name: 'Normal Phi', min: 0, max: 50, step: 0.001 }, + roughnessPhi: { propertyType: PropertyTypes.Number, name: 'Roughness Phi', min: 0, max: 100, step: 0.001 }, + specularPhi: { propertyType: PropertyTypes.Number, name: 'Specular Phi', min: 0, max: 50, step: 0.01 }, + envBlur: { propertyType: PropertyTypes.Number, name: 'Environment Blur', min: 0, max: 1, step: 0.01 }, + importanceSampling: { propertyType: PropertyTypes.Boolean, name: 'Importance Sampling' }, + steps: { propertyType: PropertyTypes.Number, name: 'Steps', min: 0, max: 256, step: 1 }, + refineSteps: { propertyType: PropertyTypes.Number, name: 'Refine Steps', min: 0, max: 16, step: 1 }, + 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' } }, - 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 } + 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' }, + dilation: { propertyType: PropertyTypes.Boolean, name: 'Dilation' }, + blockySampling: { propertyType: PropertyTypes.Boolean, name: 'Blocky Sampling' }, + logTransform: { propertyType: PropertyTypes.Boolean, name: 'Log Transform' }, + depthDistance: { propertyType: PropertyTypes.Number, name: 'Depth Distance', min: 0.01, max: 100, step: 0.01 }, + worldDistance: { propertyType: PropertyTypes.Number, name: 'World Distance', min: 0.01, max: 100, step: 0.01 }, + neighborhoodClamping: { propertyType: PropertyTypes.Boolean, name: 'Neighborhood Clamping' } + }, + VignetteEffect: { + blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' }, + technique: { propertyType: PropertyTypes.VignetteTechnique, name: 'Technique' }, + eskil: { propertyType: PropertyTypes.Boolean, name: 'Eskil' }, + offset: { propertyType: PropertyTypes.Number, name: 'Offset', min: 0, max: 10, step: 0.1 }, + darkness: { propertyType: PropertyTypes.Number, name: 'Darkness', min: 0, max: 10, step: 0.1 } } } From de393fa1958e37b484d5df2a3007619159bb216e Mon Sep 17 00:00:00 2001 From: Michael Floyd Date: Wed, 8 May 2024 16:49:43 -0700 Subject: [PATCH 33/34] added missing SSGIEffect ref --- packages/spatial/src/renderer/effects/PostProcessing.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/spatial/src/renderer/effects/PostProcessing.ts b/packages/spatial/src/renderer/effects/PostProcessing.ts index cd264ab0eff..18faef7e48a 100644 --- a/packages/spatial/src/renderer/effects/PostProcessing.ts +++ b/packages/spatial/src/renderer/effects/PostProcessing.ts @@ -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, From 70b490f2cebb305db1cd51a1d657baa54db2fa88 Mon Sep 17 00:00:00 2001 From: Daniel Belmes Date: Fri, 10 May 2024 13:40:30 -0700 Subject: [PATCH 34/34] fix render pass --- .../src/renderer/components/PostProcessingComponent.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/spatial/src/renderer/components/PostProcessingComponent.tsx b/packages/spatial/src/renderer/components/PostProcessingComponent.tsx index 63d3823b6d9..51b02c8a198 100755 --- a/packages/spatial/src/renderer/components/PostProcessingComponent.tsx +++ b/packages/spatial/src/renderer/components/PostProcessingComponent.tsx @@ -116,6 +116,9 @@ const RendererReactor = (props: { entity: Entity; rendererEntity: Entity }) => { 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 ( @@ -602,11 +605,6 @@ const RendererReactor = (props: { entity: Entity; rendererEntity: Entity }) => { }, [postprocessingComponent.effects[Effects.VignetteEffect]]) useEffect(() => { - // we always want to have at least the render pass enabled - const renderPass = new RenderPass() - renderer.value.effectComposer.addPass(renderPass) - renderer.value.renderPass = renderPass - const renderSettings = getState(RendererState) if (!renderSettings.usePostProcessing) return