@downdraft/engine 0.1.1 → 0.1.2-alpha.5

package/dist/modules/devtools/src/scene-inspector.js

@@ -0,0 +1,571 @@
+// ============================================================================
+// BaseSceneInspector — generic DevTools API exposed on window.__sceneInspector.
+// Games extend this class and provide game-specific features via
+// IGameDevToolsExtension.
+//
+// Extends DevToolsDataBridge (which provides perf/GC/GPU/telemetry data feeds)
+// and adds scene-tree / model / gizmo / material-editor methods.
+// ============================================================================
+import { compileGraphToMaterialWithGraph, compileUIGraphToMaterial, isExtremeScale, MaterialLibrary, maxDimension, uiGraphToMaterialGraph } from "@downdraft/engine";
+import { createDefaultDdmeta, createDefaultImportSettings, detectFormat, loadModel, normalizeModel, writeDdmeta } from "@downdraft/engine/libraries/models";
+import { createLogger } from "@downdraft/engine/util/logger";
+import { DevToolsDataBridge } from "./data-bridge.js";
+import { useSceneStore } from "./scene-store.js";
+const log = createLogger("info");
+export class BaseSceneInspector extends DevToolsDataBridge {
+    // Core material library — the single source of truth for materials created
+    // via the graph editor. Graph-compiled materials are registered here.
+    materialLibrary = new MaterialLibrary();
+    // Preview mesh renderer for live material graph preview (set by the game).
+    previewMeshRenderer = null;
+    /** Typed view of the renderer as IDevToolsRenderer (scene-specific methods).
+     *  The base class stores it as IDevToolsDataRenderer; this casts for scene use. */
+    get sceneRenderer() {
+        return this.renderer;
+    }
+    // --- Optional overrides ---
+    getDebugOverlayProvider() {
+        return null;
+    }
+    // getPanelExtensions() and getOverlayToggles() inherited from DevToolsDataBridge.
+    // --- Init ---
+    init(renderer) {
+        super.init(renderer);
+        // Apply default label visibility (generic)
+        useSceneStore.getState().setShowLabels(true);
+    }
+    buildApi() {
+        const api = super.buildApi();
+        Object.assign(api, {
+            // --- Scene Tree ---
+            getSceneTree: () => {
+                return useSceneStore.getState().getSceneTree();
+            },
+            selectNode: (id) => {
+                useSceneStore.getState().selectNode(id);
+                if (id) {
+                    const node = useSceneStore.getState().getNode(id);
+                    if (node) {
+                        this.sceneRenderer?.setGizmoPosition(node.position);
+                    }
+                }
+            },
+            updateNodeTransform: (id, transform) => {
+                const node = useSceneStore.getState().getNode(id);
+                if (node && node.locked)
+                    return;
+                useSceneStore.getState().updateNodeTransform(id, transform);
+                const updated = useSceneStore.getState().getNode(id);
+                if (updated) {
+                    this.sceneRenderer?.setGizmoPosition(updated.position);
+                }
+            },
+            updateNodeProperty: (id, key, value) => {
+                const node = useSceneStore.getState().getNode(id);
+                if (node && node.locked && key !== "locked")
+                    return;
+                useSceneStore.getState().updateNodeProperty(id, key, value);
+            },
+            // --- Model Import ---
+            importModel: async (base64Data, filename) => {
+                try {
+                    let actualBase64 = base64Data;
+                    if (base64Data === "__importBuffer") {
+                        actualBase64 = window.__importBuffer;
+                        if (!actualBase64) {
+                            return { success: false, error: "No import buffer found on window" };
+                        }
+                    }
+                    const binaryString = atob(actualBase64);
+                    const bytes = new Uint8Array(binaryString.length);
+                    for (let i = 0; i < binaryString.length; i++) {
+                        bytes[i] = binaryString.charCodeAt(i);
+                    }
+                    const buffer = bytes.buffer;
+                    const format = detectFormat(filename);
+                    if (!format) {
+                        return { success: false, error: `Unknown format: ${filename}` };
+                    }
+                    const resolver = this.getAssetResolver();
+                    let mtlData = null;
+                    if (format === "obj" && resolver) {
+                        mtlData = resolver.findMTLForOBJ(filename, buffer);
+                    }
+                    let binData = null;
+                    if (format === "gltf" && resolver) {
+                        binData = resolver.findBinForGLTF(filename, buffer);
+                    }
+                    const modelData = await loadModel(buffer, filename, mtlData, binData);
+                    if (modelData.meshes.length === 0) {
+                        return { success: false, error: "No meshes found in model" };
+                    }
+                    if (modelData.materials && resolver) {
+                        for (let i = 0; i < modelData.materials.length; i++) {
+                            const mat = modelData.materials[i];
+                            if (!mat.textureData && mat.textureUri) {
+                                const texUrl = resolver.getTextureUrl(mat.textureUri.toLowerCase());
+                                if (texUrl) {
+                                    const texBuf = resolver.syncFetchArrayBuffer(texUrl);
+                                    if (texBuf) {
+                                        mat.textureData = texBuf;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                    const playerPos = this.sceneRenderer?.getPlayerWorldPos(0) ?? { x: 0, y: 5, z: 0 };
+                    const pos = [playerPos.x, playerPos.y, playerPos.z];
+                    const nodeId = useSceneStore.getState().addModel(modelData, filename, pos);
+                    this.sceneRenderer?.uploadModel(nodeId, modelData.meshes, modelData.materials);
+                    // Check for extreme scale and return warnings for the UI to prompt auto-fit
+                    const warnings = modelData.normalizationWarnings ?? [];
+                    const needsAutoFit = modelData.bounds ? isExtremeScale(modelData.bounds) : false;
+                    const maxDim = modelData.bounds ? maxDimension(modelData.bounds) : 0;
+                    return { success: true, nodeId, warnings, needsAutoFit, maxDim };
+                }
+                catch (e) {
+                    return { success: false, error: String(e) };
+                }
+            },
+            removeNode: (id) => {
+                this.sceneRenderer?.removeModel(id);
+                useSceneStore.getState().removeNode(id);
+            },
+            // --- Model Auto-Fit ---
+            // Detects models with extreme scale and re-normalizes with auto-fit enabled.
+            // Writes a .ddmeta.json sidecar so the fix persists across reloads.
+            autoFitModel: (nodeId, targetMaxDim = 2.0) => {
+                try {
+                    const node = useSceneStore.getState().getNode(nodeId);
+                    if (!node || !node.modelData) {
+                        return { success: false, error: "Node not found or not a model" };
+                    }
+                    // Re-normalize with auto-fit enabled
+                    const settings = createDefaultImportSettings(node.modelData.sourceUpAxis, node.modelData.sourceUnits);
+                    settings.autoFit = targetMaxDim;
+                    settings.centerToOrigin = true;
+                    normalizeModel(node.modelData, settings);
+                    // Re-upload the normalized meshes to the GPU
+                    this.sceneRenderer?.uploadModel(nodeId, node.modelData.meshes, node.modelData.materials);
+                    // Generate a .ddmeta.json sidecar for persistence
+                    const sidecar = writeDdmeta(settings);
+                    return { success: true, sidecar };
+                }
+                catch (e) {
+                    return { success: false, error: String(e) };
+                }
+            },
+            // Generate a starter .ddmeta.json sidecar for a model node
+            generateSidecar: (nodeId) => {
+                try {
+                    const node = useSceneStore.getState().getNode(nodeId);
+                    if (!node || !node.modelData) {
+                        return { success: false, error: "Node not found or not a model" };
+                    }
+                    const defaults = createDefaultImportSettings(node.modelData.sourceUpAxis, node.modelData.sourceUnits);
+                    const sidecar = createDefaultDdmeta(node.name, defaults);
+                    return { success: true, sidecar };
+                }
+                catch (e) {
+                    return { success: false, error: String(e) };
+                }
+            },
+            duplicateNode: (id) => {
+                try {
+                    const newId = useSceneStore.getState().duplicateNode(id);
+                    if (!newId) {
+                        return { success: false, error: "Cannot duplicate this node type" };
+                    }
+                    const node = useSceneStore.getState().getNode(newId);
+                    if (node && node.modelData) {
+                        this.sceneRenderer?.uploadModel(newId, node.modelData.meshes, node.modelData.materials);
+                    }
+                    this.sceneRenderer?.setGizmoPosition(node.position);
+                    return { success: true, nodeId: newId };
+                }
+                catch (e) {
+                    return { success: false, error: String(e) };
+                }
+            },
+            getNodeJSON: (id) => {
+                const node = useSceneStore.getState().getNode(id);
+                if (!node)
+                    return null;
+                return JSON.stringify({
+                    id: node.id,
+                    name: node.name,
+                    type: node.type,
+                    visible: node.visible,
+                    locked: node.locked,
+                    position: node.position,
+                    rotation: node.rotation,
+                    scale: node.scale,
+                    modelFormat: node.modelFormat,
+                    children: node.children,
+                    parentId: node.parentId,
+                }, null, 2);
+            },
+            getAvailableModels: () => {
+                return this.getAssetResolver()?.getAvailableModels() ?? [];
+            },
+            getModelThumbnail: async (path) => {
+                const resolver = this.getAssetResolver();
+                if (!resolver)
+                    return null;
+                return this.generateThumbnail(path, resolver);
+            },
+            importAssetModel: async (path) => {
+                try {
+                    const resolver = this.getAssetResolver();
+                    if (!resolver)
+                        return { success: false, error: "No asset resolver" };
+                    const file = resolver.getAvailableModels().find((f) => f.path === path);
+                    if (!file) {
+                        return { success: false, error: `Model not found: ${path}` };
+                    }
+                    const buffer = resolver.syncFetchArrayBuffer(file.url);
+                    if (!buffer) {
+                        return { success: false, error: `Fetch failed for ${file.name}` };
+                    }
+                    let mtlData = null;
+                    if (file.format === "obj") {
+                        mtlData = resolver.findMTLForOBJ(file.name, buffer);
+                    }
+                    let binData = null;
+                    if (file.format === "gltf") {
+                        binData = resolver.findBinForGLTF(file.name, buffer);
+                    }
+                    const modelData = await loadModel(buffer, file.name, mtlData, binData);
+                    if (modelData.meshes.length === 0) {
+                        return { success: false, error: `No meshes found in ${file.name}` };
+                    }
+                    if (modelData.materials) {
+                        for (let i = 0; i < modelData.materials.length; i++) {
+                            const mat = modelData.materials[i];
+                            if (!mat.textureData && mat.textureUri) {
+                                const texUrl = resolver.getTextureUrl(mat.textureUri.toLowerCase());
+                                if (texUrl) {
+                                    const texBuf = resolver.syncFetchArrayBuffer(texUrl);
+                                    if (texBuf) {
+                                        mat.textureData = texBuf;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                    const playerPos = this.sceneRenderer?.getPlayerWorldPos(0) ?? { x: 0, y: 5, z: 0 };
+                    const pos = [playerPos.x, playerPos.y, playerPos.z];
+                    const nodeId = useSceneStore.getState().addModel(modelData, file.name, pos);
+                    this.sceneRenderer?.uploadModel(nodeId, modelData.meshes, modelData.materials);
+                    return { success: true, nodeId };
+                }
+                catch (e) {
+                    return { success: false, error: String(e) };
+                }
+            },
+            // --- Gizmo ---
+            setGizmoMode: (mode) => {
+                useSceneStore.getState().setGizmoMode(mode);
+                this.sceneRenderer?.setGizmoMode(mode);
+            },
+            setGizmoVisible: (visible) => {
+                useSceneStore.getState().setGizmoVisible(visible);
+                this.sceneRenderer?.setGizmoVisible(visible);
+            },
+            setShowLabels: (visible) => {
+                useSceneStore.getState().setShowLabels(visible);
+            },
+            getShowLabels: () => {
+                return useSceneStore.getState().showLabels;
+            },
+            getGizmoMode: () => {
+                return useSceneStore.getState().gizmoMode;
+            },
+            // --- Hitbox overlays ---
+            setShowHitboxes: (show) => {
+                this.sceneRenderer?.setShowHitboxes(show);
+            },
+            getShowHitboxes: () => {
+                return this.sceneRenderer?.getShowHitboxes() ?? false;
+            },
+            setHitboxLineWidth: (width) => {
+                this.sceneRenderer?.setHitboxLineWidth(width);
+            },
+            getHitboxLineWidth: () => {
+                return this.sceneRenderer?.getHitboxLineWidth() ?? 3;
+            },
+            // --- Chunk grid / velocity arrows (optional, via debug overlay provider) ---
+            setShowChunkGrid: (show) => {
+                this.getDebugOverlayProvider()?.setShowChunkGrid(show);
+            },
+            getShowChunkGrid: () => {
+                return this.getDebugOverlayProvider()?.getShowChunkGrid() ?? false;
+            },
+            setShowVelocityArrows: (show) => {
+                this.getDebugOverlayProvider()?.setShowVelocityArrows(show);
+            },
+            getShowVelocityArrows: () => {
+                return this.getDebugOverlayProvider()?.getShowVelocityArrows() ?? false;
+            },
+            // --- Debug mode (Inspector v2) ---
+            setDebugMode: (mode) => {
+                const provider = this.getDebugModeProvider();
+                if (provider && typeof provider.setDebugMode === "function") {
+                    provider.setDebugMode(mode);
+                }
+                this.sceneRenderer?.setDebugMode(mode !== "none");
+            },
+            // --- Material Editor API ---
+            // These are now functional: graph-compiled materials are registered into
+            // the core MaterialLibrary, the editor can list/export/import them, and
+            // live preview is wired via previewMaterialGraph.
+            compileMaterialGraph: (nodes, connections, options) => {
+                try {
+                    const blendMode = options?.blendMode ?? "opaque";
+                    const cullMode = options?.cullMode ?? "back";
+                    const profile = options?.profile;
+                    const material = compileUIGraphToMaterial(nodes, connections, {
+                        name: "preview_material",
+                        blendMode,
+                        cullMode,
+                        profile: profile,
+                    });
+                    const wgsl = material.inlineShaderSource ?? "";
+                    return { wgsl, errors: [], warnings: [] };
+                }
+                catch (e) {
+                    return { errors: [String(e?.message ?? e)], warnings: [] };
+                }
+            },
+            createMaterialFromGraph: (nodes, connections, options) => {
+                try {
+                    const name = options?.name ?? "graph_material";
+                    const blendMode = options?.blendMode ?? "opaque";
+                    const cullMode = options?.cullMode ?? "back";
+                    // Use compileGraphToMaterialWithGraph to retain the source graph for
+                    // editor round-tripping + variant recompilation.
+                    const graph = uiGraphToMaterialGraph(nodes, connections);
+                    const material = compileGraphToMaterialWithGraph(graph, {
+                        name,
+                        blendMode,
+                        cullMode,
+                        profile: options?.profile,
+                    });
+                    this.materialLibrary.register(material);
+                    return { success: true, materialName: name };
+                }
+                catch (e) {
+                    return { success: false, error: String(e?.message ?? e) };
+                }
+            },
+            saveMaterialToLibrary: (name, graphData) => {
+                try {
+                    const graph = uiGraphToMaterialGraph(graphData.nodes, graphData.connections);
+                    const material = compileGraphToMaterialWithGraph(graph, {
+                        name,
+                        blendMode: graphData.blendMode ?? "opaque",
+                        cullMode: graphData.cullMode ?? "back",
+                    });
+                    this.materialLibrary.register(material);
+                    return { success: true };
+                }
+                catch (e) {
+                    return { success: false, error: String(e?.message ?? e) };
+                }
+            },
+            listMaterials: () => {
+                return this.materialLibrary.list().map((m) => ({
+                    name: m.name,
+                    shader: m.shader,
+                    type: m.materialType,
+                }));
+            },
+            exportMaterialAsJSON: (name) => {
+                const material = this.materialLibrary.get(name);
+                if (!material || !material.graph)
+                    return null;
+                return JSON.stringify({
+                    name: material.name,
+                    nodes: material.graph.getNodes(),
+                    connections: material.graph.getConnections(),
+                    blendMode: material.blendMode,
+                    cullMode: material.cullMode,
+                    profile: material.profile,
+                });
+            },
+            importMaterialFromJSON: (json) => {
+                try {
+                    const data = JSON.parse(json);
+                    if (!data.nodes || !data.connections) {
+                        return { success: false, error: "Invalid material JSON" };
+                    }
+                    const graph = uiGraphToMaterialGraph(data.nodes, data.connections);
+                    const material = compileGraphToMaterialWithGraph(graph, {
+                        name: data.name ?? "imported_material",
+                        blendMode: data.blendMode ?? "opaque",
+                        cullMode: data.cullMode ?? "back",
+                        profile: data.profile,
+                    });
+                    this.materialLibrary.register(material);
+                    return { success: true, name: material.name };
+                }
+                catch (e) {
+                    return { success: false, error: String(e?.message ?? e) };
+                }
+            },
+            /**
+             * Live preview: compile the graph and set the resulting material on the
+             * preview mesh renderer so the editor viewport renders it in real time.
+             */
+            previewMaterialGraph: (nodes, connections, options) => {
+                try {
+                    const material = compileUIGraphToMaterial(nodes, connections, {
+                        name: "preview_material",
+                        blendMode: options?.blendMode ?? "opaque",
+                        cullMode: options?.cullMode ?? "back",
+                        profile: options?.profile,
+                    });
+                    this.previewMeshRenderer?.setMaterial(material);
+                    return { success: true };
+                }
+                catch (e) {
+                    return { success: false, error: String(e?.message ?? e) };
+                }
+            },
+            /** Set the preview mesh renderer for live material graph preview. */
+            setPreviewMeshRenderer: (renderer) => {
+                this.previewMeshRenderer = renderer;
+            },
+            /** Get the core material library (for game integration). */
+            getMaterialLibrary: () => {
+                return this.materialLibrary;
+            },
+        });
+        return api;
+    }
+    // --- Thumbnail generation (generic, uses asset resolver) ---
+    thumbnailCache = new Map();
+    async generateThumbnail(path, resolver) {
+        const cached = this.thumbnailCache.get(path);
+        if (cached !== undefined)
+            return cached;
+        try {
+            const file = resolver.getAvailableModels().find((f) => f.path === path);
+            if (!file) {
+                this.evictThumbnailCache();
+                this.thumbnailCache.set(path, null);
+                return null;
+            }
+            const buffer = resolver.syncFetchArrayBuffer(file.url);
+            if (!buffer) {
+                this.evictThumbnailCache();
+                this.thumbnailCache.set(path, null);
+                return null;
+            }
+            const modelData = await loadModel(buffer, file.name);
+            if (modelData.meshes.length === 0) {
+                this.evictThumbnailCache();
+                this.thumbnailCache.set(path, null);
+                return null;
+            }
+            let minX = Infinity, minY = Infinity, minZ = Infinity;
+            let maxX = -Infinity, maxY = -Infinity, maxZ = -Infinity;
+            let totalTris = 0;
+            for (let mi = 0; mi < modelData.meshes.length; mi++) {
+                const mesh = modelData.meshes[mi];
+                const verts = mesh.vertices;
+                const vc = mesh.vertexCount;
+                totalTris += mesh.indexCount / 3;
+                for (let i = 0; i < vc; i++) {
+                    const x = verts[i * 6];
+                    const y = verts[i * 6 + 1];
+                    const z = verts[i * 6 + 2];
+                    if (x < minX)
+                        minX = x;
+                    if (y < minY)
+                        minY = y;
+                    if (z < minZ)
+                        minZ = z;
+                    if (x > maxX)
+                        maxX = x;
+                    if (y > maxY)
+                        maxY = y;
+                    if (z > maxZ)
+                        maxZ = z;
+                }
+            }
+            if (!isFinite(minX))
+                return null;
+            const cx = (minX + maxX) / 2;
+            const cy = (minY + maxY) / 2;
+            const cz = (minZ + maxZ) / 2;
+            const sizeX = maxX - minX;
+            const sizeY = maxY - minY;
+            const sizeZ = maxZ - minZ;
+            const maxSize = Math.max(sizeX, sizeY, sizeZ);
+            if (maxSize === 0)
+                return null;
+            const angleY = Math.PI / 6;
+            const angleX = Math.PI / 6;
+            const cosY = Math.cos(angleY), sinY = Math.sin(angleY);
+            const cosX = Math.cos(angleX), sinX = Math.sin(angleX);
+            const THUMB_SIZE = 192;
+            const canvas = document.createElement("canvas");
+            canvas.width = THUMB_SIZE;
+            canvas.height = THUMB_SIZE;
+            const ctx = canvas.getContext("2d");
+            if (!ctx)
+                return null;
+            ctx.fillStyle = "#1a1a2e";
+            ctx.fillRect(0, 0, THUMB_SIZE, THUMB_SIZE);
+            const scale = (THUMB_SIZE * 0.75) / maxSize;
+            const offsetX = THUMB_SIZE / 2;
+            const offsetY = THUMB_SIZE / 2;
+            const MAX_DRAW_TRIS = 20000;
+            const triStep = totalTris > MAX_DRAW_TRIS ? Math.ceil(totalTris / MAX_DRAW_TRIS) : 1;
+            ctx.strokeStyle = "#569cd6";
+            ctx.lineWidth = 0.5;
+            ctx.fillStyle = "rgba(86, 156, 214, 0.12)";
+            for (let mi = 0; mi < modelData.meshes.length; mi++) {
+                const mesh = modelData.meshes[mi];
+                const verts = mesh.vertices;
+                const indices = mesh.indices;
+                const ic = mesh.indexCount;
+                for (let i = 0; i < ic; i += 3 * triStep) {
+                    const i0 = indices[i], i1 = indices[i + 1], i2 = indices[i + 2];
+                    const x0 = verts[i0 * 6] - cx, y0 = verts[i0 * 6 + 1] - cy, z0 = verts[i0 * 6 + 2] - cz;
+                    const x1 = verts[i1 * 6] - cx, y1 = verts[i1 * 6 + 1] - cy, z1 = verts[i1 * 6 + 2] - cz;
+                    const x2 = verts[i2 * 6] - cx, y2 = verts[i2 * 6 + 1] - cy, z2 = verts[i2 * 6 + 2] - cz;
+                    const px0 = offsetX + (x0 * cosY + z0 * sinY) * scale;
+                    const py0 = offsetY - (y0 * cosX - (-x0 * sinY + z0 * cosY) * sinX) * scale;
+                    const px1 = offsetX + (x1 * cosY + z1 * sinY) * scale;
+                    const py1 = offsetY - (y1 * cosX - (-x1 * sinY + z1 * cosY) * sinX) * scale;
+                    const px2 = offsetX + (x2 * cosY + z2 * sinY) * scale;
+                    const py2 = offsetY - (y2 * cosX - (-x2 * sinY + z2 * cosY) * sinX) * scale;
+                    ctx.beginPath();
+                    ctx.moveTo(px0, py0);
+                    ctx.lineTo(px1, py1);
+                    ctx.lineTo(px2, py2);
+                    ctx.closePath();
+                    ctx.fill();
+                    ctx.stroke();
+                }
+            }
+            const dataUrl = canvas.toDataURL("image/png");
+            this.evictThumbnailCache();
+            this.thumbnailCache.set(path, dataUrl);
+            return dataUrl;
+        }
+        catch (e) {
+            log.error("base-scene-inspector", `Thumbnail error for path ${path}: ${e}`);
+            this.evictThumbnailCache();
+            this.thumbnailCache.set(path, null);
+            return null;
+        }
+    }
+    evictThumbnailCache() {
+        if (this.thumbnailCache.size > 30) {
+            this.thumbnailCache.clear();
+        }
+    }
+}