add postprocessing editor back (#10472)

* add parameter back to postprocessing editor

* Fix Performance State bug, Fix PostP editing, Fix Select keys

* fix test

* fix slider

* modify fix to be  more general

* Fix effect ordering

---------

Co-authored-by: Daniel Belmes <[email protected]>
Co-authored-by: Michael Estes <[email protected]>

packages/spatial/src/renderer/PerformanceState.test.tsx

@@ -32,6 +32,7 @@ import sinon from 'sinon'
 import { destroyEngine } from '@etherealengine/ecs'
 import { getMutableState, getState, useHookstate } from '@etherealengine/hyperflux'
 
+import { EngineState } from '../EngineState'
 import { createEngine, initializeSpatialEngine } from '../initializeEngine'
 import { PerformanceManager, PerformanceState } from './PerformanceState'
 import { RendererState } from './RendererState'
@@ -63,6 +64,9 @@ describe('PerformanceState', () => {
     }
     dpr = globalThis.window.devicePixelRatio
     globalThis.window.devicePixelRatio = 3
+    getMutableState(EngineState).isEditing.set(false)
+    getMutableState(RendererState).automatic.set(true)
+    getMutableState(PerformanceState).enabled.set(true)
   })
 
   after(() => {

packages/spatial/src/renderer/PerformanceState.ts

@@ -139,7 +139,7 @@ export const PerformanceState = defineState({
   name: 'PerformanceState',
 
   initial: () => ({
-    enabled: true,
+    enabled: false,
 
     isMobileGPU: false,
     gpuTier: 3 as PerformanceTier,
@@ -188,27 +188,27 @@ export const PerformanceState = defineState({
       })
     }
 
+    useEffect(() => {
+      performanceState.enabled.set(!engineState.isEditing.value && engineSettings.automatic.value)
+    }, [engineState.isEditing, engineSettings.automatic])
+
     useEffect(() => {
       recreateEMA()
     }, [performanceState.targetFPS])
 
     useEffect(() => {
-      if (engineState.isEditing.value) return
+      if (!performanceState.enabled.value) return
 
       const performanceTier = performanceState.gpuTier.value
       const settings = tieredSettings[performanceTier]
       engineSettings.merge(settings.engine)
       renderSettings.merge(settings.render)
-    }, [performanceState.gpuTier])
+    }, [performanceState.gpuTier, performanceState.enabled])
 
     useEffect(() => {
       recreateEMA()
       performanceState.performanceSmoothingAccum.set(0)
     }, [performanceState.gpuPerformanceOffset, performanceState.cpuPerformanceOffset])
-
-    useEffect(() => {
-      performanceState.enabled.set(!engineState.isEditing.value && engineSettings.automatic.value)
-    }, [engineState.isEditing, engineSettings.automatic])
   }
 })
 

packages/spatial/src/renderer/components/PostProcessingComponent.tsx

@@ -120,6 +120,7 @@ const PostProcessingReactor = (props: { entity: Entity; rendererEntity: Entity }
       }
     } else {
       renderer.value.effectComposer.removePass(renderer.value.effectComposer.EffectPass as EffectPass)
+      return
     }
 
     //always have the smaa effect

packages/ui/src/components/editor/properties/postProcessing/index.tsx

@@ -129,7 +129,7 @@ export const PostProcessingSettingsEditor: EditorComponentType = (props) => {
             min={effectSettingState.min}
             max={effectSettingState.max}
             step={effectSettingState.step}
-            value={effectSettingState.value}
+            value={effectSettingValue}
             onChange={updateProperty(PostProcessingComponent, `effects.${effectName}.${property}` as any)}
             onRelease={commitProperty(PostProcessingComponent, `effects.${effectName}.${property}` as any)}
           />
@@ -140,7 +140,7 @@ export const PostProcessingSettingsEditor: EditorComponentType = (props) => {
         renderVal = (
           <BooleanInput
             onChange={commitProperty(PostProcessingComponent, `effects.${effectName}.${property}` as any)}
-            value={effectSettingState.value}
+            value={effectSettingValue}
           />
         )
         break
@@ -158,7 +158,7 @@ export const PostProcessingSettingsEditor: EditorComponentType = (props) => {
           <SelectInput
             options={BlendFunctionSelect}
             onChange={commitProperty(PostProcessingComponent, `effects.${effectName}.${property}` as any)}
-            value={effectSettingState.value}
+            value={effectSettingValue}
           />
         )
         break
@@ -168,7 +168,7 @@ export const PostProcessingSettingsEditor: EditorComponentType = (props) => {
           <SelectInput
             options={VignetteTechniqueSelect}
             onChange={commitProperty(PostProcessingComponent, `effects.${effectName}.${property}` as any)}
-            value={effectSettingState.value}
+            value={effectSettingValue}
           />
         )
         break
@@ -202,7 +202,7 @@ export const PostProcessingSettingsEditor: EditorComponentType = (props) => {
       case PropertyTypes.Color:
         renderVal = (
           <ColorInput
-            value={new Color(effectSettingState.value)}
+            value={new Color(effectSettingValue)}
             onChange={(value) =>
               commitProperty(PostProcessingComponent, `effects.${effectName}.${property}` as any)('#' + value)
             }
@@ -215,7 +215,7 @@ export const PostProcessingSettingsEditor: EditorComponentType = (props) => {
           <SelectInput
             options={KernelSizeSelect}
             onChange={commitProperty(PostProcessingComponent, `effects.${effectName}.${property}` as any)}
-            value={effectSettingState.value}
+            value={effectSettingValue}
           />
         )
         break
@@ -224,7 +224,7 @@ export const PostProcessingSettingsEditor: EditorComponentType = (props) => {
           <SelectInput
             options={EdgeDetectionMode}
             onChange={commitProperty(PostProcessingComponent, `effects.${effectName}.${property}` as any)}
-            value={effectSettingState.value}
+            value={effectSettingValue}
           />
         )
         break
@@ -234,7 +234,7 @@ export const PostProcessingSettingsEditor: EditorComponentType = (props) => {
           <SelectInput
             options={PredicationMode}
             onChange={commitProperty(PostProcessingComponent, `effects.${effectName}.${property}` as any)}
-            value={effectSettingState.value}
+            value={effectSettingValue}
           />
         )
         break
@@ -264,7 +264,7 @@ export const PostProcessingSettingsEditor: EditorComponentType = (props) => {
   }
 
   const renderEffects = () => {
-    const items = Object.keys(PostProcessingEffectState).map((effect) => {
+    const items = Object.keys(getState(PostProcessingEffectState)).map((effect) => {
       return (
         <div className="py-1" key={effect}>
           <Checkbox

packages/ui/src/primitives/tailwind/Select/index.tsx

@@ -161,7 +161,7 @@ const Select = <T extends OptionValueType>({
         <ul className={twMerge('max-h-40 overflow-auto [&>li]:px-4 [&>li]:py-2', menuClassname)}>
           {filteredOptions.value.map((option) => (
             <li
-              key={option.value}
+              key={option.label + option.value}
               value={option.value}
               className={twMerge(
                 'cursor-pointer px-4 py-2 text-theme-secondary',

packages/ui/src/primitives/tailwind/Slider/index.tsx

@@ -78,7 +78,7 @@ const Slider = ({ value, min = 0, max = 100, step = 1, width = 200, onChange, on
         max={max}
         value={value}
         onChange={handleChange}
-        onBlur={() => onRelease(value)}
+        onPointerUp={() => onRelease(value)}
         step={step}
         type="range"
         style={sliderStyle}