Merge commit '14bf06e4bd7a70a2c6483e6bbb9712cb9ff84486' into feature-elyby-skins

2025-07-10 01:07:43 +03:00
parent 97bd18c7b3 14bf06e4bd
commit 14f6450cf4
16 changed files with 4876 additions and 1349 deletions
@@ -501,13 +501,13 @@ function handleAuxClick(e) {
        <!-- <ModrinthAppLogo class="h-full w-auto text-contrast pointer-events-none" /> -->
        <div class="flex items-center gap-1 ml-3">
          <button
-            class="cursor-pointer p-0 m-0 border-none outline-none bg-button-bg rounded-full flex items-center justify-center w-6 h-6 hover:brightness-75 transition-all"
+            class="cursor-pointer p-0 m-0 text-contrast border-none outline-none bg-button-bg rounded-full flex items-center justify-center w-6 h-6 hover:brightness-75 transition-all"
            @click="router.back()"
          >
            <LeftArrowIcon />
          </button>
          <button
-            class="cursor-pointer p-0 m-0 border-none outline-none bg-button-bg rounded-full flex items-center justify-center w-6 h-6 hover:brightness-75 transition-all"
+            class="cursor-pointer p-0 m-0 text-contrast border-none outline-none bg-button-bg rounded-full flex items-center justify-center w-6 h-6 hover:brightness-75 transition-all"
            @click="router.forward()"
          >
            <RightArrowIcon />
@@ -2,25 +2,40 @@ import * as THREE from 'three'
 import type { Skin, Cape } from '../skins'
 import { get_normalized_skin_texture, determineModelType } from '../skins'
 import { reactive } from 'vue'
-import { setupSkinModel, disposeCaches } from '@modrinth/utils'
+import { setupSkinModel, disposeCaches, loadTexture, applyCapeTexture } from '@modrinth/utils'
 import { skinPreviewStorage } from '../storage/skin-preview-storage'
-import { CapeModel, ClassicPlayerModel, SlimPlayerModel } from '@modrinth/assets'
+import { headStorage } from '../storage/head-storage'
+import { ClassicPlayerModel, SlimPlayerModel } from '@modrinth/assets'

 export interface RenderResult {
  forwards: string
  backwards: string
 }

+export interface RawRenderResult {
+  forwards: Blob
+  backwards: Blob
+}
+
 class BatchSkinRenderer {
-  private renderer: THREE.WebGLRenderer
-  private readonly scene: THREE.Scene
-  private readonly camera: THREE.PerspectiveCamera
+  private renderer: THREE.WebGLRenderer | null = null
+  private scene: THREE.Scene | null = null
+  private camera: THREE.PerspectiveCamera | null = null
  private currentModel: THREE.Group | null = null
+  private readonly width: number
+  private readonly height: number

  constructor(width: number = 360, height: number = 504) {
+    this.width = width
+    this.height = height
+  }
+
+  private initializeRenderer(): void {
+    if (this.renderer) return
+
    const canvas = document.createElement('canvas')
-    canvas.width = width
-    canvas.height = height
+    canvas.width = this.width
+    canvas.height = this.height

    this.renderer = new THREE.WebGLRenderer({
      canvas: canvas,
@@ -33,10 +48,10 @@ class BatchSkinRenderer {
    this.renderer.toneMapping = THREE.NoToneMapping
    this.renderer.toneMappingExposure = 10.0
    this.renderer.setClearColor(0x000000, 0)
-    this.renderer.setSize(width, height)
+    this.renderer.setSize(this.width, this.height)

    this.scene = new THREE.Scene()
-    this.camera = new THREE.PerspectiveCamera(20, width / height, 0.4, 1000)
+    this.camera = new THREE.PerspectiveCamera(20, this.width / this.height, 0.4, 1000)

    const ambientLight = new THREE.AmbientLight(0xffffff, 2)
    const directionalLight = new THREE.DirectionalLight(0xffffff, 1.2)
@@ -50,9 +65,12 @@ class BatchSkinRenderer {
    textureUrl: string,
    modelUrl: string,
    capeUrl?: string,
-    capeModelUrl?: string,
-  ): Promise<RenderResult> {
-    await this.setupModel(modelUrl, textureUrl, capeModelUrl, capeUrl)
+  ): Promise<RawRenderResult> {
+    this.initializeRenderer()
+
+    this.clearScene()
+
+    await this.setupModel(modelUrl, textureUrl, capeUrl)

    const headPart = this.currentModel!.getObjectByName('Head')
    let lookAtTarget: [number, number, number]
@@ -77,35 +95,32 @@ class BatchSkinRenderer {
  private async renderView(
    cameraPosition: [number, number, number],
    lookAtPosition: [number, number, number],
-  ): Promise<string> {
+  ): Promise<Blob> {
+    if (!this.camera || !this.renderer || !this.scene) {
+      throw new Error('Renderer not initialized')
+    }
+
    this.camera.position.set(...cameraPosition)
    this.camera.lookAt(...lookAtPosition)

    this.renderer.render(this.scene, this.camera)

-    return new Promise<string>((resolve, reject) => {
-      this.renderer.domElement.toBlob((blob) => {
-        if (blob) {
-          const url = URL.createObjectURL(blob)
-          resolve(url)
-        } else {
-          reject(new Error('Failed to create blob from canvas'))
-        }
-      }, 'image/png')
-    })
+    const dataUrl = this.renderer.domElement.toDataURL('image/webp', 0.9)
+    const response = await fetch(dataUrl)
+    return await response.blob()
  }

-  private async setupModel(
-    modelUrl: string,
-    textureUrl: string,
-    capeModelUrl?: string,
-    capeUrl?: string,
-  ): Promise<void> {
-    if (this.currentModel) {
-      this.scene.remove(this.currentModel)
+  private async setupModel(modelUrl: string, textureUrl: string, capeUrl?: string): Promise<void> {
+    if (!this.scene) {
+      throw new Error('Renderer not initialized')
    }

-    const { model } = await setupSkinModel(modelUrl, textureUrl, capeModelUrl, capeUrl)
+    const { model } = await setupSkinModel(modelUrl, textureUrl)
+
+    if (capeUrl) {
+      const capeTexture = await loadTexture(capeUrl)
+      applyCapeTexture(model, capeTexture)
+    }

    const group = new THREE.Group()
    group.add(model)
@@ -116,8 +131,39 @@ class BatchSkinRenderer {
    this.currentModel = group
  }

+  private clearScene(): void {
+    if (!this.scene) return
+
+    while (this.scene.children.length > 0) {
+      const child = this.scene.children[0]
+      this.scene.remove(child)
+
+      if (child instanceof THREE.Mesh) {
+        if (child.geometry) child.geometry.dispose()
+        if (child.material) {
+          if (Array.isArray(child.material)) {
+            child.material.forEach((material) => material.dispose())
+          } else {
+            child.material.dispose()
+          }
+        }
+      }
+    }
+
+    const ambientLight = new THREE.AmbientLight(0xffffff, 2)
+    const directionalLight = new THREE.DirectionalLight(0xffffff, 1.2)
+    directionalLight.castShadow = true
+    directionalLight.position.set(2, 4, 3)
+    this.scene.add(ambientLight)
+    this.scene.add(directionalLight)
+
+    this.currentModel = null
+  }
+
  public dispose(): void {
-    this.renderer.dispose()
+    if (this.renderer) {
+      this.renderer.dispose()
+    }
    disposeCaches()
  }
 }
@@ -133,10 +179,25 @@ function getModelUrlForVariant(variant: string): string {
  }
 }

-export const map = reactive(new Map<string, RenderResult>())
-export const headMap = reactive(new Map<string, string>())
+export const skinBlobUrlMap = reactive(new Map<string, RenderResult>())
+export const headBlobUrlMap = reactive(new Map<string, string>())
 const DEBUG_MODE = false

+let sharedRenderer: BatchSkinRenderer | null = null
+function getSharedRenderer(): BatchSkinRenderer {
+  if (!sharedRenderer) {
+    sharedRenderer = new BatchSkinRenderer()
+  }
+  return sharedRenderer
+}
+
+export function disposeSharedRenderer(): void {
+  if (sharedRenderer) {
+    sharedRenderer.dispose()
+    sharedRenderer = null
+  }
+}
+
 export async function cleanupUnusedPreviews(skins: Skin[]): Promise<void> {
  const validKeys = new Set<string>()
  const validHeadKeys = new Set<string>()
@@ -150,7 +211,7 @@ export async function cleanupUnusedPreviews(skins: Skin[]): Promise<void> {

  try {
    await skinPreviewStorage.cleanupInvalidKeys(validKeys)
-    await skinPreviewStorage.cleanupInvalidKeys(validHeadKeys)
+    await headStorage.cleanupInvalidKeys(validHeadKeys)
  } catch (error) {
    console.warn('Failed to cleanup unused skin previews:', error)
  }
@@ -229,13 +290,17 @@ export async function generatePlayerHeadBlob(skinUrl: string, size: number = 64)
          outputCtx.drawImage(hatCanvas, 0, 0, 8, 8, 0, 0, size, size)
        }

-        outputCanvas.toBlob((blob) => {
-          if (blob) {
-            resolve(blob)
-          } else {
-            reject(new Error('Failed to create blob from canvas'))
-          }
-        }, 'image/png')
+        outputCanvas.toBlob(
+          (blob) => {
+            if (blob) {
+              resolve(blob)
+            } else {
+              reject(new Error('Failed to create blob from canvas'))
+            }
+          },
+          'image/webp',
+          0.9,
+        )
      } catch (error) {
        reject(error)
      }
@@ -252,35 +317,24 @@ export async function generatePlayerHeadBlob(skinUrl: string, size: number = 64)
 async function generateHeadRender(skin: Skin): Promise<string> {
  const headKey = `${skin.texture_key}-head`

-  if (headMap.has(headKey)) {
+  if (headBlobUrlMap.has(headKey)) {
    if (DEBUG_MODE) {
-      const url = headMap.get(headKey)!
+      const url = headBlobUrlMap.get(headKey)!
      URL.revokeObjectURL(url)
-      headMap.delete(headKey)
+      headBlobUrlMap.delete(headKey)
    } else {
-      return headMap.get(headKey)!
+      return headBlobUrlMap.get(headKey)!
    }
  }

-  try {
-    const cached = await skinPreviewStorage.retrieve(headKey)
-    if (cached && typeof cached === 'string') {
-      headMap.set(headKey, cached)
-      return cached
-    }
-  } catch (error) {
-    console.warn('Failed to retrieve cached head render:', error)
-  }
-
  const skinUrl = await get_normalized_skin_texture(skin)
  const headBlob = await generatePlayerHeadBlob(skinUrl, 64)
  const headUrl = URL.createObjectURL(headBlob)

-  headMap.set(headKey, headUrl)
+  headBlobUrlMap.set(headKey, headUrl)

  try {
-    // @ts-expect-error - skinPreviewStorage.store expects a RenderResult, but we are storing a string url.
-    await skinPreviewStorage.store(headKey, headUrl)
+    await headStorage.store(headKey, headBlob)
  } catch (error) {
    console.warn('Failed to store head render in persistent storage:', error)
  }
@@ -293,30 +347,49 @@ export async function getPlayerHeadUrl(skin: Skin): Promise<string> {
 }

 export async function generateSkinPreviews(skins: Skin[], capes: Cape[]): Promise<void> {
-  const renderer = new BatchSkinRenderer()
-
  try {
+    const skinKeys = skins.map(
+      (skin) => `${skin.texture_key}+${skin.variant}+${skin.cape_id ?? 'no-cape'}`,
+    )
+    const headKeys = skins.map((skin) => `${skin.texture_key}-head`)
+
+    const [cachedSkinPreviews, cachedHeadPreviews] = await Promise.all([
+      skinPreviewStorage.batchRetrieve(skinKeys),
+      headStorage.batchRetrieve(headKeys),
+    ])
+
+    for (let i = 0; i < skins.length; i++) {
+      const skinKey = skinKeys[i]
+      const headKey = headKeys[i]
+
+      const rawCached = cachedSkinPreviews[skinKey]
+      if (rawCached) {
+        const cached: RenderResult = {
+          forwards: URL.createObjectURL(rawCached.forwards),
+          backwards: URL.createObjectURL(rawCached.backwards),
+        }
+        skinBlobUrlMap.set(skinKey, cached)
+      }
+
+      const cachedHead = cachedHeadPreviews[headKey]
+      if (cachedHead) {
+        headBlobUrlMap.set(headKey, URL.createObjectURL(cachedHead))
+      }
+    }
+
    for (const skin of skins) {
      const key = `${skin.texture_key}+${skin.variant}+${skin.cape_id ?? 'no-cape'}`

-      if (map.has(key)) {
+      if (skinBlobUrlMap.has(key)) {
        if (DEBUG_MODE) {
-          const result = map.get(key)!
+          const result = skinBlobUrlMap.get(key)!
          URL.revokeObjectURL(result.forwards)
          URL.revokeObjectURL(result.backwards)
-          map.delete(key)
+          skinBlobUrlMap.delete(key)
        } else continue
      }

-      try {
-        const cached = await skinPreviewStorage.retrieve(key)
-        if (cached) {
-          map.set(key, cached)
-          continue
-        }
-      } catch (error) {
-        console.warn('Failed to retrieve cached skin preview:', error)
-      }
+      const renderer = getSharedRenderer()

      let variant = skin.variant
      if (variant === 'UNKNOWN') {
@@ -330,25 +403,35 @@ export async function generateSkinPreviews(skins: Skin[], capes: Cape[]): Promis

      const modelUrl = getModelUrlForVariant(variant)
      const cape: Cape | undefined = capes.find((_cape) => _cape.id === skin.cape_id)
-      const renderResult = await renderer.renderSkin(
+      const rawRenderResult = await renderer.renderSkin(
        await get_normalized_skin_texture(skin),
        modelUrl,
        cape?.texture,
-        CapeModel,
      )

-      map.set(key, renderResult)
+      const renderResult: RenderResult = {
+        forwards: URL.createObjectURL(rawRenderResult.forwards),
+        backwards: URL.createObjectURL(rawRenderResult.backwards),
+      }
+
+      skinBlobUrlMap.set(key, renderResult)

      try {
-        await skinPreviewStorage.store(key, renderResult)
+        await skinPreviewStorage.store(key, rawRenderResult)
      } catch (error) {
        console.warn('Failed to store skin preview in persistent storage:', error)
      }

-      await generateHeadRender(skin)
+      const headKey = `${skin.texture_key}-head`
+      if (!headBlobUrlMap.has(headKey)) {
+        await generateHeadRender(skin)
+      }
    }
  } finally {
-    renderer.dispose()
+    disposeSharedRenderer()
    await cleanupUnusedPreviews(skins)
+
+    await skinPreviewStorage.debugCalculateStorage()
+    await headStorage.debugCalculateStorage()
  }
 }
@@ -0,0 +1,229 @@
+interface StoredHead {
+  blob: Blob
+  timestamp: number
+}
+
+export class HeadStorage {
+  private dbName = 'head-storage'
+  private version = 1
+  private db: IDBDatabase | null = null
+
+  async init(): Promise<void> {
+    return new Promise((resolve, reject) => {
+      const request = indexedDB.open(this.dbName, this.version)
+
+      request.onerror = () => reject(request.error)
+      request.onsuccess = () => {
+        this.db = request.result
+        resolve()
+      }
+
+      request.onupgradeneeded = () => {
+        const db = request.result
+        if (!db.objectStoreNames.contains('heads')) {
+          db.createObjectStore('heads')
+        }
+      }
+    })
+  }
+
+  async store(key: string, blob: Blob): Promise<void> {
+    if (!this.db) await this.init()
+
+    const transaction = this.db!.transaction(['heads'], 'readwrite')
+    const store = transaction.objectStore('heads')
+
+    const storedHead: StoredHead = {
+      blob,
+      timestamp: Date.now(),
+    }
+
+    return new Promise((resolve, reject) => {
+      const request = store.put(storedHead, key)
+
+      request.onsuccess = () => resolve()
+      request.onerror = () => reject(request.error)
+    })
+  }
+
+  async retrieve(key: string): Promise<string | null> {
+    if (!this.db) await this.init()
+
+    const transaction = this.db!.transaction(['heads'], 'readonly')
+    const store = transaction.objectStore('heads')
+
+    return new Promise((resolve, reject) => {
+      const request = store.get(key)
+
+      request.onsuccess = () => {
+        const result = request.result as StoredHead | undefined
+
+        if (!result) {
+          resolve(null)
+          return
+        }
+
+        const url = URL.createObjectURL(result.blob)
+        resolve(url)
+      }
+      request.onerror = () => reject(request.error)
+    })
+  }
+
+  async batchRetrieve(keys: string[]): Promise<Record<string, Blob | null>> {
+    if (!this.db) await this.init()
+
+    const transaction = this.db!.transaction(['heads'], 'readonly')
+    const store = transaction.objectStore('heads')
+    const results: Record<string, Blob | null> = {}
+
+    return new Promise((resolve, _reject) => {
+      let completedRequests = 0
+
+      if (keys.length === 0) {
+        resolve(results)
+        return
+      }
+
+      for (const key of keys) {
+        const request = store.get(key)
+
+        request.onsuccess = () => {
+          const result = request.result as StoredHead | undefined
+
+          if (result) {
+            results[key] = result.blob
+          } else {
+            results[key] = null
+          }
+
+          completedRequests++
+          if (completedRequests === keys.length) {
+            resolve(results)
+          }
+        }
+
+        request.onerror = () => {
+          results[key] = null
+          completedRequests++
+          if (completedRequests === keys.length) {
+            resolve(results)
+          }
+        }
+      }
+    })
+  }
+
+  async cleanupInvalidKeys(validKeys: Set<string>): Promise<number> {
+    if (!this.db) await this.init()
+
+    const transaction = this.db!.transaction(['heads'], 'readwrite')
+    const store = transaction.objectStore('heads')
+    let deletedCount = 0
+
+    return new Promise((resolve, reject) => {
+      const request = store.openCursor()
+
+      request.onsuccess = (event) => {
+        const cursor = (event.target as IDBRequest<IDBCursorWithValue>).result
+
+        if (cursor) {
+          const key = cursor.primaryKey as string
+
+          if (!validKeys.has(key)) {
+            const deleteRequest = cursor.delete()
+            deleteRequest.onsuccess = () => {
+              deletedCount++
+            }
+            deleteRequest.onerror = () => {
+              console.warn('Failed to delete invalid head entry:', key)
+            }
+          }
+
+          cursor.continue()
+        } else {
+          resolve(deletedCount)
+        }
+      }
+
+      request.onerror = () => reject(request.error)
+    })
+  }
+
+  async debugCalculateStorage(): Promise<void> {
+    if (!this.db) await this.init()
+
+    const transaction = this.db!.transaction(['heads'], 'readonly')
+    const store = transaction.objectStore('heads')
+
+    let totalSize = 0
+    let count = 0
+    const entries: Array<{ key: string; size: number }> = []
+
+    return new Promise((resolve, reject) => {
+      const request = store.openCursor()
+
+      request.onsuccess = (event) => {
+        const cursor = (event.target as IDBRequest<IDBCursorWithValue>).result
+
+        if (cursor) {
+          const key = cursor.primaryKey as string
+          const value = cursor.value as StoredHead
+
+          const entrySize = value.blob.size
+          totalSize += entrySize
+          count++
+
+          entries.push({
+            key,
+            size: entrySize,
+          })
+
+          cursor.continue()
+        } else {
+          console.group('🗄️ Head Storage Debug Info')
+          console.log(`Total entries: ${count}`)
+          console.log(`Total size: ${(totalSize / 1024 / 1024).toFixed(2)} MB`)
+          console.log(
+            `Average size per entry: ${count > 0 ? (totalSize / count / 1024).toFixed(2) : 0} KB`,
+          )
+
+          if (entries.length > 0) {
+            const sortedEntries = entries.sort((a, b) => b.size - a.size)
+            console.log(
+              'Largest entry:',
+              sortedEntries[0].key,
+              '(' + (sortedEntries[0].size / 1024).toFixed(2) + ' KB)',
+            )
+            console.log(
+              'Smallest entry:',
+              sortedEntries[sortedEntries.length - 1].key,
+              '(' + (sortedEntries[sortedEntries.length - 1].size / 1024).toFixed(2) + ' KB)',
+            )
+          }
+
+          console.groupEnd()
+          resolve()
+        }
+      }
+
+      request.onerror = () => reject(request.error)
+    })
+  }
+
+  async clearAll(): Promise<void> {
+    if (!this.db) await this.init()
+
+    const transaction = this.db!.transaction(['heads'], 'readwrite')
+    const store = transaction.objectStore('heads')
+
+    return new Promise((resolve, reject) => {
+      const request = store.clear()
+
+      request.onsuccess = () => resolve()
+      request.onerror = () => reject(request.error)
+    })
+  }
+}
+
+export const headStorage = new HeadStorage()
@@ -1,4 +1,4 @@
-import type { RenderResult } from '../rendering/batch-skin-renderer'
+import type { RawRenderResult } from '../rendering/batch-skin-renderer'

 interface StoredPreview {
  forwards: Blob
@@ -30,18 +30,15 @@ export class SkinPreviewStorage {
    })
  }

-  async store(key: string, result: RenderResult): Promise<void> {
+  async store(key: string, result: RawRenderResult): Promise<void> {
    if (!this.db) await this.init()

-    const forwardsBlob = await fetch(result.forwards).then((r) => r.blob())
-    const backwardsBlob = await fetch(result.backwards).then((r) => r.blob())
-
    const transaction = this.db!.transaction(['previews'], 'readwrite')
    const store = transaction.objectStore('previews')

    const storedPreview: StoredPreview = {
-      forwards: forwardsBlob,
-      backwards: backwardsBlob,
+      forwards: result.forwards,
+      backwards: result.backwards,
      timestamp: Date.now(),
    }

@@ -53,7 +50,7 @@ export class SkinPreviewStorage {
    })
  }

-  async retrieve(key: string): Promise<RenderResult | null> {
+  async retrieve(key: string): Promise<RawRenderResult | null> {
    if (!this.db) await this.init()

    const transaction = this.db!.transaction(['previews'], 'readonly')
@@ -70,14 +67,56 @@ export class SkinPreviewStorage {
          return
        }

-        const forwards = URL.createObjectURL(result.forwards)
-        const backwards = URL.createObjectURL(result.backwards)
-        resolve({ forwards, backwards })
+        resolve({ forwards: result.forwards, backwards: result.backwards })
      }
      request.onerror = () => reject(request.error)
    })
  }

+  async batchRetrieve(keys: string[]): Promise<Record<string, RawRenderResult | null>> {
+    if (!this.db) await this.init()
+
+    const transaction = this.db!.transaction(['previews'], 'readonly')
+    const store = transaction.objectStore('previews')
+    const results: Record<string, RawRenderResult | null> = {}
+
+    return new Promise((resolve, _reject) => {
+      let completedRequests = 0
+
+      if (keys.length === 0) {
+        resolve(results)
+        return
+      }
+
+      for (const key of keys) {
+        const request = store.get(key)
+
+        request.onsuccess = () => {
+          const result = request.result as StoredPreview | undefined
+
+          if (result) {
+            results[key] = { forwards: result.forwards, backwards: result.backwards }
+          } else {
+            results[key] = null
+          }
+
+          completedRequests++
+          if (completedRequests === keys.length) {
+            resolve(results)
+          }
+        }
+
+        request.onerror = () => {
+          results[key] = null
+          completedRequests++
+          if (completedRequests === keys.length) {
+            resolve(results)
+          }
+        }
+      }
+    })
+  }
+
  async cleanupInvalidKeys(validKeys: Set<string>): Promise<number> {
    if (!this.db) await this.init()

@@ -113,6 +152,67 @@ export class SkinPreviewStorage {
      request.onerror = () => reject(request.error)
    })
  }
+
+  async debugCalculateStorage(): Promise<void> {
+    if (!this.db) await this.init()
+
+    const transaction = this.db!.transaction(['previews'], 'readonly')
+    const store = transaction.objectStore('previews')
+
+    let totalSize = 0
+    let count = 0
+    const entries: Array<{ key: string; size: number }> = []
+
+    return new Promise((resolve, reject) => {
+      const request = store.openCursor()
+
+      request.onsuccess = (event) => {
+        const cursor = (event.target as IDBRequest<IDBCursorWithValue>).result
+
+        if (cursor) {
+          const key = cursor.primaryKey as string
+          const value = cursor.value as StoredPreview
+
+          const entrySize = value.forwards.size + value.backwards.size
+          totalSize += entrySize
+          count++
+
+          entries.push({
+            key,
+            size: entrySize,
+          })
+
+          cursor.continue()
+        } else {
+          console.group('🗄️ Skin Preview Storage Debug Info')
+          console.log(`Total entries: ${count}`)
+          console.log(`Total size: ${(totalSize / 1024 / 1024).toFixed(2)} MB`)
+          console.log(
+            `Average size per entry: ${count > 0 ? (totalSize / count / 1024).toFixed(2) : 0} KB`,
+          )
+
+          if (entries.length > 0) {
+            const sortedEntries = entries.sort((a, b) => b.size - a.size)
+            console.log(
+              'Largest entry:',
+              sortedEntries[0].key,
+              '(' + (sortedEntries[0].size / 1024).toFixed(2) + ' KB)',
+            )
+            console.log(
+              'Smallest entry:',
+              sortedEntries[sortedEntries.length - 1].key,
+              '(' + (sortedEntries[sortedEntries.length - 1].size / 1024).toFixed(2) + ' KB)',
+            )
+          }
+
+          console.groupEnd()
+          resolve()
+        }
+      }
+
+      request.onerror = () => reject(request.error)
+    })
+  }
 }

 export const skinPreviewStorage = new SkinPreviewStorage()
@@ -38,7 +38,7 @@ import {
 import { get as getSettings } from '@/helpers/settings.ts'
 import { get_default_user, login as login_flow, users } from '@/helpers/auth'
 import type { RenderResult } from '@/helpers/rendering/batch-skin-renderer.ts'
-import { generateSkinPreviews, map } from '@/helpers/rendering/batch-skin-renderer.ts'
+import { generateSkinPreviews, skinBlobUrlMap } from '@/helpers/rendering/batch-skin-renderer.ts'
 import { handleSevereError } from '@/store/error'
 import { trackEvent } from '@/helpers/analytics'
 import type AccountsCard from '@/components/ui/AccountsCard.vue'
@@ -215,7 +215,7 @@ async function loadCurrentUser() {

 function getBakedSkinTextures(skin: Skin): RenderResult | undefined {
  const key = `${skin.texture_key}+${skin.variant}+${skin.cape_id ?? 'no-cape'}`
-  return map.get(key)
+  return skinBlobUrlMap.get(key)
 }

 async function login() {
@@ -483,7 +483,7 @@ onUnmounted(() => {
  display: flex;
  flex-direction: column;
  gap: 1rem;
-  height: calc(100vh - 11rem);
+  height: 100vh;
 }

 .button-row {
@@ -97,7 +97,7 @@ export const MicrosoftIcon = _MicrosoftIcon
 export const PirateShipIcon = _PirateShipIcon
 export const AstralRinthLogo = _AstralRinthLogo

-export { default as CapeModel } from './models/cape.gltf?url'
+// Skin Models
 export { default as ClassicPlayerModel } from './models/classic-player.gltf?url'
 export { default as SlimPlayerModel } from './models/slim-player.gltf?url'

@@ -1,92 +0,0 @@
-{
-  "asset": { "version": "2.0", "generator": "Blockbench 4.12.4 glTF exporter" },
-  "scenes": [{ "nodes": [1], "name": "blockbench_export" }],
-  "scene": 0,
-  "nodes": [
-    {
-      "rotation": [0, 0, 0.19509032201612825, 0.9807852804032304],
-      "translation": [0.15625, 1, 0],
-      "name": "Cape",
-      "mesh": 0
-    },
-    { "children": [0] }
-  ],
-  "bufferViews": [
-    { "buffer": 0, "byteOffset": 0, "byteLength": 288, "target": 34962, "byteStride": 12 },
-    { "buffer": 0, "byteOffset": 288, "byteLength": 288, "target": 34962, "byteStride": 12 },
-    { "buffer": 0, "byteOffset": 576, "byteLength": 192, "target": 34962, "byteStride": 8 },
-    { "buffer": 0, "byteOffset": 768, "byteLength": 72, "target": 34963 }
-  ],
-  "buffers": [
-    {
-      "byteLength": 840,
-      "uri": "data:application/octet-stream;base64,AAAAPQAAAAAAAKA+AAAAPQAAAAAAAKC+AAAAPQAAgL8AAKA+AAAAPQAAgL8AAKC+AAAAvQAAAAAAAKC+AAAAvQAAAAAAAKA+AAAAvQAAgL8AAKC+AAAAvQAAgL8AAKA+AAAAvQAAAAAAAKC+AAAAPQAAAAAAAKC+AAAAvQAAAAAAAKA+AAAAPQAAAAAAAKA+AAAAvQAAgL8AAKA+AAAAPQAAgL8AAKA+AAAAvQAAgL8AAKC+AAAAPQAAgL8AAKC+AAAAvQAAAAAAAKA+AAAAPQAAAAAAAKA+AAAAvQAAgL8AAKA+AAAAPQAAgL8AAKA+AAAAPQAAAAAAAKC+AAAAvQAAAAAAAKC+AAAAPQAAgL8AAKC+AAAAvQAAgL8AAKC+AACAPwAAAAAAAAAAAACAPwAAAAAAAAAAAACAPwAAAAAAAAAAAACAPwAAAAAAAAAAAACAvwAAAAAAAAAAAACAvwAAAAAAAAAAAACAvwAAAAAAAAAAAACAvwAAAAAAAAAAAAAAAAAAgD8AAAAAAAAAAAAAgD8AAAAAAAAAAAAAgD8AAAAAAAAAAAAAgD8AAAAAAAAAAAAAgL8AAAAAAAAAAAAAgL8AAAAAAAAAAAAAgL8AAAAAAAAAAAAAgL8AAAAAAAAAAAAAAAAAAIA/AAAAAAAAAAAAAIA/AAAAAAAAAAAAAIA/AAAAAAAAAAAAAIA/AAAAAAAAAAAAAIC/AAAAAAAAAAAAAIC/AAAAAAAAAAAAAIC/AAAAAAAAAAAAAIC/AACAPAAAgD0AADA+AACAPQAAgDwAAAg/AAAwPgAACD8AAEA+AACAPQAAsD4AAIA9AABAPgAACD8AALA+AAAIPwAAgDwAAAA9AACAPAAAgD0AADA+AAAAPQAAMD4AAIA9AAAwPgAAAD0AAKg+AAAAPQAAMD4AAAAAAACoPgAAAAAAAEA+AACAPQAAMD4AAIA9AABAPgAACD8AADA+AAAIPwAAAAAAAIA9AACAPAAAgD0AAAAAAAAIPwAAgDwAAAg/AAACAAEAAgADAAEABAAGAAUABgAHAAUACAAKAAkACgALAAkADAAOAA0ADgAPAA0AEAASABEAEgATABEAFAAWABUAFgAXABUA"
-    }
-  ],
-  "accessors": [
-    {
-      "bufferView": 0,
-      "componentType": 5126,
-      "count": 24,
-      "max": [0.03125, 0, 0.3125],
-      "min": [-0.03125, -1, -0.3125],
-      "type": "VEC3"
-    },
-    {
-      "bufferView": 1,
-      "componentType": 5126,
-      "count": 24,
-      "max": [1, 1, 1],
-      "min": [-1, -1, -1],
-      "type": "VEC3"
-    },
-    {
-      "bufferView": 2,
-      "componentType": 5126,
-      "count": 24,
-      "max": [0.34375, 0.53125],
-      "min": [0, 0],
-      "type": "VEC2"
-    },
-    {
-      "bufferView": 3,
-      "componentType": 5123,
-      "count": 36,
-      "max": [23],
-      "min": [0],
-      "type": "SCALAR"
-    }
-  ],
-  "materials": [
-    {
-      "pbrMetallicRoughness": {
-        "metallicFactor": 0,
-        "roughnessFactor": 1,
-        "baseColorTexture": { "index": 0 }
-      },
-      "alphaMode": "MASK",
-      "alphaCutoff": 0.05,
-      "doubleSided": true
-    }
-  ],
-  "textures": [{ "sampler": 0, "source": 0, "name": "cape.png" }],
-  "samplers": [{ "magFilter": 9728, "minFilter": 9728, "wrapS": 33071, "wrapT": 33071 }],
-  "images": [
-    {
-      "mimeType": "image/png",
-      "uri": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAgCAYAAACinX6EAAAAAXNSR0IArs4c6QAABCRJREFUaEPtlktoE1EUhm/sIzFpYsBgHyn2oRZt0C5ESxWFYutKNyKIWBBR6kpBd3Ur2J0FRdCiuKmIIG4qLnzgQqTUXSlVqdoXTU0lljRpYtOHI/8dznBnOm1mphMwJWeTzJ0795zznf/cex2MMXam2S/ht38siJ8V1lgd5mOBARerc3rZnmK37rwvCyk2nE6wezMRh+4EncH9B1ql+fkU64rPsaBz5bqh4T7Daxn1Kc5zVNeEePJIci0Aq71bzenY6JChwAnA0OBHQ/OtJLnWNwqAy61R1tO3k891ueRKoDKwtqbv7MGbgCnfRgHQoqG9hyX4hc/yiho+/HNqVPFtdj2jwTpQgd/RKT7/0ZUku/o4qAJw50KYXbzr4e+3BioYzc3kwGzAUCLWFw2+UBiCb3bNTDHiPQeAP3CGNmg/6VcSBpDu3hhvDQpOCwABwrQKsRIsqYAChy/EQAXwlPiZ3a3igNPkXIyTjr8o5L7PPdzGf59c+sV/faeWeIIIAHPJ8M3kc7l1K09LKghWAIgqoPZ7djPFTlxb4D6yAgBOQfntrUVWVeRk44tplXJorOVGkVIJTBCTpw9ECFYBIEkyMfmsAXh3u1qi5MlxbbGX/x1ZSCjBAAwgfPr6h49R5UVavk0FXC2wju5p07s6iqEF0PtqSlEf+bKzDRwdgaDU7AkoySJ5Oo/D6ZRq/H0yyuJ/lxkSheG/FgCNm7kL0BoEAG32sqtY1YIHd2/mGzTMVgD3y2slqjgW9xY6ma9AThAARIMiBtOpjADwTWc0bEkB+FZsSTxTW0KBsGPXx0yvrUpEeHAAQIM7wBJLcu8DwHaP/H8i6VSND6SiSjBlRW4WWUypVIBbIgzjVgB0tpdKqLReS0KVPTMTfH0ra2cEgAmAAEd+l1z52LybqwBQYAQAyZPh6gtDW4jjuC4fHx8wXSm0JDbeI95SRYHiFZlUaWVtPQiKAugl5E8ASAUYiy8vc0C474uGasPE5PHc4g0wK/f4obom6UNimol7kTZwQLANwOuqBokqDEeQf4lfvvnNxZJcBTBAGZplWQcQ3tcgwY9oWlXinRW4ugoAgNAWWe6ocn1QvgyRTUb4RZFVljlY/3hSBYCqb6cCZo8ekuATVRZPI/gQW8FWAI1VHganVgDQUajdA6y2gAgAcZFBjTBSpG0AcAqc3VVmCMDTbxGWZvIRCaMNkJ7pFMCzVQD4liCQ8kRFUlvaBkCvL+wYw2ZmNUgCgLajFhRPJlv3ADuS1VtjPQCk823S574ffN/x1dQqy8dHR5SN2Spcbaymz2mjwNYDAD4IQn3TDpVLQIAqNjwAANRrAdoI/3sAOF7Xe1khCNQGVH1bL0JGJb1R52VtD8gVYHkAuVKpbMWZV0C2yObKunkF5EqlshVnXgHZIpsr6/4DlbxcPydnT74AAAAASUVORK5CYII="
-    }
-  ],
-  "meshes": [
-    {
-      "primitives": [
-        {
-          "mode": 4,
-          "attributes": { "POSITION": 0, "NORMAL": 1, "TEXCOORD_0": 2 },
-          "indices": 3,
-          "material": 0
-        }
-      ]
-    }
-  ]
-}
@@ -32,6 +32,7 @@
    "@modrinth/utils": "workspace:*",
    "@tresjs/cientos": "^4.3.0",
    "@tresjs/core": "^4.3.4",
+    "@tresjs/post-processing": "^2.4.0",
    "@types/markdown-it": "^14.1.1",
    "@types/three": "^0.172.0",
    "@vintl/how-ago": "^3.0.1",
@@ -41,6 +42,7 @@
    "floating-vue": "^5.2.2",
    "highlight.js": "^11.9.0",
    "markdown-it": "^13.0.2",
+    "postprocessing": "^6.37.6",
    "qrcode.vue": "^3.4.1",
    "three": "^0.172.0",
    "vue-multiselect": "3.0.0",
@@ -23,7 +23,7 @@
    <TresCanvas
      shadows
      alpha
-      :antialias="antialias"
+      :antialias="true"
      :renderer-options="{
        outputColorSpace: THREE.SRGBColorSpace,
        toneMapping: THREE.NoToneMapping,
@@ -46,36 +46,39 @@
            <primitive v-if="scene" :object="scene" />
          </Group>

-          <TresMesh
+          <!-- <TresMesh
            :position="[0, -0.095 * scale, 2]"
            :rotation="[-Math.PI / 2, 0, 0]"
-            :scale="[0.5 * 0.75 * scale, 0.5 * 0.75 * scale, 0.5 * 0.75 * scale]"
+            :scale="[0.4 * 0.75 * scale, 0.4 * 0.75 * scale, 0.4 * 0.75 * scale]"
          >
            <TresCircleGeometry :args="[1, 128]" />
            <TresMeshBasicMaterial
              color="#000000"
-              :opacity="0.2"
+              :opacity="0.5"
              transparent
              :depth-write="false"
            />
-          </TresMesh>
-
-          <TresMesh
-            :position="[0, -0.1 * scale, 2]"
-            :rotation="[-Math.PI / 2, 0, 0]"
-            :scale="[0.75 * scale, 0.75 * scale, 0.75 * scale]"
-          >
-            <TresCircleGeometry :args="[1, 128]" />
-            <TresMeshBasicMaterial
-              :map="radialTexture"
-              transparent
-              :depth-write="false"
-              :blending="THREE.AdditiveBlending"
-            />
-          </TresMesh>
+          </TresMesh> -->
        </Group>
      </Suspense>

+      <Suspense>
+        <EffectComposerPmndrs>
+          <FXAAPmndrs />
+        </EffectComposerPmndrs>
+      </Suspense>
+
+      <Suspense>
+        <TresMesh
+          :position="[0, -0.1 * scale, 2]"
+          :rotation="[-Math.PI / 2, 0, 0]"
+          :scale="[0.75 * scale, 0.75 * scale, 0.75 * scale]"
+        >
+          <TresCircleGeometry :args="[1, 128]" />
+          <TresShaderMaterial v-bind="radialSpotlightShader" />
+        </TresMesh>
+      </Suspense>
+
      <TresPerspectiveCamera
        :make-default.camel="true"
        :fov="fov"
@@ -101,6 +104,7 @@
 import * as THREE from 'three'
 import { useGLTF } from '@tresjs/cientos'
 import { useTexture, TresCanvas, useRenderLoop } from '@tresjs/core'
+import { EffectComposerPmndrs, FXAAPmndrs } from '@tresjs/post-processing'
 import {
  shallowRef,
  ref,
@@ -115,13 +119,11 @@ import {
 import {
  applyTexture,
  applyCapeTexture,
-  attachCapeToBody,
-  findBodyNode,
  createTransparentTexture,
  loadTexture as loadSkinTexture,
 } from '@modrinth/utils'
 import { useDynamicFontSize } from '../../composables'
-import { CapeModel, ClassicPlayerModel, SlimPlayerModel } from '@modrinth/assets'
+import { ClassicPlayerModel, SlimPlayerModel } from '@modrinth/assets'

 interface AnimationConfig {
  baseAnimation: string
@@ -136,7 +138,6 @@ const props = withDefaults(
    capeSrc?: string
    variant?: 'SLIM' | 'CLASSIC' | 'UNKNOWN'
    nametag?: string
-    antialias?: boolean
    scale?: number
    fov?: number
    initialRotation?: number
@@ -144,7 +145,6 @@ const props = withDefaults(
  }>(),
  {
    variant: 'CLASSIC',
-    antialias: false,
    scale: 1,
    fov: 40,
    capeSrc: undefined,
@@ -177,9 +177,6 @@ const selectedModelSrc = computed(() =>
 )

 const scene = shallowRef<THREE.Object3D | null>(null)
-const capeScene = shallowRef<THREE.Object3D | null>(null)
-const bodyNode = shallowRef<THREE.Object3D | null>(null)
-const capeAttached = ref(false)
 const lastCapeSrc = ref<string | undefined>(undefined)
 const texture = shallowRef<THREE.Texture | null>(null)
 const capeTexture = shallowRef<THREE.Texture | null>(null)
@@ -196,6 +193,54 @@ const currentAnimation = ref<string>('')
 const randomAnimationTimer = ref<number | null>(null)
 const lastRandomAnimation = ref<string>('')

+const radialSpotlightShader = computed(() => ({
+  uniforms: {
+    innerColor: { value: new THREE.Color(0x000000) },
+    outerColor: { value: new THREE.Color(0xffffff) },
+    innerOpacity: { value: 0.3 },
+    outerOpacity: { value: 0.0 },
+    falloffPower: { value: 1.2 },
+    shadowRadius: { value: 7 },
+  },
+  vertexShader: `
+    varying vec2 vUv;
+    void main() {
+      vUv = uv;
+      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+    }
+  `,
+  fragmentShader: `
+    uniform vec3 innerColor;
+    uniform vec3 outerColor;
+    uniform float innerOpacity;
+    uniform float outerOpacity;
+    uniform float falloffPower;
+    uniform float shadowRadius;
+    
+    varying vec2 vUv;
+    
+    void main() {
+      vec2 center = vec2(0.5, 0.5);
+      float dist = distance(vUv, center) * 2.0;
+      
+      // Create shadow in the center
+      float shadowFalloff = 1.0 - smoothstep(0.0, shadowRadius, dist);
+      
+      // Create overall spotlight falloff
+      float spotlightFalloff = 1.0 - smoothstep(0.0, 1.0, pow(dist, falloffPower));
+      
+      // Combine both effects
+      vec3 color = mix(outerColor, innerColor, shadowFalloff);
+      float opacity = mix(outerOpacity, innerOpacity * shadowFalloff, spotlightFalloff);
+      
+      gl_FragColor = vec4(color, opacity);
+    }
+  `,
+  transparent: true,
+  depthWrite: false,
+  depthTest: false,
+}))
+
 const { baseAnimation, randomAnimations } = toRefs(props.animationConfig)

 function initializeAnimations(loadedScene: THREE.Object3D, clips: THREE.AnimationClip[]) {
@@ -400,11 +445,9 @@ async function loadModel(src: string) {

    if (texture.value) {
      applyTexture(scene.value, texture.value)
-      texture.value.needsUpdate = true
    }

-    bodyNode.value = findBodyNode(loadedScene)
-    capeAttached.value = false
+    applyCapeTexture(scene.value, capeTexture.value, transparentTexture)

    if (animations && animations.length > 0) {
      initializeAnimations(loadedScene, animations)
@@ -418,22 +461,6 @@ async function loadModel(src: string) {
  }
 }

-async function loadCape() {
-  try {
-    const { scene: loadedCape } = await useGLTF(CapeModel)
-    capeScene.value = markRaw(loadedCape)
-
-    applyCapeTexture(capeScene.value, capeTexture.value, transparentTexture)
-
-    if (bodyNode.value && !capeAttached.value) {
-      attachCapeToBodyWrapper()
-    }
-  } catch (error) {
-    console.error('Failed to load cape:', error)
-    capeScene.value = null
-  }
-}
-
 async function loadAndApplyTexture(src: string) {
  if (!src) return null

@@ -465,25 +492,9 @@ async function loadAndApplyCapeTexture(src: string | undefined) {
    capeTexture.value = null
  }

-  if (capeScene.value) {
-    applyCapeTexture(capeScene.value, capeTexture.value, transparentTexture)
+  if (scene.value) {
+    applyCapeTexture(scene.value, capeTexture.value, transparentTexture)
  }
-
-  if (capeScene.value && bodyNode.value) {
-    if (!src && capeAttached.value && capeScene.value.parent) {
-      capeScene.value.parent.remove(capeScene.value)
-      capeAttached.value = false
-    } else if (src && !capeAttached.value) {
-      attachCapeToBodyWrapper()
-    }
-  }
-}
-
-function attachCapeToBodyWrapper() {
-  if (!bodyNode.value || !capeScene.value || capeAttached.value) return
-
-  attachCapeToBody(bodyNode.value, capeScene.value)
-  capeAttached.value = true
 }

 const centre = ref<[number, number, number]>([0, 1, 0])
@@ -539,39 +550,6 @@ function onCanvasClick() {
  hasDragged.value = false
 }

-const radialTexture = createRadialTexture(512)
-radialTexture.minFilter = THREE.LinearFilter
-radialTexture.magFilter = THREE.LinearFilter
-radialTexture.wrapS = radialTexture.wrapT = THREE.ClampToEdgeWrapping
-
-function createRadialTexture(size: number): THREE.CanvasTexture {
-  const canvas = document.createElement('canvas')
-  canvas.width = canvas.height = size
-  const ctx = canvas.getContext('2d') as CanvasRenderingContext2D
-  const grad = ctx.createRadialGradient(size / 2, size / 2, 0, size / 2, size / 2, size / 2)
-  grad.addColorStop(0, 'rgba(119,119,119,0.1)')
-  grad.addColorStop(0.9, 'rgba(255,255,255,0)')
-  ctx.fillStyle = grad
-  ctx.fillRect(0, 0, size, size)
-  return new THREE.CanvasTexture(canvas)
-}
-
-watch(
-  [bodyNode, capeScene, isModelLoaded],
-  ([newBodyNode, newCapeScene, modelLoaded]) => {
-    if (newBodyNode && newCapeScene && modelLoaded && !capeAttached.value) {
-      attachCapeToBodyWrapper()
-    }
-  },
-  { immediate: true },
-)
-
-watch(capeScene, (newCapeScene) => {
-  if (newCapeScene && bodyNode.value && isModelLoaded.value && !capeAttached.value) {
-    attachCapeToBodyWrapper()
-  }
-})
-
 watch(selectedModelSrc, (src) => loadModel(src))
 watch(
  () => props.textureSrc,
@@ -587,7 +565,6 @@ watch(
 watch(
  () => props.capeSrc,
  async (newCapeSrc) => {
-    await loadCape()
    await loadAndApplyCapeTexture(newCapeSrc)
  },
 )
@@ -619,8 +596,6 @@ onBeforeMount(async () => {
    if (props.capeSrc) {
      await loadAndApplyCapeTexture(props.capeSrc)
    }
-
-    await loadCape()
  } catch (error) {
    console.error('Failed to initialize skin preview:', error)
  }
@@ -59,25 +59,23 @@ export function applyTexture(model: THREE.Object3D, texture: THREE.Texture): voi
  model.traverse((child) => {
    if ((child as THREE.Mesh).isMesh) {
      const mesh = child as THREE.Mesh
-
-      // Skip cape meshes
-      if (mesh.name === 'Cape') return
-
      const materials = Array.isArray(mesh.material) ? mesh.material : [mesh.material]

      materials.forEach((mat: THREE.Material) => {
        if (mat instanceof THREE.MeshStandardMaterial) {
-          mat.map = texture
-          mat.metalness = 0
-          mat.color.set(0xffffff)
-          mat.toneMapped = false
-          mat.flatShading = true
-          mat.roughness = 1
-          mat.needsUpdate = true
-          mat.depthTest = true
-          mat.side = THREE.DoubleSide
-          mat.alphaTest = 0.1
-          mat.depthWrite = true
+          if (mat.name !== 'cape') {
+            mat.map = texture
+            mat.metalness = 0
+            mat.color.set(0xffffff)
+            mat.toneMapped = false
+            mat.flatShading = true
+            mat.roughness = 1
+            mat.needsUpdate = true
+            mat.depthTest = true
+            mat.side = THREE.DoubleSide
+            mat.alphaTest = 0.1
+            mat.depthWrite = true
+          }
        }
      })
    }
@@ -96,41 +94,27 @@ export function applyCapeTexture(

      materials.forEach((mat: THREE.Material) => {
        if (mat instanceof THREE.MeshStandardMaterial) {
-          mat.map = texture || transparentTexture || null
-          mat.transparent = transparentTexture ? true : false
-          mat.metalness = 0
-          mat.color.set(0xffffff)
-          mat.toneMapped = false
-          mat.flatShading = true
-          mat.roughness = 1
-          mat.needsUpdate = true
-          mat.depthTest = true
-          mat.depthWrite = true
-          mat.side = THREE.DoubleSide
-          mat.alphaTest = 0.1
+          if (mat.name === 'cape') {
+            mat.map = texture || transparentTexture || null
+            mat.transparent = !texture || transparentTexture ? true : false
+            mat.metalness = 0
+            mat.color.set(0xffffff)
+            mat.toneMapped = false
+            mat.flatShading = true
+            mat.roughness = 1
+            mat.needsUpdate = true
+            mat.depthTest = true
+            mat.depthWrite = true
+            mat.side = THREE.DoubleSide
+            mat.alphaTest = 0.1
+            mat.visible = !!texture
+          }
        }
      })
    }
  })
 }

-export function attachCapeToBody(
-  bodyNode: THREE.Object3D,
-  capeModel: THREE.Object3D,
-  position = { x: 0, y: -1, z: 0.01 },
-  rotation = { x: 0, y: Math.PI / 2, z: 0 },
-): void {
-  if (!bodyNode || !capeModel) return
-
-  if (capeModel.parent) {
-    capeModel.parent.remove(capeModel)
-  }
-
-  capeModel.position.set(position.x, position.y, position.z)
-  capeModel.rotation.set(rotation.x, rotation.y, rotation.z)
-  bodyNode.add(capeModel)
-}
-
 export function findBodyNode(model: THREE.Object3D): THREE.Object3D | null {
  let bodyNode: THREE.Object3D | null = null

@@ -162,39 +146,25 @@ export function createTransparentTexture(): THREE.Texture {
 export async function setupSkinModel(
  modelUrl: string,
  textureUrl: string,
-  capeModelUrl?: string,
  capeTextureUrl?: string,
  config: SkinRendererConfig = {},
 ): Promise<{
  model: THREE.Object3D
  bodyNode: THREE.Object3D | null
-  capeModel: THREE.Object3D | null
 }> {
-  // Load model and texture in parallel
  const [gltf, texture] = await Promise.all([loadModel(modelUrl), loadTexture(textureUrl, config)])

  const model = gltf.scene.clone()
  applyTexture(model, texture)

-  const bodyNode = findBodyNode(model)
-  let capeModel: THREE.Object3D | null = null
-
-  // Load cape if provided
-  if (capeModelUrl && capeTextureUrl) {
-    const [capeGltf, capeTexture] = await Promise.all([
-      loadModel(capeModelUrl),
-      loadTexture(capeTextureUrl, config),
-    ])
-
-    capeModel = capeGltf.scene.clone()
-    applyCapeTexture(capeModel, capeTexture)
-
-    if (bodyNode && capeModel) {
-      attachCapeToBody(bodyNode, capeModel)
-    }
+  if (capeTextureUrl) {
+    const capeTexture = await loadTexture(capeTextureUrl, config)
+    applyCapeTexture(model, capeTexture)
  }

-  return { model, bodyNode, capeModel }
+  const bodyNode = findBodyNode(model)
+
+  return { model, bodyNode }
 }

 export function disposeCaches(): void {
@@ -487,6 +487,9 @@ importers:
      '@tresjs/core':
        specifier: ^4.3.4
        version: 4.3.6(three@0.172.0)(typescript@5.5.4)(vue@3.5.13(typescript@5.5.4))
+      '@tresjs/post-processing':
+        specifier: ^2.4.0
+        version: 2.4.0(@tresjs/core@4.3.6(three@0.172.0)(typescript@5.5.4)(vue@3.5.13(typescript@5.5.4)))(three@0.172.0)(typescript@5.5.4)(vue@3.5.13(typescript@5.5.4))
      '@types/markdown-it':
        specifier: ^14.1.1
        version: 14.1.1
@@ -514,6 +517,9 @@ importers:
      markdown-it:
        specifier: ^13.0.2
        version: 13.0.2
+      postprocessing:
+        specifier: ^6.37.6
+        version: 6.37.6(three@0.172.0)
      qrcode.vue:
        specifier: ^3.4.1
        version: 3.4.1(vue@3.5.13(typescript@5.5.4))
@@ -2558,6 +2564,13 @@ packages:
      three: '>=0.133'
      vue: '>=3.4'

+  '@tresjs/post-processing@2.4.0':
+    resolution: {integrity: sha512-4l18DTLkn0Y/abyn+FD/gSJ6/SC01oXn+/qPgUxMgxZ8zGaw4PZbOi4yorhbSbOTp0gO4D1X7lNOvNUokqJwFw==}
+    peerDependencies:
+      '@tresjs/core': '>=4.0'
+      three: '>=0.169'
+      vue: '>=3.4'
+
  '@trysound/sax@0.2.0':
    resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
    engines: {node: '>=10.13.0'}
@@ -6450,6 +6463,11 @@ packages:
  posthog-js@1.158.2:
    resolution: {integrity: sha512-ovb7GHHRNDf6vmuL+8lbDukewzDzQlLZXg3d475hrfHSBgidYeTxtLGtoBcUz4x6558BLDFjnSip+f3m4rV9LA==}

+  postprocessing@6.37.6:
+    resolution: {integrity: sha512-KrdKLf1257RkoIk3z3nhRS0aToKrX2xJgtR0lbnOQUjd+1I4GVNv1gQYsQlfRglvEXjpzrwqOA5fXfoDBimadg==}
+    peerDependencies:
+      three: '>= 0.157.0 < 0.179.0'
+
  potpack@1.0.2:
    resolution: {integrity: sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ==}

@@ -10455,6 +10473,16 @@ snapshots:
    transitivePeerDependencies:
      - typescript

+  '@tresjs/post-processing@2.4.0(@tresjs/core@4.3.6(three@0.172.0)(typescript@5.5.4)(vue@3.5.13(typescript@5.5.4)))(three@0.172.0)(typescript@5.5.4)(vue@3.5.13(typescript@5.5.4))':
+    dependencies:
+      '@tresjs/core': 4.3.6(three@0.172.0)(typescript@5.5.4)(vue@3.5.13(typescript@5.5.4))
+      '@vueuse/core': 12.8.2(typescript@5.5.4)
+      postprocessing: 6.37.6(three@0.172.0)
+      three: 0.172.0
+      vue: 3.5.13(typescript@5.5.4)
+    transitivePeerDependencies:
+      - typescript
+
  '@trysound/sax@0.2.0': {}

  '@tweenjs/tween.js@23.1.3': {}
@@ -15670,6 +15698,10 @@ snapshots:
      preact: 10.23.2
      web-vitals: 4.2.3

+  postprocessing@6.37.6(three@0.172.0):
+    dependencies:
+      three: 0.172.0
+
  potpack@1.0.2: {}

  preact@10.23.2: {}