8134 post processing settings are not reactive (#8262)

* debounced set property

* debounce postprocessing composer

* updated effect source to component from global state

* moved debounce to module

* moved to module scope

* moved debounces to module scope

* Revert "moved to module scope"

This reverts commit cdaa009.

* Revert "moved debounces to module scope"

This reverts commit 297f287.

* wrap up debounce in callback to prevent re-render

* remove logs and re-move debounce to editor node scope

---------

Co-authored-by: HexaField <joshfield999@gmail.com>

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

@@ -23,6 +23,7 @@ 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 } from 'postprocessing'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -255,6 +256,10 @@ const PredicationMode = [
   { label: 'CUSTOM', value: 2 }
 ]
 
+const debouncedConfigureEffectComposer = debounce(() => {
+  configureEffectComposer()
+}, 200)
+
 export const PostProcessingSettingsEditor: EditorComponentType = (props) => {
   const { t } = useTranslation()
 
@@ -275,11 +280,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

@@ -25,7 +25,6 @@ Ethereal Engine. All Rights Reserved.
 
 import {
   BlendFunction,
-  BloomEffect,
   DepthDownsamplingPass,
   EffectComposer,
   EffectPass,
@@ -40,9 +39,11 @@ 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'
 
 export const configureEffectComposer = (remove?: boolean, camera: PerspectiveCamera = Engine.instance.camera): void => {
@@ -64,14 +65,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 +141,6 @@ export const configureEffectComposer = (remove?: boolean, camera: PerspectiveCam
       effects.push(eff)
     }
   }
-
   if (effects.length) {
     if (useVelocityDepthNormalPass) composer.addPass(velocityDepthNormalPass)
 
@@ -159,6 +155,5 @@ export const configureEffectComposer = (remove?: boolean, camera: PerspectiveCam
 
     composer.addPass(new EffectPass(camera, ...effects))
   }
-
   if (getState(EngineState).isEditor) changeRenderMode()
 }