From c58eeb9e5ad2db6a075e24ca0f4542891109de03 Mon Sep 17 00:00:00 2001 From: Daniel Belmes Date: Fri, 7 Feb 2025 19:15:45 -0800 Subject: [PATCH 1/4] initial implementation of a scene with postProcessing and XRUI to turn it off and on --- src/examples/PostprocessingExample.tsx | 230 ++++++++++++++++++ .../postprocessingUI/postprocessingUI.css | 81 ++++++ .../postprocessingUI/postprocessingUI.tsx | 39 +++ src/examplesRoute.tsx | 7 + 4 files changed, 357 insertions(+) create mode 100644 src/examples/PostprocessingExample.tsx create mode 100644 src/examples/postprocessingUI/postprocessingUI.css create mode 100644 src/examples/postprocessingUI/postprocessingUI.tsx diff --git a/src/examples/PostprocessingExample.tsx b/src/examples/PostprocessingExample.tsx new file mode 100644 index 0000000..8354e7d --- /dev/null +++ b/src/examples/PostprocessingExample.tsx @@ -0,0 +1,230 @@ +import { Entity, UUIDComponent, UndefinedEntity, getComponent, setComponent } from '@ir-engine/ecs' +import { RenderSettingsComponent } from '@ir-engine/engine/src/scene/components/RenderSettingsComponent' +import { ShadowComponent } from '@ir-engine/engine/src/scene/components/ShadowComponent' +import { + DirectionalLightComponent, + PointLightComponent, + SpotLightComponent, + TransformComponent +} from '@ir-engine/spatial' +import { NameComponent } from '@ir-engine/spatial/src/common/NameComponent' +import { MeshComponent } from '@ir-engine/spatial/src/renderer/components/MeshComponent' +import { VisibleComponent } from '@ir-engine/spatial/src/renderer/components/VisibleComponent' +import React, { useEffect } from 'react' +import { BoxGeometry, Color, Euler, Mesh, MeshLambertMaterial, Quaternion, Vector3 } from 'three' +import { useExampleEntity } from './utils/common/entityUtils' +import { PostProcessingComponent } from '@ir-engine/spatial/src/renderer/components/PostProcessingComponent' +import { SkyboxComponent } from '@ir-engine/engine/src/scene/components/SkyboxComponent' +import { SkyTypeEnum } from '@ir-engine/engine/src/scene/constants/SkyTypeEnum' +import { useHookstate } from '@ir-engine/hyperflux' +import { createXRUI } from '@ir-engine/engine/src/xrui/createXRUI' +import PostprocessingUI from './postprocessingUI/postprocessingUI' + +export default function PostProcessingExampleEntry(props: { sceneEntity: Entity }) { + const settingsEntity = useExampleEntity(props.sceneEntity) + const platformEntity = useExampleEntity(props.sceneEntity) + const skyboxEntity = useExampleEntity(props.sceneEntity) + const boxEntity = useExampleEntity(props.sceneEntity) + const directionalLightEntity = useExampleEntity(props.sceneEntity) + const spotLightEntity = useExampleEntity(props.sceneEntity) + const pointLightEntity = useExampleEntity(props.sceneEntity) + const postProcessingUIEntity = useExampleEntity(props.sceneEntity) + const xruiState = useHookstate({ settingsEntity: settingsEntity }) + + + useEffect(() => { + setComponent(skyboxEntity, NameComponent, "Skybox") + setComponent(skyboxEntity, SkyboxComponent, { + backgroundType: SkyTypeEnum.color, + backgroundColor: 0x828282 + }) + setComponent(skyboxEntity, VisibleComponent) + setComponent(settingsEntity, RenderSettingsComponent, { + primaryLight: getComponent(directionalLightEntity, UUIDComponent) + }) // required for CSM + setComponent(settingsEntity, PostProcessingComponent, { + enabled: true, + effects: {"SSAOEffect": { + "isActive": false, + "blendFunction": 21, + "distanceScaling": true, + "depthAwareUpsampling": true, + "samples": 16, + "rings": 7, + "distanceThreshold": 0.125, + "distanceFalloff": 0.02, + "minRadiusScale": 1, + "bias": 0.25, + "radius": 0.01, + "intensity": 2, + "fade": 0.05 + }, + "SSREffect": { + "isActive": false, + "distance": 10, + "thickness": 10, + "autoThickness": false, + "maxRoughness": 1, + "blend": 0.9, + "denoiseIterations": 1, + "denoiseKernel": 2, + "denoiseDiffuse": 10, + "denoiseSpecular": 10, + "depthPhi": 2, + "normalPhi": 50, + "roughnessPhi": 1, + "envBlur": 0.5, + "importanceSampling": true, + "directLightMultiplier": 1, + "steps": 20, + "refineSteps": 5, + "spp": 1, + "resolutionScale": 1, + "missedRays": false + }, + "DepthOfFieldEffect": { + "isActive": false, + "blendFunction": 23, + "focusDistance": 0.02, + "focalLength": 0.5, + "bokehScale": 1 + }, + "BloomEffect": { + "isActive": true, + "blendFunction": 28, + "kernelSize": 2, + "luminanceThreshold": .1, + "luminanceSmoothing": 0.1, + "intensity": 2 + }, + "ToneMappingEffect": { + "isActive": false, + "blendFunction": 23, + "adaptive": true, + "resolution": 512, + "middleGrey": 0.6, + "maxLuminance": 32, + "averageLuminance": 1, + "adaptationRate": 2 + }, + "BrightnessContrastEffect": { + "isActive": false, + "brightness": 0.05, + "contrast": 0.1 + }, + "HueSaturationEffect": { + "isActive": false, + "hue": 0xff0000, + "saturation": -0.15 + }, + "ColorDepthEffect": { + "isActive": false, + "bits": 16 + }, + "LinearTosRGBEffect": { + "isActive": false + }, + "SSGIEffect": { + "isActive": false, + "distance": 10, + "thickness": 10, + "autoThickness": false, + "maxRoughness": 1, + "blend": 0.9, + "denoiseIterations": 1, + "denoiseKernel": 2, + "denoiseDiffuse": 10, + "denoiseSpecular": 10, + "depthPhi": 2, + "normalPhi": 50, + "roughnessPhi": 1, + "envBlur": 0.5, + "importanceSampling": true, + "directLightMultiplier": 1, + "steps": 20, + "refineSteps": 5, + "spp": 1, + "resolutionScale": 1, + "missedRays": false + }, + "TRAAEffect": { + "isActive": false, + "blend": 0.8, + "constantBlend": true, + "dilation": true, + "blockySampling": false, + "logTransform": false, + "depthDistance": 10, + "worldDistance": 5, + "neighborhoodClamping": true + }, + "MotionBlurEffect": { + "isActive": false, + "intensity": 1, + "jitter": 1, + "samples": 16 + } + }}) + setComponent(platformEntity, TransformComponent, { + position: new Vector3(0, -0.5, 0), + scale: new Vector3(10, 0.1, 10) + }) + setComponent(platformEntity, VisibleComponent) + setComponent(platformEntity, NameComponent, 'Platform') + setComponent(platformEntity, MeshComponent, new Mesh(new BoxGeometry(), new MeshLambertMaterial())) + setComponent(platformEntity, ShadowComponent, { cast: false }) + + setComponent(boxEntity, TransformComponent, { position: new Vector3(0, 0.5, 0) }) + setComponent(boxEntity, VisibleComponent) + setComponent(boxEntity, NameComponent, 'Box') + setComponent(boxEntity, MeshComponent, new Mesh(new BoxGeometry(), new MeshLambertMaterial())) + setComponent(boxEntity, ShadowComponent, { receive: false }) + + setComponent(directionalLightEntity, TransformComponent, { + position: new Vector3(1, 2, -3), + rotation: new Quaternion().setFromEuler( + new Euler().setFromVector3(new Vector3(Math.PI * 0.5, -Math.PI * 0.25).normalize()) + ) + }) + setComponent(directionalLightEntity, NameComponent, 'Directional Light') + setComponent(directionalLightEntity, VisibleComponent) + setComponent(directionalLightEntity, DirectionalLightComponent, { + intensity: 0.5, + castShadow: true, + color: new Color('cyan') + }) + setComponent(directionalLightEntity, ShadowComponent, { receive: false }) + + setComponent(spotLightEntity, TransformComponent, { + position: new Vector3(1, 2, 2), + rotation: new Quaternion().setFromEuler( + new Euler().setFromVector3(new Vector3(Math.PI * 0.75, -Math.PI * 0.1, 0)) + ) + }) + setComponent(spotLightEntity, NameComponent, 'Spot Light') + setComponent(spotLightEntity, VisibleComponent) + setComponent(spotLightEntity, SpotLightComponent, { + castShadow: true, + decay: 1, + range: 10, + intensity: 10, + color: new Color('green') + }) + + setComponent(pointLightEntity, TransformComponent, { position: new Vector3(0, 2, -2) }) + setComponent(pointLightEntity, NameComponent, 'Point Light') + setComponent(pointLightEntity, VisibleComponent) + setComponent(pointLightEntity, PointLightComponent, { + castShadow: true, + decay: 2, + range: 5, + intensity: 10, + color: new Color('red') + }) + + const postProcessingUI = createXRUI(PostprocessingUI, xruiState, { interactable: false }, postProcessingUIEntity) + postProcessingUI.container.position.set(2.4, 2, -1) + }, []) + + return <> +} diff --git a/src/examples/postprocessingUI/postprocessingUI.css b/src/examples/postprocessingUI/postprocessingUI.css new file mode 100644 index 0000000..12b5459 --- /dev/null +++ b/src/examples/postprocessingUI/postprocessingUI.css @@ -0,0 +1,81 @@ +.ComponentsContainer { + line-height: 1.5; + -webkit-text-size-adjust: 100%; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', + 'Noto Color Emoji'; + font-feature-settings: normal; + font-variation-settings: normal; + -webkit-tap-highlight-color: transparent; + + background-color: #2c2f33; + border-radius: 2.4em; +} + +.ComponentsHeaderContainer { + width: 100%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + flex-wrap: nowrap; + padding-top: 1.2em; + padding-bottom: 1.2em; + background-color: #1d2125; + border-radius: 2.4em 2.4em 0 0; +} + +.ComponentsHeader { + color: white; + font-size: 3.6em; + margin: 0; +} + +.ComponentNamesContainer { + display: flex; + flex-direction: column; + justify-content: space-evenly; + width: auto; + + padding-left: 2em; + padding-right: 2em; +} + +.ComponentNamesContainer { + line-height: 1.5; + -webkit-text-size-adjust: 100%; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', + 'Noto Color Emoji'; + font-feature-settings: normal; + font-variation-settings: normal; + -webkit-tap-highlight-color: transparent; + + background-color: #2c2f33; + border-radius: 2.4em; + display: flex; + flex-direction: column; + justify-content: space-evenly; + width: auto; + + padding-left: 2em; + padding-right: 2em; + padding-top: 1em; + padding-bottom: 1em; +} + +.ComponentNameContainer { + flex-basis: content; + padding-top: 1em; + padding-bottom: 1em; +} + +.ComponentName { + color: white; + margin: 0; + font-size: 2.4em; +} \ No newline at end of file diff --git a/src/examples/postprocessingUI/postprocessingUI.tsx b/src/examples/postprocessingUI/postprocessingUI.tsx new file mode 100644 index 0000000..74f9c6c --- /dev/null +++ b/src/examples/postprocessingUI/postprocessingUI.tsx @@ -0,0 +1,39 @@ +// @ts-ignore +import styles from './postprocessingUI.css?inline' + +import { Entity, EntityTreeComponent, getAllComponents, getOptionalComponent, getOptionalMutableComponent } from '@ir-engine/ecs' +import { useXRUIState } from '@ir-engine/engine/src/xrui/useXRUIState' +import { useHookstate } from '@ir-engine/hyperflux' +import { PostProcessingComponent } from '@ir-engine/spatial/src/renderer/components/PostProcessingComponent' +import { Effect } from 'postprocessing' + +import React, { useEffect } from 'react' + + +const PostprocessingUI: React.FC = () => { + const xruiState = useXRUIState<{ settingsEntity: Entity }>() + const settingsEntity = xruiState.settingsEntity.value + const postProcessingComponent = getOptionalMutableComponent(settingsEntity, PostProcessingComponent) + + + return ( + <> + +
+
+

Effects

+
+
+ {Object.entries(postProcessingComponent?.effects.value as Record).map(([name, effectData]) => { + return ( +
postProcessingComponent?.effects[name].isActive.set(!effectData.isActive)} className="ComponentNameContainer" key={name}> +

{name}

+
+ ) + })} +
+
+ + ) +} +export default PostprocessingUI diff --git a/src/examplesRoute.tsx b/src/examplesRoute.tsx index f936fe8..8e98ad9 100644 --- a/src/examplesRoute.tsx +++ b/src/examplesRoute.tsx @@ -21,6 +21,7 @@ import MountPointEntry from './examples/mountPoint' import MultipleScenesEntry from './examples/multipleScenes' import ResourceTrackingRoute from './examples/resourceTracking' import Routes, { RouteCategories } from './sceneRoute' +import PostProcessingExampleEntry from './examples/PostprocessingExample' export const examples: RouteCategories = [ { @@ -86,6 +87,12 @@ export const examples: RouteCategories = [ sceneKey: 'projects/ir-engine/ir-development-test-suite/public/scenes/Unlit.gltf', entry: ShadowExampleEntry }, + { + name: 'PostProcessing', + description: 'Cast shadows from directional, point, and spot lights', + sceneKey: 'projects/ir-engine/ir-development-test-suite/public/scenes/Unlit.gltf', + entry: PostProcessingExampleEntry + }, { name: 'GLTF Viewer', description: 'Drag and drop GLTF files', From 99767f671bd7833ba5dc5a7b91d08ec214ab74e3 Mon Sep 17 00:00:00 2001 From: Daniel Belmes Date: Fri, 7 Feb 2025 19:18:49 -0800 Subject: [PATCH 2/4] Use effect defaults --- src/examples/PostprocessingExample.tsx | 122 +------------------------ 1 file changed, 1 insertion(+), 121 deletions(-) diff --git a/src/examples/PostprocessingExample.tsx b/src/examples/PostprocessingExample.tsx index 8354e7d..f2e1f6a 100644 --- a/src/examples/PostprocessingExample.tsx +++ b/src/examples/PostprocessingExample.tsx @@ -44,127 +44,7 @@ export default function PostProcessingExampleEntry(props: { sceneEntity: Entity }) // required for CSM setComponent(settingsEntity, PostProcessingComponent, { enabled: true, - effects: {"SSAOEffect": { - "isActive": false, - "blendFunction": 21, - "distanceScaling": true, - "depthAwareUpsampling": true, - "samples": 16, - "rings": 7, - "distanceThreshold": 0.125, - "distanceFalloff": 0.02, - "minRadiusScale": 1, - "bias": 0.25, - "radius": 0.01, - "intensity": 2, - "fade": 0.05 - }, - "SSREffect": { - "isActive": false, - "distance": 10, - "thickness": 10, - "autoThickness": false, - "maxRoughness": 1, - "blend": 0.9, - "denoiseIterations": 1, - "denoiseKernel": 2, - "denoiseDiffuse": 10, - "denoiseSpecular": 10, - "depthPhi": 2, - "normalPhi": 50, - "roughnessPhi": 1, - "envBlur": 0.5, - "importanceSampling": true, - "directLightMultiplier": 1, - "steps": 20, - "refineSteps": 5, - "spp": 1, - "resolutionScale": 1, - "missedRays": false - }, - "DepthOfFieldEffect": { - "isActive": false, - "blendFunction": 23, - "focusDistance": 0.02, - "focalLength": 0.5, - "bokehScale": 1 - }, - "BloomEffect": { - "isActive": true, - "blendFunction": 28, - "kernelSize": 2, - "luminanceThreshold": .1, - "luminanceSmoothing": 0.1, - "intensity": 2 - }, - "ToneMappingEffect": { - "isActive": false, - "blendFunction": 23, - "adaptive": true, - "resolution": 512, - "middleGrey": 0.6, - "maxLuminance": 32, - "averageLuminance": 1, - "adaptationRate": 2 - }, - "BrightnessContrastEffect": { - "isActive": false, - "brightness": 0.05, - "contrast": 0.1 - }, - "HueSaturationEffect": { - "isActive": false, - "hue": 0xff0000, - "saturation": -0.15 - }, - "ColorDepthEffect": { - "isActive": false, - "bits": 16 - }, - "LinearTosRGBEffect": { - "isActive": false - }, - "SSGIEffect": { - "isActive": false, - "distance": 10, - "thickness": 10, - "autoThickness": false, - "maxRoughness": 1, - "blend": 0.9, - "denoiseIterations": 1, - "denoiseKernel": 2, - "denoiseDiffuse": 10, - "denoiseSpecular": 10, - "depthPhi": 2, - "normalPhi": 50, - "roughnessPhi": 1, - "envBlur": 0.5, - "importanceSampling": true, - "directLightMultiplier": 1, - "steps": 20, - "refineSteps": 5, - "spp": 1, - "resolutionScale": 1, - "missedRays": false - }, - "TRAAEffect": { - "isActive": false, - "blend": 0.8, - "constantBlend": true, - "dilation": true, - "blockySampling": false, - "logTransform": false, - "depthDistance": 10, - "worldDistance": 5, - "neighborhoodClamping": true - }, - "MotionBlurEffect": { - "isActive": false, - "intensity": 1, - "jitter": 1, - "samples": 16 - } - }}) + }) setComponent(platformEntity, TransformComponent, { position: new Vector3(0, -0.5, 0), scale: new Vector3(10, 0.1, 10) From 64ae861a08f1785017799f78a84b86bcbf4ac75a Mon Sep 17 00:00:00 2001 From: Daniel Belmes Date: Fri, 7 Feb 2025 19:20:15 -0800 Subject: [PATCH 3/4] Hide shame of stealing michael E's UI --- src/examples/postprocessingUI/postprocessingUI.css | 14 +++++++------- src/examples/postprocessingUI/postprocessingUI.tsx | 12 ++++++------ 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/examples/postprocessingUI/postprocessingUI.css b/src/examples/postprocessingUI/postprocessingUI.css index 12b5459..fafccad 100644 --- a/src/examples/postprocessingUI/postprocessingUI.css +++ b/src/examples/postprocessingUI/postprocessingUI.css @@ -1,4 +1,4 @@ -.ComponentsContainer { +.PostProcessingsContainer { line-height: 1.5; -webkit-text-size-adjust: 100%; -moz-tab-size: 4; @@ -14,7 +14,7 @@ border-radius: 2.4em; } -.ComponentsHeaderContainer { +.PostProcessingsHeaderContainer { width: 100%; display: flex; justify-content: center; @@ -27,13 +27,13 @@ border-radius: 2.4em 2.4em 0 0; } -.ComponentsHeader { +.PostProcessingsHeader { color: white; font-size: 3.6em; margin: 0; } -.ComponentNamesContainer { +.PostProcessingNamesContainer { display: flex; flex-direction: column; justify-content: space-evenly; @@ -43,7 +43,7 @@ padding-right: 2em; } -.ComponentNamesContainer { +.PostProcessingNamesContainer { line-height: 1.5; -webkit-text-size-adjust: 100%; -moz-tab-size: 4; @@ -68,13 +68,13 @@ padding-bottom: 1em; } -.ComponentNameContainer { +.PostProcessingNameContainer { flex-basis: content; padding-top: 1em; padding-bottom: 1em; } -.ComponentName { +.PostProcessingName { color: white; margin: 0; font-size: 2.4em; diff --git a/src/examples/postprocessingUI/postprocessingUI.tsx b/src/examples/postprocessingUI/postprocessingUI.tsx index 74f9c6c..b3cb8b0 100644 --- a/src/examples/postprocessingUI/postprocessingUI.tsx +++ b/src/examples/postprocessingUI/postprocessingUI.tsx @@ -19,15 +19,15 @@ const PostprocessingUI: React.FC = () => { return ( <> -
-
-

Effects

+
+
+

Effects

-
+
{Object.entries(postProcessingComponent?.effects.value as Record).map(([name, effectData]) => { return ( -
postProcessingComponent?.effects[name].isActive.set(!effectData.isActive)} className="ComponentNameContainer" key={name}> -

{name}

+
postProcessingComponent?.effects[name].isActive.set(!effectData.isActive)} className="PostProcessingNameContainer" key={name}> +

{name}

) })} From 03f25ea015e496db76d593e472b3b6813c136f2e Mon Sep 17 00:00:00 2001 From: Daniel Belmes Date: Fri, 7 Feb 2025 19:21:23 -0800 Subject: [PATCH 4/4] format --- src/examples/PostprocessingExample.tsx | 21 +++++++-------- .../postprocessingUI/postprocessingUI.css | 2 +- .../postprocessingUI/postprocessingUI.tsx | 27 ++++++++++--------- src/examplesRoute.tsx | 2 +- 4 files changed, 27 insertions(+), 25 deletions(-) diff --git a/src/examples/PostprocessingExample.tsx b/src/examples/PostprocessingExample.tsx index f2e1f6a..02a97f2 100644 --- a/src/examples/PostprocessingExample.tsx +++ b/src/examples/PostprocessingExample.tsx @@ -1,6 +1,10 @@ -import { Entity, UUIDComponent, UndefinedEntity, getComponent, setComponent } from '@ir-engine/ecs' +import { Entity, UUIDComponent, getComponent, setComponent } from '@ir-engine/ecs' import { RenderSettingsComponent } from '@ir-engine/engine/src/scene/components/RenderSettingsComponent' import { ShadowComponent } from '@ir-engine/engine/src/scene/components/ShadowComponent' +import { SkyboxComponent } from '@ir-engine/engine/src/scene/components/SkyboxComponent' +import { SkyTypeEnum } from '@ir-engine/engine/src/scene/constants/SkyTypeEnum' +import { createXRUI } from '@ir-engine/engine/src/xrui/createXRUI' +import { useHookstate } from '@ir-engine/hyperflux' import { DirectionalLightComponent, PointLightComponent, @@ -9,16 +13,12 @@ import { } from '@ir-engine/spatial' import { NameComponent } from '@ir-engine/spatial/src/common/NameComponent' import { MeshComponent } from '@ir-engine/spatial/src/renderer/components/MeshComponent' +import { PostProcessingComponent } from '@ir-engine/spatial/src/renderer/components/PostProcessingComponent' import { VisibleComponent } from '@ir-engine/spatial/src/renderer/components/VisibleComponent' import React, { useEffect } from 'react' import { BoxGeometry, Color, Euler, Mesh, MeshLambertMaterial, Quaternion, Vector3 } from 'three' -import { useExampleEntity } from './utils/common/entityUtils' -import { PostProcessingComponent } from '@ir-engine/spatial/src/renderer/components/PostProcessingComponent' -import { SkyboxComponent } from '@ir-engine/engine/src/scene/components/SkyboxComponent' -import { SkyTypeEnum } from '@ir-engine/engine/src/scene/constants/SkyTypeEnum' -import { useHookstate } from '@ir-engine/hyperflux' -import { createXRUI } from '@ir-engine/engine/src/xrui/createXRUI' import PostprocessingUI from './postprocessingUI/postprocessingUI' +import { useExampleEntity } from './utils/common/entityUtils' export default function PostProcessingExampleEntry(props: { sceneEntity: Entity }) { const settingsEntity = useExampleEntity(props.sceneEntity) @@ -31,9 +31,8 @@ export default function PostProcessingExampleEntry(props: { sceneEntity: Entity const postProcessingUIEntity = useExampleEntity(props.sceneEntity) const xruiState = useHookstate({ settingsEntity: settingsEntity }) - useEffect(() => { - setComponent(skyboxEntity, NameComponent, "Skybox") + setComponent(skyboxEntity, NameComponent, 'Skybox') setComponent(skyboxEntity, SkyboxComponent, { backgroundType: SkyTypeEnum.color, backgroundColor: 0x828282 @@ -43,8 +42,8 @@ export default function PostProcessingExampleEntry(props: { sceneEntity: Entity primaryLight: getComponent(directionalLightEntity, UUIDComponent) }) // required for CSM setComponent(settingsEntity, PostProcessingComponent, { - enabled: true, - }) + enabled: true + }) setComponent(platformEntity, TransformComponent, { position: new Vector3(0, -0.5, 0), scale: new Vector3(10, 0.1, 10) diff --git a/src/examples/postprocessingUI/postprocessingUI.css b/src/examples/postprocessingUI/postprocessingUI.css index fafccad..7ecc422 100644 --- a/src/examples/postprocessingUI/postprocessingUI.css +++ b/src/examples/postprocessingUI/postprocessingUI.css @@ -78,4 +78,4 @@ color: white; margin: 0; font-size: 2.4em; -} \ No newline at end of file +} diff --git a/src/examples/postprocessingUI/postprocessingUI.tsx b/src/examples/postprocessingUI/postprocessingUI.tsx index b3cb8b0..6c6fee7 100644 --- a/src/examples/postprocessingUI/postprocessingUI.tsx +++ b/src/examples/postprocessingUI/postprocessingUI.tsx @@ -1,21 +1,18 @@ // @ts-ignore import styles from './postprocessingUI.css?inline' -import { Entity, EntityTreeComponent, getAllComponents, getOptionalComponent, getOptionalMutableComponent } from '@ir-engine/ecs' +import { Entity, getOptionalMutableComponent } from '@ir-engine/ecs' import { useXRUIState } from '@ir-engine/engine/src/xrui/useXRUIState' -import { useHookstate } from '@ir-engine/hyperflux' import { PostProcessingComponent } from '@ir-engine/spatial/src/renderer/components/PostProcessingComponent' import { Effect } from 'postprocessing' -import React, { useEffect } from 'react' - +import React from 'react' const PostprocessingUI: React.FC = () => { const xruiState = useXRUIState<{ settingsEntity: Entity }>() const settingsEntity = xruiState.settingsEntity.value const postProcessingComponent = getOptionalMutableComponent(settingsEntity, PostProcessingComponent) - return ( <> @@ -24,13 +21,19 @@ const PostprocessingUI: React.FC = () => {

Effects

- {Object.entries(postProcessingComponent?.effects.value as Record).map(([name, effectData]) => { - return ( -
postProcessingComponent?.effects[name].isActive.set(!effectData.isActive)} className="PostProcessingNameContainer" key={name}> -

{name}

-
- ) - })} + {Object.entries(postProcessingComponent?.effects.value as Record).map( + ([name, effectData]) => { + return ( +
postProcessingComponent?.effects[name].isActive.set(!effectData.isActive)} + className="PostProcessingNameContainer" + key={name} + > +

{name}

+
+ ) + } + )}
diff --git a/src/examplesRoute.tsx b/src/examplesRoute.tsx index 8e98ad9..f39d215 100644 --- a/src/examplesRoute.tsx +++ b/src/examplesRoute.tsx @@ -89,7 +89,7 @@ export const examples: RouteCategories = [ }, { name: 'PostProcessing', - description: 'Cast shadows from directional, point, and spot lights', + description: 'Same scene as Shadows but with Postprocessing controls', sceneKey: 'projects/ir-engine/ir-development-test-suite/public/scenes/Unlit.gltf', entry: PostProcessingExampleEntry },