435 lines
12 KiB
TypeScript
435 lines
12 KiB
TypeScript
import * as THREE from 'three'
|
|
import type { GLTF } from 'three/examples/jsm/loaders/GLTFLoader.js'
|
|
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
|
|
|
|
import { createSolidSkinLayerGeometry } from './solid-skin-layer'
|
|
|
|
export interface SkinRendererConfig {
|
|
textureColorSpace?: THREE.ColorSpace
|
|
textureFlipY?: boolean
|
|
textureMagFilter?: THREE.MagnificationTextureFilter
|
|
textureMinFilter?: THREE.MinificationTextureFilter
|
|
}
|
|
|
|
const ENABLE_VOXEL_LAYER_GEOMETRY = true
|
|
const MODEL_PIXEL_SIZE = 1 / 16
|
|
const NON_LEG_VERTICAL_OFFSET = -MODEL_PIXEL_SIZE / 2
|
|
|
|
/** Aligns the torso, arms, head, and cape with the stationary legs. */
|
|
function offsetNonLegModelParts(model: THREE.Object3D): void {
|
|
if (model.userData.nonLegPartsOffsetApplied) return
|
|
|
|
const nonLegRoots = new Set(['Head', 'Right_Arm', 'Left_Arm', 'Body_2', 'Body_Layer', 'Cape'])
|
|
model.traverse((node) => {
|
|
if (nonLegRoots.has(node.name)) node.position.y += NON_LEG_VERTICAL_OFFSET
|
|
})
|
|
model.userData.nonLegPartsOffsetApplied = true
|
|
}
|
|
|
|
/**
|
|
* Rebuilds the outer layer as solid, textured voxels. This follows 3D Skin
|
|
* Layers' SolidPixelWrapper: every non-transparent outer-layer pixel becomes
|
|
* a real cube with six faces instead of a zero-thickness quad.
|
|
*/
|
|
function getSkinLayerDefinition(name: string): {
|
|
width: number
|
|
height: number
|
|
depth: number
|
|
u: number
|
|
v: number
|
|
} | null {
|
|
if (name === 'Hat_Layer') return { width: 8, height: 8, depth: 8, u: 32, v: 0 }
|
|
if (name === 'Body_Layer') return { width: 8, height: 12, depth: 4, u: 16, v: 32 }
|
|
if (name === 'Right_Leg_Layer') return { width: 4, height: 12, depth: 4, u: 0, v: 32 }
|
|
if (name === 'Left_Leg_Layer') return { width: 4, height: 12, depth: 4, u: 0, v: 48 }
|
|
if (name === 'Right_Arm_Layer') return { width: 4, height: 12, depth: 4, u: 40, v: 32 }
|
|
if (name === 'Left_Arm_Layer') return { width: 4, height: 12, depth: 4, u: 48, v: 48 }
|
|
return null
|
|
}
|
|
|
|
function readSkinPixels(texture: THREE.Texture): Uint8ClampedArray | null {
|
|
const image = texture.image as CanvasImageSource | undefined
|
|
if (!image) return null
|
|
|
|
try {
|
|
const canvas = document.createElement('canvas')
|
|
canvas.width = canvas.height = 64
|
|
const context = canvas.getContext('2d')
|
|
if (!context) return null
|
|
context.drawImage(image, 0, 0, 64, 64)
|
|
return context.getImageData(0, 0, 64, 64).data
|
|
} catch {
|
|
// Cross-origin images may not be readable. The regular GLTF layer remains
|
|
// as a graceful fallback in that case.
|
|
return null
|
|
}
|
|
}
|
|
|
|
function scaleLayerGeometry(geometry: THREE.BufferGeometry, name: string): void {
|
|
geometry.computeBoundingBox()
|
|
const bounds = geometry.boundingBox
|
|
if (!bounds) return
|
|
|
|
const isHead = name === 'Hat_Layer'
|
|
const isBody = name === 'Body_Layer'
|
|
// The authored GLTF outer shells already include most of the mod's offset.
|
|
// Apply only the remaining per-pixel correction; multiplying by the full
|
|
// config values would make the head pixels noticeably oversized.
|
|
const scaleX = isHead ? 1.05 : isBody ? 1 : 1.02
|
|
const scaleY = isHead ? 1.05 : 1
|
|
const scaleZ = isHead ? 1.05 : 1.02
|
|
const center = bounds.getCenter(new THREE.Vector3())
|
|
const position = geometry.getAttribute('position')
|
|
const vertex = new THREE.Vector3()
|
|
|
|
for (let i = 0; i < position.count; i++) {
|
|
vertex.fromBufferAttribute(position, i)
|
|
vertex.sub(center)
|
|
vertex.set(vertex.x * scaleX, vertex.y * scaleY, vertex.z * scaleZ)
|
|
vertex.add(center)
|
|
position.setXYZ(i, vertex.x, vertex.y, vertex.z)
|
|
}
|
|
|
|
position.needsUpdate = true
|
|
geometry.computeBoundingBox()
|
|
geometry.computeBoundingSphere()
|
|
}
|
|
|
|
export function applyThreeDSkinLayers(model: THREE.Object3D, texture?: THREE.Texture): void {
|
|
offsetNonLegModelParts(model)
|
|
const pixels = texture ? readSkinPixels(texture) : null
|
|
if (!pixels || !texture) return
|
|
model.traverse((child) => {
|
|
const mesh = child as THREE.Mesh
|
|
if (
|
|
!mesh.isMesh ||
|
|
!mesh.name.endsWith('_Layer') ||
|
|
!mesh.geometry ||
|
|
mesh.userData.threeDSkinLayersApplied
|
|
)
|
|
return
|
|
|
|
// GLTF clones share BufferGeometry objects. Clone before changing vertex data
|
|
// so one preview (or cached model) cannot affect another.
|
|
mesh.geometry = mesh.geometry.clone()
|
|
const definition = getSkinLayerDefinition(mesh.name)
|
|
if (ENABLE_VOXEL_LAYER_GEOMETRY && pixels && definition) {
|
|
const meshBounds = new THREE.Box3().setFromBufferAttribute(
|
|
mesh.geometry.getAttribute('position') as THREE.BufferAttribute,
|
|
)
|
|
const isSlimArm =
|
|
mesh.name.includes('Arm') && meshBounds.getSize(new THREE.Vector3()).x < 0.25
|
|
const voxelDefinition = isSlimArm ? { ...definition, width: 3 } : definition
|
|
const voxelGeometry = createSolidSkinLayerGeometry(mesh, texture!, pixels, voxelDefinition)
|
|
if (voxelGeometry) {
|
|
scaleLayerGeometry(voxelGeometry, mesh.name)
|
|
const voxelMaterials = Array.isArray(mesh.material) ? mesh.material : [mesh.material]
|
|
voxelMaterials.forEach((material) => {
|
|
if (!(material instanceof THREE.MeshStandardMaterial)) return
|
|
// The mod renders these as alpha-tested cutouts. Keeping depth writes
|
|
// deterministic avoids transparent-surface sorting cracks between voxels.
|
|
material.transparent = false
|
|
material.alphaTest = 0.1
|
|
material.depthWrite = true
|
|
material.alphaToCoverage = true
|
|
material.polygonOffset = false
|
|
material.polygonOffsetFactor = 0
|
|
material.polygonOffsetUnits = 0
|
|
material.needsUpdate = true
|
|
})
|
|
mesh.geometry.dispose()
|
|
mesh.geometry = voxelGeometry
|
|
mesh.userData.threeDSkinLayersApplied = true
|
|
return
|
|
}
|
|
}
|
|
const geometry = mesh.geometry
|
|
geometry.computeBoundingBox()
|
|
const bounds = geometry.boundingBox
|
|
if (!bounds) return
|
|
|
|
scaleLayerGeometry(geometry, mesh.name)
|
|
mesh.userData.threeDSkinLayersApplied = true
|
|
})
|
|
}
|
|
|
|
const modelCache: Map<string, GLTF> = new Map()
|
|
const modelPromiseCache: Map<string, Promise<GLTF>> = new Map()
|
|
const textureCache: Map<string, THREE.Texture> = new Map()
|
|
const texturePromiseCache: Map<string, Promise<THREE.Texture>> = new Map()
|
|
|
|
export async function loadModel(modelUrl: string): Promise<GLTF> {
|
|
if (modelCache.has(modelUrl)) {
|
|
return modelCache.get(modelUrl)!
|
|
}
|
|
|
|
if (modelPromiseCache.has(modelUrl)) {
|
|
return modelPromiseCache.get(modelUrl)!
|
|
}
|
|
|
|
const loader = new GLTFLoader()
|
|
const promise = new Promise<GLTF>((resolve, reject) => {
|
|
loader.load(
|
|
modelUrl,
|
|
(gltf) => {
|
|
modelCache.set(modelUrl, gltf)
|
|
resolve(gltf)
|
|
},
|
|
undefined,
|
|
reject,
|
|
)
|
|
}).finally(() => {
|
|
modelPromiseCache.delete(modelUrl)
|
|
})
|
|
|
|
modelPromiseCache.set(modelUrl, promise)
|
|
return promise
|
|
}
|
|
|
|
export async function loadTexture(
|
|
textureUrl: string,
|
|
config: SkinRendererConfig = {},
|
|
): Promise<THREE.Texture> {
|
|
const cacheKey = `${textureUrl}_${JSON.stringify(config)}`
|
|
|
|
if (textureCache.has(cacheKey)) {
|
|
return textureCache.get(cacheKey)!
|
|
}
|
|
|
|
if (texturePromiseCache.has(cacheKey)) {
|
|
return texturePromiseCache.get(cacheKey)!
|
|
}
|
|
|
|
const textureLoader = new THREE.TextureLoader()
|
|
const promise = new Promise<THREE.Texture>((resolve, reject) => {
|
|
textureLoader.load(
|
|
textureUrl,
|
|
(texture) => {
|
|
texture.colorSpace = config.textureColorSpace ?? THREE.SRGBColorSpace
|
|
texture.flipY = config.textureFlipY ?? false
|
|
texture.magFilter = config.textureMagFilter ?? THREE.NearestFilter
|
|
texture.minFilter = config.textureMinFilter ?? THREE.NearestFilter
|
|
|
|
textureCache.set(cacheKey, texture)
|
|
resolve(texture)
|
|
},
|
|
undefined,
|
|
reject,
|
|
)
|
|
}).finally(() => {
|
|
texturePromiseCache.delete(cacheKey)
|
|
})
|
|
|
|
texturePromiseCache.set(cacheKey, promise)
|
|
return promise
|
|
}
|
|
|
|
function applyMap(mat: THREE.MeshStandardMaterial, texture: THREE.Texture | null): boolean {
|
|
const hadMap = mat.map !== null
|
|
const hasMap = texture !== null
|
|
|
|
if (mat.map !== texture) {
|
|
mat.map = texture
|
|
}
|
|
|
|
return hadMap !== hasMap
|
|
}
|
|
|
|
function setShaderMaterialProperties(
|
|
mat: THREE.MeshStandardMaterial,
|
|
properties: {
|
|
alphaTest: number
|
|
flatShading: boolean
|
|
side: THREE.Side
|
|
toneMapped: boolean
|
|
transparent?: boolean
|
|
},
|
|
): boolean {
|
|
let needsUpdate = false
|
|
|
|
if (mat.alphaTest !== properties.alphaTest) {
|
|
mat.alphaTest = properties.alphaTest
|
|
needsUpdate = true
|
|
}
|
|
|
|
if (mat.flatShading !== properties.flatShading) {
|
|
mat.flatShading = properties.flatShading
|
|
needsUpdate = true
|
|
}
|
|
|
|
if (mat.side !== properties.side) {
|
|
mat.side = properties.side
|
|
needsUpdate = true
|
|
}
|
|
|
|
if (mat.toneMapped !== properties.toneMapped) {
|
|
mat.toneMapped = properties.toneMapped
|
|
needsUpdate = true
|
|
}
|
|
|
|
if (properties.transparent !== undefined && mat.transparent !== properties.transparent) {
|
|
mat.transparent = properties.transparent
|
|
needsUpdate = true
|
|
}
|
|
|
|
return needsUpdate
|
|
}
|
|
|
|
function setCommonMaterialProperties(mat: THREE.MeshStandardMaterial): void {
|
|
if (mat.metalness !== 0) {
|
|
mat.metalness = 0
|
|
}
|
|
|
|
if (mat.color.getHex() !== 0xffffff) {
|
|
mat.color.set(0xffffff)
|
|
}
|
|
|
|
if (mat.roughness !== 1) {
|
|
mat.roughness = 1
|
|
}
|
|
|
|
if (!mat.depthTest) {
|
|
mat.depthTest = true
|
|
}
|
|
|
|
if (!mat.depthWrite) {
|
|
mat.depthWrite = true
|
|
}
|
|
}
|
|
|
|
export function applyTexture(model: THREE.Object3D, texture: THREE.Texture): void {
|
|
model.traverse((child) => {
|
|
if ((child as THREE.Mesh).isMesh) {
|
|
const mesh = child as THREE.Mesh
|
|
const isSkinLayer = mesh.name.endsWith('_Layer')
|
|
const materials = Array.isArray(mesh.material) ? mesh.material : [mesh.material]
|
|
|
|
materials.forEach((mat: THREE.Material) => {
|
|
if (mat instanceof THREE.MeshStandardMaterial) {
|
|
if (mat.name !== 'cape') {
|
|
const mapNeedsUpdate = applyMap(mat, texture)
|
|
const propertiesNeedUpdate = setShaderMaterialProperties(mat, {
|
|
alphaTest: 0.1,
|
|
flatShading: true,
|
|
side: THREE.FrontSide,
|
|
toneMapped: false,
|
|
transparent: isSkinLayer,
|
|
})
|
|
if (mat.alphaToCoverage !== isSkinLayer) {
|
|
mat.alphaToCoverage = isSkinLayer
|
|
mat.needsUpdate = true
|
|
}
|
|
|
|
setCommonMaterialProperties(mat)
|
|
|
|
if (mapNeedsUpdate || propertiesNeedUpdate) {
|
|
mat.needsUpdate = true
|
|
}
|
|
}
|
|
}
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
export function applyCapeTexture(
|
|
model: THREE.Object3D,
|
|
texture: THREE.Texture | null,
|
|
transparentTexture?: THREE.Texture,
|
|
): void {
|
|
model.traverse((child) => {
|
|
if ((child as THREE.Mesh).isMesh) {
|
|
const mesh = child as THREE.Mesh
|
|
const materials = Array.isArray(mesh.material) ? mesh.material : [mesh.material]
|
|
|
|
materials.forEach((mat: THREE.Material) => {
|
|
if (mat instanceof THREE.MeshStandardMaterial) {
|
|
if (mat.name === 'cape') {
|
|
const nextMap = texture || transparentTexture || null
|
|
const mapNeedsUpdate = applyMap(mat, nextMap)
|
|
const propertiesNeedUpdate = setShaderMaterialProperties(mat, {
|
|
alphaTest: 0.1,
|
|
flatShading: true,
|
|
side: THREE.DoubleSide,
|
|
toneMapped: false,
|
|
transparent: !texture || !!transparentTexture,
|
|
})
|
|
|
|
setCommonMaterialProperties(mat)
|
|
|
|
if (mapNeedsUpdate || propertiesNeedUpdate) {
|
|
mat.needsUpdate = true
|
|
}
|
|
|
|
mat.visible = !!texture
|
|
}
|
|
}
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
export function findBodyNode(model: THREE.Object3D): THREE.Object3D | null {
|
|
let bodyNode: THREE.Object3D | null = null
|
|
|
|
model.traverse((node) => {
|
|
if (node.name === 'Body') {
|
|
bodyNode = node
|
|
}
|
|
})
|
|
|
|
return bodyNode
|
|
}
|
|
|
|
export function createTransparentTexture(): THREE.Texture {
|
|
const canvas = document.createElement('canvas')
|
|
canvas.width = canvas.height = 1
|
|
const ctx = canvas.getContext('2d') as CanvasRenderingContext2D
|
|
ctx.clearRect(0, 0, 1, 1)
|
|
|
|
const texture = new THREE.CanvasTexture(canvas)
|
|
texture.needsUpdate = true
|
|
texture.colorSpace = THREE.SRGBColorSpace
|
|
texture.flipY = false
|
|
texture.magFilter = THREE.NearestFilter
|
|
texture.minFilter = THREE.NearestFilter
|
|
|
|
return texture
|
|
}
|
|
|
|
export async function setupSkinModel(
|
|
modelUrl: string,
|
|
textureUrl: string,
|
|
capeTextureUrl?: string,
|
|
config: SkinRendererConfig = {},
|
|
): Promise<{
|
|
model: THREE.Object3D
|
|
bodyNode: THREE.Object3D | null
|
|
}> {
|
|
const [gltf, texture] = await Promise.all([loadModel(modelUrl), loadTexture(textureUrl, config)])
|
|
|
|
const model = gltf.scene.clone()
|
|
applyTexture(model, texture)
|
|
applyThreeDSkinLayers(model, texture)
|
|
|
|
if (capeTextureUrl) {
|
|
const capeTexture = await loadTexture(capeTextureUrl, config)
|
|
applyCapeTexture(model, capeTexture)
|
|
}
|
|
|
|
const bodyNode = findBodyNode(model)
|
|
|
|
return { model, bodyNode }
|
|
}
|
|
|
|
export function disposeCaches(): void {
|
|
Array.from(textureCache.values()).forEach((texture) => {
|
|
texture.dispose()
|
|
})
|
|
|
|
textureCache.clear()
|
|
texturePromiseCache.clear()
|
|
modelCache.clear()
|
|
modelPromiseCache.clear()
|
|
}
|