rewrite reactive UVOL

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

@@ -32,7 +32,6 @@ import { VolumetricComponent } from '@etherealengine/engine/src/scene/components
 import { PlayMode } from '@etherealengine/engine/src/scene/constants/PlayMode'
 
 import VideocamIcon from '@mui/icons-material/Videocam'
-
 import { ItemTypes } from '../../constants/AssetTypes'
 import ArrayInputGroup from '../inputs/ArrayInputGroup'
 import BooleanInput from '../inputs/BooleanInput'
@@ -93,13 +92,13 @@ export const VolumetricNodeEditor: EditorComponentType = (props) => {
       </InputGroup>
 
       <InputGroup
-        name="Auto Play"
-        label={t('editor:properties.media.lbl-paused')}
-        info={t('editor:properties.media.info-paused')}
+        name="Autoplay"
+        label={t('editor:properties.media.lbl-autoplay')}
+        info={t('editor:properties.media.info-autoplay')}
       >
         <BooleanInput
-          value={volumetricComponent.paused.value}
-          onChange={commitProperty(VolumetricComponent, 'paused')}
+          onChange={commitProperty(VolumetricComponent, 'autoplay')}
+          value={volumetricComponent.autoplay.value}
         />
       </InputGroup>
 
@@ -133,7 +132,7 @@ export const VolumetricNodeEditor: EditorComponentType = (props) => {
         />
         {volumetricComponent.paths && volumetricComponent.paths.length > 0 && volumetricComponent.paths[0] && (
           <Button style={{ marginLeft: '5px', width: '60px' }} type="submit" onClick={toggle}>
-            {volumetricComponent.paused
+            {volumetricComponent.paused.value
               ? t('editor:properties.media.playtitle')
               : t('editor:properties.media.pausetitle')}
           </Button>

packages/engine/src/assets/functions/createGLTFLoader.ts

@@ -69,6 +69,9 @@ export const createGLTFLoader = (keepMaterials = false) => {
   loader.register((parser) => new HubsComponentsExtension(parser))
   loader.register((parser) => new VRMLoaderPlugin(parser, { helperRoot: new Group(), autoUpdateHumanBones: true }))
   loader.register((parser) => new CachedImageLoadExtension(parser))
+  if (MeshoptDecoder.useWorkers) {
+    MeshoptDecoder.useWorkers(2)
+  }
   loader.setMeshoptDecoder(MeshoptDecoder)
 
   if (isClient) {

packages/engine/src/assets/loaders/corto/CORTOLoader.d.ts

@@ -0,0 +1,41 @@
+
+/*
+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 { BufferGeometry, Loader, LoadingManager } from 'three'
+
+export class CORTOLoader {
+  constructor()
+  setDecoderPath(path: string): CORTOLoader
+  load(
+    url: string,
+    byteStart: number,
+    byteEnd: number,
+    onLoad: (geometry: BufferGeometry | null) => void,
+  ): void
+  preload(): Promise<void>
+  dispose(): CORTOLoader
+}

packages/engine/src/assets/loaders/corto/CORTOLoader.js

@@ -0,0 +1,130 @@
+
+/*
+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 { BufferAttribute, BufferGeometry, FileLoader } from 'three'
+
+class CORTOLoader {
+  constructor() {
+    this.decoderPath = ''
+    this.decoderPending = null
+
+    this.worker = null
+    this.lastRequest = 0
+    this.callbacks = {}
+
+    this.defaultAttributes = [
+      { name: 'position', numComponents: '3' },
+      { name: 'normal', numComponents: '3' },
+      { name: 'color', numComponents: '4' },
+      { name: 'uv', numComponents: '2' }
+    ]
+  }
+
+  setDecoderPath(path) {
+    this.decoderPath = path
+    return this
+  }
+
+  load(url, byteStart, byteEnd, onLoad) {
+    if (!this.decoderPending) {
+      this.preload()
+    }
+
+    this.decoderPending.then(() => {
+      const request = this.lastRequest++
+      this.worker.postMessage({
+        request: request,
+        url: url,
+        byteStart: byteStart,
+        byteEnd: byteEnd
+      })
+      this.callbacks[request] = { onLoad: onLoad }
+    })
+  }
+
+  preload() {
+    if (this.decoderPending) return this.decoderPending
+
+    let that = this
+    let callbacks = this.callbacks
+    let lib = 'corto.js'
+
+    this.decoderPending = this._loadLibrary(lib, 'text').then((text) => {
+      text = URL.createObjectURL(new Blob([text]))
+      this.worker = new Worker(text)
+
+      this.worker.onmessage = function (e) {
+        var message = e.data
+        if (!callbacks[message.request]) return
+
+        const callback = callbacks[message.request]
+        const geometry = that._createGeometry(message.geometry)
+        callback.onLoad(geometry)
+        delete callbacks[message.request]
+      }
+    })
+
+    return this.decoderPending
+  }
+
+  dispose() {
+    if (this.worker) {
+      this.worker.terminate()
+      this.worker = null
+    }
+    return this
+  }
+
+  _createGeometry(geometry) {
+    if (!geometry) {
+      return null
+    }
+    var bufferGeometry = new BufferGeometry()
+
+    if (geometry.index) bufferGeometry.setIndex(new BufferAttribute(geometry.index, 1))
+
+    for (let i = 0; i < this.defaultAttributes.length; i++) {
+      let attr = this.defaultAttributes[i]
+      if (!geometry[attr.name]) continue
+      let buffer = geometry[attr.name]
+      bufferGeometry.setAttribute(attr.name, new BufferAttribute(buffer, attr.numComponents))
+    }
+    return bufferGeometry
+  }
+
+  _loadLibrary(url, responseType) {
+    var loader = new FileLoader(this.manager)
+    loader.setPath(this.decoderPath)
+    loader.setResponseType(responseType)
+
+    return new Promise((resolve, reject) => {
+      loader.load(url, resolve, undefined, reject)
+    })
+  }
+}
+
+export { CORTOLoader }

packages/engine/src/assets/loaders/gltf/KTX2Loader.d.ts

@@ -44,7 +44,7 @@ export class KTX2Loader extends CompressedTextureLoader {
     load(
         url: string,
         onLoad: (texture: CompressedTexture) => void,
-        onProgress: (requrest: ProgressEvent<EventTarget>) => void | undefined,
-        onError: ((event: ErrorEvent) => void) | undefined
+        onProgress?: (requrest: ProgressEvent<EventTarget>) => void | undefined,
+        onError?: ((event: ErrorEvent) => void) | undefined
     ): CompressedTexture
 }

packages/engine/src/audio/components/PositionalAudioComponent.ts

@@ -27,6 +27,7 @@ import { useEffect } from 'react'
 
 import {
   defineComponent,
+  hasComponent,
   setComponent,
   useComponent,
   useOptionalComponent
@@ -38,6 +39,7 @@ import { useEntityContext } from '../../ecs/functions/EntityFunctions'
 import { RendererState } from '../../renderer/RendererState'
 import { addObjectToGroup, removeObjectFromGroup } from '../../scene/components/GroupComponent'
 import { AudioNodeGroups, MediaComponent, MediaElementComponent } from '../../scene/components/MediaComponent'
+import { VolumetricComponent } from '../../scene/components/VolumetricComponent'
 import { ObjectLayers } from '../../scene/constants/ObjectLayers'
 import { setObjectLayers } from '../../scene/functions/setObjectLayers'
 
@@ -71,6 +73,7 @@ export const PositionalAudioComponent = defineComponent({
   },
 
   onSet: (entity, component, json) => {
+    if (hasComponent(entity, VolumetricComponent) || hasComponent(entity, MediaComponent)) return
     setComponent(entity, MediaComponent, {})
 
     if (!json) return

packages/engine/src/audio/systems/MediaSystem.ts

@@ -36,7 +36,6 @@ import { EngineRenderer } from '../../renderer/WebGLRendererSystem'
 import { StandardCallbacks, setCallback } from '../../scene/components/CallbackComponent'
 import { MediaComponent } from '../../scene/components/MediaComponent'
 import { VideoComponent, VideoTexturePriorityQueueState } from '../../scene/components/VideoComponent'
-import { VolumetricComponent, endLoadingEffect } from '../../scene/components/VolumetricComponent'
 import { AudioState, useAudioState } from '../AudioState'
 import { PositionalAudioComponent } from '../components/PositionalAudioComponent'
 
@@ -102,7 +101,6 @@ globalThis.AudioEffectPlayer = AudioEffectPlayer
 
 const mediaQuery = defineQuery([MediaComponent])
 const videoQuery = defineQuery([VideoComponent])
-const volumetricQuery = defineQuery([VolumetricComponent])
 const audioQuery = defineQuery([PositionalAudioComponent])
 
 const execute = () => {
@@ -112,30 +110,6 @@ const execute = () => {
     setCallback(entity, StandardCallbacks.PAUSE, () => media.paused.set(true))
   }
 
-  for (const entity of volumetricQuery()) {
-    const volumetric = getComponent(entity, VolumetricComponent)
-    const player = volumetric.player
-    if (player) {
-      player.update()
-      const height = volumetric.height
-      const step = volumetric.height / 150
-      if (volumetric.loadingEffectActive && player.mesh) {
-        if (volumetric.loadingEffectTime <= height) {
-          player.mesh.traverse((child: any) => {
-            if (child['material']) {
-              if (child.material.uniforms) {
-                child.material.uniforms.time = volumetric.loadingEffectTime
-              }
-            }
-          })
-          volumetric.loadingEffectTime += step
-        } else {
-          volumetric.loadingEffectActive = false
-          endLoadingEffect(entity, player.mesh)
-        }
-      }
-    }
-  }
   for (const entity of audioQuery()) getComponent(entity, PositionalAudioComponent).helper?.update()
 
   const videoPriorityQueue = getState(VideoTexturePriorityQueueState).queue

packages/engine/src/ecs/classes/Engine.ts

@@ -40,6 +40,7 @@ import type { ServiceTypes } from '@etherealengine/common/declarations'
 import { PeerID } from '@etherealengine/common/src/interfaces/PeerID'
 
 import { getAllEntities } from 'bitecs'
+import { CORTOLoader } from '../../assets/loaders/corto/CORTOLoader'
 import { Timer } from '../../common/functions/Timer'
 import { NetworkState } from '../../networking/NetworkState'
 import { Query, QueryComponents, removeQuery } from '../functions/ComponentFunctions'
@@ -76,6 +77,8 @@ export class Engine {
 
   engineTimer = null! as ReturnType<typeof Timer>
 
+  cortoLoader: CORTOLoader = null!
+
   /**
    * Reference to the three.js scene object.
    */