feat(paint-slots): KTX2 finish library — fabric/leather/concrete/metal (phase 4)

Wire KTX2 into the catalog finish path and add 15 textured finishes across four
new families, all as GPU-compressed KTX2 (512px) + a webp picker thumbnail.

- Shared `ktx2-loader.ts`: one KTX2Loader (Basis transcoder) used by both the
  GLB loader and catalog textures; `ensureKtx2Support(renderer)` runs once at
  viewer init (GPUDeviceWatcher) so `.ktx2` finishes load even with no GLB in
  the scene. `use-gltf-ktx2` now reuses the shared instance.
- `materials.ts`: texture loaders pick the KTX2 loader for `.ktx2` urls, the
  image loader otherwise (all three load paths).
- `material-library.ts`: 15 entries (fabric ×6, leather ×2, concrete ×4,
  metal ×3). Neutral albedo for tinting, `flipY: false` (compressed textures
  can't flip), `repeat` per real-world tile size, metals `metalness: 1`.
  Normals encoded UASTC, data maps ETC1S/linear.

Assets generated from raw sources via the new community
`scripts/build-material-textures.ts`. 1024/256 tiers + raws kept out of git.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Wassim SAMAD
2026-06-16 14:37:23 -04:00
co-authored by Claude Opus 4.8
parent 0e8a8c3d14
commit 042f855586
74 changed files with 629 additions and 28 deletions
+3 -25
View File
@@ -1,38 +1,16 @@
import { useGLTF } from '@react-three/drei'
import { useThree } from '@react-three/fiber'
import { KTX2Loader } from 'three/examples/jsm/Addons.js'
import { MeshoptDecoder } from 'three/examples/jsm/libs/meshopt_decoder.module.js'
const ktx2LoaderInstance = new KTX2Loader()
ktx2LoaderInstance.setTranscoderPath('https://cdn.jsdelivr.net/gh/pmndrs/drei-assets@master/basis/')
const ktx2ConfiguredRenderers = new WeakSet<object>()
const ktx2WarningLoggedRenderers = new WeakSet<object>()
import { ensureKtx2Support, ktx2Loader } from '../lib/ktx2-loader'
const useGLTFKTX2 = (path: string): ReturnType<typeof useGLTF> => {
const gl = useThree((state) => state.gl)
return useGLTF(path, true, true, (loader) => {
const renderer = gl as unknown as object
if (!ktx2ConfiguredRenderers.has(renderer)) {
try {
ktx2LoaderInstance.detectSupport(gl)
ktx2ConfiguredRenderers.add(renderer)
} catch (error) {
// Some WebGPU flows can transiently call this before backend init.
// Avoid crashing the whole scene; scans may render without KTX2 on this pass.
if (!ktx2WarningLoggedRenderers.has(renderer)) {
console.warn('[viewer] Skipping KTX2 support detection for now.', error)
ktx2WarningLoggedRenderers.add(renderer)
}
}
}
if (ktx2ConfiguredRenderers.has(renderer)) {
if (ensureKtx2Support(gl)) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
loader.setKTX2Loader(ktx2LoaderInstance as any)
loader.setKTX2Loader(ktx2Loader as any)
}
loader.setMeshoptDecoder(MeshoptDecoder)
})
}