Post processing example

src/examples/PostprocessingExample.tsx

@@ -0,0 +1,109 @@
+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,
+  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 { 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 PostprocessingUI from './postprocessingUI/postprocessingUI'
+import { useExampleEntity } from './utils/common/entityUtils'
+
+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
+    })
+    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 <></>
+}

src/examples/postprocessingUI/postprocessingUI.css

@@ -0,0 +1,81 @@
+.PostProcessingsContainer {
+  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;
+}
+
+.PostProcessingsHeaderContainer {
+  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;
+}
+
+.PostProcessingsHeader {
+  color: white;
+  font-size: 3.6em;
+  margin: 0;
+}
+
+.PostProcessingNamesContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  width: auto;
+
+  padding-left: 2em;
+  padding-right: 2em;
+}
+
+.PostProcessingNamesContainer {
+  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;
+}
+
+.PostProcessingNameContainer {
+  flex-basis: content;
+  padding-top: 1em;
+  padding-bottom: 1em;
+}
+
+.PostProcessingName {
+  color: white;
+  margin: 0;
+  font-size: 2.4em;
+}

src/examples/postprocessingUI/postprocessingUI.tsx

@@ -0,0 +1,42 @@
+// @ts-ignore
+import styles from './postprocessingUI.css?inline'
+
+import { Entity, getOptionalMutableComponent } from '@ir-engine/ecs'
+import { useXRUIState } from '@ir-engine/engine/src/xrui/useXRUIState'
+import { PostProcessingComponent } from '@ir-engine/spatial/src/renderer/components/PostProcessingComponent'
+import { Effect } from 'postprocessing'
+
+import React from 'react'
+
+const PostprocessingUI: React.FC = () => {
+  const xruiState = useXRUIState<{ settingsEntity: Entity }>()
+  const settingsEntity = xruiState.settingsEntity.value
+  const postProcessingComponent = getOptionalMutableComponent(settingsEntity, PostProcessingComponent)
+
+  return (
+    <>
+      <style type="text/css">{styles.toString()}</style>
+      <div className="PostProcessingsContainer">
+        <div className="PostProcessingsHeaderContainer">
+          <h1 className="PostProcessingsHeader">Effects</h1>
+        </div>
+        <div className="PostProcessingNamesContainer">
+          {Object.entries(postProcessingComponent?.effects.value as Record<string, Effect & { isActive: boolean }>).map(
+            ([name, effectData]) => {
+              return (
+                <div
+                  onClick={() => postProcessingComponent?.effects[name].isActive.set(!effectData.isActive)}
+                  className="PostProcessingNameContainer"
+                  key={name}
+                >
+                  <p className="PostProcessingName">{name}</p>
+                </div>
+              )
+            }
+          )}
+        </div>
+      </div>
+    </>
+  )
+}
+export default PostprocessingUI

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: 'Same scene as Shadows but with Postprocessing controls',
+        sceneKey: 'projects/ir-engine/ir-development-test-suite/public/scenes/Unlit.gltf',
+        entry: PostProcessingExampleEntry
+      },
       {
         name: 'GLTF Viewer',
         description: 'Drag and drop GLTF files',