UVOL improvements (#9566)

* fix incorrect states in useEffect dependency

* Add dropdowns to select geometry & texture targets

* Remove lastUpdatedTime state (redundant)

* Add track dropdowns

* Add playbackRate to NodeEditor

* Legible variable names

* Set few helper states

* Fix Scrubber

Author: CITIZENDOT

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

@@ -30,7 +30,8 @@ import { VolumetricFileTypes } from '@etherealengine/engine/src/assets/constants
 import {
   getOptionalMutableComponent,
   hasComponent,
-  useComponent
+  useComponent,
+  useOptionalComponent
 } from '@etherealengine/engine/src/ecs/functions/ComponentFunctions'
 import { VolumetricComponent } from '@etherealengine/engine/src/scene/components/VolumetricComponent'
 import { PlayMode } from '@etherealengine/engine/src/scene/constants/PlayMode'
@@ -39,6 +40,7 @@ import { EngineState } from '@etherealengine/engine/src/ecs/classes/EngineState'
 import { Entity } from '@etherealengine/engine/src/ecs/classes/Entity'
 import { UVOL1Component } from '@etherealengine/engine/src/scene/components/UVOL1Component'
 import { UVOL2Component } from '@etherealengine/engine/src/scene/components/UVOL2Component'
+import { TextureType } from '@etherealengine/engine/src/scene/constants/UVOLTypes'
 import { getState } from '@etherealengine/hyperflux/functions/StateFunctions'
 import VideocamIcon from '@mui/icons-material/Videocam'
 import { ItemTypes } from '../../constants/AssetTypes'
@@ -48,7 +50,6 @@ import { Button } from '../inputs/Button'
 import CompoundNumericInput from '../inputs/CompoundNumericInput'
 import InputGroup from '../inputs/InputGroup'
 import SelectInput from '../inputs/SelectInput'
-import StringInput from '../inputs/StringInput'
 import NodeEditor from './NodeEditor'
 import { EditorComponentType, commitProperty, updateProperty } from './Util'
 
@@ -71,6 +72,13 @@ const PlayModeOptions = [
   }
 ]
 
+type TextureTargetLabelsType = {
+  [key in TextureType]: {
+    label: string
+    value: number
+  }[]
+}
+
 /**
  * VolumetricNodeEditor provides the editor view to customize properties.
  *
@@ -79,22 +87,39 @@ const PlayModeOptions = [
  */
 export const VolumetricNodeEditor: EditorComponentType = (props) => {
   const { t } = useTranslation()
-  const [trackLabel, setTrackLabel] = React.useState('')
 
   const volumetricComponent = useComponent(props.entity, VolumetricComponent)
 
   const toggle = () => {
     volumetricComponent.paused.set(!volumetricComponent.paused.value)
   }
 
+  const [trackLabels, setTrackLabels] = React.useState(
+    [] as {
+      label: string
+      value: number
+    }[]
+  )
+
   useEffect(() => {
     const tracks = volumetricComponent.paths.value
     if (tracks.length === 0) {
       return
     }
     if (tracks.length === 1) {
       const segments = tracks[0].split('/')
-      setTrackLabel(segments[segments.length - 1])
+      setTrackLabels([
+        {
+          label: segments[segments.length - 1],
+          value: 0
+        }
+      ])
+      console.log('Setting labels: ', [
+        {
+          label: segments[segments.length - 1],
+          value: 0
+        }
+      ])
       return
     }
 
@@ -106,11 +131,81 @@ export const VolumetricNodeEditor: EditorComponentType = (props) => {
         prefix = prefix.substring(0, prefix.length - 1)
       }
     }
+    const _trackLabels = [] as {
+      label: string
+      value: number
+    }[]
+
+    for (let i = 0; i < tracks.length; i++) {
+      _trackLabels.push({
+        label: tracks[i].slice(prefix.length),
+        value: i
+      })
+    }
+    setTrackLabels(_trackLabels)
+    console.log('Setting labels: ', _trackLabels)
+  }, [volumetricComponent.paths])
 
-    const currentTrackPath = tracks[volumetricComponent.track.value]
+  const uvol2 = useOptionalComponent(props.entity, UVOL2Component)
+  const [geometryTargets, setGeometryTargets] = React.useState(
+    [] as {
+      label: string
+      value: number
+    }[]
+  )
+
+  useEffect(() => {
+    if (uvol2) {
+      const _geometryTargets = [] as {
+        label: string
+        value: number
+      }[]
+      _geometryTargets.push({
+        label: 'auto',
+        value: -1
+      })
+      uvol2.geometryInfo.targets.value.forEach((target, index) => {
+        _geometryTargets.push({
+          label: target,
+          value: index
+        })
+      })
+      setGeometryTargets(_geometryTargets)
+    }
+  }, [uvol2?.geometryInfo.targets])
 
-    setTrackLabel(currentTrackPath.slice(prefix.length))
-  }, [volumetricComponent.track, volumetricComponent.ended, volumetricComponent.paths])
+  const [textureTargets, setTextureTargets] = React.useState({} as TextureTargetLabelsType)
+  useEffect(() => {
+    if (!uvol2) {
+      return
+    }
+    const textureTypes = uvol2.textureInfo.textureTypes.value
+    const _textureTargets = {} as TextureTargetLabelsType
+    textureTypes.forEach((textureType) => {
+      _textureTargets[textureType] = [] as {
+        label: string
+        value: number
+      }[]
+      _textureTargets[textureType].push({
+        label: 'auto',
+        value: -1
+      })
+      uvol2.textureInfo[textureType].targets.value.forEach((target, index) => {
+        _textureTargets[textureType].push({
+          label: target,
+          value: index
+        })
+      })
+    })
+    setTextureTargets(_textureTargets)
+  }, [
+    uvol2?.textureInfo.textureTypes,
+    uvol2?.textureInfo.baseColor.targets,
+    uvol2?.textureInfo.normal.targets,
+    uvol2?.textureInfo.emissive.targets,
+    uvol2?.textureInfo.metallicRoughness.targets,
+    uvol2?.textureInfo.occlusion.targets
+  ])
 
   return (
     <NodeEditor
@@ -161,6 +256,18 @@ export const VolumetricNodeEditor: EditorComponentType = (props) => {
         <VolumetricCurrentTimeScrubber entity={props.entity} />
       )}
 
+      <InputGroup name="Playback Rate" label="Playback Rate">
+        <CompoundNumericInput
+          value={volumetricComponent.currentTrackInfo.playbackRate.value}
+          min={0.5}
+          max={4}
+          step={0.1}
+          onChange={(value: number) => {
+            volumetricComponent.currentTrackInfo.playbackRate.set(value)
+          }}
+        />
+      </InputGroup>
+
       <InputGroup name="Play Mode" label={t('editor:properties.media.playmode')}>
         <SelectInput
           key={props.entity}
@@ -177,8 +284,48 @@ export const VolumetricNodeEditor: EditorComponentType = (props) => {
         )}
       </InputGroup>
 
+      {hasComponent(props.entity, UVOL2Component) && (
+        <>
+          <InputGroup name="Geometry Target" label="Geometry Target">
+            <SelectInput
+              key={props.entity}
+              options={geometryTargets}
+              value={uvol2?.geometryInfo.userTarget.value}
+              onChange={(value: number) => {
+                if (uvol2) {
+                  uvol2.geometryInfo.userTarget.set(value)
+                }
+              }}
+            />
+          </InputGroup>
+          {Object.keys(textureTargets).map((textureType, index) => {
+            return (
+              <InputGroup name={`${textureType} target`} label={`${textureType} target`} key={index}>
+                <SelectInput
+                  key={props.entity}
+                  options={textureTargets[textureType]}
+                  value={uvol2?.textureInfo[textureType].userTarget.value}
+                  onChange={(value: number) => {
+                    if (uvol2) {
+                      uvol2?.textureInfo[textureType].userTarget.set(value)
+                    }
+                  }}
+                />
+              </InputGroup>
+            )
+          })}
+        </>
+      )}
+
       <InputGroup name="Current Track" label="Current Track">
-        <StringInput value={trackLabel} />
+        <SelectInput
+          key={props.entity}
+          options={trackLabels}
+          value={trackLabels.length ? volumetricComponent.track.value : ''}
+          onChange={(value: number) => {
+            volumetricComponent.track.set(value)
+          }}
+        />
       </InputGroup>
     </NodeEditor>
   )
@@ -196,19 +343,10 @@ function VolumetricCurrentTimeScrubber(props: { entity: Entity }) {
         step={0.01}
         onChange={(value) => {
           const uvol2Component = getOptionalMutableComponent(props.entity, UVOL2Component)
-          const engineState = getState(EngineState)
-
-          volumetricComponent.startTime.set(value)
-          volumetricComponent.currentTrackInfo.currentTime.set(value)
-
           if (uvol2Component) {
-            uvol2Component.playbackStartTime.set(engineState.elapsedSeconds)
-            uvol2Component.geometryInfo.bufferHealth.set(0)
-            uvol2Component.textureInfo.textureTypes.value.forEach((textureType) => {
-              uvol2Component.textureInfo[textureType].bufferHealth.set(0)
-            })
+            const engineState = getState(EngineState)
+            UVOL2Component.setStartAndPlaybackTime(props.entity, value, engineState.elapsedSeconds)
           }
-          volumetricComponent.startTime.set(volumetricComponent.currentTrackInfo.currentTime.value)
         }}
         value={volumetricComponent.currentTrackInfo.currentTime.value}
       />

packages/engine/src/scene/components/UVOL1Component.ts

@@ -271,6 +271,10 @@ function UVOL1Reactor() {
     processFrame(frameToPlay)
   })
 
+  useEffect(() => {
+    video.playbackRate = volumetric.currentTrackInfo.playbackRate.value
+  }, [volumetric.currentTrackInfo.playbackRate])
+
   useExecute(
     () => {
       //do not execute if the cortoloader has not been initialized