Model Transform in Cloud

.vscode/launch.json

@@ -96,6 +96,12 @@
             "request": "launch",
             "type": "node-terminal",
         },
+        {
+            "command": "npm run dev-tabs",
+            "name": "npm run dev-tabs",
+            "request": "launch",
+            "type": "node-terminal",
+        },
         {
             "command": "npm run prepare-database",
             "name": "npm run prepare-database",

packages/common/src/utils/CommonKnownContentTypes.ts

@@ -46,7 +46,8 @@ export const CommonKnownContentTypes = {
   tsx: 'application/octet-stream',
   ts: 'application/octet-stream',
   js: 'application/octet-stream',
-  json: 'application/json'
+  json: 'application/json',
+  bin: 'application/octet-stream'
 }
 
 export const MimeTypeToExtension = {

packages/common/src/utils/miscUtils.ts

@@ -70,3 +70,39 @@ export function arraysAreEqual(arr1: any[], arr2: any[]): boolean {
 
   return true
 }
+
+export function pathJoin(...parts: string[]): string {
+  const separator = '/'
+
+  return parts
+    .map((part, index) => {
+      // If it's the first part, we only want to remove trailing slashes
+      if (index === 0) {
+        while (part.endsWith(separator)) {
+          part = part.substring(0, part.length - 1)
+        }
+      }
+      // If it's the last part, we only want to remove leading slashes
+      else if (index === parts.length - 1) {
+        while (part.startsWith(separator)) {
+          part = part.substring(1)
+        }
+      }
+      // For all other parts, remove leading and trailing slashes
+      else {
+        while (part.startsWith(separator)) {
+          part = part.substring(1)
+        }
+        while (part.endsWith(separator)) {
+          part = part.substring(0, part.length - 1)
+        }
+      }
+
+      return part
+    })
+    .join(separator)
+}
+
+export function baseName(path: string): string {
+  return path.split(/[\\/]/).pop()!
+}

packages/common/src/utils/objectToCommandLineArgs.ts

@@ -0,0 +1,84 @@
+/*
+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.
+*/
+
+function castValue(value, type) {
+  switch (type.toLowerCase()) {
+    case 'number':
+      return parseFloat(value)
+    case 'boolean':
+      return value === 'true'
+    case 'string':
+      return value
+    default:
+      return value
+  }
+}
+
+export function objectToArgs(obj: any, prefix = '') {
+  const args: string[] = []
+
+  for (const [key, value] of Object.entries(obj)) {
+    let newPrefix = prefix ? `${prefix}_${key}` : `${key}`
+
+    if (Array.isArray(value)) {
+      value.forEach((item, index) => {
+        args.push(...objectToArgs(item, `${newPrefix}_${index}`))
+      })
+    } else if (value !== null && typeof value === 'object') {
+      args.push(...objectToArgs(value, newPrefix))
+    } else {
+      const type = typeof value
+      args.push(`--${newPrefix}_${type}`, String(value))
+    }
+  }
+
+  return args
+}
+
+export function argsToObject(args: string[]): any {
+  const obj: Record<string, any> = {}
+  for (let i = 0; i < args.length; i += 2) {
+    const arg = args[i]
+    const value = args[i + 1]
+
+    const keys: string[] = arg.slice(2).split('_')
+    const type = keys.pop()
+    const parsedKeys = keys.map((key, i) => (isNaN(Number.parseFloat(keys[i])) ? key.toLowerCase() : Number(key)))
+
+    let current = obj
+
+    parsedKeys.forEach((key, index) => {
+      if (index === keys.length - 1) {
+        current[key] = castValue(value, type)
+      } else {
+        if (current[key] === undefined) {
+          current[key] = typeof keys[index + 1] === 'number' ? [] : {}
+        }
+        current = current[key]
+      }
+    })
+  }
+  return obj
+}

packages/editor/src/components/assets/CompressionPanel.tsx

@@ -26,7 +26,6 @@ Ethereal Engine. All Rights Reserved.
 import { t } from 'i18next'
 import React from 'react'
 
-import { API } from '@etherealengine/client-core/src/API'
 import Button from '@etherealengine/client-core/src/common/components/Button'
 import Menu from '@etherealengine/client-core/src/common/components/Menu'
 import { uploadToFeathersService } from '@etherealengine/client-core/src/util/upload'
@@ -123,15 +122,6 @@ export default function CompressionPanel({
     openCompress.set(false)
   }
 
-  /** @todo */
-  const compressContent = async () => {
-    const props = fileProperties.value
-    compressProperties.src.set(props.type === 'folder' ? `${props.url}/${props.key}` : props.url)
-    const compressedPath = await API.instance.client.service('ktx2-encode').create(compressProperties.value)
-    await onRefreshDirectory()
-    openCompress.set(false)
-  }
-
   return (
     <Menu
       open={openCompress.value}

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

@@ -48,6 +48,8 @@ import { getModelResources } from '@etherealengine/engine/src/scene/functions/lo
 import { useHookstate } from '@etherealengine/hyperflux'
 import { getMutableState, State } from '@etherealengine/hyperflux/functions/StateFunctions'
 
+import { transformModel as clientSideTransformModel } from '@etherealengine/engine/src/assets/compression/ModelTransformFunctions'
+import { modelTransformPath } from '@etherealengine/engine/src/schemas/assets/model-transform.schema'
 import exportGLTF from '../../functions/exportGLTF'
 import { SelectionState } from '../../services/SelectionServices'
 import BooleanInput from '../inputs/BooleanInput'
@@ -58,8 +60,6 @@ import TexturePreviewInput from '../inputs/TexturePreviewInput'
 import CollapsibleBlock from '../layout/CollapsibleBlock'
 import GLTFTransformProperties from './GLTFTransformProperties'
 import LightmapBakerProperties from './LightmapBakerProperties'
-
-import { modelTransformPath } from '@etherealengine/engine/src/schemas/assets/model-transform.schema'
 import './ModelTransformProperties.css'
 
 export default function ModelTransformProperties({
@@ -73,9 +73,10 @@ export default function ModelTransformProperties({
   const selectionState = useHookstate(getMutableState(SelectionState))
   const transforming = useHookstate<boolean>(false)
   const transformHistory = useHookstate<string[]>([])
-
+  const isClientside = useHookstate<boolean>(false)
   const transformParms = useHookstate<ModelTransformParameters>({
     ...DefaultModelTransformParameters,
+    src: modelState.src.value,
     modelFormat: modelState.src.value.endsWith('.gltf') ? 'gltf' : 'glb'
   })
 
@@ -133,10 +134,12 @@ export default function ModelTransformProperties({
     (modelState: State<ComponentType<typeof ModelComponent>>) => async () => {
       transforming.set(true)
       const modelSrc = modelState.src.value
-      const nuPath = await Engine.instance.api.service(modelTransformPath).create({
-        src: modelSrc,
-        transformParameters: transformParms.value
-      })
+      if (isClientside.value) {
+        await clientSideTransformModel(transformParms.value)
+      } else {
+        await Engine.instance.api.service(modelTransformPath).create(transformParms.value)
+      }
+      const nuPath = modelSrc.replace(/\.glb$/, '-transformed.glb')
       transformHistory.set([modelSrc, ...transformHistory.value])
       const [_, directoryToRefresh, fileName] = /.*\/(projects\/.*)\/([\w\d\s\-_.]*)$/.exec(nuPath)!
       await FileBrowserService.fetchFiles(directoryToRefresh)
@@ -182,10 +185,7 @@ export default function ModelTransformProperties({
       console.log('saved baked model')
       //perform gltf transform
       console.log('transforming model at ' + bakedPath + '...')
-      const transformedPath = await Engine.instance.api.service(modelTransformPath).create({
-        src: bakedPath,
-        transformParameters: transformParms.value
-      })
+      const transformedPath = await Engine.instance.api.service(modelTransformPath).create(transformParms.value)
       console.log('transformed model into ' + transformedPath)
       onChangeModel(transformedPath)
     }
@@ -211,9 +211,19 @@ export default function ModelTransformProperties({
           onChange={(transformParms: ModelTransformParameters) => {}}
         />
         {!transforming.value && (
-          <button className="OptimizeButton button" onClick={onTransformModel(modelState)}>
-            Optimize
-          </button>
+          <>
+            <InputGroup name="Clientside Transform" label="Clientside Transform">
+              <BooleanInput
+                value={isClientside.value}
+                onChange={(val: boolean) => {
+                  isClientside.set(val)
+                }}
+              />
+            </InputGroup>
+            <button className="OptimizeButton button" onClick={onTransformModel(modelState)}>
+              Optimize
+            </button>
+          </>
         )}
         {transforming.value && <p>Transforming...</p>}
         {transformHistory.length > 0 && <Button onClick={onUndoTransform}>Undo</Button>}

packages/editor/src/pages/EditorPage.tsx

@@ -51,6 +51,7 @@ import { GizmoSystem } from '../systems/GizmoSystem'
 import { ModelHandlingSystem } from '../systems/ModelHandlingSystem'
 
 import { useDefaultLocationSystems } from '@etherealengine/client-core/src/world/useDefaultLocationSystems'
+import { UploadRequestSystem } from '../systems/UploadRequestSystem'
 
 // ensure all our systems are imported, #9077
 const EditorSystemsReferenced = [useDefaultLocationSystems]
@@ -59,7 +60,7 @@ const editorSystems = () => {
   startSystems([EditorFlyControlSystem, EditorControlSystem, EditorCameraSystem, GizmoSystem], {
     before: PresentationSystemGroup
   })
-  startSystems([ModelHandlingSystem], { with: SimulationSystemGroup })
+  startSystems([ModelHandlingSystem, UploadRequestSystem], { with: SimulationSystemGroup })
 
   startSystems([EditorInstanceNetworkingSystem, ClientNetworkingSystem, RenderInfoSystem], {
     after: PresentationSystemGroup

packages/editor/src/systems/UploadRequestSystem.tsx

@@ -0,0 +1,51 @@
+/*
+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 { defineSystem } from '@etherealengine/engine/src/ecs/functions/SystemFunctions'
+import { defineAction, getMutableState, useState } from '@etherealengine/hyperflux'
+import { useEffect } from 'react'
+
+import { UploadRequestState } from '@etherealengine/engine/src/assets/state/UploadRequestState'
+import { uploadProjectFiles } from '../functions/assetFunctions'
+
+const clearUploadQueueAction = defineAction({
+  type: 'ee.editor.clearUploadQueueAction'
+})
+
+export const UploadRequestSystem = defineSystem({
+  uuid: 'ee.editor.UploadRequestSystem',
+  reactor: () => {
+    const uploadRequestState = useState(getMutableState(UploadRequestState))
+    useEffect(() => {
+      const uploadRequests = uploadRequestState.queue.value
+      if (uploadRequests.length === 0) return
+      const uploadPromises = uploadRequests.map((uploadRequest) => {
+        return uploadProjectFiles(uploadRequest.projectName, [uploadRequest.file], true)
+      })
+      uploadRequestState.queue.set([])
+    }, [uploadRequestState.queue.length])
+    return null
+  }
+})

packages/engine/src/assets/classes/ModelTransform.ts

@@ -101,13 +101,15 @@ export type ResourceTransforms = {
 }
 
 export type ModelTransformParameters = ExtractedImageTransformParameters & {
+  src: string
   dst: string
   resourceUri: string
   split: boolean
   combineMaterials: boolean
   instance: boolean
   dedup: boolean
   flatten: boolean
+
   join: {
     enabled: boolean
     options: JoinOptions
@@ -117,27 +119,33 @@ export type ModelTransformParameters = ExtractedImageTransformParameters & {
     enabled: boolean
     options: PaletteOptions
   }
+
   prune: boolean
   reorder: boolean
   resample: boolean
+
   weld: {
     enabled: boolean
     tolerance: number
   }
+
   meshoptCompression: {
     enabled: boolean
     options: GLTFPackOptions
   }
+
   dracoCompression: {
     enabled: boolean
     options: DracoOptions
   }
+
   modelFormat: 'glb' | 'gltf'
 
   resources: ResourceTransforms
 }
 
 export const DefaultModelTransformParameters: ModelTransformParameters = {
+  src: '',
   dst: '',
   resourceUri: '',
   modelFormat: 'gltf',