restore textures / panorama

todo restore loadedData and hand

renderer/viewer/lib/utils.ts

@@ -1,5 +1,5 @@
 import * as THREE from 'three'
-import { loadThreeJsTextureFromUrl } from './utils/skins'
+import { loadThreeJsTextureFromUrl, loadThreeJsTextureFromUrlSync } from './utils/skins'
 
 let textureCache: Record<string, THREE.Texture> = {}
 let imagesPromises: Record<string, Promise<THREE.Texture>> = {}
@@ -8,8 +8,9 @@ export async function loadTexture (texture: string, cb: (texture: THREE.Texture)
   const cached = textureCache[texture]
   if (!cached) {
     const { promise, resolve } = Promise.withResolvers<THREE.Texture>()
-    textureCache[texture] = new THREE.Texture()
-    void loadThreeJsTextureFromUrl(texture, textureCache[texture]).then(resolve)
+    const t = loadThreeJsTextureFromUrlSync(texture)
+    textureCache[texture] = t.texture
+    void t.promise.then(resolve)
     imagesPromises[texture] = promise
   }
 

renderer/viewer/lib/utils/skins.ts

@@ -1,14 +1,23 @@
 import { loadSkinToCanvas } from 'skinview-utils'
 import * as THREE from 'three'
 import stevePng from 'mc-assets/dist/other-textures/latest/entity/player/wide/steve.png'
+import { getLoadedImage } from 'mc-assets/dist/utils'
 
-export const loadThreeJsTextureFromUrl = async (imageUrl: string, texture?: THREE.Texture) => {
-  const loaded = new THREE.TextureLoader().loadAsync(imageUrl)
-  if (texture) {
-    texture.image = loaded
+export const loadThreeJsTextureFromUrlSync = (imageUrl: string) => {
+  const texture = new THREE.Texture()
+  const promise = getLoadedImage(imageUrl).then(image => {
+    texture.image = image
     texture.needsUpdate = true
     return texture
+  })
+  return {
+    texture,
+    promise
   }
+}
+
+export const loadThreeJsTextureFromUrl = async (imageUrl: string) => {
+  const loaded = new THREE.TextureLoader().loadAsync(imageUrl)
   return loaded
 }
 

renderer/viewer/three/panorama.ts

@@ -7,7 +7,7 @@ import type { GraphicsInitOptions } from '../../../src/appViewer'
 import { WorldDataEmitter } from '../lib/worldDataEmitter'
 import { defaultWorldRendererConfig, WorldRendererCommon } from '../lib/worldrendererCommon'
 import { getDefaultRendererState } from '../baseGraphicsBackend'
-import { loadThreeJsTextureFromUrl } from '../lib/utils/skins'
+import { loadThreeJsTextureFromUrl, loadThreeJsTextureFromUrlSync } from '../lib/utils/skins'
 import { ResourcesManager } from '../../../src/resourcesManager'
 import { getInitialPlayerStateRenderer } from '../lib/basePlayerState'
 import { WorldRendererThree } from './worldrendererThree'
@@ -89,14 +89,13 @@ export class PanoramaRenderer {
 
     for (const file of panoramaFiles) {
       const load = async () => {
-        const texture = await loadThreeJsTextureFromUrl(join('background', file))
+        const { texture } = loadThreeJsTextureFromUrlSync(join('background', file))
 
         // Instead of using repeat/offset to flip, we'll use the texture matrix
         texture.matrixAutoUpdate = false
         texture.matrix.set(
           -1, 0, 1, 0, 1, 0, 0, 0, 1
         )
-        texture.updateMatrix()
 
         texture.wrapS = THREE.ClampToEdgeWrapping
         texture.wrapT = THREE.ClampToEdgeWrapping