fix: Nametag & sign text fixes (#391)

Author: Phoenix616

experiments/three.ts

@@ -1,5 +1,4 @@
 import * as THREE from 'three'
-import { loadThreeJsTextureFromBitmap } from '../renderer/viewer/lib/utils/skins'
 
 // Create scene, camera and renderer
 const scene = new THREE.Scene()

renderer/viewer/lib/renderUtils.js

@@ -1,30 +1,3 @@
-import * as THREE from 'three'
-import { loadThreeJsTextureFromUrl, loadThreeJsTextureFromUrlSync } from './utils/skins'
-
-let textureCache: Record<string, THREE.Texture> = {}
-let imagesPromises: Record<string, Promise<THREE.Texture>> = {}
-
-export async function loadTexture (texture: string, cb: (texture: THREE.Texture) => void, onLoad?: () => void): Promise<void> {
-  const cached = textureCache[texture]
-  if (!cached) {
-    const { promise, resolve } = Promise.withResolvers<THREE.Texture>()
-    const t = loadThreeJsTextureFromUrlSync(texture)
-    textureCache[texture] = t.texture
-    void t.promise.then(resolve)
-    imagesPromises[texture] = promise
-  }
-
-  cb(textureCache[texture])
-  void imagesPromises[texture].then(() => {
-    onLoad?.()
-  })
-}
-
-export const clearTextureCache = () => {
-  textureCache = {}
-  imagesPromises = {}
-}
-
 export const loadScript = async function (scriptSrc: string, highPriority = true): Promise<HTMLScriptElement> {
   const existingScript = document.querySelector<HTMLScriptElement>(`script[src="${scriptSrc}"]`)
   if (existingScript) {
@@ -52,3 +25,33 @@ export const loadScript = async function (scriptSrc: string, highPriority = true
     document.head.appendChild(scriptElement)
   })
 }
+
+const detectFullOffscreenCanvasSupport = () => {
+  if (typeof OffscreenCanvas === 'undefined') return false
+  try {
+    const canvas = new OffscreenCanvas(1, 1)
+    // Try to get a WebGL context - this will fail on iOS where only 2D is supported (iOS 16)
+    const gl = canvas.getContext('webgl2') || canvas.getContext('webgl')
+    return gl !== null
+  } catch (e) {
+    return false
+  }
+}
+
+const hasFullOffscreenCanvasSupport = detectFullOffscreenCanvasSupport()
+
+export const createCanvas = (width: number, height: number): OffscreenCanvas => {
+  if (hasFullOffscreenCanvasSupport) {
+    return new OffscreenCanvas(width, height)
+  }
+  const canvas = document.createElement('canvas')
+  canvas.width = width
+  canvas.height = height
+  return canvas as unknown as OffscreenCanvas // todo-low
+}
+
+export async function loadImageFromUrl (imageUrl: string): Promise<ImageBitmap> {
+  const response = await fetch(imageUrl)
+  const blob = await response.blob()
+  return createImageBitmap(blob)
+}

renderer/viewer/lib/utils.ts

@@ -1,68 +1,7 @@
 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'
+import { createCanvas, loadImageFromUrl } from '../utils'
 
-const detectFullOffscreenCanvasSupport = () => {
-  if (typeof OffscreenCanvas === 'undefined') return false
-  try {
-    const canvas = new OffscreenCanvas(1, 1)
-    // Try to get a WebGL context - this will fail on iOS where only 2D is supported (iOS 16)
-    const gl = canvas.getContext('webgl2') || canvas.getContext('webgl')
-    return gl !== null
-  } catch (e) {
-    return false
-  }
-}
-
-const hasFullOffscreenCanvasSupport = detectFullOffscreenCanvasSupport()
-
-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 createCanvas = (width: number, height: number): OffscreenCanvas => {
-  if (hasFullOffscreenCanvasSupport) {
-    return new OffscreenCanvas(width, height)
-  }
-  const canvas = document.createElement('canvas')
-  canvas.width = width
-  canvas.height = height
-  return canvas as unknown as OffscreenCanvas // todo-low
-}
-
-export const loadThreeJsTextureFromUrl = async (imageUrl: string) => {
-  const loaded = new THREE.TextureLoader().loadAsync(imageUrl)
-  return loaded
-}
-export const loadThreeJsTextureFromBitmap = (image: ImageBitmap) => {
-  const canvas = createCanvas(image.width, image.height)
-  const ctx = canvas.getContext('2d')!
-  ctx.drawImage(image, 0, 0)
-  const texture = new THREE.Texture(canvas)
-  texture.magFilter = THREE.NearestFilter
-  texture.minFilter = THREE.NearestFilter
-  return texture
-}
-
-export const stevePngUrl = stevePng
-export const steveTexture = loadThreeJsTextureFromUrl(stevePngUrl)
-
-
-export async function loadImageFromUrl (imageUrl: string): Promise<ImageBitmap> {
-  const response = await fetch(imageUrl)
-  const blob = await response.blob()
-  return createImageBitmap(blob)
-}
+export { default as stevePngUrl } from 'mc-assets/dist/other-textures/latest/entity/player/wide/steve.png'
 
 const config = {
   apiEnabled: true,