8134 post processing settings are not reactive

packages/editor/src/components/properties/PortalNodeEditor.tsx

@@ -24,7 +24,7 @@ Ethereal Engine. All Rights Reserved.
 */
 
 import { debounce } from 'lodash'
-import React, { useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Euler, Quaternion } from 'three'
 
@@ -92,7 +92,7 @@ export const PortalNodeEditor: EditorComponentType = (props) => {
     setBufferUrl(url)
   }
 
-  const updateCubeMapBakeDebounced = debounce(updateCubeMapBake, 500) //ms
+  const updateCubeMapBakeDebounced = useCallback(debounce(updateCubeMapBake, 500), []) //ms
 
   useEffect(() => {
     updateCubeMapBakeDebounced()

packages/editor/src/components/properties/PostProcessingSettingsEditor.tsx

@@ -29,7 +29,7 @@ import { useTranslation } from 'react-i18next'
 import { Color } from 'three'
 
 import { useComponent } from '@etherealengine/engine/src/ecs/functions/ComponentFunctions'
-import { configureEffectComposer } from '@etherealengine/engine/src/renderer/functions/configureEffectComposer'
+import { debouncedConfigureEffectComposer } from '@etherealengine/engine/src/renderer/functions/configureEffectComposer'
 import { PostProcessingComponent } from '@etherealengine/engine/src/scene/components/PostProcessingComponent'
 import { Effects } from '@etherealengine/engine/src/scene/constants/PostProcessing'
 
@@ -275,11 +275,12 @@ export const PostProcessingSettingsEditor: EditorComponentType = (props) => {
     return value
   }
 
+  // trigger re-render - @todo find out why just setting the value doesn't trigger the reactor
+  // action: debounced the set property value
+
   const setPropertyValue = (prop, val) => {
     prop.set(val)
-
-    // trigger re-render - @todo find out why just setting the value doesnt trigger the reactor
-    configureEffectComposer()
+    debouncedConfigureEffectComposer()
   }
 
   const renderProperty = (propertyDetail: EffectPropertyDetail, propertyPath: string[], index: number) => {

packages/editor/src/components/properties/ScenePreviewCameraNodeEditor.tsx

@@ -24,11 +24,11 @@ Ethereal Engine. All Rights Reserved.
 */
 
 import { debounce } from 'lodash'
-import React, { useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { Engine } from '@etherealengine/engine/src/ecs/classes/Engine'
-import { getComponent, setComponent, useComponent } from '@etherealengine/engine/src/ecs/functions/ComponentFunctions'
+import { getComponent, useComponent } from '@etherealengine/engine/src/ecs/functions/ComponentFunctions'
 import {
   LocalTransformComponent,
   TransformComponent
@@ -66,7 +66,7 @@ export const ScenePreviewCameraNodeEditor: EditorComponentType = (props) => {
     setBufferUrl(url)
   }
 
-  const updateCubeMapBakeDebounced = debounce(updateScenePreview, 500) //ms
+  const updateCubeMapBakeDebounced = useCallback(debounce(updateScenePreview, 500), []) //ms
 
   useEffect(() => {
     updateCubeMapBakeDebounced()

packages/engine/src/renderer/functions/configureEffectComposer.ts

@@ -23,9 +23,9 @@ All portions of the code written by the Ethereal Engine team are Copyright © 20
 Ethereal Engine. All Rights Reserved.
 */
 
+import { debounce } from 'lodash'
 import {
   BlendFunction,
-  BloomEffect,
   DepthDownsamplingPass,
   EffectComposer,
   EffectPass,
@@ -40,11 +40,18 @@ import { getState } from '@etherealengine/hyperflux'
 
 import { Engine } from '../../ecs/classes/Engine'
 import { EngineState } from '../../ecs/classes/EngineState'
+import { SceneState } from '../../ecs/classes/Scene'
+import { getComponent } from '../../ecs/functions/ComponentFunctions'
+import { PostProcessingComponent } from '../../scene/components/PostProcessingComponent'
 import { EffectMap, EffectPropsSchema, Effects } from '../../scene/constants/PostProcessing'
-import { RendererState } from '../RendererState'
-import { EffectComposerWithSchema, EngineRenderer, PostProcessingSettingsState } from '../WebGLRendererSystem'
+import { EffectComposerWithSchema, EngineRenderer } from '../WebGLRendererSystem'
 import { changeRenderMode } from './changeRenderMode'
 
+// can use both as needed
+export const debouncedConfigureEffectComposer = debounce(() => {
+  configureEffectComposer()
+}, 200) // in ms
+
 export const configureEffectComposer = (remove?: boolean, camera: PerspectiveCamera = Engine.instance.camera): void => {
   if (!EngineRenderer.instance) return
 
@@ -64,14 +71,10 @@ export const configureEffectComposer = (remove?: boolean, camera: PerspectiveCam
     return
   }
 
-  const postProcessingEnabled = getState(RendererState).usePostProcessing
-  if (!postProcessingEnabled && !getState(EngineState).isEditor) return
-
-  const postprocessing = getState(PostProcessingSettingsState)
+  const postprocessing = getComponent(getState(SceneState).sceneEntity, PostProcessingComponent)
   if (!postprocessing.enabled) return
 
   const postProcessingEffects = postprocessing.effects as EffectPropsSchema
-
   const effects: any[] = []
   const effectKeys = Object.keys(EffectMap)
 
@@ -144,7 +147,6 @@ export const configureEffectComposer = (remove?: boolean, camera: PerspectiveCam
       effects.push(eff)
     }
   }
-
   if (effects.length) {
     if (useVelocityDepthNormalPass) composer.addPass(velocityDepthNormalPass)
 
@@ -156,9 +158,9 @@ export const configureEffectComposer = (remove?: boolean, camera: PerspectiveCam
       })
       effects.push(textureEffect)
     }
+    console.log('DEBUG effects', effects)
 
     composer.addPass(new EffectPass(camera, ...effects))
   }
-
   if (getState(EngineState).isEditor) changeRenderMode()
 }