test

2026-03-09 12:25:43 +01:00
parent 13c06d93d8
commit 9b5f2d0814
10 changed files with 1716 additions and 66 deletions
--- a/app/components/FileStatus.tsx
+++ b/app/components/FileStatus.tsx
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -13,8 +13,8 @@ const geistMono = Geist_Mono({
 });

 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Xgrids Scene Wizard", // I went ahead and updated your title!
+  description: "Convert .lcc/.lci to SOG, LODs, and PLY meshes locally.",
 };

 export default function RootLayout({
@@ -23,7 +23,8 @@ export default function RootLayout({
  children: React.ReactNode;
 }>) {
  return (
-    <html lang="en">
+    // suppressHydrationWarning added here:
+    <html lang="en" suppressHydrationWarning>
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,65 +1,171 @@
-import Image from "next/image";
+"use client";
+import { useState, useRef, useEffect } from "react";
+
+export default function XgridsWizard() {
+  const [files, setFiles] = useState<File[]>([]);
+  const [status, setStatus] = useState<string>("Waiting for upload...");
+  const [isProcessing, setIsProcessing] = useState(false);
+  const workerRef = useRef<Worker | null>(null);
+
+  useEffect(() => {
+    // 1. Point to the NEW location in the /app folder
+    // Next.js recognizes the 'new URL' pattern and bundles it as a separate worker
+    const worker = new Worker(
+      new URL("./workers/converter.worker.ts", import.meta.url),
+    );
+    workerRef.current = worker;
+
+    worker.onmessage = (e) => {
+      const { type, message, data } = e.data;
+      if (type === "LOG") setStatus(message);
+      if (type === "DONE") {
+        setIsProcessing(false);
+        setStatus("Conversion Complete!");
+        downloadFile(data.sog, `${data.fileName}.sog`);
+        // Removed: downloadFile(data.ply, ...) — worker doesn't produce a PLY
+      }
+    };
+
+    return () => worker.terminate();
+  }, []);
+
+  // Helper to trigger browser downloads
+  const downloadFile = (blob: Blob, name: string) => {
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = name;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const handleFolderUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const uploadedFiles = Array.from(e.target.files || []);
+    if (uploadedFiles.length > 0) {
+      setFiles(uploadedFiles);
+      setStatus(`Loaded ${uploadedFiles.length} files. Ready to convert.`);
+    }
+  };
+
+  const startConversion = async () => {
+    if (!files.length || !workerRef.current) return;
+
+    setIsProcessing(true);
+    setStatus("Reading files into memory (this might take a moment)...");
+
+    // Find the main .lcc file to act as our entry point
+    const lccFile = files.find((f) => f.name.endsWith(".lcc"));
+
+    if (!lccFile) {
+      setStatus("Error: Missing .lcc file in folder.");
+      setIsProcessing(false);
+      return;
+    }
+
+    try {
+      // 1. Convert all File objects into an array of { name, buffer }
+      const filesData = await Promise.all(
+        files.map(async (f) => ({
+          name: f.name,
+          buffer: await f.arrayBuffer(),
+        })),
+      );
+
+      // 2. Extract just the ArrayBuffers so we can "transfer" them to the worker efficiently
+      // This prevents duplicating the 272MB data in RAM
+      const buffersToTransfer = filesData.map((f) => f.buffer);
+
+      workerRef.current.postMessage(
+        {
+          type: "START_CONVERSION",
+          filesData,
+          mainLccName: lccFile.name,
+          fileName: lccFile.name.replace(".lcc", ""), // e.g., "Wilhelm Studios"
+        },
+        buffersToTransfer, // Passes ownership to the worker to save memory
+      );
+    } catch (error) {
+      console.error(error);
+      setStatus("Error reading files. Check console.");
+      setIsProcessing(false);
+    }
+  };

-export default function Home() {
  return (
-    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
+    <main className="min-h-screen bg-slate-900 text-white p-8 flex flex-col items-center">
+      <div className="max-w-2xl w-full bg-slate-800 rounded-xl p-8 shadow-2xl border border-slate-700">
+        <header className="mb-8">
+          <h1 className="text-3xl font-bold mb-2">Xgrids Scene Wizard</h1>
+          <p className="text-slate-400">
+            Convert .lcc/.lci to SOG, LODs, and PLY meshes locally.
          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
+        </header>
+
+        <div className="space-y-6">
+          <div className="border-2 border-dashed border-slate-600 rounded-lg p-10 text-center hover:border-blue-500 transition-colors">
+            <input
+              type="file"
+              id="folder-upload"
+              //@ts-ignore
+              webkitdirectory=""
+              directory=""
+              className="hidden"
+              onChange={handleFolderUpload}
            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
+            <label htmlFor="folder-upload" className="cursor-pointer">
+              <span className="bg-blue-600 px-6 py-3 rounded-md font-medium hover:bg-blue-500 transition-colors inline-block">
+                Select Xgrids Folder
+              </span>
+              <p className="mt-4 text-sm text-slate-500 italic">
+                {files.length > 0
+                  ? `${files.length} files selected`
+                  : "Drag and drop or click to browse"}
+              </p>
+            </label>
+          </div>
+
+          <div className="bg-black/40 p-4 rounded-md font-mono text-sm border border-slate-700">
+            <p
+              className={`${isProcessing ? "text-yellow-400" : "text-emerald-400"}`}
+            >
+              {"> "} {status}
+            </p>
+          </div>
+
+          <button
+            onClick={startConversion}
+            disabled={files.length === 0 || isProcessing}
+            className="w-full py-4 bg-emerald-600 hover:bg-emerald-500 disabled:bg-slate-700 disabled:text-slate-500 disabled:cursor-not-allowed rounded-lg font-bold transition-all shadow-lg"
          >
-            Documentation
-          </a>
+            {isProcessing ? (
+              <span className="flex items-center justify-center gap-2">
+                <svg
+                  className="animate-spin h-5 w-5 text-white"
+                  viewBox="0 0 24 24"
+                >
+                  <circle
+                    className="opacity-25"
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    stroke="currentColor"
+                    strokeWidth="4"
+                    fill="none"
+                  />
+                  <path
+                    className="opacity-75"
+                    fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  />
+                </svg>
+                Processing...
+              </span>
+            ) : (
+              "Generate Scene Files"
+            )}
+          </button>
        </div>
-      </main>
-    </div>
+      </div>
+    </main>
  );
 }
--- a/app/workers/converter.worker.ts
+++ b/app/workers/converter.worker.ts
@@ -0,0 +1,125 @@
+const originalFetch = globalThis.fetch;
+globalThis.fetch = async (input, init) => {
+  const url = input instanceof Request ? input.url : input.toString();
+  self.postMessage({ type: "LOG", message: `FETCH: ${url}` });
+
+  if (url.includes("webp.wasm")) {
+    self.postMessage({
+      type: "LOG",
+      message: `INTERCEPTED → /workers/webp.wasm`,
+    });
+    const res = await originalFetch("/workers/webp.wasm", init);
+    self.postMessage({
+      type: "LOG",
+      message: `WASM response status: ${res.status}`,
+    });
+    return res;
+  }
+  return originalFetch(input, init);
+};
+
+// Intercept XMLHttpRequest (Emscripten uses this in Workers)
+if (typeof XMLHttpRequest !== "undefined") {
+  const originalOpen = XMLHttpRequest.prototype.open;
+  // @ts-ignore
+  XMLHttpRequest.prototype.open = function (
+    method: string,
+    url: string | URL,
+    ...rest: any[]
+  ) {
+    if (typeof url === "string" && url.includes("webp.wasm")) {
+      url = "/workers/webp.wasm";
+    }
+    return originalOpen.apply(this, [method, url, ...rest] as any);
+  };
+}
+
+self.onmessage = async (e: MessageEvent) => {
+  const { type, filesData, mainLccName, fileName } = e.data;
+
+  if (type === "START_CONVERSION") {
+    try {
+      self.postMessage({ type: "LOG", message: "Initialisiere..." });
+
+      // Fetch the WASM binary ourselves and inject it
+      const wasmResponse = await fetch("/workers/webp.wasm");
+      const wasmBinary = await wasmResponse.arrayBuffer();
+
+      // Inject before the module loads
+      // @ts-ignore
+      globalThis.Module = { wasmBinary };
+
+      const {
+        readFile,
+        writeFile,
+        MemoryReadFileSystem,
+        MemoryFileSystem,
+        getInputFormat,
+        getOutputFormat,
+      } = await import("@playcanvas/splat-transform");
+
+      const readFs = new MemoryReadFileSystem();
+
+      self.postMessage({
+        type: "LOG",
+        message: "Lade Dateien in den virtuellen Speicher...",
+      });
+
+      for (const file of filesData) {
+        readFs.set(file.name, new Uint8Array(file.buffer));
+      }
+
+      const fullOptions = {
+        iterations: 0,
+        lodSelect: [0],
+        unbundled: false,
+        lodChunkCount: 0,
+        lodChunkExtent: 0,
+      };
+
+      self.postMessage({ type: "LOG", message: "Lese LCC und Binärdaten..." });
+
+      const tables = await readFile({
+        filename: mainLccName,
+        fileSystem: readFs,
+        inputFormat: getInputFormat(mainLccName),
+        params: [],
+        options: fullOptions,
+      });
+
+      const mainTable = tables[0];
+      if (!mainTable) throw new Error("Keine Splat-Daten gefunden.");
+
+      self.postMessage({ type: "LOG", message: "Kompiliere SOG..." });
+
+      const writeFs = new MemoryFileSystem();
+      const outputName = `${fileName}.sog`;
+
+      await writeFile(
+        {
+          filename: outputName,
+          outputFormat: getOutputFormat(outputName, fullOptions),
+          dataTable: mainTable,
+          options: { ...fullOptions, iterations: 8 },
+        },
+        writeFs,
+      );
+
+      const sogData = writeFs.results.get(outputName);
+      if (!sogData) throw new Error("SOG-Erstellung fehlgeschlagen.");
+
+      self.postMessage({
+        type: "DONE",
+        data: {
+          sog: new Blob([new Uint8Array(sogData).slice().buffer], {
+            type: "application/octet-stream",
+          }),
+          fileName,
+        },
+      });
+    } catch (err: any) {
+      self.postMessage({ type: "LOG", message: `Fehler: ${err.message}` });
+      console.error(err);
+    }
+  }
+};
--- a/next.config.ts
+++ b/next.config.ts
@@ -1,7 +1,44 @@
 import type { NextConfig } from "next";
+import CopyWebpackPlugin from "copy-webpack-plugin";

 const nextConfig: NextConfig = {
-  /* config options here */
+  turbopack: {}, // silences the warning but we force webpack below
+  webpack: (config, { isServer, webpack }) => {
+    config.plugins.push(
+      new webpack.IgnorePlugin({
+        resourceRegExp: /webp\.wasm$/,
+      }),
+    );
+
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      "webp.wasm": false,
+    };
+
+    if (!isServer) {
+      config.plugins.push(
+        new CopyWebpackPlugin({
+          patterns: [
+            {
+              from: "node_modules/@playcanvas/splat-transform/lib/webp.wasm",
+              to: "../static/chunks/webp.wasm",
+            },
+          ],
+        }),
+      );
+
+      config.resolve.fallback = {
+        ...config.resolve.fallback,
+        fs: false,
+        path: false,
+        module: false,
+        url: false,
+        os: false,
+      };
+    }
+
+    return config;
+  },
 };

 export default nextConfig;
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
    "lint": "eslint"
  },
  "dependencies": {
+    "@playcanvas/splat-transform": "^1.8.0",
    "next": "16.1.6",
    "react": "19.2.3",
    "react-dom": "19.2.3"
@@ -18,9 +19,12 @@
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
+    "@types/webpack": "^5.28.5",
+    "copy-webpack-plugin": "^14.0.0",
    "eslint": "^9",
    "eslint-config-next": "16.1.6",
    "tailwindcss": "^4",
-    "typescript": "^5"
+    "typescript": "^5",
+    "webpack": "^5.105.4"
  }
 }
--- a/public/webp.wasm
+++ b/public/webp.wasm
@@ -0,0 +1 @@
+404: Not Found
--- a/public/workers/converter.worker.js
+++ b/public/workers/converter.worker.js
@@ -0,0 +1,109 @@
+import {
+  WebPCodec,
+  readFile,
+  writeFile,
+  MemoryReadFileSystem,
+  MemoryFileSystem,
+} from "@playcanvas/splat-transform";
+
+// 1. Configure WASM path for the browser environment
+WebPCodec.config({ wasmUrl: "/webp.wasm" });
+
+/**
+ * Converts Xgrids LCI binary data to a standard PLY
+ * Parses 12-byte float chunks (X, Y, Z) from the binary buffer.
+ */
+function convertLciToPly(lciBuffer) {
+  const view = new DataView(lciBuffer);
+
+  // Xgrids LCI files usually start with a 4-byte point count
+  const numPoints = view.getUint32(0, true);
+  const points = [];
+
+  let offset = 4;
+  for (let i = 0; i < numPoints; i++) {
+    if (offset + 12 > lciBuffer.byteLength) break;
+
+    const x = view.getFloat32(offset, true);
+    const y = view.getFloat32(offset + 4, true);
+    const z = view.getFloat32(offset + 8, true);
+
+    points.push(`${x} ${y} ${z}`);
+    offset += 12;
+  }
+
+  const header = [
+    "ply",
+    "format ascii 1.0",
+    `element vertex ${points.length}`,
+    "property float x",
+    "property float y",
+    "property float z",
+    "end_header",
+  ].join("\n");
+
+  return header + "\n" + points.join("\n");
+}
+
+self.onmessage = async (e) => {
+  const { type, lccBuffer, lciBuffer, fileName } = e.data;
+
+  if (type === "START_CONVERSION") {
+    try {
+      // --- STEP 1: GENERATE COLLISION MESH (.PLY) ---
+      self.postMessage({ type: "LOG", message: "Parsing LCI Geometry..." });
+      const plyData = convertLciToPly(lciBuffer);
+      const plyBlob = new Blob([plyData], { type: "text/plain" });
+
+      // --- STEP 2: GENERATE HIGHEST QUALITY .SOG ---
+      self.postMessage({
+        type: "LOG",
+        message: "Loading LCC into Splat Engine...",
+      });
+
+      const readFs = new MemoryReadFileSystem();
+      readFs.add(`${fileName}.lcc`, new Uint8Array(lccBuffer));
+
+      // splat-transform handles LCC containers natively
+      const dataTable = await readFile(`${fileName}.lcc`, { fs: readFs });
+
+      self.postMessage({
+        type: "LOG",
+        message: "Compiling High Quality SOG (WASM)...",
+      });
+      const writeFsSog = new MemoryFileSystem();
+      await writeFile(dataTable, `${fileName}.sog`, { fs: writeFsSog });
+      const sogBlob = new Blob([writeFsSog.get(`${fileName}.sog`)]);
+
+      // --- STEP 3: GENERATE LODs (UNBUNDLED TILES) ---
+      self.postMessage({
+        type: "LOG",
+        message: "Generating LOD Tiled Structure...",
+      });
+      const writeFsLod = new MemoryFileSystem();
+
+      // 'unbundled' creates the tiled WebP/JSON structure for streaming
+      await writeFile(dataTable, "lods/meta.json", {
+        fs: writeFsLod,
+        unbundled: true,
+      });
+
+      // --- STEP 4: RETURN ALL ASSETS ---
+      self.postMessage({
+        type: "DONE",
+        data: {
+          sog: sogBlob,
+          ply: plyBlob,
+          lods: writeFsLod.files, // This contains the meta.json and .webp tiles
+          fileName: fileName,
+        },
+      });
+    } catch (err) {
+      self.postMessage({
+        type: "LOG",
+        message: `CRITICAL ERROR: ${err.message}`,
+      });
+      console.error(err);
+    }
+  }
+};
--- a/public/workers/webp.wasm
+++ b/public/workers/webp.wasm