Improve item display (#283)

* Refactor item display to separate component

* Load assets and render item models

* Cache rendered items

src/app/services/DataFetcher.ts

@@ -16,24 +16,25 @@ type Version = {
 declare var __LATEST_VERSION__: string
 const latestVersion = __LATEST_VERSION__ ?? ''
 const mcmetaUrl = 'https://raw.githubusercontent.com/misode/mcmeta'
+const mcmetaTarballUrl = 'https://github.com/misode/mcmeta/tarball'
 const changesUrl = 'https://raw.githubusercontent.com/misode/technical-changes'
 
-type McmetaTypes = 'summary' | 'data' | 'assets' | 'registries'
+type McmetaTypes = 'summary' | 'data' | 'data-json' | 'assets' | 'assets-json' | 'registries' | 'atlas'
 
 interface RefInfo {
 	dynamic?: boolean
 	ref?: string
 }
 
-function mcmeta(version: RefInfo, type: McmetaTypes) {
-	return `${mcmetaUrl}/${version.dynamic ? type : `${version.ref}-${type}`}`
+function mcmeta(version: RefInfo, type: McmetaTypes, tarball?: boolean) {
+	return `${tarball ? mcmetaTarballUrl : mcmetaUrl}/${version.dynamic ? type : `${version.ref}-${type}`}`
 }
 
 async function validateCache(version: RefInfo) {
 	await applyPatches()
 	if (version.dynamic) {
 		if (localStorage.getItem(CACHE_LATEST_VERSION) !== latestVersion) {
-			await deleteMatching(url => url.startsWith(`${mcmetaUrl}/summary/`) || url.startsWith(`${mcmetaUrl}/data/`) || url.startsWith(`${mcmetaUrl}/assets/`) || url.startsWith(`${mcmetaUrl}/registries/`))
+			await deleteMatching(url => url.startsWith(`${mcmetaUrl}/summary/`) || url.startsWith(`${mcmetaUrl}/data/`) || url.startsWith(`${mcmetaUrl}/assets/`) || url.startsWith(`${mcmetaUrl}/registries/`) || url.startsWith(`${mcmetaUrl}/atlas/`) || url.startsWith(`${mcmetaTarballUrl}/assets-json/`))
 			localStorage.setItem(CACHE_LATEST_VERSION, latestVersion)
 		}
 		version.ref = latestVersion
@@ -105,11 +106,8 @@ export async function fetchAllPresets(versionId: VersionId, registry: string) {
 	const version = config.versions.find(v => v.id === versionId)!
 	await validateCache(version)
 	try {
-		const entries = await cachedFetch<any>(`${mcmeta(version, 'registries')}/${registry}/data.min.json`)
-		return new Map<string, unknown>(await Promise.all(
-			entries.map(async (e: string) =>
-				[e, await cachedFetch(`${mcmeta(version, 'data')}/data/minecraft/${registry}/${e}.json`)])
-		))
+		const type = ['block_definition', 'model', 'font'].includes(registry) ? 'assets' : 'data'
+		return new Map<string, unknown>(Object.entries(await cachedFetch(`${mcmeta(version, 'summary')}/${type}/${registry}/data.min.json`)))
 	} catch (e) {
 		throw new Error(`Error occurred while fetching all ${registry} presets: ${message(e)}`)
 	}
@@ -159,11 +157,53 @@ export async function fetchVersions(): Promise<VersionMeta[]> {
 	}
 }
 
-export function getTextureUrl(versionId: VersionId, path: string): string {
+export function getAssetUrl(versionId: VersionId, type: string, path: string): string {
 	const version = config.versions.find(v => v.id === versionId)!
-	return `${mcmeta(version, 'assets')}/assets/minecraft/textures/${path}.png`
+	return `${mcmeta(version, 'assets')}/assets/minecraft/${type}/${path}.png`
 }
 
+export async function fetchResources(versionId: VersionId) {
+	const version = config.versions.find(v => v.id === versionId)!
+	await validateCache(version)
+	try {
+		const [models, uvMapping, atlas] = await Promise.all([
+			fetchAllPresets(versionId, 'model'),
+			cachedFetch(`${mcmeta(version, 'atlas')}/all/data.min.json`),
+			loadImage(`${mcmeta(version, 'atlas')}/all/atlas.png`),
+		])
+		return { models, uvMapping, atlas }
+	} catch (e) {
+		throw new Error(`Error occured while fetching resources: ${message(e)}`)
+	}
+}
+
+async function loadImage(src: string) {
+	return new Promise<HTMLImageElement>(res => {
+		const image = new Image()
+		image.onload = () => res(image)
+		image.crossOrigin = 'Anonymous'
+		image.src = src
+	})
+}
+
+/*
+async function loadImage(src: string) {
+	const buffer = await cachedFetch(src, { decode: r => r.arrayBuffer() })
+	const blob = new Blob([buffer], { type: 'image/png' })
+	const img = new Image()
+	img.src = URL.createObjectURL(blob)
+	return new Promise<ImageData>((res) => {
+		img.onload = () => {
+			const canvas = document.createElement('canvas')
+			const ctx = canvas.getContext('2d')!
+			ctx.drawImage(img, 0, 0)
+			const imgData = ctx.getImageData(0, 0, img.width, img.height)
+			res(imgData)
+		}
+	})
+}
+*/
+
 export interface Change {
 	group: string,
 	version: string,

src/app/services/Resources.ts

@@ -0,0 +1,101 @@
+import type { BlockModelProvider, TextureAtlasProvider, UV } from 'deepslate/render'
+import { BlockModel, Identifier, ItemRenderer, TextureAtlas, upperPowerOfTwo } from 'deepslate/render'
+import { message } from '../Utils.js'
+import { fetchResources } from './DataFetcher.js'
+import type { VersionId } from './Schemas.js'
+
+const Resources: Record<string, ResourceManager | Promise<ResourceManager>> = {}
+
+export async function getResources(version: VersionId) {
+	if (!Resources[version]) {
+		Resources[version] = (async () => {
+			try {
+				const { models, uvMapping, atlas} = await fetchResources(version)
+				Resources[version] = new ResourceManager(models, uvMapping, atlas)
+				return Resources[version]
+			} catch (e) {
+				console.error('Error: ', e)
+				throw new Error(`Cannot get resources for version ${version}: ${message(e)}`)
+			}
+		})()
+		return Resources[version]
+	}
+	return Resources[version]
+}
+
+const RENDER_SIZE = 128
+const ItemRenderCache = new Map<string, Promise<string>>()
+
+export async function renderItem(version: VersionId, item: string) {
+	const cache_key = `${version} ${item}`
+	const cached = ItemRenderCache.get(cache_key)
+	if (cached !== undefined) {
+		return cached
+	}
+
+	const promise = (async () => {
+		const canvas = document.createElement('canvas')
+		canvas.width = RENDER_SIZE
+		canvas.height = RENDER_SIZE
+		const resources = await getResources(version)
+		const gl = canvas.getContext('webgl2', { preserveDrawingBuffer: true })
+		if (!gl) {
+			throw new Error('Cannot get WebGL2 context')
+		}
+		const renderer = new ItemRenderer(gl, Identifier.parse(item), resources)
+		renderer.drawItem()
+		return canvas.toDataURL()
+	})()
+	ItemRenderCache.set(cache_key, promise)
+	return promise
+}
+
+export class ResourceManager implements BlockModelProvider, TextureAtlasProvider {
+	private blockModels: { [id: string]: BlockModel }
+	private textureAtlas: TextureAtlas
+
+	constructor(models: Map<string, unknown>, uvMapping: any, textureAtlas: HTMLImageElement) {
+		this.blockModels = {}
+		this.textureAtlas = TextureAtlas.empty()
+		this.loadBlockModels(models)
+		this.loadBlockAtlas(textureAtlas, uvMapping)
+	}
+
+	public getBlockModel(id: Identifier) {
+		return this.blockModels[id.toString()]
+	}
+
+	public getTextureUV(id: Identifier) {
+		return this.textureAtlas.getTextureUV(id)
+	}
+
+	public getTextureAtlas() {
+		return this.textureAtlas.getTextureAtlas()
+	}
+
+	private loadBlockModels(models: Map<string, unknown>) {
+		[...models.entries()].forEach(([id, model]) => {
+			this.blockModels[Identifier.create(id).toString()] = BlockModel.fromJson(id, model)
+		})
+		Object.values(this.blockModels).forEach(m => m.flatten(this))
+	}
+
+	private loadBlockAtlas(image: HTMLImageElement, textures: any) {
+		const atlasCanvas = document.createElement('canvas')
+		const w = upperPowerOfTwo(image.width)
+		const h = upperPowerOfTwo(image.height)
+		atlasCanvas.width = w
+		atlasCanvas.height = h
+		const ctx = atlasCanvas.getContext('2d')!
+		ctx.drawImage(image, 0, 0)
+		const imageData = ctx.getImageData(0, 0, w, h)
+
+		const idMap: Record<string, UV> = {}
+		Object.keys(textures).forEach(id => {
+			const [u, v, du, dv] = textures[id]
+			const dv2 = (du !== dv && id.startsWith('block/')) ? du : dv
+			idMap[Identifier.create(id).toString()] = [u / w, v / h, (u + du) / w, (v + dv2) / h]
+		})
+		this.textureAtlas = new TextureAtlas(imageData, idMap)
+	}
+}