iR 594 Audit and add postprocessing effects

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

@@ -23,10 +23,10 @@ All portions of the code written by the Ethereal Engine team are Copyright © 20
 Ethereal Engine. All Rights Reserved.
 */
 
-import { BlendFunction, VignetteTechnique } from 'postprocessing'
+import { BlendFunction, SMAAPreset, VignetteTechnique } from 'postprocessing'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Color } from 'three'
+import { Color, DisplayP3ColorSpace, LinearDisplayP3ColorSpace, LinearSRGBColorSpace, SRGBColorSpace } from 'three'
 
 import { useComponent } from '@etherealengine/ecs/src/ComponentFunctions'
 import { Effects } from '@etherealengine/spatial/src/renderer/effects/PostProcessing'
@@ -43,6 +43,9 @@ import ColorInput from '../inputs/ColorInput'
 import CompoundNumericInput from '../inputs/CompoundNumericInput'
 import InputGroup from '../inputs/InputGroup'
 import SelectInput from '../inputs/SelectInput'
+import TexturePreviewInput from '../inputs/TexturePreviewInput'
+import Vector2Input from '../inputs/Vector2Input'
+import Vector3Input from '../inputs/Vector3Input'
 import styles from '../styles.module.scss'
 import PropertyGroup from './PropertyGroup'
 import { EditorComponentType, commitProperties, commitProperty, updateProperty } from './Util'
@@ -52,10 +55,14 @@ enum PropertyTypes {
   Number,
   Boolean,
   Color,
+  ColorSpace,
   KernelSize,
   SMAAPreset,
   EdgeDetectionMode,
   PredicationMode,
+  Texture,
+  Vector2,
+  Vector3,
   VignetteTechnique
 }
 
@@ -90,7 +97,7 @@ const EffectsOptions: Partial<EffectOptionsType> = {
     intensity: { propertyType: PropertyTypes.Number, name: 'Intensity', min: 0, max: 10, step: 0.01 },
     fade: { propertyType: PropertyTypes.Number, name: 'Fade', min: -1, max: 1, step: 0.01 },
     resolutionScale: { propertyType: PropertyTypes.Number, name: 'Resolution Scale', min: -10, max: 10, step: 0.01 },
-    kernelSize: { propertyType: PropertyTypes.Number, name: 'Kerne Size', min: 1, max: 5, step: 1 },
+    kernelSize: { propertyType: PropertyTypes.KernelSize, name: 'KernelSize' },
     blur: { propertyType: PropertyTypes.Boolean, name: 'Blur' }
   },
   SSREffect: {
@@ -192,20 +199,142 @@ const EffectsOptions: Partial<EffectOptionsType> = {
     worldDistance: { propertyType: PropertyTypes.Number, name: 'World Distance', min: 0.01, max: 100, step: 0.01 },
     neighborhoodClamping: { propertyType: PropertyTypes.Boolean, name: 'Neighborhood Clamping' }
   },
+  VignetteEffect: {
+    blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' },
+    technique: { propertyType: PropertyTypes.VignetteTechnique, name: 'Technique' },
+    eskil: { propertyType: PropertyTypes.Boolean, name: 'Eskil' },
+    offset: { propertyType: PropertyTypes.Number, name: 'Offset', min: 0, max: 10, step: 0.1 },
+    darkness: { propertyType: PropertyTypes.Number, name: 'Darkness', min: 0, max: 10, step: 0.1 }
+  },
+  ChromaticAberrationEffect: {
+    offset: { propertyType: PropertyTypes.Vector2, name: 'Offset' },
+    radialModulation: { propertyType: PropertyTypes.Boolean, name: 'Radial Modulation' },
+    modulationOffset: { propertyType: PropertyTypes.Number, name: 'Modulation Offset', min: 0, max: 10, step: 0.01 }
+  },
+  ColorAverageEffect: {
+    blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' }
+  },
+  DotScreenEffect: {
+    blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' },
+    angle: { propertyType: PropertyTypes.Number, name: 'Angle', min: 0, max: 360, step: 0.1 },
+    scale: { propertyType: PropertyTypes.Number, name: 'Scale', min: 0, max: 10, step: 0.1 }
+  },
+  GlitchEffect: {
+    blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' },
+    chromaticAberrationOffset: { propertyType: PropertyTypes.Vector2, name: 'Chromatic Aberration Offset' },
+    delay: { propertyType: PropertyTypes.Vector2, name: 'Delay' },
+    duration: { propertyType: PropertyTypes.Vector2, name: 'Duration' },
+    strength: { propertyType: PropertyTypes.Vector2, name: 'Strength' },
+    perturbationMap: { propertyType: PropertyTypes.Texture, name: 'Perturbation Map' },
+    dtSize: { propertyType: PropertyTypes.Number, name: 'DT Size', min: 0, max: 10, step: 0.1 },
+    columns: { propertyType: PropertyTypes.Number, name: 'Columns', min: 0, max: 10, step: 0.1 },
+    ratio: { propertyType: PropertyTypes.Number, name: 'Ratio', min: 0, max: 10, step: 0.1 }
+  },
+  //GodRaysEffect: {
+  //  blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' },
+  //  samples: { propertyType: PropertyTypes.Number, name: 'Samples', min: 0, max: 10, step: 0.1 },
+  //  density: { propertyType: PropertyTypes.Number, name: 'Density', min: 0, max: 10, step: 0.1 },
+  //  decay: { propertyType: PropertyTypes.Number, name: 'Decay', min: 0, max: 10, step: 0.1 },
+  //  weight: { propertyType: PropertyTypes.Number, name: 'Weight', min: 0, max: 10, step: 0.1 },
+  //  exposure: { propertyType: PropertyTypes.Number, name: 'Exposure', min: 0, max: 10, step: 0.1 },
+  //  clampMax: { propertyType: PropertyTypes.Number, name: 'Clamp Max', min: 0, max: 10, step: 0.1 },
+  //  resolutionScale: { propertyType: PropertyTypes.Number, name: 'Resolution Scale', min: 0, max: 10, step: 0.1 },
+  //resolutionX?: number
+  //resolutionY?: number
+  //width?: number
+  //height?: number
+  //  kernelSize: { propertyType: PropertyTypes.KernelSize, name: 'KernelSize' },
+  //  blur: { propertyType: PropertyTypes.Boolean, name: 'Blur' }
+  //},
+  GridEffect: {
+    blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' },
+    scale: { propertyType: PropertyTypes.Number, name: 'Scale', min: 0, max: 10, step: 0.1 },
+    lineWidth: { propertyType: PropertyTypes.Number, name: 'Line Width', min: 0, max: 10, step: 0.1 }
+  },
+  LUT1DEffect: {
+    blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' },
+    lutPath: { propertyType: PropertyTypes.Texture, name: 'LUT' }
+  },
+  LUT3DEffect: {
+    blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' },
+    lutPath: { propertyType: PropertyTypes.Texture, name: 'LUT' },
+    inputColorSpace: { propertyType: PropertyTypes.ColorSpace, name: 'Input Color Space' }
+  },
   MotionBlurEffect: {
     intensity: { propertyType: PropertyTypes.Number, name: 'Intensity', min: 0, max: 10, step: 0.01 },
     jitter: { propertyType: PropertyTypes.Number, name: 'Jitter', min: 0, max: 10, step: 0.01 },
     samples: { propertyType: PropertyTypes.Number, name: 'Samples', min: 1, max: 64, step: 1 }
   },
-  VignetteEffect: {
+  OutlineEffect: {
+    blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' },
+    patternScale: { propertyType: PropertyTypes.Number, name: 'Pattern Scale', min: 0, max: 10, step: 0.01 },
+    edgeStrength: { propertyType: PropertyTypes.Number, name: 'Edge Strength', min: 0, max: 10, step: 0.01 },
+    pulseSpeed: { propertyType: PropertyTypes.Number, name: 'Pulse Speed', min: 0, max: 10, step: 0.01 },
+    visibleEdgeColor: { propertyType: PropertyTypes.Color, name: 'Visible Edge Color' },
+    hiddenEdgeColor: { propertyType: PropertyTypes.Color, name: 'Hidden Edge Color' },
+    multisampling: { propertyType: PropertyTypes.Number, name: 'Multisampling', min: 0, max: 10, step: 0.01 },
+    resolutionScale: { propertyType: PropertyTypes.Number, name: 'ResolutionScale', min: 0, max: 10, step: 0.01 },
+    blur: { propertyType: PropertyTypes.Boolean, name: 'Blur' },
+    xRay: { propertyType: PropertyTypes.Boolean, name: 'xRay' },
+    kernelSize: { propertyType: PropertyTypes.KernelSize, name: 'KernelSize' }
+    //resolutionX: Resolution.AUTO_SIZE,
+    //resolutionY: Resolution.AUTO_SIZE,
+    //width: Resolution.AUTO_SIZE,
+    //height: 480,
+  },
+  SMAAEffect: {
+    preset: { propertyType: PropertyTypes.SMAAPreset, name: 'Preset' }
+  },
+  TiltShiftEffect: {
     blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' },
-    technique: { propertyType: PropertyTypes.VignetteTechnique, name: 'Technique' },
-    eskil: { propertyType: PropertyTypes.Boolean, name: 'Eskil' },
     offset: { propertyType: PropertyTypes.Number, name: 'Offset', min: 0, max: 10, step: 0.1 },
-    darkness: { propertyType: PropertyTypes.Number, name: 'Darkness', min: 0, max: 10, step: 0.1 }
+    rotation: { propertyType: PropertyTypes.Number, name: 'Rotation', min: 0, max: 360, step: 0.1 },
+    focusArea: { propertyType: PropertyTypes.Number, name: 'Focus Area', min: 0, max: 10, step: 0.1 },
+    feather: { propertyType: PropertyTypes.Number, name: 'Feather', min: 0, max: 10, step: 0.1 },
+    bias: { propertyType: PropertyTypes.Number, name: 'Bias', min: 0, max: 10, step: 0.1 },
+    kernelSize: { propertyType: PropertyTypes.KernelSize, name: 'KernelSize' },
+    resolutionScale: { propertyType: PropertyTypes.Number, name: 'Resolution Scale', min: 0, max: 10, step: 0.1 }
+    //resolutionX: Resolution.AUTO_SIZE,
+    //resolutionY: Resolution.AUTO_SIZE
+  },
+  NoiseEffect: {
+    blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' },
+    premultiply: { propertyType: PropertyTypes.Boolean, name: 'Premultiply' }
+  },
+  PixelationEffect: {
+    granularity: { propertyType: PropertyTypes.Number, name: 'Granularity', min: 0, max: 1000, step: 1 }
+  },
+  ScanlineEffect: {
+    blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' },
+    density: { propertyType: PropertyTypes.Number, name: 'Density', min: 0, max: 10, step: 0.05 }
+  },
+  ShockWaveEffect: {
+    position: { propertyType: PropertyTypes.Vector3, name: 'Position' },
+    speed: { propertyType: PropertyTypes.Number, name: 'Speed', min: 0, max: 10, step: 0.05 },
+    maxRadius: { propertyType: PropertyTypes.Number, name: 'Max Radius', min: 0, max: 10, step: 0.05 },
+    waveSize: { propertyType: PropertyTypes.Number, name: 'Wave Size', min: 0, max: 10, step: 0.05 },
+    amplitude: { propertyType: PropertyTypes.Number, name: 'Amplitude', min: 0, max: 10, step: 0.05 }
+  },
+  FXAAEffect: {
+    blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' }
+  },
+  TextureEffect: {
+    blendFunction: { propertyType: PropertyTypes.BlendFunction, name: 'Blend Function' },
+    texturePath: { propertyType: PropertyTypes.Texture, name: 'Texture' },
+    aspectCorrection: { propertyType: PropertyTypes.Boolean, name: 'Aspect Correction' }
+  },
+  LensDistortionEffect: {
+    distortion: { propertyType: PropertyTypes.Vector2, name: 'Distortion' },
+    principalPoint: { propertyType: PropertyTypes.Vector2, name: 'Principal Point' },
+    focalLength: { propertyType: PropertyTypes.Vector2, name: 'Focal Length' },
+    skew: { propertyType: PropertyTypes.Number, name: 'Skew', min: 0, max: 10, step: 0.05 }
   }
 }
 
+const SMAAPresetSelect = Object.entries(SMAAPreset).map(([label, value]) => {
+  return { label, value }
+})
+
 const BlendFunctionSelect = Object.entries(BlendFunction).map(([label, value]) => {
   return { label, value }
 })
@@ -214,6 +343,14 @@ const VignetteTechniqueSelect = Object.entries(VignetteTechnique).map(([label, v
   return { label, value }
 })
 
+const ColorSpaceSelect = [
+  { label: 'NONE', value: '' },
+  { label: 'SRGB', value: SRGBColorSpace },
+  { label: 'SRGB LINEAR', value: LinearSRGBColorSpace },
+  { label: 'DISPLAY P3', value: DisplayP3ColorSpace },
+  { label: 'DISPLAY P3 LINEAR', value: LinearDisplayP3ColorSpace }
+]
+
 const KernelSizeSelect = [
   { label: 'VERY_SMALL', value: 0 },
   { label: 'SMALL', value: 1 },
@@ -223,13 +360,6 @@ const KernelSizeSelect = [
   { label: 'HUGE', value: 5 }
 ]
 
-const SMAAPreset = [
-  { label: 'LOW', value: 0 },
-  { label: 'MEDIUM', value: 1 },
-  { label: 'HIGH', value: 2 },
-  { label: 'ULTRA', value: 3 }
-]
-
 const EdgeDetectionMode = [
   { label: 'DEPTH', value: 0 },
   { label: 'LUMA', value: 1 },
@@ -281,6 +411,16 @@ export const PostProcessingSettingsEditor: EditorComponentType = (props) => {
         )
         break
 
+      case PropertyTypes.SMAAPreset:
+        renderVal = (
+          <SelectInput
+            options={SMAAPresetSelect}
+            onChange={commitProperty(PostProcessingComponent, `effects.${effectName}.${property}` as any)}
+            value={effectSettingState.value}
+          />
+        )
+        break
+
       case PropertyTypes.BlendFunction:
         renderVal = (
           <SelectInput
@@ -301,6 +441,32 @@ export const PostProcessingSettingsEditor: EditorComponentType = (props) => {
         )
         break
 
+      case PropertyTypes.Vector2:
+        renderVal = (
+          <Vector2Input
+            value={effectSettingState.value}
+            onChange={updateProperty(PostProcessingComponent, `effects.${effectName}.${property}` as any)}
+          />
+        )
+        break
+
+      case PropertyTypes.Vector3:
+        renderVal = (
+          <Vector3Input
+            value={effectSettingState.value}
+            onChange={updateProperty(PostProcessingComponent, `effects.${effectName}.${property}` as any)}
+          />
+        )
+        break
+
+      case PropertyTypes.Texture:
+        renderVal = (
+          <TexturePreviewInput
+            value={effectSettingState.value}
+            onRelease={updateProperty(PostProcessingComponent, `effects.${effectName}.${property}` as any)}
+          />
+        )
+        break
       case PropertyTypes.Color:
         renderVal = (
           <ColorInput
@@ -325,10 +491,10 @@ export const PostProcessingSettingsEditor: EditorComponentType = (props) => {
         )
         break
 
-      case PropertyTypes.SMAAPreset:
+      case PropertyTypes.ColorSpace:
         renderVal = (
           <SelectInput
-            options={SMAAPreset}
+            options={ColorSpaceSelect}
             onChange={commitProperty(PostProcessingComponent, `effects.${effectName}.${property}` as any)}
             value={effectSettingState.value}
           />