aether-engine 1.0.0

package/src/ui/SpriteSheetManager.tsx

@@ -0,0 +1,198 @@
+import { createSignal } from "solid-js";
+import type { AetherEngine } from "../index";
+import { packAtlas as packAtlasAlgo } from "../utils/packer";
+
+export function SpriteSheetManager(_props: { engine: AetherEngine }) {
+	const [images, setImages] = createSignal<
+		{ name: string; img: HTMLImageElement }[]
+	>([]);
+	const [atlasName, setAtlasName] = createSignal("packed_atlas");
+	const [status, setStatus] = createSignal("");
+
+	let canvasRef!: HTMLCanvasElement;
+
+	const handleFileUpload = (e: Event) => {
+		const files = (e.target as HTMLInputElement).files;
+		if (!files) return;
+		Array.from(files).forEach((file) => {
+			const reader = new FileReader();
+			reader.onload = (ev) => {
+				const img = new Image();
+				img.onload = () => {
+					setImages((prev) => [
+						...prev,
+						{ name: file.name.split(".")[0], img },
+					]);
+				};
+				img.src = ev.target?.result as string;
+			};
+			reader.readAsDataURL(file);
+		});
+	};
+
+	const packAtlas = async () => {
+		if (images().length === 0) return;
+		setStatus("Packing...");
+
+		const inputs = images().map((img) => {
+			const cvs = document.createElement("canvas");
+			cvs.width = img.img.width;
+			cvs.height = img.img.height;
+			cvs.getContext("2d")?.drawImage(img.img, 0, 0);
+			return {
+				id: img.name,
+				width: img.img.width,
+				height: img.img.height,
+				data: cvs,
+			};
+		});
+
+		const result = packAtlasAlgo(inputs);
+
+		const canvas = canvasRef;
+		canvas.width = result.atlasCanvas.width;
+		canvas.height = result.atlasCanvas.height;
+		const ctx = canvas.getContext("2d")!;
+		ctx.clearRect(0, 0, canvas.width, canvas.height);
+		ctx.drawImage(result.atlasCanvas, 0, 0);
+
+		const dataUri = canvas.toDataURL("image/png");
+
+		try {
+			const res = await fetch("/__aether_dev/save-sprite", {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({
+					name: atlasName(),
+					png: dataUri,
+					metadata: result.meta,
+				}),
+			});
+			const out = await res.json();
+			if (out.success) {
+				setStatus(
+					`Saved successfully: public/assets/sprites/${atlasName()}.png`,
+				);
+			}
+		} catch (_err) {
+			setStatus("Failed to save via dev API endpoint!");
+		}
+	};
+
+	return (
+		<div
+			style={{
+				width: "100%",
+				height: "100%",
+				display: "flex",
+				gap: "5px",
+				color: "#EEEEEE",
+			}}
+		>
+			<div
+				style={{
+					width: "250px",
+					display: "flex",
+					"flex-direction": "column",
+					gap: "10px",
+				}}
+			>
+				<h3
+					style={{ margin: "2px 0 0 0", color: "#EEEEEE", "font-size": "14px" }}
+				>
+					Atlas Tools
+				</h3>
+				<p style={{ "font-size": "11px", color: "#B4B4B4", margin: 0 }}>
+					Upload loose sprites to dynamically package them into an optimized
+					Atlas map using bin packing.
+				</p>
+
+				<input
+					type="file"
+					multiple
+					accept="image/png, image/jpeg"
+					onChange={handleFileUpload}
+					style={{
+						background: "#282828",
+						padding: "6px",
+						color: "#EEEEEE",
+						"border-radius": "3px",
+						border: "1px solid #222222",
+						"font-size": "11px",
+					}}
+				/>
+
+				<div
+					style={{ "border-top": "1px solid #222222", margin: "5px 0" }}
+				></div>
+
+				<label style={{ "font-size": "11px", color: "#B4B4B4" }}>
+					Output Atlas Name:
+				</label>
+				<input
+					type="text"
+					value={atlasName()}
+					onInput={(e) => setAtlasName(e.currentTarget.value)}
+					style={{
+						padding: "6px",
+						"border-radius": "3px",
+						border: "1px solid #222222",
+						background: "#282828",
+						color: "#EEEEEE",
+						"font-size": "12px",
+					}}
+				/>
+
+				<button
+					onClick={packAtlas}
+					style={{
+						padding: "8px",
+						"border-radius": "3px",
+						border: "1px solid #222222",
+						cursor: "pointer",
+						background: "#4A4A4A",
+						color: "#EEEEEE",
+						"font-weight": "bold",
+						"margin-top": "5px",
+						"font-size": "12px",
+					}}
+				>
+					Pack & Save to Disk
+				</button>
+
+				<div
+					style={{
+						"margin-top": "10px",
+						color: "#EEEEEE",
+						"font-size": "11px",
+						"word-wrap": "break-word",
+					}}
+				>
+					{status()}
+				</div>
+			</div>
+
+			<div
+				style={{
+					flex: 1,
+					background: `repeating-conic-gradient(#333 0% 25%, #2a2a2a 0% 50%) 50% / 16px 16px`,
+					"border-radius": "4px",
+					border: "1px solid #222222",
+					overflow: "auto",
+					display: "flex",
+					"justify-content": "center",
+					"align-items": "center",
+				}}
+			>
+				<canvas
+					ref={canvasRef}
+					style={{
+						"max-width": "100%",
+						"max-height": "100%",
+						"image-rendering": "pixelated",
+					}}
+				></canvas>
+			</div>
+		</div>
+	);
+}

package/src/utils/GLTFLoader.ts

@@ -0,0 +1,257 @@
+import { WebIO, Document } from "@gltf-transform/core";
+import { mat4, quat, vec3 } from "gl-matrix";
+
+export interface GLBData {
+	positions: number[];
+	normals: number[];
+	uvs: number[];
+	indices: number[];
+	joints: number[];
+	weights: number[];
+	
+	// Animation Data
+	nodes: GLTFNode[];
+	animations: GLTFAnimation[];
+	skins: GLTFSkin[];
+}
+
+export interface GLTFNode {
+	id: number;
+	name: string;
+	translation: vec3;
+	rotation: quat;
+	scale: vec3;
+	
+	baseTranslation: vec3;
+	baseRotation: quat;
+	baseScale: vec3;
+
+	children: number[];
+	parent: number;
+	globalMatrix: mat4;
+}
+
+export interface GLTFSkin {
+	name: string;
+	joints: number[];     // node indices
+	inverseBindMatrices: mat4[]; // length matches joints
+}
+
+export interface GLTFAnimation {
+	name: string;
+	duration: number;
+	channels: GLTFChannel[];
+}
+
+export interface GLTFChannel {
+	node: number;          // node idx
+	path: "translation" | "rotation" | "scale";
+	timestamps: Float32Array; // seconds
+	values: Float32Array;     // vec3 or quat per timestamp
+}
+
+export class GLTFLoader {
+	static async load(url: string): Promise<GLBData> {
+		const io = new WebIO();
+		const doc = await io.read(url);
+		const root = doc.getRoot();
+
+		const result: GLBData = {
+			positions: [],
+			normals: [],
+			uvs: [],
+			indices: [],
+			joints: [],
+			weights: [],
+			nodes: [],
+			animations: [],
+			skins: []
+		};
+
+		// 1. Build Node Hierarchy
+		const rootNodes = root.listNodes();
+		for (let i = 0; i < rootNodes.length; i++) {
+			const n = rootNodes[i];
+			const t = n.getTranslation();
+			const r = n.getRotation();
+			const s = n.getScale();
+			
+			result.nodes.push({
+				id: i,
+				name: n.getName() || `Node_${i}`,
+				translation: vec3.fromValues(t[0], t[1], t[2]),
+				rotation: quat.fromValues(r[0], r[1], r[2], r[3]),
+				scale: vec3.fromValues(s[0], s[1], s[2]),
+				baseTranslation: vec3.fromValues(t[0], t[1], t[2]),
+				baseRotation: quat.fromValues(r[0], r[1], r[2], r[3]),
+				baseScale: vec3.fromValues(s[0], s[1], s[2]),
+				children: n.listChildren().map(c => rootNodes.indexOf(c)),
+				parent: -1,
+				globalMatrix: mat4.create()
+			});
+		}
+
+		// Assign parents
+		for (const node of result.nodes) {
+			for (const childId of node.children) {
+				result.nodes[childId].parent = node.id;
+			}
+		}
+
+		// 2. Extract Geometry (Assuming one main Skinned Mesh for simplicity)
+		let vertexOffset = 0;
+		for (const mesh of root.listMeshes()) {
+			for (const prim of mesh.listPrimitives()) {
+				const posAccessor = prim.getAttribute('POSITION');
+				const normAccessor = prim.getAttribute('NORMAL');
+				const uvAccessor = prim.getAttribute('TEXCOORD_0');
+				const jointAccessor = prim.getAttribute('JOINTS_0');
+				const weightAccessor = prim.getAttribute('WEIGHTS_0');
+				const indicesAccessor = prim.getIndices();
+
+				if (posAccessor) {
+					for (let i = 0; i < posAccessor.getCount(); i++) {
+						const el = posAccessor.getElement(i, []);
+						result.positions.push(el[0], el[1], el[2]);
+					}
+				}
+
+				if (normAccessor) {
+					for (let i = 0; i < normAccessor.getCount(); i++) {
+						const el = normAccessor.getElement(i, []);
+						result.normals.push(el[0], el[1], el[2]);
+					}
+				} else if (posAccessor) {
+					// Fallback fill
+					for(let i=0; i<posAccessor.getCount(); i++) result.normals.push(0,1,0); 
+				}
+
+				if (uvAccessor) {
+					for (let i = 0; i < uvAccessor.getCount(); i++) {
+						const el = uvAccessor.getElement(i, []);
+						result.uvs.push(el[0], el[1]);
+					}
+				} else if (posAccessor) {
+					for(let i=0; i<posAccessor.getCount(); i++) result.uvs.push(0,0);
+				}
+
+				if (jointAccessor) {
+					for (let i = 0; i < jointAccessor.getCount(); i++) {
+						const el = jointAccessor.getElement(i, []);
+						result.joints.push(el[0], el[1], el[2], el[3]);
+					}
+				} else if (posAccessor) {
+					for(let i=0; i<posAccessor.getCount(); i++) result.joints.push(0,0,0,0);
+				}
+
+				if (weightAccessor) {
+					for (let i = 0; i < weightAccessor.getCount(); i++) {
+						const el = weightAccessor.getElement(i, []);
+						
+						// Normalize weights just in case they are not unorm or slightly off
+						const sum = el[0] + el[1] + el[2] + el[3];
+						if (sum > 0) {
+							result.weights.push(el[0]/sum, el[1]/sum, el[2]/sum, el[3]/sum);
+						} else {
+							result.weights.push(1, 0, 0, 0);
+						}
+					}
+				} else if (posAccessor) {
+					for(let i=0; i<posAccessor.getCount(); i++) result.weights.push(1,0,0,0);
+				}
+
+				if (indicesAccessor) {
+					for (let i = 0; i < indicesAccessor.getCount(); i++) {
+						result.indices.push(indicesAccessor.getScalar(i) + vertexOffset);
+					}
+				} else if (posAccessor) {
+					// generate sequential indices
+					for (let i = 0; i < posAccessor.getCount(); i++) {
+						result.indices.push(i + vertexOffset);
+					}
+				}
+
+				if (posAccessor) {
+					vertexOffset += posAccessor.getCount();
+				}
+			}
+		}
+
+		// 3. Extract Skins (Inverse Bind Matrices)
+		for (const skin of root.listSkins()) {
+			const joints = skin.listJoints().map(j => rootNodes.indexOf(j));
+			const ibmAccessor = skin.getInverseBindMatrices();
+			const ibms: mat4[] = [];
+			
+			if (ibmAccessor) {
+				for (let i = 0; i < ibmAccessor.getCount(); i++) {
+					const el = ibmAccessor.getElement(i, []);
+					ibms.push(mat4.fromValues(
+						el[0], el[1], el[2], el[3],
+						el[4], el[5], el[6], el[7],
+						el[8], el[9], el[10], el[11],
+						el[12], el[13], el[14], el[15]
+					));
+				}
+			} else {
+				// Default Identity
+				for(let i=0; i<joints.length; i++) ibms.push(mat4.create());
+			}
+
+			result.skins.push({
+				name: skin.getName() || "Skin",
+				joints,
+				inverseBindMatrices: ibms
+			});
+		}
+
+		// 4. Extract Animations
+		for (const anim of root.listAnimations()) {
+			const channels: GLTFChannel[] = [];
+			let maxTime = 0;
+
+			for (const channel of anim.listChannels()) {
+				const sampler = channel.getSampler();
+				const targetNode = channel.getTargetNode();
+				if (!sampler || !targetNode) continue;
+
+				const inputAccessor = sampler.getInput();
+				const outputAccessor = sampler.getOutput();
+				if (!inputAccessor || !outputAccessor) continue;
+
+				// Timestamps
+				const times = new Float32Array(inputAccessor.getCount());
+				for (let i = 0; i < inputAccessor.getCount(); i++) {
+					const t = inputAccessor.getScalar(i);
+					times[i] = t;
+					if (t > maxTime) maxTime = t;
+				}
+
+				// Values (vec3 or vec4)
+				const outSize = outputAccessor.getElementSize();
+				const values = new Float32Array(outputAccessor.getCount() * outSize);
+				for (let i = 0; i < outputAccessor.getCount(); i++) {
+					const val = outputAccessor.getElement(i, []);
+					for(let j=0; j<outSize; j++) {
+						values[i*outSize + j] = val[j];
+					}
+				}
+
+				channels.push({
+					node: rootNodes.indexOf(targetNode),
+					path: channel.getTargetPath() as any, // "translation" | "rotation" | "scale"
+					timestamps: times,
+					values: values
+				});
+			}
+
+			result.animations.push({
+				name: anim.getName() || `Animation_${result.animations.length}`,
+				duration: maxTime,
+				channels
+			});
+		}
+
+		return result;
+	}
+}

package/src/utils/ObjLoader.ts

@@ -0,0 +1,81 @@
+export class ObjLoader {
+	static async load(
+		url: string,
+	): Promise<{ positions: number[]; uvs: number[]; normals: number[] }> {
+		const response = await fetch(url);
+		const text = await response.text();
+
+		const positions: number[] = [];
+		const uvs: number[] = [];
+		const normals: number[] = [];
+
+		const v: number[][] = [];
+		const vt: number[][] = [];
+		const vn: number[][] = [];
+
+		const lines = text.split("\n");
+
+		for (let i = 0; i < lines.length; i++) {
+			const line = lines[i].trim();
+			if (line.length === 0 || line.startsWith("#")) continue;
+
+			const parts = line.split(/\s+/);
+			const type = parts[0];
+
+			if (type === "v") {
+				v.push([parseFloat(parts[1]), parseFloat(parts[2]), parseFloat(parts[3])]);
+			} else if (type === "vt") {
+				vt.push([parseFloat(parts[1]), parseFloat(parts[2])]);
+			} else if (type === "vn") {
+				vn.push([parseFloat(parts[1]), parseFloat(parts[2]), parseFloat(parts[3])]);
+			} else if (type === "f") {
+				// faces can be triangles or quads (or more)
+				// format can be v, v/vt, v/vt/vn, or v//vn
+				const vertices = parts.slice(1);
+				
+				// Triangulate if more than 3 vertices (primitive fan)
+				for (let j = 1; j < vertices.length - 1; j++) {
+					const v0 = vertices[0];
+					const v1 = vertices[j];
+					const v2 = vertices[j + 1];
+
+					const processVertex = (vertData: string) => {
+						const [vIdx, vtIdx, vnIdx] = vertData.split("/");
+						
+						// Position (1-indexed)
+						if (vIdx) {
+							const vert = v[parseInt(vIdx) - 1];
+							positions.push(vert[0], vert[1], vert[2]);
+						}
+
+						// UVs (1-indexed)
+						if (vtIdx) {
+							const tex = vt[parseInt(vtIdx) - 1];
+							uvs.push(tex[0], tex[1]);
+						} else {
+							uvs.push(0, 0); // Default if missing
+						}
+
+						// Normals (1-indexed)
+						if (vnIdx) {
+							const norm = vn[parseInt(vnIdx) - 1];
+							normals.push(norm[0], norm[1], norm[2]);
+						} else {
+							normals.push(0, 0, 1); // Default if missing
+						}
+					};
+
+					processVertex(v0);
+					processVertex(v1);
+					processVertex(v2);
+				}
+			}
+		}
+
+		return {
+			positions,
+			uvs,
+			normals,
+		};
+	}
+}

package/src/utils/idb.ts

@@ -0,0 +1,137 @@
+const getAppNamespace = () => {
+	const meta = document.querySelector('meta[name="aether-app-id"]');
+	if (meta) {
+		const content = meta.getAttribute("content") || "default";
+		const safeStr = btoa(content).replace(/=/g, "");
+		return `AetherDevTools_${safeStr}`;
+	}
+	return "AetherDevTools";
+};
+
+export const getDB = (): Promise<IDBDatabase> => {
+	return new Promise((resolve, reject) => {
+		const req = indexedDB.open(getAppNamespace(), 5);
+		req.onerror = () => reject(req.error);
+		req.onsuccess = () => resolve(req.result);
+		req.onupgradeneeded = (e: any) => {
+			const db = e.target.result as IDBDatabase;
+			if (e.oldVersion < 4) {
+				if (db.objectStoreNames.contains("SpriteHistory")) {
+					db.deleteObjectStore("SpriteHistory");
+				}
+			}
+			if (!db.objectStoreNames.contains("SpriteHistory")) {
+				db.createObjectStore("SpriteHistory", {
+					keyPath: "id",
+					autoIncrement: true,
+				});
+			}
+			if (!db.objectStoreNames.contains("AppState")) {
+				db.createObjectStore("AppState", { keyPath: "key" });
+			}
+		};
+	});
+};
+
+export const setActiveHistoryId = async (id: number): Promise<void> => {
+	const db = await getDB();
+	return new Promise((resolve, reject) => {
+		const tx = db.transaction("AppState", "readwrite");
+		const st = tx.objectStore("AppState");
+		const req = st.put({ key: "active_history_id", value: id });
+		req.onsuccess = () => resolve();
+		req.onerror = () => reject(req.error);
+	});
+};
+
+export const getActiveHistoryId = async (): Promise<number | null> => {
+	const db = await getDB();
+	return new Promise((resolve, reject) => {
+		const tx = db.transaction("AppState", "readonly");
+		const st = tx.objectStore("AppState");
+		const req = st.get("active_history_id");
+		req.onsuccess = () =>
+			resolve(req.result !== undefined ? req.result.value : null);
+		req.onerror = () => reject(req.error);
+	});
+};
+
+export const pushHistory = async (state: any): Promise<number> => {
+	const db = await getDB();
+	return new Promise((resolve, reject) => {
+		const tx = db.transaction("SpriteHistory", "readwrite");
+		const st = tx.objectStore("SpriteHistory");
+		const req = st.add({ timestamp: Date.now(), state });
+		req.onsuccess = (e: any) => resolve(e.target.result);
+		req.onerror = () => reject(req.error);
+	});
+};
+
+export const getHistory = async (id: number): Promise<any> => {
+	const db = await getDB();
+	return new Promise((resolve, reject) => {
+		const tx = db.transaction("SpriteHistory", "readonly");
+		const st = tx.objectStore("SpriteHistory");
+		const req = st.get(id);
+		req.onsuccess = () => resolve(req.result?.state);
+		req.onerror = () => reject(req.error);
+	});
+};
+
+export const getLatestHistoryId = async (): Promise<number | null> => {
+	const db = await getDB();
+	return new Promise((resolve, reject) => {
+		const tx = db.transaction("SpriteHistory", "readonly");
+		const st = tx.objectStore("SpriteHistory");
+		const req = st.openCursor(null, "prev");
+		req.onsuccess = (e: any) => {
+			const cursor = e.target.result;
+			if (cursor) resolve(cursor.key);
+			else resolve(null);
+		};
+		req.onerror = () => reject(req.error);
+	});
+};
+
+export const getPrevHistoryId = async (
+	currentId: number,
+): Promise<number | null> => {
+	const db = await getDB();
+	return new Promise((resolve, reject) => {
+		const tx = db.transaction("SpriteHistory", "readonly");
+		const st = tx.objectStore("SpriteHistory");
+		const req = st.openCursor(IDBKeyRange.upperBound(currentId, true), "prev");
+		req.onsuccess = (e: any) => {
+			const cursor = e.target.result;
+			resolve(cursor ? cursor.key : null);
+		};
+		req.onerror = () => reject(req.error);
+	});
+};
+
+export const getNextHistoryId = async (
+	currentId: number,
+): Promise<number | null> => {
+	const db = await getDB();
+	return new Promise((resolve, reject) => {
+		const tx = db.transaction("SpriteHistory", "readonly");
+		const st = tx.objectStore("SpriteHistory");
+		const req = st.openCursor(IDBKeyRange.lowerBound(currentId, true), "next");
+		req.onsuccess = (e: any) => {
+			const cursor = e.target.result;
+			resolve(cursor ? cursor.key : null);
+		};
+		req.onerror = () => reject(req.error);
+	});
+};
+
+export const truncateHistoryAfter = async (id: number): Promise<void> => {
+	const db = await getDB();
+	return new Promise((resolve, reject) => {
+		const tx = db.transaction("SpriteHistory", "readwrite");
+		const st = tx.objectStore("SpriteHistory");
+		const req = st.delete(IDBKeyRange.lowerBound(id, true));
+		req.onsuccess = () => resolve();
+		req.onerror = () => reject(req.error);
+	});
+};