UVOL Refactor (#10085)

* Add Playlist Component

* Add remaining features to PlaylistComponent

* Add paused property to PlaylistComponent

* Add BufferData Data stucture

* Move timeUnit out of BufferDataContainer

* Fix minor bug

* Add metric tracking to BufferContainer

* Add fetching functions

* Basic structure of loading manifest & Playlist Improvements

* Add license

* Add pause/play logic

* Read & Process manifest

* Create appropriate material for track

* Create materials, mesh & group.

Dispose them properly after every track/change in track

* Set memory limits for geometry & texture buffers

* Add geometry buffering

* texture buffering + BufferContainer bug fix

* update fetchTime correctly

* Added video/audio buffering

Fixed bugs with BufferDataContainer

* Render geometry (all types)

* interpolate normals

* Remove GLB geometry format

* Add texture playback and improved loading with bufferLimits across different formats

* IR-244 Play after all initial buffers are loaded

* Delete used geometry & texture buffers

* Autotune geometry & texture targets

* Fix video texture playaback

* Fix playback and Buffering bugs

* Improve corto buffering

* Add autoplay

* React to autoplay (Modern Volumetrics)

* Clear buffer maps on cleanup

* Improve media autoplay

* Added scrubber + Improved track transitioning

* Add volume to node editor

* Increase max buffer loaded

* Use globalMap to store mutables

Latest hookstate doesn't allow to modify state through proxy

* Remove logs & use Immutable array in NodeEditor

* Use ImmutableArray for SelectInput Options

* Save PlaylistComponent to the snapshot

* Tie up components to node editors

* Dont start playback without initial buffers

* fix snapshot issues

* save track changes to snapshot

* node editor fixes

* Handle deleting current track

* Fix SelectInput typing

---------

Co-authored-by: Gheric Speiginer <[email protected]>
Co-authored-by: Daniel Belmes <[email protected]>
Co-authored-by: Daniel Belmes <[email protected]>

packages/editor/src/components/inputs/StringInput.tsx

@@ -41,6 +41,7 @@ interface StyledStringInputProps {
   onBlur?: (e: FocusEvent<HTMLInputElement>) => void
   onKeyUp?: any
   value?: string
+  style?: React.CSSProperties
 }
 
 const StyledStringInput = React.forwardRef<any, StyledStringInputProps>(
@@ -73,6 +74,7 @@ export interface StringInputProps {
   type?: string
   placeholder?: string
   disabled?: boolean
+  style?: React.CSSProperties
 }
 
 const StringInput = React.forwardRef<any, StringInputProps>(({ onChange, onRelease, ...rest }, ref) => {

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

@@ -0,0 +1,161 @@
+/*
+CPAL-1.0 License
+
+The contents of this file are subject to the Common Public Attribution License
+Version 1.0. (the "License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+https://github.com/EtherealEngine/etherealengine/blob/dev/LICENSE.
+The License is based on the Mozilla Public License Version 1.1, but Sections 14
+and 15 have been added to cover use of software over a computer network and 
+provide for limited attribution for the Original Developer. In addition, 
+Exhibit A has been modified to be consistent with Exhibit B.
+
+Software distributed under the License is distributed on an "AS IS" basis,
+WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the
+specific language governing rights and limitations under the License.
+
+The Original Code is Ethereal Engine.
+
+The Original Developer is the Initial Developer. The Initial Developer of the
+Original Code is the Ethereal Engine team.
+
+All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023 
+Ethereal Engine. All Rights Reserved.
+*/
+
+import { Entity, hasComponent, useComponent } from '@etherealengine/ecs'
+import { NewVolumetricComponent } from '@etherealengine/engine/src/scene/components/NewVolumetricComponent'
+import { PlaylistComponent } from '@etherealengine/engine/src/scene/components/PlaylistComponent'
+import { TextureType } from '@etherealengine/engine/src/scene/constants/UVOLTypes'
+import { NO_PROXY, useHookstate } from '@etherealengine/hyperflux'
+import { t } from 'i18next'
+import React, { useEffect } from 'react'
+import { Scrubber } from 'react-scrubber'
+import { EditorControlFunctions } from '../../functions/EditorControlFunctions'
+import { SelectionState } from '../../services/SelectionServices'
+import CompoundNumericInput from '../inputs/CompoundNumericInput'
+import InputGroup from '../inputs/InputGroup'
+import SelectInput from '../inputs/SelectInput'
+import NodeEditor from './NodeEditor'
+import { EditorComponentType, commitProperty, updateProperty } from './Util'
+
+interface OptionsType {
+  value: number
+  label: string
+}
+
+export const NewVolumetricNodeEditor: EditorComponentType = (props) => {
+  const component = useComponent(props.entity, NewVolumetricComponent)
+
+  const geometryTargets = useHookstate([] as OptionsType[])
+  const textureTargets = useHookstate({} as Partial<Record<TextureType, OptionsType[]>>)
+
+  useEffect(() => {
+    if (!hasComponent(props.entity, PlaylistComponent)) {
+      const nodes = SelectionState.getSelectedEntities()
+      EditorControlFunctions.addOrRemoveComponent(nodes, PlaylistComponent, true)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (component.geometry.targets.length > 0) {
+      const targetOptions = [] as OptionsType[]
+      const targets = component.geometry.targets.value
+      targets.forEach((target, index) => {
+        targetOptions.push({ value: index, label: target })
+      })
+      geometryTargets.set(targetOptions)
+    }
+  }, [component.geometry.targets])
+
+  useEffect(() => {
+    const textureInfo = component.texture.get(NO_PROXY)
+    for (const [textureType, textureTypeInfo] of Object.entries(textureInfo)) {
+      const targetOptions = [] as OptionsType[]
+      const targets = textureTypeInfo.targets
+      targets.forEach((target, index) => {
+        targetOptions.push({ value: index, label: target })
+      })
+      textureTargets.merge({
+        [textureType as TextureType]: targetOptions
+      })
+    }
+  }, [component.texture])
+
+  return (
+    <NodeEditor
+      {...props}
+      name={t('editor:properties.volumetric.name')}
+      description={t('editor:properties.volumetric.description')}
+    >
+      <InputGroup name="Volume" label={t('editor:properties.media.lbl-volume')}>
+        <CompoundNumericInput
+          min={0}
+          max={1}
+          step={0.01}
+          value={component.volume.value}
+          onChange={updateProperty(NewVolumetricComponent, 'volume')}
+          onRelease={commitProperty(NewVolumetricComponent, 'volume')}
+        />
+      </InputGroup>
+
+      {component.geometry.targets.length > 0 && (
+        <InputGroup name="Geometry Target" label="Geometry Target">
+          <SelectInput
+            options={geometryTargets.value as Array<OptionsType>}
+            value={
+              component.geometry.userTarget.value === -1
+                ? component.geometry.currentTarget.value
+                : component.geometry.userTarget.value
+            }
+            onChange={(value: number) => {
+              component.geometry.userTarget.set(value)
+            }}
+          />
+        </InputGroup>
+      )}
+
+      {textureTargets.value &&
+        Object.keys(textureTargets.value).map((textureType) => {
+          const userTarget = component.texture[textureType as TextureType].value?.userTarget ?? -1
+          const currentTarget = component.texture[textureType as TextureType].value?.currentTarget ?? 0
+          const value = userTarget === -1 ? currentTarget : userTarget
+
+          return (
+            <InputGroup key={props.entity} name={`${textureType} targets`} label={`${textureType} targets`}>
+              <SelectInput
+                options={textureTargets.value[textureType]}
+                value={value}
+                onChange={(value: number) => {
+                  component.texture[textureType as TextureType].merge({
+                    userTarget: value
+                  })
+                }}
+              />
+            </InputGroup>
+          )
+        })}
+
+      <TimeScrubber entity={props.entity} />
+    </NodeEditor>
+  )
+}
+
+function TimeScrubber(props: { entity: Entity }) {
+  const component = useComponent(props.entity, NewVolumetricComponent)
+  return (
+    <InputGroup name="Current Time" label="Current Time">
+      <Scrubber
+        min={0}
+        max={component.time.duration.value}
+        value={component.time.currentTime.value / 1000}
+        bufferPosition={component.time.bufferedUntil.value / 1000}
+        tooltip={{
+          enabledOnHover: true
+        }}
+      />
+    </InputGroup>
+  )
+
+  return null
+}