Merge branch 'dev'

JolifantoBambla · Sep 22, 2024 · ff8291c · ff8291c
2 parents 2c25f3a + 0259eac
commit ff8291c
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 25 deletions.
diff --git a/.github/workflows/deploy-docs.yml b/.github/workflows/deploy-docs.yml
@@ -34,7 +34,7 @@ jobs:
       - name: Setup Node.js environment
         uses: actions/[email protected]
       - name: Populate model
-        run: cd demo && rm demo-mesh.js && curl -O https://jolifantobambla.github.io/trichi/demo-mesh.js
+        run: cd demo && curl -O https://jolifantobambla.github.io/trichi/demo-mesh.js
       - name: Install Dependencies
         run: cd js && npm install
       - name: Build Docs

diff --git a/demo/cluster-renderer.js b/demo/cluster-renderer.js
@@ -125,7 +125,7 @@ function makeRenderClusterPipeline(device, colorFormat, depthFormat, reverseZ) {
     return pipeline;
 }
 
-export function makeClusterRenderer(device, colorFormat = 'rgba16float', depthFormat = 'depth24plus', initialMesh, reverseZ = true) {
+export function makeClusterRenderer(device, colorFormat = 'rgba16float', depthFormat = 'depth24plus', initialMesh = null, reverseZ = true) {
     const bindGroupLayouts = {
         perFrameUniformsLayout: device.createBindGroupLayout({
             label: 'per frame uniforms',
@@ -358,7 +358,7 @@ export function makeClusterRenderer(device, colorFormat = 'rgba16float', depthFo
         return bindGroups;
     }
 
-    let currentMesh = makeMeshBindgroups(initialMesh);
+    let currentMesh = initialMesh ? makeMeshBindgroups(initialMesh) : null;
 
     return {
         update({view, projection, position}, {instances}, {resolution, zNear, threshold, radiusScale}, {renderMode}, updateCullingCamera = true) {

diff --git a/demo/demo-mesh.js b/demo/demo-mesh.js
diff --git a/demo/index.html b/demo/index.html
@@ -18,9 +18,8 @@
     import {vec3n, mat4n} from 'https://wgpu-matrix.org/dist/3.x/wgpu-matrix.module.min.js';
     import {FPSCameraController} from './fps-camera.js';
     import {makeUi} from './ui.js';
-    import {webgpuNotSupported} from './util.js';
+    import {webgpuNotSupported, showStatusMessage} from './util.js';
     import {makeClusterRenderer} from './cluster-renderer.js';
-    import {mesh} from './demo-mesh.js';
 
     const urlParams = new URLSearchParams(window.location.search);
     const useTimestampQuery = urlParams.has('timestamp_query');
@@ -140,7 +139,26 @@
             ],
         });
 
-        const clusterRenderer = makeClusterRenderer(device, backBuffer.format, depthBuffer.format, mesh, true);
+        const clusterRenderer = makeClusterRenderer(device, backBuffer.format, depthBuffer.format, null, true);
+
+        let hasMesh = false;
+        let isProcessingModel = false;
+        let dialogBox = null;
+
+        (async () => {
+            isProcessingModel = true;
+            try {
+                dialogBox = showStatusMessage('Loading 3D model ...');
+                const m = await import('https://jolifantobambla.github.io/trichi/demo-mesh.js');
+                clusterRenderer.newMesh(m.mesh);
+            } catch (e) {
+                console.log(e);
+            }
+            dialogBox.close();
+            dialogBox = null;
+            hasMesh = true;
+            isProcessingModel = false;
+        })();
 
         const resolutionDependentStuff = {
             projection,
@@ -216,7 +234,6 @@
         let transform = mat4n.identity();
         let radiusScale = 1.0;
 
-        let isProcessingModel = false;
         async function processModel(file) {
             console.log(file);
             console.log(trichiWorker);
@@ -227,7 +244,12 @@
                     transform = trans;
                     radiusScale = scalingFactor;
                     cameraController.reset({});
+                    if (dialogBox) {
+                        dialogBox.close();
+                        dialogBox = null;
+                    }
                     isProcessingModel = false;
+                    hasMesh = true;
                 }),
                 Comlink.proxy(e => {
                     console.log('failed to process model:', e);
@@ -244,6 +266,10 @@
                     if (eventName === 'drop') {
                         e.dataTransfer.dropEffect = 'move';
                         if (isProcessingModel) {
+                            if (!dialogBox) {
+                                dialogBox = showStatusMessage('currently processing a model, ignoring dropped file(s)');
+                                setTimeout(_ => dialogBox && dialogBox.close(), 5000);
+                            }
                             console.log('currently processing a model, ignoring dropped file(s)');
                             return;
                         }
@@ -309,11 +335,13 @@
 
             const encoder = device.createCommandEncoder();
 
-            clusterRenderer.encodeIndirect(
-                encoder,
-                resolutionDependentStuff.backBufferView,
-                resolutionDependentStuff.depthBufferView,
-            );
+            if (hasMesh) {
+                clusterRenderer.encodeIndirect(
+                    encoder,
+                    resolutionDependentStuff.backBufferView,
+                    resolutionDependentStuff.depthBufferView,
+                );
+            }
 
             const pass = encoder.beginRenderPass({
                 colorAttachments: [{

diff --git a/demo/ui.js b/demo/ui.js
@@ -4,7 +4,7 @@ export function makeUi() {
     const params = {
         renderSettings: {
             updateCullingCamera: true,
-            errorThreshold: 1.0,
+            errorThreshold: 0.05,
             renderMode: 'clusterId',
         },
     };

diff --git a/demo/util.js b/demo/util.js
@@ -7,6 +7,16 @@ export const webgpuNotSupported = () => {
     dialogBox.showModal();
 }
 
+export function showStatusMessage(message) {
+    const dialogBox = document.createElement('dialog');
+    document.body.append(dialogBox);
+    const dialogText = document.createElement('pre');
+    dialogText.style.whiteSpace = 'pre-wrap';
+    dialogBox.append(message);
+    dialogBox.showModal();
+    return dialogBox;
+}
+
 export async function textureFromUrl(device, url, format = 'rgba8unorm') {
     const source = await createImageBitmap(await (await fetch(url)).blob());
     const size = { width: source.width, height: source.height };