Improve LOD System

packages/client-core/i18n/en/editor.json

@@ -282,6 +282,7 @@
         "textureFormat": "Image Format"
       },
       "lods": {
+        "label": "Level of Detail",
         "serialize": "Serialize",
         "generate": "Generate LODs"
       }

packages/client-core/src/components/ConferenceMode/ConferenceModeParticipant.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames'
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 
 import { getAvatarURLForUser } from '@etherealengine/client-core/src/user/components/UserMenu/util'
 import { PeerID } from '@etherealengine/common/src/interfaces/PeerID'
@@ -16,6 +17,8 @@ interface Props {
   type: 'cam' | 'screen'
 }
 
+const { t } = useTranslation()
+
 const ConferenceModeParticipant = ({ peerID, type }: Props): JSX.Element => {
   const {
     user,
@@ -34,7 +37,6 @@ const ConferenceModeParticipant = ({ peerID, type }: Props): JSX.Element => {
     audioProducerPaused,
     videoProducerGlobalMute,
     audioProducerGlobalMute,
-    t,
     toggleAudio,
     toggleVideo,
     adjustVolume,

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

@@ -5,6 +5,7 @@ import { AssetLoader } from '@etherealengine/engine/src/assets/classes/AssetLoad
 import { ImageFileTypes, VideoFileTypes } from '@etherealengine/engine/src/assets/constants/fileTypes'
 import { AssetClass } from '@etherealengine/engine/src/assets/enum/AssetClass'
 import { useHookstate } from '@etherealengine/hyperflux'
+import Button from '@etherealengine/ui/src/Button'
 
 import { Stack } from '@mui/material'
 
@@ -97,6 +98,19 @@ export default function TexturePreviewInput({
             />
           </>
         )}
+        {value && (
+          <>
+            <div>
+              <Button
+                onClick={() => {
+                  onChange('')
+                }}
+              >
+                Clear
+              </Button>
+            </div>
+          </>
+        )}
       </Stack>
     </ImageContainer>
   )

packages/editor/src/components/materials/MaterialEditor.tsx

@@ -9,8 +9,8 @@ import {
   materialFromId,
   prototypeFromId
 } from '@etherealengine/engine/src/renderer/materials/functions/MaterialLibraryFunctions'
-import { useMaterialLibrary } from '@etherealengine/engine/src/renderer/materials/MaterialLibrary'
-import { useState } from '@etherealengine/hyperflux'
+import { MaterialLibraryState } from '@etherealengine/engine/src/renderer/materials/MaterialLibrary'
+import { getMutableState, none, useState } from '@etherealengine/hyperflux'
 
 import { Box, Divider, Stack } from '@mui/material'
 
@@ -23,11 +23,11 @@ import StringInput from '../inputs/StringInput'
 
 export default function MaterialEditor({ material, ...rest }: { ['material']: Material }) {
   if (material === undefined) return <></>
-  const materialComponent = useState(materialFromId(material.uuid))
-  const prototypeComponent = useState(prototypeFromId(materialComponent.prototype.value))
+  const materialLibrary = useState(getMutableState(MaterialLibraryState))
+  const materialComponent = materialLibrary.materials[material.uuid]
+  const prototypeComponent = materialLibrary.prototypes[materialComponent.prototype.value]
   const loadingData = useState(false)
   const selectionState = accessSelectionState()
-  const materialLibrary = useMaterialLibrary()
   const prototypes = Object.values(materialLibrary.prototypes.value).map((prototype) => ({
     label: prototype.prototypeId,
     value: prototype.prototypeId
@@ -54,11 +54,22 @@ export default function MaterialEditor({ material, ...rest }: { ['material']: Ma
     return result
   }, [materialComponent.parameters, materialComponent.material.uuid, materialComponent.prototype])
 
-  const clearThumbs = async () => {
+  const checkThumbs = useCallback(async () => {
+    thumbnails.promised && (await thumbnails.promise)
+    const thumbnailVals = thumbnails.value
+    Object.entries(thumbnailVals).map(([k, v]) => {
+      if (!material[k]) {
+        URL.revokeObjectURL(v)
+        thumbnails[k].set(none)
+      }
+    })
+  }, [])
+
+  const clearThumbs = useCallback(async () => {
     thumbnails.promised && (await thumbnails.promise)
     Object.values(thumbnails.value).map(URL.revokeObjectURL)
     thumbnails.set({})
-  }
+  }, [])
 
   useEffect(() => {
     loadingData.set(true)
@@ -70,6 +81,10 @@ export default function MaterialEditor({ material, ...rest }: { ['material']: Ma
       })
   }, [materialComponent.prototype, materialComponent.material])
 
+  useEffect(() => {
+    checkThumbs()
+  }, [materialComponent.parameters])
+
   return (
     <div {...rest}>
       <InputGroup name="Name" label="Name">
@@ -96,7 +111,7 @@ export default function MaterialEditor({ material, ...rest }: { ['material']: Ma
         </div>
       </InputGroup>
       <br />
-      {!loadingData.get() && (
+      {!loadingData.value && (
         <InputGroup name="Prototype" label="Prototype">
           <SelectInput
             value={materialComponent.prototype.value}
@@ -113,7 +128,7 @@ export default function MaterialEditor({ material, ...rest }: { ['material']: Ma
       <br />
       <ParameterInput
         entity={material.uuid}
-        values={loadingData.get() ? {} : materialComponent.parameters.value}
+        values={loadingData.value ? {} : materialComponent.parameters.value}
         onChange={(k) => async (val) => {
           let prop
           if (prototypeComponent.arguments.value[k].type === 'texture' && typeof val === 'string') {
@@ -132,24 +147,9 @@ export default function MaterialEditor({ material, ...rest }: { ['material']: Ma
           )
           materialComponent.parameters[k].set(prop)
         }}
-        defaults={loadingData.get() ? {} : prototypeComponent.arguments.value}
+        defaults={loadingData.value ? {} : prototypeComponent.arguments.value}
         thumbnails={thumbnails.value}
       />
-      {/*
-        <Button
-          onClick={async () => {
-            bakeToVertices(
-              material as MeshStandardMaterial,
-              ['color'],
-              [
-                { field: 'map', attribName: 'uv' },
-                { field: 'lightMap', attribName: 'uv2' }
-              ]
-            )
-          }}
-        >
-          Bake
-        </Button>*/}
     </div>
   )
 }

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

@@ -22,14 +22,15 @@ import { useState } from '@etherealengine/hyperflux'
 import ViewInArIcon from '@mui/icons-material/ViewInAr'
 
 import exportGLTF from '../../functions/exportGLTF'
-import { createLODsFromModel } from '../../functions/lodsFromModel'
+import { convertToScaffold, createLODsFromModel } from '../../functions/lodsFromModel'
 import { LODsFromModelParameters } from '../../functions/lodsFromModel'
 import { StaticResourceService } from '../../services/StaticResourceService'
 import BooleanInput from '../inputs/BooleanInput'
 import { Button, PropertiesPanelButton } from '../inputs/Button'
 import InputGroup from '../inputs/InputGroup'
 import ModelInput from '../inputs/ModelInput'
 import SelectInput from '../inputs/SelectInput'
+import CollapsibleBlock from '../layout/CollapsibleBlock'
 import Well from '../layout/Well'
 import ModelTransformProperties from './ModelTransformProperties'
 import NodeEditor from './NodeEditor'
@@ -160,19 +161,24 @@ export const ModelNodeEditor: EditorComponentType = (props) => {
       </InputGroup>
       <ScreenshareTargetNodeEditor entity={props.entity} multiEdit={props.multiEdit} />
       <ShadowProperties entity={props.entity} />
-      <div className="bg-gradient-to-b from-blue-gray-400 to-cool-gray-800 rounded-lg shadow-lg">
-        <div className="px-4 py-2 border-b border-gray-300">
-          <h2 className="text-lg font-semibold text-gray-100">LODs</h2>
+      <CollapsibleBlock label={t('editor:properties.model.lods.label')}>
+        <div className="bg-gradient-to-b from-blue-gray-400 to-cool-gray-800 rounded-lg shadow-lg">
+          <div className="px-4 py-2 border-b border-gray-300">
+            <h2 className="text-lg font-semibold text-gray-100">LODs</h2>
+          </div>
+          <InputGroup name="Serialize" label={t('editor:properties.model.lods.serialize')}>
+            <BooleanInput value={lodParms.value.serialize} onChange={lodParms.serialize.set} />
+          </InputGroup>
+          <div className="p-4">
+            <Button onClick={convertToScaffold.bind({}, entity)}>Convert to Scaffold</Button>
+          </div>
+          <div className="p-4">
+            <Button onClick={createLODsFromModel.bind({}, entity, lodParms.value)}>
+              {t('editor:properties.model.lods.generate')}
+            </Button>
+          </div>
         </div>
-        <InputGroup name="Serialize" label={t('editor:properties.model.lods.serialize')}>
-          <BooleanInput value={lodParms.value.serialize} onChange={lodParms.serialize.set} />
-        </InputGroup>
-        <div className="p-4">
-          <Button onClick={createLODsFromModel.bind({}, entity, lodParms.value)}>
-            {t('editor:properties.model.lods.generate')}
-          </Button>
-        </div>
-      </div>
+      </CollapsibleBlock>
       <ModelTransformProperties modelState={modelComponent} onChangeModel={(val) => modelComponent.src.set(val)} />
       {!exporting.value && modelComponent.src.value && (
         <Well>

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

@@ -9,6 +9,7 @@ import {
   ImageTransformParameters,
   ModelTransformParameters
 } from '@etherealengine/engine/src/assets/classes/ModelTransform'
+import { Engine } from '@etherealengine/engine/src/ecs/classes/Engine'
 import { Entity } from '@etherealengine/engine/src/ecs/classes/Entity'
 import {
   ComponentType,
@@ -217,8 +218,8 @@ export default function ModelTransformProperties({
     (modelState: State<ComponentType<typeof ModelComponent>>) => async () => {
       transforming.set(true)
       const modelSrc = modelState.src.value
-      const nuPath = await API.instance.client.service('model-transform').create({
-        path: modelSrc,
+      const nuPath = await Engine.instance.api.service('model-transform').create({
+        src: modelSrc,
         transformParameters: transformParms.value
       })
       transformHistory.set([modelSrc, ...transformHistory.value])
@@ -266,8 +267,8 @@ export default function ModelTransformProperties({
       console.log('saved baked model')
       //perform gltf transform
       console.log('transforming model at ' + bakedPath + '...')
-      const transformedPath = await API.instance.client.service('model-transform').create({
-        path: bakedPath,
+      const transformedPath = await Engine.instance.api.service('model-transform').create({
+        src: bakedPath,
         transformParameters: transformParms.value
       })
       console.log('transformed model into ' + transformedPath)

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

@@ -12,14 +12,14 @@ import { Engine } from '@etherealengine/engine/src/ecs/classes/Engine'
 import { hasComponent } from '@etherealengine/engine/src/ecs/functions/ComponentFunctions'
 import { EntityTreeComponent } from '@etherealengine/engine/src/ecs/functions/EntityTree'
 import { materialFromId } from '@etherealengine/engine/src/renderer/materials/functions/MaterialLibraryFunctions'
-import { getMaterialLibrary } from '@etherealengine/engine/src/renderer/materials/MaterialLibrary'
+import { MaterialLibraryState } from '@etherealengine/engine/src/renderer/materials/MaterialLibrary'
 import {
   addObjectToGroup,
   Object3DWithEntity,
   removeObjectFromGroup
 } from '@etherealengine/engine/src/scene/components/GroupComponent'
 import { TransformSpace } from '@etherealengine/engine/src/scene/constants/transformConstants'
-import { dispatchAction, useHookstate } from '@etherealengine/hyperflux'
+import { dispatchAction, getState, useHookstate } from '@etherealengine/hyperflux'
 
 import { Divider } from '@mui/material'
 
@@ -46,7 +46,6 @@ type Object3DProps = {
   obj3d: Object3D
   multiEdit: boolean
 }
-
 /**
  * Object3DNodeEditor component used to provide the editor view to customize Object3D properties inside a model.
  *
@@ -57,7 +56,7 @@ export const Object3DNodeEditor = (props: Object3DProps) => {
   console.log(props)
   const scene: Scene = Engine.instance.scene
   const selectionState = accessSelectionState()
-  const materialLibrary = getMaterialLibrary()
+  const materialLibrary = getState(MaterialLibraryState)
   const obj3d: Object3D = props.obj3d as any
   const mesh = obj3d as Mesh
   const instancedMesh = obj3d as InstancedMesh
@@ -272,7 +271,7 @@ export const Object3DNodeEditor = (props: Object3DProps) => {
                 <MaterialInput
                   value={materials[currentMaterialId.value].uuid}
                   onChange={(nuId) => {
-                    if (materialLibrary.materials[nuId].value) {
+                    if (materialLibrary.materials[nuId]) {
                       if (Array.isArray(mesh.material)) {
                         mesh.material[currentMaterialId.value] = materialFromId('' + nuId).material
                       } else {
@@ -315,11 +314,11 @@ export const Object3DNodeEditor = (props: Object3DProps) => {
               <PaginatedList
                 list={range(0, instancedMesh.count)}
                 element={(i: number) => {
-                  let transform = new Matrix4()
+                  const transform = new Matrix4()
                   instancedMesh.getMatrixAt(i, transform)
-                  let position = new Vector3()
-                  let rotation = new Quaternion()
-                  let scale = new Vector3()
+                  const position = new Vector3()
+                  const rotation = new Quaternion()
+                  const scale = new Vector3()
                   transform.decompose(position, rotation, scale)
 
                   const euler = new Euler()