Merge pull request #1 from thewtex/itk-wasm-surface-gen

ITK-Wasm surface generation pipeline
niivue · Dec 19, 2024 · a88d237 · a88d237
2 parents 2841358 + f80b903
commit a88d237
Show file tree

Hide file tree

Showing 7 changed files with 2,218 additions and 324 deletions.
diff --git a/README.md b/README.md
@@ -9,23 +9,21 @@ This is an extension of [brainchop](https://github.com/neuroneural/brainchop) th
 1. Open the [live demo](https://niivue.github.io/brain2print/).
 2. **Option 1** The web page automatically loads with a default T1 MRI scan. If you want to use this scan, go to step 5.
 3. **Option 2** If your T1 MRI scan is in NIfTI format, drag and drop the file onto the web page.
-4. **Option 3** If your image is in DICOM format, it may load if you drag and drop the files. If this fails, convert your images with dcm2niix.
-5. Segment your brain scan by choosing a model from the `Segmentation Model` pull-down menu. Not all models with with all graphics cards. The `Tissue GWM (High Acc, Low Mem)` is a good starting point. Hopefully, it will accurately segment your brain into gray matter, white matter and cerebral spinal fluid.
+4. **Option 3** If your image is in DICOM format, it may load if you drag and drop the files. If this fails, convert your images with [dcm2niix](https://github.com/rordenlab/dcm2niix).
+5. Segment your brain scan by choosing a model from the `Segmentation Model` pull-down menu. Not all models work with all graphics cards. The `Tissue GWM (High Acc, Low Mem)` is a good starting point. Hopefully, it will accurately segment your brain into gray matter, white matter and cerebral spinal fluid.
 6. Press the `Create Mesh` button and select your preferred settings:
 
   - ![settings dialog](Settings.png)
 
-  - [Closing](https://en.wikipedia.org/wiki/Closing_(morphology)) removes small crevices and cavities in your mesh which can plague printing.
-  - Fill bubbles will remove any cavities, this includes large cavities for example the ventricles for a brain scan.
-  - The `Largest cluster only` will only extract a single mesh.
-  - You can choose `Smoothing` to make the surfaces less jagged (note this can create self intersecting triangles that can confound some printers).
-  - You can choose to `Simplify` [reduce the number of triangles](https://github.com/sp4cerat/Fast-Quadric-Mesh-Simplification) to create smaller files (note this can create self intersecting triangles that can confound some printers).
+  - You can choose `Smoothing` to make the surfaces less jagged at the expense of computation time.
+  - You can choose to `Simplify` to reduce the number of triangles and create smaller files.
+
 7. Once you have set your preferences, press `Apply`.
 8. You will see the mesh appear and can interactively view it. If you are unhappy with the result, repeat step 6 with different settings. If you want to print the results, press the `Save Mesh` button.
 
 ## How it Works
 
-This web application uses some of the latest browser technologies that allow the tissue segmentation model to run on your local GPU, regardless of the type of GPU. This is possible via the `WebGPU` browser API. Additionally, we leverage `WebAssembly` to run the `niimath` [WASM wrapper](https://www.npmjs.com/package/@niivue/niimath) to turn the tissue segmentation into a 3D mesh. No data ever leaves your machine.
+This web application uses some of the latest browser technologies that allow the tissue segmentation model to run on your local GPU, regardless of the type of GPU. This is possible via the `WebGPU` browser API. Additionally, we leverage `WebAssembly` to run the `niimath` [WASM wrapper](https://www.npmjs.com/package/@niivue/niimath) and [ITK-Wasm](https://wasm.itk.org) to turn the tissue segmentation into a 3D mesh. No data ever leaves your machine.
 
 ### Developers - Running a Local Live Demo
 
@@ -50,5 +48,4 @@ npm run build
 - [brainchop](https://github.com/neuroneural/brainchop)
 - [niivue](https://github.com/niivue/niivue)
 - [niimath](https://github.com/rordenlab/niimath)
-
-
+- [ITK-Wasm](https://github.com/InsightSoftwareConsortium/ITK-Wasm)
diff --git a/Settings.png b/Settings.png
diff --git a/index.html b/index.html
@@ -10,6 +10,8 @@
 
 <body>
   <header>
+    <label><strong>Visualization:</strong></label>
+    &nbsp;
     <label for="clipCheck">Clip Plane</label>
     <input type="checkbox" id="clipCheck" unchecked />
     <label for="opacitySlider0">Background Opacity</label>
@@ -18,22 +20,30 @@
     <label for="opacitySlider1">Overlay Opacity</label>
     <input title="Control transparency of colored voxel-based segmentation" type="range" min="0" max="255" value="128" class="slider" id="opacitySlider1" />
     &nbsp;
+    <br>
+    <label><strong>Generation:</strong></label>
+    &nbsp;&nbsp;&nbsp;&nbsp;
     <label for="modelSelect">Segmentation Model</label>
     <select id="modelSelect">
     </select>
     &nbsp;
-    <button id="createMeshBtn">Create Mesh</button>
+    <button disabled id="createMeshBtn">Create Mesh</button>
     &nbsp;
-    <button id="saveBtn">Save Image</button>
+    <br>
+    <label><strong>Save results:</strong></label>
+    &nbsp;&nbsp;
+    <button disabled id="saveBtn">Save Image</button>
     &nbsp;
-    <button id="saveMeshBtn">Save Mesh</button>
+    <button disabled id="saveMeshBtn">Save Mesh</button>
     &nbsp;
+    <br>
     <button id="aboutBtn">About</button>
     &nbsp;
     <label for="workerCheck"  hidden>Use Webworker</label>
     <input type="checkbox"  hidden title="webworkers are faster but not supported by all browsers" id="workerCheck" checked />
     &nbsp;
     <div id="loadingCircle" class="loading-circle hidden"></div>
+    <label id="meshProcessingMsg" class="hidden"></label>
 
   </header>
   <main id="canvas-container">
@@ -55,46 +65,21 @@
   </footer>
   <dialog id="remeshDialog">
     <form method="dialog">
-      <p>
-        <label>Closing (mm)</label>
-        <input id="closeMM" type="number" min="0"  value="4" max="100">
-      </p>
-      <p>
-        <label>
-          Hollow:
-          <select id="hollowSelect" title="hollow meshes require less material but may be fragile">
-            <option value="0">False: solid</option>
-            <option value="-1">1mm</option>
-            <option value="-2">2mm</option>
-            <option value="-4" selected>4mm</option>
-            <option value="-8">8mm</option>
-            <option value="-16">16mm</option>
-          </select>
-        </label>
-      </p>
-      <p>
-        <input type="checkbox" id="bubbleCheck" checked/>
-        <label>Fill bubbles</label>
-      </p>
-      <p>
-        <input type="checkbox" id="largestCheck" checked/>
-        <label>Largest cluster only</label>
-      </p>
       <p>
         <label for="smoothSlide">Smoothing</label>
         <input
           type="range"
           min="0"
-          max="20"
-          value="0"
+          max="30"
+          value="3"
           class="slider"
           id="smoothSlide"
-          title="smoothing makes mesh less jagged, but can create self intersecting triangles"
+          title="smoothing makes the mesh less jagged but requires longer computation"
         />
       </p>
       <p>
-        <label>Simplify Percent (1..100)</label>
-        <input title="adaptive triangle reduction reduces file size but can introduce defectss" id="shrinkPct" type="number" min="1"  value="100" max="100">
+        <label>Simplify Percent (10..150)</label>
+        <input title="triangle reduction reduces the file size and computation time but can reduce mesh quality, smaller values result in a smaller mesh" id="shrinkPct" type="number" min="10"  value="75" max="150">
       </p>
       <button id="cancelBtn" formmethod="dialog">Cancel</button>
       <button autofocus id="applyBtn" value="default">Apply</button>