Single file html export

package.json

@@ -47,13 +47,12 @@
         "i18next": "^23.16.4",
         "i18next-browser-languagedetector": "^8.0.0",
         "jest": "^29.7.0",
-        "playcanvas": "^2.2.0",
-        "jszip": "^3.10.1",
+        "playcanvas": "^2.2.1",
         "postcss": "^8.4.47",
-        "rollup": "^4.24.2",
+        "rollup": "^4.24.3",
         "rollup-plugin-postcss": "^4.0.2",
         "rollup-plugin-visualizer": "^5.12.0",
-        "sass": "^1.80.4",
+        "sass": "^1.80.5",
         "serve": "^14.2.4",
         "tslib": "^2.8.0"
     }

rollup.config.mjs

@@ -75,7 +75,6 @@ const application = {
                     }
                 },
                 { src: 'src/manifest.json' },
-                { src: 'node_modules/jszip/dist/jszip.js' },
                 { src: 'static/images', dest: 'static' },
                 { src: 'static/icons', dest: 'static' },
                 { src: 'static/lib', dest: 'static' },

src/file-handler.ts

@@ -42,7 +42,7 @@ const filePickerTypes = {
     'viewer': [{
         description: 'Viewer App',
         accept: {
-            'application/zip': ['.zip']
+            'text/html': ['.html']
         }
     }]
 };
@@ -291,7 +291,7 @@ const initFileHandler = async (scene: Scene, events: Events, dropTarget: HTMLEle
             'ply': '.ply',
             'compressed-ply': '.compressed.ply',
             'splat': '.splat',
-            'viewer': '-viewer.zip'
+            'viewer': '-viewer.html'
         };
 
         const replaceExtension = (filename: string, extension: string) => {

src/index.html

@@ -25,8 +25,6 @@
         <meta property="twitter:description" content="SuperSplat is an advanced browser-based editor for manipulating and optimizing 3D Gaussian Splats. It is open source and engine agnostic." />
         <meta property="twitter:image" content="https://playcanvas.com/supersplat/editor/static/images/header.webp" />
 
-        <script src="jszip.js"></script>
-
         <!-- Service worker -->
         <script>
             navigator.serviceWorker.register('./sw.js')

src/splat-serialize.ts

@@ -723,26 +723,33 @@ const serializeSplat = async (splats: Splat[], write: WriteFunc) => {
     await write(result, true);
 };
 
+const encodeBase64 = (bytes: Uint8Array) => {
+    let binary = '';
+    const len = bytes.byteLength;
+    for (let i = 0; i < len; i++) {
+        binary += String.fromCharCode(bytes[i]);
+    }
+    return window.btoa(binary);
+}
+
 const serializeViewer = async (splats: Splat[], write: WriteFunc) => {
     // create compressed PLY data
     let compressedData: Uint8Array;
     serializePlyCompressed(splats, (data, finalWrite) => {
         compressedData = data;
     });
 
+    const plyModel = encodeBase64(compressedData);
+    const cameraScriptSource = encodeBase64((new TextEncoder()).encode(OrbitCameraTemplate));
+
     // use camera clear color
     const bgClr = splats[0].scene.events.invoke('bgClr');
-    const html = ViewerHtmlTemplate.replace('{{clearColor}}', `${bgClr.r}, ${bgClr.g}, ${bgClr.b}`);
+    const html = ViewerHtmlTemplate
+        .replace('{{clearColor}}', `${bgClr.r}, ${bgClr.g}, ${bgClr.b}`)
+        .replace('{{plyModel}}', plyModel)
+        .replace('{{cameraScriptSource}}', cameraScriptSource);
 
-    // @ts-ignore
-    const zip = new JSZip();
-    zip.file('index.html', html);
-    zip.file('scene.compressed.ply', compressedData);
-    zip.file('orbit-camera.mjs', OrbitCameraTemplate);
-
-    const result = await zip.generateAsync({type : "uint8array"});
-
-    await write(result, true);
+    await write(new TextEncoder().encode(html), true);
 };
 
 export {

src/templates/viewer-html-template.ts

@@ -14,24 +14,24 @@ const template = /* html */ `
         <script type="importmap">
             {
                 "imports": {
-                    "playcanvas": "https://esm.run/playcanvas@2.1.0"
+                    "playcanvas": "https://esm.run/playcanvas@2.2.0"
                 }
             }
         </script>
-        <script type="module" src="https://cdn.jsdelivr.net/npm/@playcanvas/[email protected].2/dist/pwc.mjs"></script>
+        <script type="module" src="https://cdn.jsdelivr.net/npm/@playcanvas/[email protected].3/dist/pwc.mjs"></script>
     </head>
     <body>
         <pc-app>
             <script type="module">
                 import { registerScript } from 'playcanvas';
-                import { OrbitCamera, OrbitCameraInputMouse } from './orbit-camera.mjs';
+                import { OrbitCamera, OrbitCameraInputMouse } from "data:application/javascript;base64,{{cameraScriptSource}}";
 
                 const app = document.querySelector('pc-app');
                 await app.getApplication();
                 registerScript(OrbitCamera, 'orbitCamera');
                 registerScript(OrbitCameraInputMouse, 'orbitCameraInputMouse');
             </script>
-            <pc-asset id="ply" src="scene.compressed.ply" preload></pc-asset>
+            <pc-asset id="ply" type="gsplat" src="data:application/ply;base64,{{plyModel}}"></pc-asset>
             <pc-scene>
                 <!-- Camera -->
                 <pc-entity name="camera">

src/ui/localization.ts

@@ -169,7 +169,7 @@ const localizeInit = () => {
                         "scene.export": "Export",
                         "scene.export.compressed-ply": "Compressed PLY (.ply)",
                         "scene.export.splat": "Splat file (.splat)",
-                        "scene.export.viewer": "Viewer App (.zip)",
+                        "scene.export.viewer": "Viewer App (.html)",
 
                         // Selection menu
                         "selection": "Selection",
@@ -450,7 +450,7 @@ const localizeInit = () => {
                         "scene.export": "エクスポート",
                         "scene.export.compressed-ply": "Compressed PLY (.ply)",
                         "scene.export.splat": "Splat (.splat)",
-                        "scene.export.viewer": "Viewer App (.zip)",
+                        "scene.export.viewer": "Viewer App (.html)",
 
                         // Selection menu
                         "selection": "選択",