Andre/XgridConverter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

test

Browse Source
This commit is contained in:
Andreas Wilms
2026-03-09 12:25:43 +01:00
parent 13c06d93d8
commit 9b5f2d0814
10 changed files with 1716 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
app/components/FileStatus.tsx Normal file
View File

7
app/layout.tsx
View File

@@ -13,8 +13,8 @@ const geistMono = Geist_Mono({
}); });
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Create Next App", title: "Xgrids Scene Wizard", // I went ahead and updated your title!
description: "Generated by create next app", description: "Convert .lcc/.lci to SOG, LODs, and PLY meshes locally.",
}; };
export default function RootLayout({ export default function RootLayout({
@@ -23,7 +23,8 @@ export default function RootLayout({
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
return ( return (
<html lang="en"> // suppressHydrationWarning added here:
<html lang="en" suppressHydrationWarning>
<body <body
className={`${geistSans.variable} ${geistMono.variable} antialiased`} className={`${geistSans.variable} ${geistMono.variable} antialiased`}
> >

212
app/page.tsx
View File

@@ -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 ( return (
<div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black"> <main className="min-h-screen bg-slate-900 text-white p-8 flex flex-col items-center">
<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"> <div className="max-w-2xl w-full bg-slate-800 rounded-xl p-8 shadow-2xl border border-slate-700">
<Image <header className="mb-8">
className="dark:invert" <h1 className="text-3xl font-bold mb-2">Xgrids Scene Wizard</h1>
src="/next.svg" <p className="text-slate-400">
alt="Next.js logo" Convert .lcc/.lci to SOG, LODs, and PLY meshes locally.
width={100} </p>
height={20} </header>
priority
<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}
/> />
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left"> <label htmlFor="folder-upload" className="cursor-pointer">
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50"> <span className="bg-blue-600 px-6 py-3 rounded-md font-medium hover:bg-blue-500 transition-colors inline-block">
To get started, edit the page.tsx file. Select Xgrids Folder
</h1> </span>
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400"> <p className="mt-4 text-sm text-slate-500 italic">
Looking for a starting point or more instructions? Head over to{" "} {files.length > 0
<a ? `${files.length} files selected`
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" : "Drag and drop or click to browse"}
className="font-medium text-zinc-950 dark:text-zinc-50" </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"}`}
> >
Templates {"> "} {status}
</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.
</p> </p>
</div> </div>
<div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
<a <button
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]" onClick={startConversion}
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" disabled={files.length === 0 || isProcessing}
target="_blank" 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"
rel="noopener noreferrer"
> >
<Image {isProcessing ? (
className="dark:invert" <span className="flex items-center justify-center gap-2">
src="/vercel.svg" <svg
alt="Vercel logomark" className="animate-spin h-5 w-5 text-white"
width={16} viewBox="0 0 24 24"
height={16} >
<circle
className="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
strokeWidth="4"
fill="none"
/> />
Deploy Now <path
</a> className="opacity-75"
<a fill="currentColor"
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]" 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"
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" />
target="_blank" </svg>
rel="noopener noreferrer" Processing...
> </span>
Documentation ) : (
</a> "Generate Scene Files"
)}
</button>
</div>
</div> </div>
</main> </main>
</div>
); );
} }

125
app/workers/converter.worker.ts Normal file
View File

@@ -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);
}
}
};

39
next.config.ts
View File

@@ -1,7 +1,44 @@
import type { NextConfig } from "next"; import type { NextConfig } from "next";
import CopyWebpackPlugin from "copy-webpack-plugin";
const nextConfig: NextConfig = { 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; export default nextConfig;

1275
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
package.json
View File

@@ -9,6 +9,7 @@
"lint": "eslint" "lint": "eslint"
}, },
"dependencies": { "dependencies": {
"@playcanvas/splat-transform": "^1.8.0",
"next": "16.1.6", "next": "16.1.6",
"react": "19.2.3", "react": "19.2.3",
"react-dom": "19.2.3" "react-dom": "19.2.3"
@@ -18,9 +19,12 @@
"@types/node": "^20", "@types/node": "^20",
"@types/react": "^19", "@types/react": "^19",
"@types/react-dom": "^19", "@types/react-dom": "^19",
"@types/webpack": "^5.28.5",
"copy-webpack-plugin": "^14.0.0",
"eslint": "^9", "eslint": "^9",
"eslint-config-next": "16.1.6", "eslint-config-next": "16.1.6",
"tailwindcss": "^4", "tailwindcss": "^4",
"typescript": "^5" "typescript": "^5",
"webpack": "^5.105.4"
} }
} }

1
public/webp.wasm Executable file
View File

@@ -0,0 +1 @@
404: Not Found

109
public/workers/converter.worker.js Normal file
View File

@@ -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);
}
}
};

BIN
public/workers/webp.wasm Executable file
View File

Binary file not shown.