Refactor PostProcessingComponent into reactive registry of effects

[MbfloydIR]

Summary

Added a Highlight system to add the highlight component to selected items.
Based off of the branch michael/IR-594-postprocessing since it also effects the post processing changes

Subtasks Checklist

Breaking Changes

References

closes #insert number here

QA Steps

[DanielBelmes]

For the next changes we can probably just have schema.isActive as the dep and both create and destroy in one useEffect. I don't wanna break functionality if this works for now 😅

[DanielBelmes]

seems like we forgot to add this to the effect composer. Gonna do it now

[DanielBelmes]

Forgot the reason for this. A lot of the new effects are convolution effects that can't mix with SMAA. Gonna just expose in editor and allow people to decide at scene authoring I think. Though we gotta consider error messaging or handling for this library. It's a headache.

[HexaField]

We spoke on discord to again change the implementation to a full blown registry, making the component extensible and well scoped.

/** Spatial Package */
type EffectRegistryEntry = {
  reactor: (props: { parameters; isActive }) => void
  defaultValues: any // specifies the default values for the effect
  schema: any // specifies a schema for the editor to generate UI for each effect
}

export const PostProcessingEffectState = defineState({
  name: 'PostProcessingEffectState',
  initial: {} as Record<string, EffectRegistryEntry>
})

// PostProcessingComponent
const reactor = () => {
  const entity = useEntityContext()
  const postProcessingComponent = useComponent(entity, PostProcessingComponent)
  const rendererEntity = useScene(entity) // get renderer entity
  const effects = useComponent(entity, PostProcessingEffectState)

  useEffect(() => {
    // create composer etc
  }, [])

  // for each effect specified in our postProcessingComponent, we mount a sub-reactor based on the effect registry for that effect ID
  return (
    <>
      {Object.entries(postProcessingComponent.effects.value).map(([key, value]) => {
        const effect = effects[key] // get effect registry entry
        return (
          <effect.reactor
            key={key}
            parameters={postProcessingComponent.effects[key]}
            isActive={value.isActive}
            rendererEntity={rendererEntity}
          />
        )
      })}
    </>
  )
}

/** Engine package */

// for effects using assets, the effect needs to exist in the engine package
const ChromaticAberrationEffectProcessReactor = (props: { parameters; isActive; rendererEntity }) => {
  const postProcessgComponent = useComponent(entity, PostProcessingComponent)
  const isLutPassActive = postProcessgComponent.effects[lutpass].isActive // if we want an effect to be active only if another effect is active
  const effectComposer = useComponent(props.rendererEntity, RendererComponent).effectComposer
  const mytexture = useAsset()

  useEffect(() => {
    if (!props.isActive || isLutPassActive) return
    const { schema, effects } = props
    const eff = new ChromaticAberrationEffect(schema)
    effects[Effects.ChromaticAberrationEffect].set(eff)
    effectComposer.addPass(eff)
    return () => {
      //cleanup
    }
  }, [props.isActive, isLutPassActive])
}

// registers the effect
getMutableState(PostProcessingEffectState)[Effects.ChromaticAberrationEffect].set({
  reactor: ChromaticAberrationEffectProcessReactor,
  defaultValues: {
    //...
  },
  schema: {
    hue: { propertyType: PropertyTypes.Number, name: 'Hue', min: -1, max: 1, step: 0.01 },
    saturation: { propertyType: PropertyTypes.Number, name: 'Saturation', min: -1, max: 1, step: 0.01 }
  }
})





/**
 * 1. create registry and move effect definitions to use registry 
 *    (removing Effects, EffectMap, defaultPostProcessingSchema etc in PostProcessing.ts)
 * 
 * 2. register each effect into the registry
 * 
 * 3. refactor PostProcessingComponent to use the registry definitions and mount sub-reactors for each effect
 * 
 * 4. refactor studio editor to use the registry definition's schemas for generating UI
 */