Skip to content

Commit a88d237

Browse files
neurolabuscneurolabusc
authored
Merge pull request #1 from thewtex/itk-wasm-surface-gen
ITK-Wasm surface generation pipeline
2 parents 2841358 + f80b903 commit a88d237

File tree

7 files changed

+2218
-324
lines changed

7 files changed

+2218
-324
lines changed

‎README.md‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,23 +9,21 @@ This is an extension of [brainchop](https://github.com/neuroneural/brainchop) th
99
1. Open the [live demo](https://niivue.github.io/brain2print/).
1010
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.
1111
3. **Option 2** If your T1 MRI scan is in NIfTI format, drag and drop the file onto the web page.
12-
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.
13-
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.
12+
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).
13+
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.
1414
6. Press the `Create Mesh` button and select your preferred settings:
1515

1616
- ![settings dialog](Settings.png)
1717

18-
- [Closing](https://en.wikipedia.org/wiki/Closing_(morphology)) removes small crevices and cavities in your mesh which can plague printing.
19-
- Fill bubbles will remove any cavities, this includes large cavities for example the ventricles for a brain scan.
20-
- The `Largest cluster only` will only extract a single mesh.
21-
- You can choose `Smoothing` to make the surfaces less jagged (note this can create self intersecting triangles that can confound some printers).
22-
- 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).
18+
- You can choose `Smoothing` to make the surfaces less jagged at the expense of computation time.
19+
- You can choose to `Simplify` to reduce the number of triangles and create smaller files.
20+
2321
7. Once you have set your preferences, press `Apply`.
2422
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.
2523

2624
## How it Works
2725

28-
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.
26+
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.
2927

3028
### Developers - Running a Local Live Demo
3129

@@ -50,5 +48,4 @@ npm run build
5048
- [brainchop](https://github.com/neuroneural/brainchop)
5149
- [niivue](https://github.com/niivue/niivue)
5250
- [niimath](https://github.com/rordenlab/niimath)
53-
54-
51+
- [ITK-Wasm](https://github.com/InsightSoftwareConsortium/ITK-Wasm)

‎Settings.png‎

100644100755
5.6 KB
Loading

‎index.html‎

Lines changed: 18 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@
1010

1111
<body>
1212
<header>
13+
<label><strong>Visualization:</strong></label>
14+
&nbsp;
1315
<label for="clipCheck">Clip Plane</label>
1416
<input type="checkbox" id="clipCheck" unchecked />
1517
<label for="opacitySlider0">Background Opacity</label>
@@ -18,22 +20,30 @@
1820
<label for="opacitySlider1">Overlay Opacity</label>
1921
<input title="Control transparency of colored voxel-based segmentation" type="range" min="0" max="255" value="128" class="slider" id="opacitySlider1" />
2022
&nbsp;
23+
<br>
24+
<label><strong>Generation:</strong></label>
25+
&nbsp;&nbsp;&nbsp;&nbsp;
2126
<label for="modelSelect">Segmentation Model</label>
2227
<select id="modelSelect">
2328
</select>
2429
&nbsp;
25-
<button id="createMeshBtn">Create Mesh</button>
30+
<button disabled id="createMeshBtn">Create Mesh</button>
2631
&nbsp;
27-
<button id="saveBtn">Save Image</button>
32+
<br>
33+
<label><strong>Save results:</strong></label>
34+
&nbsp;&nbsp;
35+
<button disabled id="saveBtn">Save Image</button>
2836
&nbsp;
29-
<button id="saveMeshBtn">Save Mesh</button>
37+
<button disabled id="saveMeshBtn">Save Mesh</button>
3038
&nbsp;
39+
<br>
3140
<button id="aboutBtn">About</button>
3241
&nbsp;
3342
<label for="workerCheck" hidden>Use Webworker</label>
3443
<input type="checkbox" hidden title="webworkers are faster but not supported by all browsers" id="workerCheck" checked />
3544
&nbsp;
3645
<div id="loadingCircle" class="loading-circle hidden"></div>
46+
<label id="meshProcessingMsg" class="hidden"></label>
3747

3848
</header>
3949
<main id="canvas-container">
@@ -55,46 +65,21 @@
5565
</footer>
5666
<dialog id="remeshDialog">
5767
<form method="dialog">
58-
<p>
59-
<label>Closing (mm)</label>
60-
<input id="closeMM" type="number" min="0" value="4" max="100">
61-
</p>
62-
<p>
63-
<label>
64-
Hollow:
65-
<select id="hollowSelect" title="hollow meshes require less material but may be fragile">
66-
<option value="0">False: solid</option>
67-
<option value="-1">1mm</option>
68-
<option value="-2">2mm</option>
69-
<option value="-4" selected>4mm</option>
70-
<option value="-8">8mm</option>
71-
<option value="-16">16mm</option>
72-
</select>
73-
</label>
74-
</p>
75-
<p>
76-
<input type="checkbox" id="bubbleCheck" checked/>
77-
<label>Fill bubbles</label>
78-
</p>
79-
<p>
80-
<input type="checkbox" id="largestCheck" checked/>
81-
<label>Largest cluster only</label>
82-
</p>
8368
<p>
8469
<label for="smoothSlide">Smoothing</label>
8570
<input
8671
type="range"
8772
min="0"
88-
max="20"
89-
value="0"
73+
max="30"
74+
value="3"
9075
class="slider"
9176
id="smoothSlide"
92-
title="smoothing makes mesh less jagged, but can create self intersecting triangles"
77+
title="smoothing makes the mesh less jagged but requires longer computation"
9378
/>
9479
</p>
9580
<p>
96-
<label>Simplify Percent (1..100)</label>
97-
<input title="adaptive triangle reduction reduces file size but can introduce defectss" id="shrinkPct" type="number" min="1" value="100" max="100">
81+
<label>Simplify Percent (10..150)</label>
82+
<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">
9883
</p>
9984
<button id="cancelBtn" formmethod="dialog">Cancel</button>
10085
<button autofocus id="applyBtn" value="default">Apply</button>

0 commit comments

Comments
 (0)