Various studio bug fixes (#10293)

* various studio bug fixes

* fix cubemap bake

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

@@ -67,7 +67,8 @@ export const SceneSettingsEditor: EditorComponentType = (props) => {
     const thumbnailBlob = await takeScreenshot(512, 320, 'jpeg')
     if (!thumbnailBlob) return
     const thumbnailURL = URL.createObjectURL(thumbnailBlob)
-    const file = new File([thumbnailBlob!], getState(EditorState).sceneName + '.thumbnail.jpg')
+    const sceneName = getState(EditorState).sceneName!.split('.').slice(0, -1).join('.')
+    const file = new File([thumbnailBlob!], sceneName + '.thumbnail.jpg')
     state.merge({
       thumbnailURL,
       thumbnail: file
@@ -114,7 +115,7 @@ export const SceneSettingsEditor: EditorComponentType = (props) => {
     if (!envmap || !loadingScreen) return null!
 
     const editorState = getState(EditorState)
-    const sceneName = editorState.sceneName!
+    const sceneName = editorState.sceneName!.split('.').slice(0, -1).join('.')
     const projectName = editorState.projectName!
     const envmapFilename = `${sceneName}.envmap.ktx2`
     const loadingScreenFilename = `${sceneName}.loadingscreen.ktx2`

packages/editor/src/functions/uploadEnvMapBake.ts

@@ -38,7 +38,11 @@ import { EnvMapBakeComponent } from '@etherealengine/engine/src/scene/components
 import { ScenePreviewCameraComponent } from '@etherealengine/engine/src/scene/components/ScenePreviewCamera'
 import { getState } from '@etherealengine/hyperflux'
 import { NameComponent } from '@etherealengine/spatial/src/common/NameComponent'
-import { RendererComponent } from '@etherealengine/spatial/src/renderer/WebGLRendererSystem'
+import {
+  RendererComponent,
+  getNestedVisibleChildren,
+  getSceneParameters
+} from '@etherealengine/spatial/src/renderer/WebGLRendererSystem'
 import { TransformComponent } from '@etherealengine/spatial/src/transform/components/TransformComponent'
 
 import { EditorState } from '../services/EditorServices'
@@ -124,7 +128,14 @@ export const generateEnvmapBake = (resolution = 2048) => {
   const position = getScenePositionForBake()
   const renderer = getComponent(Engine.instance.viewerEntity, RendererComponent).renderer
 
+  const rootEntity = getState(EditorState).rootEntity
+  const entitiesToRender = getNestedVisibleChildren(rootEntity)
+  const sceneData = getSceneParameters(entitiesToRender)
   const scene = new Scene()
+  scene.children = sceneData.children
+  scene.background = sceneData.background
+  scene.fog = sceneData.fog
+  scene.environment = sceneData.environment
 
   const cubemapCapturer = new CubemapCapturer(renderer, scene, resolution)
   const renderTarget = cubemapCapturer.update(position)

packages/engine/src/gltf/GLTFComponent.tsx

@@ -174,7 +174,7 @@ const useGLTFDocument = (url: string, entity: Entity) => {
       dispatchAction(
         GLTFSnapshotAction.createSnapshot({
           source: getComponent(entity, SourceComponent),
-          data: parseStorageProviderURLs(json)
+          data: parseStorageProviderURLs(JSON.parse(JSON.stringify(json)))
         })
       )
     }

packages/spatial/src/renderer/WebGLRendererSystem.tsx

@@ -32,6 +32,7 @@ import {
   Color,
   CubeTexture,
   FogBase,
+  Object3D,
   Scene,
   SRGBColorSpace,
   Texture,
@@ -47,7 +48,6 @@ import {
   ECSState,
   Entity,
   getComponent,
-  getOptionalComponent,
   hasComponent,
   PresentationSystemGroup,
   QueryReactor,
@@ -311,6 +311,31 @@ const rendererQuery = defineQuery([RendererComponent, CameraComponent, SceneComp
 
 export const filterVisible = (entity: Entity) => hasComponent(entity, VisibleComponent)
 export const getNestedVisibleChildren = (entity: Entity) => getNestedChildren(entity, filterVisible)
+export const getSceneParameters = (entities: Entity[]) => {
+  const vals = {
+    background: null as Color | Texture | CubeTexture | null,
+    environment: null as Texture | null,
+    fog: null as FogBase | null,
+    children: [] as Object3D[]
+  }
+
+  for (const entity of entities) {
+    if (hasComponent(entity, EnvironmentMapComponent)) {
+      vals.environment = getComponent(entity, EnvironmentMapComponent)
+    }
+    if (hasComponent(entity, BackgroundComponent)) {
+      vals.background = getComponent(entity, BackgroundComponent as any) as Color | Texture | CubeTexture
+    }
+    if (hasComponent(entity, FogComponent)) {
+      vals.fog = getComponent(entity, FogComponent)
+    }
+    if (hasComponent(entity, GroupComponent)) {
+      vals.children.push(...getComponent(entity, GroupComponent)!)
+    }
+  }
+
+  return vals
+}
 
 const execute = () => {
   const deltaSeconds = getState(ECSState).deltaSeconds
@@ -321,34 +346,15 @@ const execute = () => {
     const renderer = getComponent(entity, RendererComponent)
     const scene = getComponent(entity, SceneComponent)
 
-    let background: Color | Texture | CubeTexture | null = null
-    let environment: Texture | null = null
-    let fog: FogBase | null = null
-
     const entitiesToRender = scene.children.map(getNestedVisibleChildren).flat()
-    for (const entity of entitiesToRender) {
-      if (hasComponent(entity, EnvironmentMapComponent)) {
-        environment = getComponent(entity, EnvironmentMapComponent)
-      }
-      if (hasComponent(entity, BackgroundComponent)) {
-        background = getComponent(entity, BackgroundComponent as any) as Color | Texture | CubeTexture
-      }
-      if (hasComponent(entity, FogComponent)) {
-        fog = getComponent(entity, FogComponent)
-      }
-    }
-    const objects = entitiesToRender
-      .map((entity) => getOptionalComponent(entity, GroupComponent)!)
-      .flat()
-      .filter(Boolean)
-
-    _scene.children = objects
+    const { background, environment, fog, children } = getSceneParameters(entitiesToRender)
+    _scene.children = children
 
     const renderMode = getState(RendererState).renderMode
-    background = renderMode === RenderModes.WIREFRAME ? new Color(0xffffff) : background
 
     const sessionMode = getState(XRState).sessionMode
-    _scene.background = sessionMode === 'immersive-ar' ? null : background
+    _scene.background =
+      sessionMode === 'immersive-ar' ? null : renderMode === RenderModes.WIREFRAME ? new Color(0xffffff) : background
 
     const lightProbe = getState(XRLightProbeState).environment
     _scene.environment = lightProbe ?? environment

packages/ui/src/components/editor/input/String/index.tsx

@@ -90,7 +90,7 @@ export const ControlledStringInput = React.forwardRef<any, StringInputProps>((va
       ref={ref}
       containerClassname={twMerge('h-7 w-full rounded bg-[#1A1A1A]', containerClassname)}
       className="h-full text-ellipsis rounded border-none bg-inherit px-5 py-2 text-xs font-normal text-[#8B8B8D]"
-      value={value ?? ''}
+      value={tempValue ?? ''}
       onChange={(e) => {
         onChangeValue(e.target.value)
       }}

packages/ui/src/components/editor/properties/image/index.tsx

@@ -51,7 +51,7 @@ export const ImageNodeEditor: EditorComponentType = (props) => {
       icon={<LuImage />}
     >
       <InputGroup name="Image Url" label={t('editor:properties.image.lbl-imgURL')}>
-        <ImageInput value={imageComponent.source.value ?? ''} onRelease={commitProperty(ImageComponent, 'source')} />
+        <ImageInput value={imageComponent.source.value} onRelease={commitProperty(ImageComponent, 'source')} />
       </InputGroup>
       {errors ? (
         Object.entries(errors).map(([err, message]) => (