├── .github
    └── workflows
    │   └── deploy-page.yml
├── .gitignore
├── LICENSE.md
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── src
    ├── app.ts
    ├── arcball_camera.d.ts
    ├── compute_num_verts.wgsl
    ├── compute_vertices.wgsl
    ├── compute_voxel_values.wgsl
    ├── exclusive_scan.ts
    ├── exclusive_scan_add_block_sums.wgsl
    ├── exclusive_scan_prefix_sum.wgsl
    ├── exclusive_scan_prefix_sum_blocks.wgsl
    ├── ez_canvas_controller.d.ts
    ├── marching_cubes.ts
    ├── mark_active_voxel.wgsl
    ├── mc_case_table.ts
    ├── push_constant_builder.ts
    ├── render_mesh.wgsl
    ├── stream_compact_ids.ts
    ├── stream_compact_ids.wgsl
    ├── util.ts
    ├── volume.ts
    └── wgsl.d.ts
├── tsconfig.json
└── webpack.config.js


/.github/workflows/deploy-page.yml:
--------------------------------------------------------------------------------
 1 | name: Deploy App
 2 | 
 3 | on:
 4 |   push:
 5 |     branches:
 6 |       - main
 7 | 
 8 | jobs:
 9 |   build:
10 |     runs-on: ubuntu-latest
11 |     steps:
12 |       - uses: actions/checkout@v4
13 |       - uses: actions/setup-node@v4
14 |         with:
15 |           node-version: "latest"
16 | 
17 |       # Add plausible analytics, curious how many people
18 |       # visit each demo
19 |       - name: Add Stats
20 |         run: |
21 |           sed -i.bk "s/<\/body>/<script defer data-domain='willusher.io' src='https:\/\/pan.wushernet.com\/js\/script.js'><\/script><\/body>/" index.html
22 | 
23 |       - name: Build App
24 |         run: |
25 |           npm i
26 |           npm run build
27 | 
28 |       - name: Upload Web App Dist
29 |         uses: actions/upload-pages-artifact@v3
30 |         with:
31 |           path: ${{ github.workspace }}/dist
32 | 
33 |   deploy:
34 |     needs: build
35 | 
36 |     permissions:
37 |       pages: write
38 |       id-token: write
39 | 
40 |     environment:
41 |       name: github-pages
42 |       url: ${{ steps.deployment.outputs.page_url }}
43 | 
44 |     # Specify runner + deployment step
45 |     runs-on: ubuntu-latest
46 |     steps:
47 |       - name: Deploy to GitHub Pages
48 |         id: deployment
49 |         uses: actions/deploy-pages@v4
50 | 
51 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | *.swp
 2 | *.raw
 3 | *.spv
 4 | shaders/embedded_shaders.js
 5 | models/
 6 | *.wasm
 7 | js/liblas.js
 8 | js/liblas_wrapper.js
 9 | .DS_Store
10 | glslc.exe
11 | node_modules
12 | dist/
13 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2021 Will Usher
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # WebGPU Marching Cubes
 2 | 
 3 | A GPU-parallel implementation of [Marching Cubes](https://en.wikipedia.org/wiki/Marching_cubes) using WebGPU. Try it out [online](https://www.willusher.io/webgpu-marching-cubes/)!
 4 | 
 5 | ## Running
 6 | 
 7 | After cloning the repo run
 8 | 
 9 | ```
10 | npm install
11 | ```
12 | 
13 | To install webpack, then you can run the serve task and point your browser to `localhost:8080`:
14 | 
15 | ```
16 | npm run serve
17 | ```
18 | 
19 | If you select the Bonsai data set, you should see something like the image below.
20 | ![webgpu-marching-cubes-bonsai](https://github.com/Twinklebear/webgpu-marching-cubes/assets/1522476/f3106ab0-6967-4540-8f2c-ebadcc94fe9f)
21 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 6 |     <!-- Bootstrap CSS -->
 7 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
 8 |                            integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
 9 |                            crossorigin="anonymous">
10 | 
11 |     <title>WebGPU Marching Cubes</title>
12 | </head>
13 | <body>
14 |     <div class="container mt-4">
15 |         <div class="row">
16 |             <div class="col-12 text-center">
17 |                 <h4>WebGPU Marching Cubes</h4>
18 |                 <canvas id="webgpu-canvas" class="img-fluid" width="1280" height="720"></canvas>
19 |                 <div class="col-12 alert alert-danger" id="no-webgpu" style="display:none;">
20 |                     <h4>Error: Your browser does not support WebGPU</h4>
21 |                 </div>
22 |             </div>
23 |             <div class="mx-auto col-12 col-lg-8 row">
24 |                 <div class="col-12 mb-2">
25 |                     <h4>Scene Selection</h4>
26 |                 </div>
27 |                 <div class="col-6 col-sm-6 mb-2">
28 |                     Volume: <select id="volumeList"></select>
29 |                 </div>
30 |                 <div id="stats" class="col-6 col-sm-6 mb-sm-0 mb-2">
31 |                 </div>
32 |                 <div class="col-12 mb-2">
33 |                     <h4>Isovalue Slider</h4>
34 |                    <input type="range" class="form-control-range" id="isovalueSlider"
35 |                            min="0.0" max="255" step="1"> 
36 |                 </div>
37 |                 <div class="col-12 mt-lg-2 mt-0">
38 |                     <p id="loadingText"></p>
39 |                     <div class="progress mb-2">
40 |                         <div id="loadingProgressBar" class="progress-bar" role="progressbar"
41 |                              aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
42 |                     </div>
43 |                 </div>
44 | 
45 |                 <div id="timestamp-stats" class="col-12 col-sm-12 mb-sm-0 mb-2">
46 |                 </div>
47 |             </div>
48 |             <div class="mx-auto col-12 col-lg-8 row">
49 |                 <div class="col-12 mt-lg-2 mt-0">
50 |                     <h4>Camera Controls</h4>
51 |                     <p>Desktop: Left-click + drag to rotate, scroll to zoom,
52 |                     right-click + drag to pan.
53 |                     <br/>
54 |                     Touch: One finger drag to rotate, pinch to zoom, two finger drag to pan.
55 | 
56 |                     <h4>Description</h4>
57 |                     This is a WebGPU implementation of <a href="https://en.wikipedia.org/wiki/Marching_cubes">Marching Cubes</a>.
58 |                     <a href="https://github.com/Twinklebear/webgpu-marching-cubes">
59 |                         Get the code on GitHub!</a>
60 |                 </div>
61 |             </div>
62 |         </div>
63 |     </div>
64 | </body>
65 | </html>
66 | 
67 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "webgpu-webpack-starter",
 3 |   "version": "1.0.0",
 4 |   "description": "A starter template for WebGPU development the uses webpack to build the code and manage dependencies.",
 5 |   "main": "app.js",
 6 |   "scripts": {
 7 |     "build": "webpack",
 8 |     "serve": "webpack server",
 9 |     "deploy": "webpack --mode=production"
10 |   },
11 |   "repository": {
12 |     "type": "git",
13 |     "url": "git+https://github.com/Twinklebear/webgpu-webpack-starter.git"
14 |   },
15 |   "keywords": [],
16 |   "author": "",
17 |   "license": "MIT",
18 |   "bugs": {
19 |     "url": "https://github.com/Twinklebear/webgpu-webpack-starter/issues"
20 |   },
21 |   "homepage": "https://github.com/Twinklebear/webgpu-webpack-starter#readme",
22 |   "devDependencies": {
23 |     "html-webpack-plugin": "^5.3.2",
24 |     "ts-loader": "^9.2.8",
25 |     "typescript": "^4.6.3",
26 |     "webpack": "^5.53.0",
27 |     "webpack-cli": "^4.8.0",
28 |     "webpack-dev-server": "^4.2.1"
29 |   },
30 |   "dependencies": {
31 |     "@webgpu/types": "^0.1.30",
32 |     "arcball_camera": "^1.0.1",
33 |     "ez_canvas_controller": "^1.0.0",
34 |     "gl-matrix": "^3.4.1"
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/src/app.ts:
--------------------------------------------------------------------------------
  1 | import {ArcballCamera} from "arcball_camera";
  2 | import {Controller} from "ez_canvas_controller";
  3 | import {mat4, vec3} from "gl-matrix";
  4 | 
  5 | import {Volume, volumes} from "./volume";
  6 | import {MarchingCubes, MarchingCubesResult} from "./marching_cubes";
  7 | import renderMeshShaders from "./render_mesh.wgsl";
  8 | import {compileShader, fillSelector} from "./util";
  9 | 
 10 | (async () =>
 11 | {
 12 |     if (navigator.gpu === undefined) {
 13 |         document.getElementById("webgpu-canvas").setAttribute("style", "display:none;");
 14 |         document.getElementById("no-webgpu").setAttribute("style", "display:block;");
 15 |         return;
 16 |     }
 17 | 
 18 |     // Get a GPU device to render with
 19 |     let adapter = await navigator.gpu.requestAdapter();
 20 |     console.log(adapter.limits);
 21 | 
 22 |     let deviceRequiredFeatures: GPUFeatureName[] = [];
 23 |     const timestampSupport = adapter.features.has("timestamp-query");
 24 |     // Enable timestamp queries if the device supports them
 25 |     if (timestampSupport) {
 26 |         deviceRequiredFeatures.push("timestamp-query");
 27 |     } else {
 28 |         console.log("Device does not support timestamp queries");
 29 |     }
 30 |     let deviceDescriptor = {
 31 |         requiredFeatures: deviceRequiredFeatures,
 32 |         requiredLimits: {
 33 |             maxBufferSize: adapter.limits.maxBufferSize,
 34 |             maxStorageBufferBindingSize: adapter.limits.maxStorageBufferBindingSize,
 35 |         }
 36 |     };
 37 | 
 38 |     let device = await adapter.requestDevice(deviceDescriptor);
 39 | 
 40 |     // Get a context to display our rendered image on the canvas
 41 |     let canvas = document.getElementById("webgpu-canvas") as HTMLCanvasElement;
 42 |     let context = canvas.getContext("webgpu");
 43 | 
 44 |     let volumePicker = document.getElementById("volumeList") as HTMLSelectElement;
 45 |     fillSelector(volumePicker, volumes);
 46 | 
 47 |     let isovalueSlider = document.getElementById("isovalueSlider") as HTMLInputElement;
 48 |     // Force computing the surface on the initial load
 49 |     let currentIsovalue = -1;
 50 | 
 51 |     let perfDisplay = document.getElementById("stats") as HTMLElement;
 52 |     let timestampDisplay = document.getElementById("timestamp-stats") as HTMLElement;
 53 | 
 54 |     // Setup shader modules
 55 |     let shaderModule = await compileShader(device, renderMeshShaders, "renderMeshShaders");
 56 | 
 57 |     if (window.location.hash) {
 58 |         let linkedDataset = decodeURI(window.location.hash.substring(1));
 59 |         if (volumes.has(linkedDataset)) {
 60 |             volumePicker.value = linkedDataset;
 61 |         }
 62 |     }
 63 | 
 64 |     let currentVolume = volumePicker.value;
 65 |     let volume = await Volume.load(volumes.get(currentVolume), device);
 66 |     let mc = await MarchingCubes.create(volume, device);
 67 |     let isosurface: MarchingCubesResult = null;
 68 | 
 69 |     // Vertex attribute state and shader stage
 70 |     let vertexState = {
 71 |         // Shader stage info
 72 |         module: shaderModule,
 73 |         entryPoint: "vertex_main",
 74 |         // Vertex buffer info
 75 |         buffers: [{
 76 |             arrayStride: 4 * 4,
 77 |             attributes: [
 78 |                 {format: "float32x4" as GPUVertexFormat, offset: 0, shaderLocation: 0}
 79 |             ]
 80 |         }]
 81 |     };
 82 | 
 83 |     // Setup render outputs
 84 |     let swapChainFormat = "bgra8unorm" as GPUTextureFormat;
 85 |     context.configure(
 86 |         {device: device, format: swapChainFormat, usage: GPUTextureUsage.RENDER_ATTACHMENT});
 87 | 
 88 |     let depthFormat = "depth24plus-stencil8" as GPUTextureFormat;
 89 |     let depthTexture = device.createTexture({
 90 |         size: {width: canvas.width, height: canvas.height, depthOrArrayLayers: 1},
 91 |         format: depthFormat,
 92 |         usage: GPUTextureUsage.RENDER_ATTACHMENT
 93 |     });
 94 | 
 95 |     let fragmentState = {
 96 |         // Shader info
 97 |         module: shaderModule,
 98 |         entryPoint: "fragment_main",
 99 |         // Output render target info
100 |         targets: [{format: swapChainFormat}]
101 |     };
102 | 
103 |     let bindGroupLayout = device.createBindGroupLayout({
104 |         entries: [{binding: 0, visibility: GPUShaderStage.VERTEX, buffer: {type: "uniform"}}]
105 |     });
106 | 
107 |     // Create render pipeline
108 |     let layout = device.createPipelineLayout({bindGroupLayouts: [bindGroupLayout]});
109 | 
110 |     let renderPipeline = device.createRenderPipeline({
111 |         layout: layout,
112 |         vertex: vertexState,
113 |         fragment: fragmentState,
114 |         depthStencil: {format: depthFormat, depthWriteEnabled: true, depthCompare: "less"}
115 |     });
116 | 
117 |     let renderPassDesc = {
118 |         colorAttachments: [{
119 |             view: null as GPUTextureView,
120 |             loadOp: "clear" as GPULoadOp,
121 |             clearValue: [0.3, 0.3, 0.3, 1],
122 |             storeOp: "store" as GPUStoreOp
123 |         }],
124 |         depthStencilAttachment: {
125 |             view: depthTexture.createView(),
126 |             depthLoadOp: "clear" as GPULoadOp,
127 |             depthClearValue: 1.0,
128 |             depthStoreOp: "store" as GPUStoreOp,
129 |             stencilLoadOp: "clear" as GPULoadOp,
130 |             stencilClearValue: 0,
131 |             stencilStoreOp: "store" as GPUStoreOp
132 |         }
133 |     };
134 | 
135 |     let viewParamsBuffer = device.createBuffer({
136 |         size: (4 * 4 + 4) * 4,
137 |         usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
138 |         mappedAtCreation: false,
139 |     });
140 | 
141 |     let uploadBuffer = device.createBuffer({
142 |         size: viewParamsBuffer.size,
143 |         usage: GPUBufferUsage.MAP_WRITE | GPUBufferUsage.COPY_SRC,
144 |         mappedAtCreation: false,
145 |     });
146 | 
147 |     let bindGroup = device.createBindGroup({
148 |         layout: bindGroupLayout,
149 |         entries: [{binding: 0, resource: {buffer: viewParamsBuffer}}]
150 |     });
151 | 
152 |     // Setup camera and camera controls
153 |     const defaultEye = vec3.set(vec3.create(), 0.0, 0.0, volume.dims[2] * 0.75);
154 |     const center = vec3.set(vec3.create(), 0.0, 0.0, 0.5);
155 |     const up = vec3.set(vec3.create(), 0.0, 1.0, 0.0);
156 |     let camera = new ArcballCamera(defaultEye, center, up, volume.diagonalLength * 0.1,
157 |         [canvas.width, canvas.height]);
158 |     let proj = mat4.perspective(
159 |         mat4.create(), 50 * Math.PI / 180.0, canvas.width / canvas.height, 0.1, 1000);
160 |     let projView = mat4.create();
161 | 
162 |     // Register mouse and touch listeners
163 |     var controller = new Controller();
164 |     controller.mousemove = function (prev: Array<number>, cur: Array<number>, evt: MouseEvent)
165 |     {
166 |         if (evt.buttons == 1) {
167 |             camera.rotate(prev, cur);
168 | 
169 |         } else if (evt.buttons == 2) {
170 |             camera.pan([cur[0] - prev[0], prev[1] - cur[1]]);
171 |         }
172 |     };
173 |     controller.wheel = function (amt: number)
174 |     {
175 |         camera.zoom(amt);
176 |     };
177 |     controller.pinch = controller.wheel;
178 |     controller.twoFingerDrag = function (drag: number)
179 |     {
180 |         camera.pan(drag);
181 |     };
182 |     controller.registerForCanvas(canvas);
183 | 
184 |     // Render!
185 |     const render = async () => {
186 |         let sliderValue = parseFloat(isovalueSlider.value) / 255.0;
187 |         let recomputeSurface = sliderValue != currentIsovalue;
188 | 
189 |         // When a new volume is selected, recompute the surface and reposition the camera
190 |         if (volumePicker.value != currentVolume) {
191 |             if (isosurface.buffer) {
192 |                 isosurface.buffer.destroy();
193 |             }
194 |             currentVolume = volumePicker.value;
195 |             history.replaceState(history.state, "#" + currentVolume, "#" + currentVolume);
196 | 
197 |             volume = await Volume.load(volumes.get(currentVolume), device);
198 |             mc = await MarchingCubes.create(volume, device);
199 |             isovalueSlider.value = "128";
200 |             sliderValue = parseFloat(isovalueSlider.value) / 255.0;
201 |             recomputeSurface = true;
202 | 
203 |             const defaultEye = vec3.set(vec3.create(), 0.0, 0.0, volume.dims[2] * 0.75);
204 |             camera = new ArcballCamera(defaultEye, center, up, volume.diagonalLength * 0.1,
205 |                 [canvas.width, canvas.height]);
206 |         }
207 | 
208 |         if (recomputeSurface) {
209 |             if (isosurface && isosurface.buffer) {
210 |                 isosurface.buffer.destroy();
211 |             }
212 | 
213 |             currentIsovalue = sliderValue;
214 |             let start = performance.now();
215 |             isosurface = await mc.computeSurface(currentIsovalue);
216 |             let end = performance.now();
217 | 
218 |             perfDisplay.innerHTML =
219 |                 `<p>Compute Time: ${(end - start).toFixed((2))}ms<br/># Triangles: ${isosurface.count / 3}</p>`
220 | 
221 |             timestampDisplay.innerHTML =
222 |                 `<h4>Timing Breakdown</h4>
223 |                     <p>Note: if timestamp-query is not supported, -1 is shown for kernel times</p>
224 | 
225 |                     Compute Active Voxels: ${mc.computeActiveVoxelsTime.toFixed(2)}ms
226 |                     <ul>
227 |                     <li>
228 |                     Mark Active Voxels Kernel: ${mc.markActiveVoxelsKernelTime.toFixed(2)}ms
229 |                     </li>
230 |                     <li>
231 |                     Stream Compact: ${mc.computeActiveVoxelsCompactTime.toFixed(2)}ms
232 |                     </li>
233 |                     </ul>
234 | 
235 |                     Compute Vertex Offsets: ${mc.computeVertexOffsetsTime.toFixed(2)}ms
236 |                     <ul>
237 |                     <li>
238 |                     Compute # of Vertices Kernel: ${mc.computeNumVertsKernelTime.toFixed(2)}ms
239 |                     </li>
240 |                     </ul>
241 | 
242 |                     Compute Vertices: ${mc.computeVerticesTime.toFixed(2)}ms
243 |                     <ul>
244 |                     <li>
245 |                     Compute Vertices Kernel: ${mc.computeVerticesKernelTime.toFixed(2)}ms
246 |                     </li>
247 |                     </ul>`;
248 |         }
249 | 
250 |         projView = mat4.mul(projView, proj, camera.camera);
251 |         {
252 |             await uploadBuffer.mapAsync(GPUMapMode.WRITE);
253 |             let map = uploadBuffer.getMappedRange();
254 |             new Float32Array(map).set(projView);
255 |             new Uint32Array(map, 16 * 4, 4).set(volume.dims);
256 |             uploadBuffer.unmap();
257 |         }
258 | 
259 |         renderPassDesc.colorAttachments[0].view = context.getCurrentTexture().createView();
260 | 
261 |         let commandEncoder = device.createCommandEncoder();
262 | 
263 |         commandEncoder.copyBufferToBuffer(
264 |             uploadBuffer, 0, viewParamsBuffer, 0, viewParamsBuffer.size);
265 | 
266 |         let renderPass = commandEncoder.beginRenderPass(renderPassDesc);
267 | 
268 |         if (isosurface.count > 0) {
269 |             renderPass.setBindGroup(0, bindGroup);
270 |             renderPass.setPipeline(renderPipeline);
271 |             renderPass.setVertexBuffer(0, isosurface.buffer);
272 |             renderPass.draw(isosurface.count, 1, 0, 0);
273 |         }
274 | 
275 |         renderPass.end();
276 |         device.queue.submit([commandEncoder.finish()]);
277 |         requestAnimationFrame(render);
278 |     }
279 |     requestAnimationFrame(render);
280 | })();
281 | 


--------------------------------------------------------------------------------
/src/arcball_camera.d.ts:
--------------------------------------------------------------------------------
1 | // TODO: typescript type bindings for this repo
2 | declare module "arcball_camera";
3 | 


--------------------------------------------------------------------------------
/src/compute_num_verts.wgsl:
--------------------------------------------------------------------------------
 1 | // include of compute_voxel_values.wgsl is inserted here
 2 | 
 3 | @id(0) override WORKGROUP_SIZE: u32 = 32;
 4 | 
 5 | @group(1) @binding(0)
 6 | var<storage> case_table: array<i32>;
 7 | 
 8 | @group(1) @binding(1)
 9 | var<storage, read_write> active_voxel_ids: array<u32>;
10 | 
11 | @group(1) @binding(2)
12 | var<storage, read_write> voxel_vertex_offsets: array<u32>;
13 | 
14 | @group(1) @binding(3)
15 | var<storage, read_write> total_vertices: array<atomic<u32>>;
16 | 
17 | struct PushConstants {
18 |     group_id_offset: u32,
19 |     total_workgoups: u32,
20 |     total_elements: u32
21 | };
22 | 
23 | @group(2) @binding(0)
24 | var<uniform> push_constants: PushConstants;
25 | 
26 | @compute @workgroup_size(WORKGROUP_SIZE)
27 | fn main(@builtin(global_invocation_id) global_id: uint3)
28 | {
29 |     // Skip out of bounds threads
30 |     let work_item = global_id.x + push_constants.group_id_offset * WORKGROUP_SIZE;
31 |     if (work_item >= push_constants.total_elements) {
32 |         return;
33 |     }
34 | 
35 |     let voxel_id = active_voxel_ids[work_item];
36 |     var values: array<f32, 8>;
37 |     compute_voxel_values(voxel_id_to_pos(voxel_id), &values);
38 | 
39 |     var case_index = 0u;
40 |     for (var i = 0u; i < 8u; i++) {
41 |         if (values[i] <= volume_info.isovalue) {
42 |             case_index |= 1u << i;
43 |         }
44 |     }
45 | 
46 |     // There are 16 entries per-case, terminated by a -1 when the vertex
47 |     // entries end for the given case
48 |     var num_verts = 0u;
49 |     for (var i = 0u; i < MC_CASE_ELEMENTS && case_table[case_index * MC_CASE_ELEMENTS + i] != -1; i++) 
50 |     {
51 |         num_verts++;
52 |     }
53 |     let offset = atomicAdd(&total_vertices[0], num_verts);
54 |     voxel_vertex_offsets[work_item] = offset;
55 | }
56 | 
57 | 


--------------------------------------------------------------------------------
/src/compute_vertices.wgsl:
--------------------------------------------------------------------------------
 1 | // include of compute_voxel_values.wgsl is inserted here
 2 | 
 3 | @id(0) override WORKGROUP_SIZE: u32 = 32;
 4 | 
 5 | @group(1) @binding(0)
 6 | var<storage> case_table: array<i32>;
 7 | 
 8 | @group(1) @binding(1)
 9 | var<storage, read_write> active_voxel_ids: array<u32>;
10 | 
11 | @group(1) @binding(2)
12 | var<storage, read_write> voxel_vertex_offsets: array<u32>;
13 | 
14 | @group(1) @binding(3)
15 | var<storage, read_write> vertices: array<float4>;
16 | 
17 | struct PushConstants {
18 |     group_id_offset: u32,
19 |     total_workgoups: u32,
20 |     total_elements: u32
21 | };
22 | 
23 | @group(2) @binding(0)
24 | var<uniform> push_constants: PushConstants;
25 | 
26 | const EDGE_VERTICES: array<uint2, 12> = array<uint2, 12>(
27 |     uint2(0, 1),
28 |     uint2(1, 2),
29 |     uint2(2, 3),
30 |     uint2(3, 0),
31 |     uint2(4, 5),
32 |     uint2(6, 5),
33 |     uint2(6, 7),
34 |     uint2(7, 4),
35 |     uint2(0, 4),
36 |     uint2(1, 5),
37 |     uint2(2, 6),
38 |     uint2(3, 7)
39 | );
40 | 
41 | fn lerp_verts(va: int3, vb: int3, fa: f32, fb: f32) -> float3
42 | {
43 |     var t: f32 = 0.0;
44 |     if (abs(fa - fb) >= 0.001) {
45 |         t = (volume_info.isovalue - fa) / (fb - fa);
46 |     }
47 |     return mix(float3(va), float3(vb), t);
48 | }
49 | 
50 | @compute @workgroup_size(WORKGROUP_SIZE)
51 | fn main(@builtin(global_invocation_id) global_id: uint3)
52 | {
53 |     // Skip out of bounds threads
54 |     let work_item = global_id.x + push_constants.group_id_offset * WORKGROUP_SIZE;
55 |     if (work_item >= push_constants.total_elements) {
56 |         return;
57 |     }
58 | 
59 |     let voxel_id = active_voxel_ids[work_item];
60 |     var values: array<f32, 8>;
61 |     compute_voxel_values(voxel_id_to_pos(voxel_id), &values);
62 | 
63 |     var case_index = 0u;
64 |     for (var i = 0u; i < 8u; i++) {
65 |         if (values[i] <= volume_info.isovalue) {
66 |             case_index |= 1u << i;
67 |         }
68 |     }
69 | 
70 |     let voxel_pos = voxel_id_to_pos(voxel_id);
71 |     let vertex_offset = voxel_vertex_offsets[work_item];
72 |     // Now we can finally compute and output the vertices
73 |     for (var i = 0u; i < MC_CASE_ELEMENTS && case_table[case_index * MC_CASE_ELEMENTS + i] != -1; i++)
74 |     {
75 |         let edge = case_table[case_index * MC_CASE_ELEMENTS + i];
76 |         let v0 = EDGE_VERTICES[edge].x;
77 |         let v1 = EDGE_VERTICES[edge].y;
78 | 
79 |         // Compute the interpolated vertex for this edge within the unit cell
80 |         var v = lerp_verts(INDEX_TO_VERTEX[v0], INDEX_TO_VERTEX[v1], values[v0], values[v1]);
81 | 
82 |         // Offset the vertex into the global volume grid
83 |         v = v + float3(voxel_pos) + 0.5;
84 |         vertices[vertex_offset + i] = float4(v, 1.0);
85 |     }
86 | }
87 | 
88 | 
89 | 


--------------------------------------------------------------------------------
/src/compute_voxel_values.wgsl:
--------------------------------------------------------------------------------
 1 | alias float2 = vec2<f32>;
 2 | alias float3 = vec3<f32>;
 3 | alias float4 = vec4<f32>;
 4 | alias uint2 = vec2<u32>;
 5 | alias uint3 = vec3<u32>;
 6 | alias uint4 = vec4<u32>;
 7 | alias int2 = vec2<i32>;
 8 | alias int3 = vec3<i32>;
 9 | alias int4 = vec4<i32>;
10 | 
11 | const MC_NUM_CASES: u32 = 256;
12 | const MC_CASE_ELEMENTS: u32 = 16;
13 | 
14 | struct VolumeInfo {
15 |     dims: uint4,
16 |     isovalue: f32,
17 | };
18 | 
19 | @group(0) @binding(0)
20 | var volume: texture_3d<f32>;
21 | 
22 | @group(0) @binding(1)
23 | var<uniform> volume_info: VolumeInfo;
24 | 
25 | const INDEX_TO_VERTEX: array<int3, 8> = array<int3, 8>(
26 |     int3(0, 0, 0),
27 |     int3(1, 0, 0),
28 |     int3(1, 1, 0),
29 |     int3(0, 1, 0),
30 |     int3(0, 0, 1),
31 |     int3(1, 0, 1),
32 |     int3(1, 1, 1),
33 |     int3(0, 1, 1)
34 | );
35 | 
36 | 
37 | fn voxel_id_to_pos(id: u32) -> uint3
38 | {
39 |     return uint3(id % (volume_info.dims[0] - 1),
40 |             (id / (volume_info.dims[0] - 1)) % (volume_info.dims[1] - 1),
41 |             id / ((volume_info.dims[0] - 1) * (volume_info.dims[1] - 1)));
42 | }
43 | 
44 | fn compute_voxel_values(voxel: uint3, values: ptr<function, array<f32, 8>>)
45 | {
46 |     for (var i = 0; i < 8; i++) {
47 |         let p = voxel + uint3(INDEX_TO_VERTEX[i]);
48 |         (*values)[i] = textureLoad(volume, p, 0).x;
49 |     }
50 | }
51 | 
52 | 


--------------------------------------------------------------------------------
/src/exclusive_scan.ts:
--------------------------------------------------------------------------------
  1 | import addBlockSums from "./exclusive_scan_add_block_sums.wgsl";
  2 | import prefixSum from "./exclusive_scan_prefix_sum.wgsl";
  3 | import prefixSumBlocks from "./exclusive_scan_prefix_sum_blocks.wgsl";
  4 | import {alignTo, compileShader} from "./util";
  5 | 
  6 | // Note: This also means the min size we can scan is 128 elements
  7 | const SCAN_BLOCK_SIZE = 512;
  8 | 
  9 | // Serial scan for validation
 10 | export function serialExclusiveScan(array: Uint32Array, output: Uint32Array)
 11 | {
 12 |     output[0] = 0;
 13 |     for (let i = 1; i < array.length; ++i) {
 14 |         output[i] = array[i - 1] + output[i - 1];
 15 |     }
 16 |     return output[array.length - 1] + array[array.length - 1];
 17 | }
 18 | 
 19 | export class ExclusiveScan
 20 | {
 21 |     #device: GPUDevice;
 22 | 
 23 |     // The max # of elements that can be scanned without carry in/out
 24 |     readonly #maxScanSize = SCAN_BLOCK_SIZE * SCAN_BLOCK_SIZE;
 25 | 
 26 |     // Pipeline for scanning the individual blocks of ScanBlockSize elements
 27 |     #scanBlocksPipeline: GPUComputePipeline;
 28 | 
 29 |     // Pipeline for scanning the block scan results which will then be added back to
 30 |     // the individual block scan results
 31 |     #scanBlockResultsPipeline: GPUComputePipeline;
 32 | 
 33 |     // Pipeline that adds the block scan results back to each individual block so
 34 |     // that its scan result is globally correct based on the elements preceeding the block
 35 |     #addBlockSumsPipeline: GPUComputePipeline;
 36 | 
 37 |     private constructor(device: GPUDevice)
 38 |     {
 39 |         this.#device = device;
 40 |     }
 41 | 
 42 |     static async create(device: GPUDevice)
 43 |     {
 44 |         let self = new ExclusiveScan(device);
 45 | 
 46 |         let scanAddBGLayout = device.createBindGroupLayout({
 47 |             entries: [
 48 |                 {
 49 |                     binding: 0,
 50 |                     visibility: GPUShaderStage.COMPUTE,
 51 |                     buffer: {type: "storage", hasDynamicOffset: true}
 52 |                 },
 53 |                 {
 54 |                     binding: 1,
 55 |                     visibility: GPUShaderStage.COMPUTE,
 56 |                     buffer: {
 57 |                         type: "storage",
 58 |                     }
 59 |                 },
 60 |             ],
 61 |         });
 62 | 
 63 |         let scanBlockBGLayout = device.createBindGroupLayout({
 64 |             entries: [
 65 |                 {
 66 |                     binding: 0,
 67 |                     visibility: GPUShaderStage.COMPUTE,
 68 |                     buffer: {
 69 |                         type: "storage",
 70 |                     }
 71 |                 },
 72 |                 {
 73 |                     binding: 1,
 74 |                     visibility: GPUShaderStage.COMPUTE,
 75 |                     buffer: {
 76 |                         type: "storage",
 77 |                     }
 78 |                 },
 79 |             ],
 80 |         });
 81 | 
 82 |         self.#scanBlocksPipeline = device.createComputePipeline({
 83 |             layout: device.createPipelineLayout({
 84 |                 bindGroupLayouts: [scanAddBGLayout],
 85 |             }),
 86 |             compute: {
 87 |                 module: await compileShader(device, prefixSum, "ExclusiveScan::prefixSum"),
 88 |                 entryPoint: "main",
 89 |                 constants: {"0": SCAN_BLOCK_SIZE}
 90 |             }
 91 |         });
 92 | 
 93 |         self.#scanBlockResultsPipeline = device.createComputePipeline({
 94 |             layout: device.createPipelineLayout({
 95 |                 bindGroupLayouts: [scanBlockBGLayout],
 96 |             }),
 97 |             compute: {
 98 |                 module: await compileShader(
 99 |                     device, prefixSumBlocks, "ExclusiveScan::prefixSumBlocks"),
100 |                 entryPoint: "main",
101 |                 constants: {"0": SCAN_BLOCK_SIZE}
102 |             }
103 |         });
104 | 
105 |         self.#addBlockSumsPipeline = device.createComputePipeline({
106 |             layout: device.createPipelineLayout({
107 |                 bindGroupLayouts: [scanAddBGLayout],
108 |             }),
109 |             compute: {
110 |                 module:
111 |                     await compileShader(device, addBlockSums, "ExclusiveScan::addBlockSums"),
112 |                 entryPoint: "main",
113 |                 constants: {"0": SCAN_BLOCK_SIZE}
114 |             }
115 |         });
116 |         return self;
117 |     }
118 | 
119 |     getAlignedSize(size: number)
120 |     {
121 |         return alignTo(size, SCAN_BLOCK_SIZE);
122 |     }
123 | 
124 |     async scan(buffer: GPUBuffer, size: number)
125 |     {
126 |         const bufferTotalSize = buffer.size / 4;
127 |         if (bufferTotalSize != this.getAlignedSize(bufferTotalSize)) {
128 |             throw Error(`Error: GPU input buffer size (${bufferTotalSize}) must be aligned to ExclusiveScan::getAlignedSize, expected ${this.getAlignedSize(bufferTotalSize)}`)
129 |         }
130 | 
131 |         let readbackBuf = this.#device.createBuffer({
132 |             size: 4,
133 |             usage: GPUBufferUsage.MAP_READ | GPUBufferUsage.COPY_DST,
134 |         });
135 | 
136 |         let blockSumBuf = this.#device.createBuffer({
137 |             size: SCAN_BLOCK_SIZE * 4,
138 |             usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC | GPUBufferUsage.COPY_DST,
139 |         });
140 | 
141 |         let carryBuf = this.#device.createBuffer({
142 |             size: 8,
143 |             usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC | GPUBufferUsage.COPY_DST,
144 |         })
145 |         let carryIntermediateBuf = this.#device.createBuffer({
146 |             size: 4,
147 |             usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC | GPUBufferUsage.COPY_DST,
148 |         })
149 | 
150 |         let scanBlockResultsBG = this.#device.createBindGroup({
151 |             layout: this.#scanBlockResultsPipeline.getBindGroupLayout(0),
152 |             entries: [
153 |                 {
154 |                     binding: 0,
155 |                     resource: {
156 |                         buffer: blockSumBuf,
157 |                     },
158 |                 },
159 |                 {
160 |                     binding: 1,
161 |                     resource: {
162 |                         buffer: carryBuf,
163 |                     },
164 |                 },
165 |             ],
166 |         });
167 | 
168 |         const numChunks = Math.ceil(size / this.#maxScanSize);
169 | 
170 |         let scanBlocksBG = null;
171 |         let scanRemainderBlocksBG = null;
172 |         if (numChunks > 1) {
173 |             scanBlocksBG = this.#device.createBindGroup({
174 |                 layout: this.#scanBlocksPipeline.getBindGroupLayout(0),
175 |                 entries: [
176 |                     {
177 |                         binding: 0,
178 |                         resource: {
179 |                             buffer: buffer,
180 |                             size: this.#maxScanSize * 4,
181 |                         }
182 |                     },
183 |                     {
184 |                         binding: 1,
185 |                         resource: {
186 |                             buffer: blockSumBuf,
187 |                         },
188 |                     },
189 |                 ],
190 |             });
191 | 
192 |             if (bufferTotalSize % this.#maxScanSize != 0) {
193 |                 scanRemainderBlocksBG = this.#device.createBindGroup({
194 |                     layout: this.#scanBlocksPipeline.getBindGroupLayout(0),
195 |                     entries: [
196 |                         {
197 |                             binding: 0,
198 |                             resource: {
199 |                                 buffer: buffer,
200 |                                 size: (bufferTotalSize % this.#maxScanSize) * 4,
201 |                             }
202 |                         },
203 |                         {
204 |                             binding: 1,
205 |                             resource: {
206 |                                 buffer: blockSumBuf,
207 |                             },
208 |                         },
209 |                     ],
210 |                 });
211 |             } else {
212 |                 scanRemainderBlocksBG = scanBlocksBG;
213 |             }
214 |         } else {
215 |             scanBlocksBG = this.#device.createBindGroup({
216 |                 layout: this.#scanBlocksPipeline.getBindGroupLayout(0),
217 |                 entries: [
218 |                     {
219 |                         binding: 0,
220 |                         resource: {
221 |                             buffer: buffer,
222 |                             size: Math.min(this.#maxScanSize, bufferTotalSize) * 4,
223 |                         }
224 |                     },
225 |                     {
226 |                         binding: 1,
227 |                         resource: {
228 |                             buffer: blockSumBuf,
229 |                         },
230 |                     },
231 |                 ],
232 |             });
233 |             scanRemainderBlocksBG = scanBlocksBG;
234 |         }
235 | 
236 |         let commandEncoder = this.#device.createCommandEncoder();
237 |         commandEncoder.clearBuffer(blockSumBuf);
238 |         commandEncoder.clearBuffer(carryBuf);
239 |         // If the size being scanned is less than the buffer size, clear the end of it
240 |         // so we don't pull down invalid values
241 |         if (size < bufferTotalSize) {
242 |             // TODO: Later the scan should support not reading these values by doing proper
243 |             // range checking so that we don't have to touch regions of the buffer you don't
244 |             // tell us to
245 |             commandEncoder.clearBuffer(buffer, size * 4, 4);
246 |         }
247 | 
248 |         // Record the scan commands
249 |         for (let i = 0; i < numChunks; ++i) {
250 |             let currentScanBlocksBG = scanBlocksBG;
251 |             if (i + 1 == numChunks) {
252 |                 currentScanBlocksBG = scanRemainderBlocksBG;
253 |             }
254 | 
255 |             let nWorkGroups = Math.min(
256 |                 (bufferTotalSize - i * this.#maxScanSize) / SCAN_BLOCK_SIZE, SCAN_BLOCK_SIZE);
257 | 
258 |             // Clear the previous block sums
259 |             commandEncoder.clearBuffer(blockSumBuf);
260 | 
261 |             let computePass = commandEncoder.beginComputePass();
262 | 
263 |             computePass.setPipeline(this.#scanBlocksPipeline);
264 |             computePass.setBindGroup(0, currentScanBlocksBG, [i * this.#maxScanSize * 4]);
265 |             computePass.dispatchWorkgroups(nWorkGroups, 1, 1);
266 | 
267 |             computePass.setPipeline(this.#scanBlockResultsPipeline);
268 |             computePass.setBindGroup(0, scanBlockResultsBG);
269 |             computePass.dispatchWorkgroups(1, 1, 1);
270 | 
271 |             computePass.setPipeline(this.#addBlockSumsPipeline);
272 |             computePass.setBindGroup(0, currentScanBlocksBG, [i * this.#maxScanSize * 4]);
273 |             computePass.dispatchWorkgroups(nWorkGroups, 1, 1);
274 | 
275 |             computePass.end();
276 | 
277 |             // Update the carry in value for the next chunk, copy carry out to carry in
278 |             commandEncoder.copyBufferToBuffer(carryBuf, 4, carryIntermediateBuf, 0, 4);
279 |             commandEncoder.copyBufferToBuffer(carryIntermediateBuf, 0, carryBuf, 0, 4);
280 |         }
281 | 
282 |         // Copy the final scan result back to the readback buffer
283 |         if (size < bufferTotalSize) {
284 |             commandEncoder.copyBufferToBuffer(buffer, size * 4, readbackBuf, 0, 4);
285 |         } else {
286 |             commandEncoder.copyBufferToBuffer(carryBuf, 4, readbackBuf, 0, 4);
287 |         }
288 | 
289 |         this.#device.queue.submit([commandEncoder.finish()]);
290 |         await this.#device.queue.onSubmittedWorkDone();
291 | 
292 |         await readbackBuf.mapAsync(GPUMapMode.READ);
293 |         let mapping = new Uint32Array(readbackBuf.getMappedRange());
294 |         let sum = mapping[0];
295 |         readbackBuf.unmap();
296 | 
297 |         return sum;
298 |     }
299 | };
300 | 


--------------------------------------------------------------------------------
/src/exclusive_scan_add_block_sums.wgsl:
--------------------------------------------------------------------------------
 1 | @group(0) @binding(0)
 2 | var<storage, read_write> vals: array<u32>;
 3 | 
 4 | @group(0) @binding(1)
 5 | var<storage, read_write> block_sums: array<u32>;
 6 | 
 7 | // Pipeline can override SCAN_BLOCK_SIZE
 8 | @id(0) override SCAN_BLOCK_SIZE: u32 = 512;
 9 | 
10 | @compute @workgroup_size(SCAN_BLOCK_SIZE / 2)
11 | fn main(@builtin(global_invocation_id) global_id: vec3<u32>,
12 |         @builtin(workgroup_id) group_id: vec3<u32>)
13 | {
14 |     let prev_sum = block_sums[group_id.x];
15 |     vals[2 * global_id.x] += prev_sum;
16 |     vals[2 * global_id.x + 1] += prev_sum;
17 | }
18 | 
19 | 


--------------------------------------------------------------------------------
/src/exclusive_scan_prefix_sum.wgsl:
--------------------------------------------------------------------------------
 1 | // See https://www.eecs.umich.edu/courses/eecs570/hw/parprefix.pdf
 2 | 
 3 | @group(0) @binding(0)
 4 | var<storage, read_write> vals: array<u32>;
 5 | 
 6 | @group(0) @binding(1)
 7 | var<storage, read_write> block_sums: array<u32>;
 8 | 
 9 | // Pipeline can override SCAN_BLOCK_SIZE
10 | @id(0) override SCAN_BLOCK_SIZE: u32 = 512;
11 | 
12 | var<workgroup> chunk: array<u32, SCAN_BLOCK_SIZE>;
13 | 
14 | @compute @workgroup_size(SCAN_BLOCK_SIZE / 2)
15 | fn main(@builtin(global_invocation_id) global_id: vec3<u32>,
16 |         @builtin(local_invocation_id) local_id: vec3<u32>,
17 |         @builtin(workgroup_id) group_id: vec3<u32>)
18 | {
19 |     chunk[2 * local_id.x] = vals[2 * global_id.x];
20 |     chunk[2 * local_id.x + 1] = vals[2 * global_id.x + 1];
21 | 
22 |     var offs = 1u;
23 |     // Reduce step up tree
24 |     for (var d = SCAN_BLOCK_SIZE >> 1; d > 0; d = d >> 1) {
25 |         workgroupBarrier();
26 |         if (local_id.x < d) {
27 |             let a = offs * (2 * local_id.x + 1) - 1;
28 |             let b = offs * (2 * local_id.x + 2) - 1;
29 |             chunk[b] += chunk[a];
30 |         }
31 |         offs = offs << 1;
32 |     }
33 | 
34 |     if (local_id.x == 0) {
35 |         block_sums[group_id.x] = chunk[SCAN_BLOCK_SIZE - 1];
36 |         chunk[SCAN_BLOCK_SIZE - 1] = 0;
37 |     }
38 | 
39 |     // Sweep down the tree to finish the scan
40 |     for (var d = 1u; d < SCAN_BLOCK_SIZE; d = d << 1) {
41 |         offs = offs >> 1;
42 |         workgroupBarrier();
43 |         if (local_id.x < d) {
44 |             let a = offs * (2 * local_id.x + 1) - 1;
45 |             let b = offs * (2 * local_id.x + 2) - 1;
46 |             let tmp = chunk[a];
47 |             chunk[a] = chunk[b];
48 |             chunk[b] += tmp;
49 |         }
50 |     }
51 | 
52 |     workgroupBarrier();
53 |     vals[2 * global_id.x] = chunk[2 * local_id.x];
54 |     vals[2 * global_id.x + 1] = chunk[2 * local_id.x + 1];
55 | }
56 | 
57 | 


--------------------------------------------------------------------------------
/src/exclusive_scan_prefix_sum_blocks.wgsl:
--------------------------------------------------------------------------------
 1 | // See https://www.eecs.umich.edu/courses/eecs570/hw/parprefix.pdf
 2 | // Compute the prefix sum over the results from each block, this no longer
 3 | // writes out the block sums since we're scanning on the block sums
 4 | // This shader also applies the carry_in value and writes the carry_ouy
 5 | 
 6 | @group(0) @binding(0)
 7 | var<storage, read_write> vals: array<u32>;
 8 | 
 9 | struct CarryInOut {
10 |     in: u32,
11 |     out: u32,
12 | }
13 | 
14 | @group(0) @binding(1)
15 | var<storage, read_write> carry: CarryInOut;
16 | 
17 | // Pipeline can override SCAN_BLOCK_SIZE
18 | @id(0) override SCAN_BLOCK_SIZE: u32 = 512;
19 | 
20 | var<workgroup> chunk: array<u32, SCAN_BLOCK_SIZE>;
21 | 
22 | @compute @workgroup_size(SCAN_BLOCK_SIZE / 2)
23 | fn main(@builtin(global_invocation_id) global_id: vec3<u32>,
24 |         @builtin(local_invocation_id) local_id: vec3<u32>,
25 |         @builtin(workgroup_id) group_id: vec3<u32>)
26 | {
27 |     chunk[2 * local_id.x] = vals[2 * global_id.x];
28 |     chunk[2 * local_id.x + 1] = vals[2 * global_id.x + 1];
29 | 
30 |     var offs = 1u;
31 |     // Reduce step up tree
32 |     for (var d = SCAN_BLOCK_SIZE >> 1; d > 0; d = d >> 1) {
33 |         workgroupBarrier();
34 |         if (local_id.x < d) {
35 |             let a = offs * (2 * local_id.x + 1) - 1;
36 |             let b = offs * (2 * local_id.x + 2) - 1;
37 |             chunk[b] += chunk[a];
38 |         }
39 |         offs = offs << 1;
40 |     }
41 | 
42 |     if (local_id.x == 0) {
43 |         carry.out = chunk[SCAN_BLOCK_SIZE - 1] + carry.in;
44 |         chunk[SCAN_BLOCK_SIZE - 1] = 0;
45 |     }
46 | 
47 |     // Sweep down the tree to finish the scan
48 |     for (var d = 1u; d < SCAN_BLOCK_SIZE; d = d << 1) {
49 |         offs = offs >> 1;
50 |         workgroupBarrier();
51 |         if (local_id.x < d) {
52 |             let a = offs * (2 * local_id.x + 1) - 1;
53 |             let b = offs * (2 * local_id.x + 2) - 1;
54 |             let tmp = chunk[a];
55 |             chunk[a] = chunk[b];
56 |             chunk[b] += tmp;
57 |         }
58 |     }
59 | 
60 |     workgroupBarrier();
61 |     vals[2 * global_id.x] = chunk[2 * local_id.x] + carry.in;
62 |     vals[2 * global_id.x + 1] = chunk[2 * local_id.x + 1] + carry.in;
63 | }
64 | 
65 | 


--------------------------------------------------------------------------------
/src/ez_canvas_controller.d.ts:
--------------------------------------------------------------------------------
1 | // TODO: typescript type bindings for this repo
2 | declare module "ez_canvas_controller";
3 | 


--------------------------------------------------------------------------------
/src/marching_cubes.ts:
--------------------------------------------------------------------------------
  1 | import {ExclusiveScan} from "./exclusive_scan";
  2 | import {MC_CASE_TABLE} from "./mc_case_table";
  3 | import {StreamCompactIDs} from "./stream_compact_ids";
  4 | import {Volume} from "./volume";
  5 | import {compileShader} from "./util";
  6 | 
  7 | import computeVoxelValuesWgsl from "./compute_voxel_values.wgsl";
  8 | import markActiveVoxelsWgsl from "./mark_active_voxel.wgsl";
  9 | import computeNumVertsWgsl from "./compute_num_verts.wgsl";
 10 | import computeVerticesWgsl from "./compute_vertices.wgsl";
 11 | import {PushConstants} from "./push_constant_builder";
 12 | 
 13 | export class MarchingCubesResult
 14 | {
 15 |     count: number;
 16 |     buffer: GPUBuffer;
 17 | 
 18 |     constructor(count: number, buffer: GPUBuffer)
 19 |     {
 20 |         this.count = count;
 21 |         this.buffer = buffer;
 22 |     }
 23 | };
 24 | 
 25 | /* Marching Cubes execution has 5 steps
 26 |  * 1. Compute active voxels
 27 |  * 2. Stream compact active voxel IDs
 28 |  *    - Scan is done on isActive buffer to get compaction offsets
 29 |  * 3. Compute # of vertices output by active voxels
 30 |  * 4. Scan # vertices buffer to produce vertex output offsets
 31 |  * 5. Compute and output vertices
 32 |  */
 33 | export class MarchingCubes
 34 | {
 35 |     #device: GPUDevice;
 36 | 
 37 |     #volume: Volume;
 38 | 
 39 |     #exclusiveScan: ExclusiveScan;
 40 | 
 41 |     #streamCompactIds: StreamCompactIDs;
 42 | 
 43 |     // Compute pipelines for each stage of the compute 
 44 |     #markActiveVoxelPipeline: GPUComputePipeline;
 45 |     #computeNumVertsPipeline: GPUComputePipeline;
 46 |     #computeVerticesPipeline: GPUComputePipeline;
 47 | 
 48 |     #triCaseTable: GPUBuffer;
 49 | 
 50 |     #volumeInfo: GPUBuffer;
 51 | 
 52 |     #voxelActive: GPUBuffer;
 53 |     #activeVoxelOffsets: GPUBuffer;
 54 | 
 55 |     #atomicCounter: GPUBuffer;
 56 |     #counterReadback: GPUBuffer;
 57 | 
 58 |     #volumeInfoBG: GPUBindGroup;
 59 | 
 60 |     #markActiveBG: GPUBindGroup;
 61 | 
 62 |     // Timestamp queries and query output buffer
 63 |     #timestampQuerySupport: boolean;
 64 |     #timestampQuerySet: GPUQuerySet;
 65 |     #timestampBuffer: GPUBuffer;
 66 |     #timestampReadbackBuffer: GPUBuffer;
 67 | 
 68 |     // Performance stats
 69 |     computeActiveVoxelsTime = 0;
 70 |     markActiveVoxelsKernelTime = -1;
 71 |     computeActiveVoxelsScanTime = 0;
 72 |     computeActiveVoxelsCompactTime = 0;
 73 | 
 74 |     computeVertexOffsetsTime = 0;
 75 |     computeNumVertsKernelTime = -1;
 76 |     computeVertexOffsetsScanTime = 0;
 77 | 
 78 |     computeVerticesTime = 0;
 79 |     computeVerticesKernelTime = -1;
 80 | 
 81 |     private constructor(volume: Volume, device: GPUDevice)
 82 |     {
 83 |         this.#device = device;
 84 |         this.#volume = volume;
 85 |         this.#timestampQuerySupport = device.features.has("timestamp-query");
 86 |     }
 87 | 
 88 |     static async create(volume: Volume, device: GPUDevice)
 89 |     {
 90 |         let mc = new MarchingCubes(volume, device);
 91 | 
 92 |         mc.#exclusiveScan = await ExclusiveScan.create(device);
 93 |         mc.#streamCompactIds = await StreamCompactIDs.create(device);
 94 | 
 95 |         // Upload the case table
 96 |         // TODO: Can optimize the size of this buffer to store each case value
 97 |         // as an int8, but since WGSL doesn't have an i8 type we then need some
 98 |         // bit unpacking in the shader to do that. Will add this after the initial
 99 |         // implementation.
100 |         mc.#triCaseTable = device.createBuffer({
101 |             size: MC_CASE_TABLE.byteLength,
102 |             usage: GPUBufferUsage.STORAGE,
103 |             mappedAtCreation: true,
104 |         });
105 |         new Int32Array(mc.#triCaseTable.getMappedRange()).set(MC_CASE_TABLE);
106 |         mc.#triCaseTable.unmap();
107 | 
108 |         mc.#volumeInfo = device.createBuffer({
109 |             size: 8 * 4,
110 |             usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
111 |             mappedAtCreation: true
112 |         });
113 |         new Uint32Array(mc.#volumeInfo.getMappedRange()).set(volume.dims);
114 |         mc.#volumeInfo.unmap();
115 | 
116 |         // Allocate the voxel active buffer. This buffer's size is fixed for
117 |         // the entire pipeline, we need to store a flag for each voxel if it's
118 |         // active or not. We'll run a scan on this buffer so it also needs to be
119 |         // aligned to the scan size.
120 |         mc.#voxelActive = device.createBuffer({
121 |             size: mc.#exclusiveScan.getAlignedSize(volume.dualGridNumVoxels) * 4,
122 |             usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC,
123 |         });
124 | 
125 |         mc.#activeVoxelOffsets = device.createBuffer({
126 |             size: mc.#voxelActive.size,
127 |             usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.COPY_SRC | GPUBufferUsage.STORAGE
128 |         });
129 | 
130 |         mc.#atomicCounter = device.createBuffer({
131 |             size: 4,
132 |             usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.COPY_SRC | GPUBufferUsage.STORAGE
133 |         });
134 | 
135 |         mc.#counterReadback = device.createBuffer({
136 |             size: 4,
137 |             usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ,
138 |         });
139 | 
140 |         // Compile shaders for our compute kernels
141 |         let markActiveVoxel = await compileShader(device,
142 |             computeVoxelValuesWgsl + "\n" + markActiveVoxelsWgsl, "mark_active_voxel.wgsl");
143 |         let computeNumVerts = await compileShader(device,
144 |             computeVoxelValuesWgsl + "\n" + computeNumVertsWgsl, "compute_num_verts.wgsl");
145 |         let computeVertices = await compileShader(device,
146 |             computeVoxelValuesWgsl + "\n" + computeVerticesWgsl, "compute_vertices.wgsl");
147 | 
148 |         // Bind group layout for the volume parameters, shared by all pipelines in group 0
149 |         let volumeInfoBGLayout = device.createBindGroupLayout({
150 |             entries: [
151 |                 {
152 |                     binding: 0,
153 |                     visibility: GPUShaderStage.COMPUTE,
154 |                     texture: {
155 |                         viewDimension: "3d",
156 |                     }
157 |                 },
158 |                 {
159 |                     binding: 1,
160 |                     visibility: GPUShaderStage.COMPUTE,
161 |                     buffer: {
162 |                         type: "uniform"
163 |                     }
164 |                 }
165 |             ]
166 |         });
167 | 
168 |         mc.#volumeInfoBG = device.createBindGroup({
169 |             layout: volumeInfoBGLayout,
170 |             entries: [
171 |                 {
172 |                     binding: 0,
173 |                     resource: mc.#volume.texture.createView(),
174 |                 },
175 |                 {
176 |                     binding: 1,
177 |                     resource: {
178 |                         buffer: mc.#volumeInfo,
179 |                     }
180 |                 }
181 |             ]
182 |         });
183 | 
184 |         let markActiveVoxelBGLayout = device.createBindGroupLayout({
185 |             entries: [
186 |                 {
187 |                     binding: 0,
188 |                     visibility: GPUShaderStage.COMPUTE,
189 |                     buffer: {
190 |                         type: "storage",
191 |                     }
192 |                 },
193 |                 {
194 |                     binding: 1,
195 |                     visibility: GPUShaderStage.COMPUTE,
196 |                     buffer: {
197 |                         type: "storage",
198 |                     }
199 |                 },
200 |                 {
201 |                     binding: 2,
202 |                     visibility: GPUShaderStage.COMPUTE,
203 |                     buffer: {
204 |                         type: "storage",
205 |                     }
206 |                 }
207 |             ]
208 |         });
209 | 
210 |         mc.#markActiveBG = device.createBindGroup({
211 |             layout: markActiveVoxelBGLayout,
212 |             entries: [
213 |                 {
214 |                     binding: 0,
215 |                     resource: {
216 |                         buffer: mc.#voxelActive,
217 |                     }
218 |                 },
219 |                 {
220 |                     binding: 1,
221 |                     resource: {
222 |                         buffer: mc.#activeVoxelOffsets,
223 |                     }
224 |                 },
225 |                 {
226 |                     binding: 2,
227 |                     resource: {
228 |                         buffer: mc.#atomicCounter,
229 |                     }
230 |                 }
231 |             ]
232 |         });
233 | 
234 |         let computeNumVertsBGLayout = device.createBindGroupLayout({
235 |             entries: [
236 |                 {
237 |                     binding: 0,
238 |                     visibility: GPUShaderStage.COMPUTE,
239 |                     buffer: {
240 |                         type: "read-only-storage",
241 |                     }
242 |                 },
243 |                 {
244 |                     binding: 1,
245 |                     visibility: GPUShaderStage.COMPUTE,
246 |                     buffer: {
247 |                         type: "storage",
248 |                     }
249 |                 },
250 |                 {
251 |                     binding: 2,
252 |                     visibility: GPUShaderStage.COMPUTE,
253 |                     buffer: {
254 |                         type: "storage",
255 |                     }
256 |                 },
257 |                 {
258 |                     binding: 3,
259 |                     visibility: GPUShaderStage.COMPUTE,
260 |                     buffer: {
261 |                         type: "storage",
262 |                     }
263 |                 }
264 |             ]
265 |         });
266 | 
267 |         let computeVerticesBGLayout = device.createBindGroupLayout({
268 |             entries: [
269 |                 {
270 |                     binding: 0,
271 |                     visibility: GPUShaderStage.COMPUTE,
272 |                     buffer: {
273 |                         type: "read-only-storage",
274 |                     }
275 |                 },
276 |                 {
277 |                     binding: 1,
278 |                     visibility: GPUShaderStage.COMPUTE,
279 |                     buffer: {
280 |                         type: "storage",
281 |                     }
282 |                 },
283 |                 {
284 |                     binding: 2,
285 |                     visibility: GPUShaderStage.COMPUTE,
286 |                     buffer: {
287 |                         type: "storage",
288 |                     }
289 |                 },
290 |                 {
291 |                     binding: 3,
292 |                     visibility: GPUShaderStage.COMPUTE,
293 |                     buffer: {
294 |                         type: "storage",
295 |                     }
296 |                 }
297 |             ]
298 |         });
299 | 
300 |         // Push constants BG layout
301 |         let pushConstantsBGLayout = device.createBindGroupLayout({
302 |             entries: [
303 |                 {
304 |                     binding: 0,
305 |                     visibility: GPUShaderStage.COMPUTE,
306 |                     buffer: {
307 |                         type: "uniform",
308 |                         hasDynamicOffset: true
309 |                     }
310 |                 }
311 |             ]
312 |         });
313 | 
314 |         // Create pipelines
315 |         mc.#markActiveVoxelPipeline = device.createComputePipeline({
316 |             layout: device.createPipelineLayout(
317 |                 {bindGroupLayouts: [volumeInfoBGLayout, markActiveVoxelBGLayout]}),
318 |             compute: {
319 |                 module: markActiveVoxel,
320 |                 entryPoint: "main"
321 |             }
322 |         });
323 | 
324 | 
325 |         mc.#computeNumVertsPipeline = device.createComputePipeline({
326 |             layout: device.createPipelineLayout({
327 |                 bindGroupLayouts: [
328 |                     volumeInfoBGLayout,
329 |                     computeNumVertsBGLayout,
330 |                     pushConstantsBGLayout
331 |                 ]
332 |             }),
333 |             compute: {
334 |                 module: computeNumVerts,
335 |                 entryPoint: "main"
336 |             }
337 |         });
338 | 
339 |         mc.#computeVerticesPipeline = device.createComputePipeline({
340 |             layout: device.createPipelineLayout({
341 |                 bindGroupLayouts: [
342 |                     volumeInfoBGLayout,
343 |                     computeVerticesBGLayout,
344 |                     pushConstantsBGLayout
345 |                 ]
346 |             }),
347 |             compute: {
348 |                 module: computeVertices,
349 |                 entryPoint: "main"
350 |             }
351 |         });
352 | 
353 |         if (mc.#timestampQuerySupport) {
354 |             // We store 6 timestamps, for the start/end of each compute pass we run
355 |             mc.#timestampQuerySet = device.createQuerySet({
356 |                 type: "timestamp",
357 |                 count: 6
358 |             });
359 |             mc.#timestampBuffer = device.createBuffer({
360 |                 size: 6 * 8,
361 |                 usage: GPUBufferUsage.QUERY_RESOLVE | GPUBufferUsage.COPY_SRC
362 |             });
363 |             mc.#timestampReadbackBuffer = device.createBuffer({
364 |                 size: mc.#timestampBuffer.size,
365 |                 usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
366 |             });
367 |         }
368 | 
369 |         return mc;
370 |     }
371 | 
372 |     // Computes the surface for the provided isovalue, returning the number of triangles
373 |     // in the surface and the GPUBuffer containing their vertices
374 |     async computeSurface(isovalue: number)
375 |     {
376 |         this.uploadIsovalue(isovalue);
377 | 
378 |         let start = performance.now();
379 |         let activeVoxels = await this.computeActiveVoxels();
380 |         let end = performance.now();
381 |         this.computeActiveVoxelsTime = end - start;
382 |         if (activeVoxels.count == 0) {
383 |             return new MarchingCubesResult(0, null);
384 |         }
385 | 
386 |         start = performance.now();
387 |         let vertexOffsets = await this.computeVertexOffsets(activeVoxels);
388 |         end = performance.now();
389 |         this.computeVertexOffsetsTime = end - start;
390 |         if (vertexOffsets.count == 0) {
391 |             return new MarchingCubesResult(0, null);
392 |         }
393 | 
394 |         start = performance.now();
395 |         let vertices = await this.computeVertices(activeVoxels, vertexOffsets);
396 |         end = performance.now();
397 |         this.computeVerticesTime = end - start;
398 |         activeVoxels.buffer.destroy();
399 |         vertexOffsets.buffer.destroy();
400 | 
401 |         // Map back the timestamps and get performance statistics
402 |         if (this.#timestampQuerySupport) {
403 |             await this.#timestampReadbackBuffer.mapAsync(GPUMapMode.READ);
404 |             let times = new BigUint64Array(this.#timestampReadbackBuffer.getMappedRange());
405 | 
406 |             // Timestamps are in nanoseconds
407 |             this.markActiveVoxelsKernelTime = Number(times[1] - times[0]) * 1.0e-6;
408 |             this.computeNumVertsKernelTime = Number(times[3] - times[2]) * 1.0e-6;
409 |             this.computeVerticesKernelTime = Number(times[5] - times[4]) * 1.0e-6;
410 | 
411 |             this.#timestampReadbackBuffer.unmap();
412 |         }
413 | 
414 |         return new MarchingCubesResult(vertexOffsets.count, vertices);
415 |     }
416 | 
417 |     private uploadIsovalue(isovalue: number)
418 |     {
419 |         let uploadIsovalue = this.#device.createBuffer({
420 |             size: 4,
421 |             usage: GPUBufferUsage.COPY_SRC,
422 |             mappedAtCreation: true
423 |         });
424 |         new Float32Array(uploadIsovalue.getMappedRange()).set([isovalue]);
425 |         uploadIsovalue.unmap();
426 | 
427 |         let commandEncoder = this.#device.createCommandEncoder();
428 |         commandEncoder.copyBufferToBuffer(uploadIsovalue, 0, this.#volumeInfo, 16, 4);
429 |         this.#device.queue.submit([commandEncoder.finish()]);
430 |     }
431 | 
432 |     private async computeActiveVoxels()
433 |     {
434 |         let dispatchSize = [
435 |             Math.ceil(this.#volume.dualGridDims[0] / 4),
436 |             Math.ceil(this.#volume.dualGridDims[1] / 4),
437 |             Math.ceil(this.#volume.dualGridDims[2] / 2)
438 |         ];
439 | 
440 |         let commandEncoder = this.#device.createCommandEncoder();
441 | 
442 |         // Write timestamp queries to record perf if we've got support
443 |         let passDesc: GPUComputePassDescriptor = {};
444 |         if (this.#timestampQuerySupport) {
445 |             passDesc = {
446 |                 timestampWrites: {
447 |                     querySet: this.#timestampQuerySet,
448 |                     beginningOfPassWriteIndex: 0,
449 |                     endOfPassWriteIndex: 1,
450 | 
451 |                 }
452 |             };
453 |         }
454 | 
455 |         commandEncoder.clearBuffer(this.#atomicCounter);
456 | 
457 |         let pass = commandEncoder.beginComputePass(passDesc);
458 |         pass.setPipeline(this.#markActiveVoxelPipeline);
459 |         pass.setBindGroup(0, this.#volumeInfoBG);
460 |         pass.setBindGroup(1, this.#markActiveBG);
461 |         pass.dispatchWorkgroups(dispatchSize[0], dispatchSize[1], dispatchSize[2]);
462 |         pass.end();
463 | 
464 |         // Readback the atomic counter w/ total # of active voxels
465 |         commandEncoder.copyBufferToBuffer(this.#atomicCounter, 0, this.#counterReadback, 0, 4);
466 | 
467 |         this.#device.queue.submit([commandEncoder.finish()]);
468 |         await this.#device.queue.onSubmittedWorkDone();
469 | 
470 |         // Readback the atomic counter result
471 |         await this.#counterReadback.mapAsync(GPUMapMode.READ);
472 |         const nActive = new Uint32Array(this.#counterReadback.getMappedRange())[0];
473 |         this.#counterReadback.unmap();
474 |         if (nActive == 0) {
475 |             return new MarchingCubesResult(0, null);
476 |         }
477 | 
478 |         let activeVoxelIDs = this.#device.createBuffer({
479 |             size: nActive * 4,
480 |             usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC
481 |         });
482 | 
483 |         let start = performance.now();
484 |         // Output the compact buffer of active voxel IDs
485 |         await this.#streamCompactIds.compactActiveIDs(this.#voxelActive,
486 |             this.#activeVoxelOffsets,
487 |             activeVoxelIDs,
488 |             this.#volume.dualGridNumVoxels);
489 |         let end = performance.now();
490 |         this.computeActiveVoxelsCompactTime = end - start;
491 | 
492 |         return new MarchingCubesResult(nActive, activeVoxelIDs);
493 |     }
494 | 
495 |     private async computeVertexOffsets(activeVoxels: MarchingCubesResult)
496 |     {
497 |         let vertexOffsets = this.#device.createBuffer({
498 |             size: this.#exclusiveScan.getAlignedSize(activeVoxels.count) * 4,
499 |             usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST | GPUBufferUsage.COPY_SRC
500 |         });
501 | 
502 |         let bindGroup = this.#device.createBindGroup({
503 |             layout: this.#computeNumVertsPipeline.getBindGroupLayout(1),
504 |             entries: [
505 |                 {
506 |                     binding: 0,
507 |                     resource: {
508 |                         buffer: this.#triCaseTable
509 |                     }
510 |                 },
511 |                 {
512 |                     binding: 1,
513 |                     resource: {
514 |                         buffer: activeVoxels.buffer,
515 |                     }
516 |                 },
517 |                 {
518 |                     binding: 2,
519 |                     resource: {
520 |                         buffer: vertexOffsets
521 |                     }
522 |                 },
523 |                 {
524 |                     binding: 3,
525 |                     resource: {
526 |                         buffer: this.#atomicCounter
527 |                     }
528 |                 }
529 |             ]
530 |         });
531 | 
532 |         let pushConstantsArg = new Uint32Array([activeVoxels.count]);
533 |         let pushConstants = new PushConstants(
534 |             this.#device, Math.ceil(activeVoxels.count / 32), pushConstantsArg.buffer);
535 | 
536 |         let pushConstantsBG = this.#device.createBindGroup({
537 |             layout: this.#computeNumVertsPipeline.getBindGroupLayout(2),
538 |             entries: [{
539 |                 binding: 0,
540 |                 resource: {
541 |                     buffer: pushConstants.pushConstantsBuffer,
542 |                     size: 12,
543 |                 }
544 |             }]
545 |         });
546 | 
547 |         let commandEncoder = this.#device.createCommandEncoder();
548 |         commandEncoder.clearBuffer(this.#atomicCounter);
549 | 
550 |         // Write timestamp queries to record perf if we've got support
551 |         let passDesc: GPUComputePassDescriptor = {};
552 |         if (this.#timestampQuerySupport) {
553 |             passDesc = {
554 |                 timestampWrites: {
555 |                     querySet: this.#timestampQuerySet,
556 |                     beginningOfPassWriteIndex: 2,
557 |                     endOfPassWriteIndex: 3,
558 | 
559 |                 }
560 |             };
561 |         }
562 | 
563 |         let pass = commandEncoder.beginComputePass(passDesc);
564 |         pass.setPipeline(this.#computeNumVertsPipeline);
565 |         pass.setBindGroup(0, this.#volumeInfoBG);
566 |         pass.setBindGroup(1, bindGroup);
567 |         for (let i = 0; i < pushConstants.numDispatches(); ++i) {
568 |             pass.setBindGroup(2, pushConstantsBG, [i * pushConstants.stride]);
569 |             pass.dispatchWorkgroups(pushConstants.dispatchSize(i), 1, 1);
570 |         }
571 |         pass.end();
572 | 
573 |         commandEncoder.copyBufferToBuffer(this.#atomicCounter, 0, this.#counterReadback, 0, 4);
574 | 
575 |         this.#device.queue.submit([commandEncoder.finish()]);
576 |         await this.#device.queue.onSubmittedWorkDone();
577 | 
578 |         await this.#counterReadback.mapAsync(GPUMapMode.READ);
579 |         const nVertices = new Uint32Array(this.#counterReadback.getMappedRange())[0];
580 |         this.#counterReadback.unmap();
581 | 
582 |         return new MarchingCubesResult(nVertices, vertexOffsets);
583 |     }
584 | 
585 |     private async computeVertices(activeVoxels: MarchingCubesResult, vertexOffsets: MarchingCubesResult)
586 |     {
587 |         // We'll output a float4 per vertex
588 |         let vertices = this.#device.createBuffer({
589 |             size: vertexOffsets.count * 4 * 4,
590 |             usage: GPUBufferUsage.STORAGE | GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_SRC
591 |         });
592 | 
593 |         let bindGroup = this.#device.createBindGroup({
594 |             layout: this.#computeVerticesPipeline.getBindGroupLayout(1),
595 |             entries: [
596 |                 {
597 |                     binding: 0,
598 |                     resource: {
599 |                         buffer: this.#triCaseTable
600 |                     }
601 |                 },
602 |                 {
603 |                     binding: 1,
604 |                     resource: {
605 |                         buffer: activeVoxels.buffer,
606 |                     }
607 |                 },
608 |                 {
609 |                     binding: 2,
610 |                     resource: {
611 |                         buffer: vertexOffsets.buffer
612 |                     }
613 |                 },
614 |                 {
615 |                     binding: 3,
616 |                     resource: {
617 |                         buffer: vertices
618 |                     }
619 |                 }
620 |             ]
621 |         });
622 | 
623 |         let pushConstantsArg = new Uint32Array([activeVoxels.count]);
624 |         let pushConstants = new PushConstants(
625 |             this.#device, Math.ceil(activeVoxels.count / 32), pushConstantsArg.buffer);
626 | 
627 |         let pushConstantsBG = this.#device.createBindGroup({
628 |             layout: this.#computeNumVertsPipeline.getBindGroupLayout(2),
629 |             entries: [{
630 |                 binding: 0,
631 |                 resource: {
632 |                     buffer: pushConstants.pushConstantsBuffer,
633 |                     size: 12,
634 |                 }
635 |             }]
636 |         });
637 | 
638 |         let commandEncoder = this.#device.createCommandEncoder();
639 | 
640 |         // Write timestamp queries to record perf if we've got support
641 |         let passDesc: GPUComputePassDescriptor = {};
642 |         if (this.#timestampQuerySupport) {
643 |             passDesc = {
644 |                 timestampWrites: {
645 |                     querySet: this.#timestampQuerySet,
646 |                     beginningOfPassWriteIndex: 4,
647 |                     endOfPassWriteIndex: 5,
648 | 
649 |                 }
650 |             };
651 |         }
652 | 
653 |         let pass = commandEncoder.beginComputePass(passDesc);
654 |         pass.setPipeline(this.#computeVerticesPipeline);
655 |         pass.setBindGroup(0, this.#volumeInfoBG);
656 |         pass.setBindGroup(1, bindGroup);
657 |         for (let i = 0; i < pushConstants.numDispatches(); ++i) {
658 |             pass.setBindGroup(2, pushConstantsBG, [i * pushConstants.stride]);
659 |             pass.dispatchWorkgroups(pushConstants.dispatchSize(i), 1, 1);
660 |         }
661 |         pass.end();
662 | 
663 |         if (this.#timestampQuerySupport) {
664 |             // This is our last compute pass to compute the surface, so resolve the
665 |             // timestamp queries now as well
666 |             commandEncoder.resolveQuerySet(this.#timestampQuerySet, 0, 6, this.#timestampBuffer, 0);
667 |             commandEncoder.copyBufferToBuffer(this.#timestampBuffer,
668 |                 0,
669 |                 this.#timestampReadbackBuffer,
670 |                 0,
671 |                 this.#timestampBuffer.size);
672 |         }
673 | 
674 |         this.#device.queue.submit([commandEncoder.finish()]);
675 |         await this.#device.queue.onSubmittedWorkDone();
676 | 
677 |         return vertices;
678 |     }
679 | };
680 | 


--------------------------------------------------------------------------------
/src/mark_active_voxel.wgsl:
--------------------------------------------------------------------------------
 1 | // include of compute_voxel_values.wgsl is inserted here
 2 | 
 3 | @group(1) @binding(0)
 4 | var<storage, read_write> voxel_active: array<u32>;
 5 | 
 6 | @group(1) @binding(1)
 7 | var<storage, read_write> voxel_id_output_offset: array<u32>;
 8 | 
 9 | @group(1) @binding(2)
10 | var<storage, read_write> n_voxel_active: array<atomic<u32>>;
11 | 
12 | @compute @workgroup_size(4, 4, 2)
13 | fn main(@builtin(global_invocation_id) global_id: uint3)
14 | {
15 |     // We might have some workgroups run for voxels out of bounds due to the
16 |     // padding to align to the workgroup size. We also only compute for voxels
17 |     // on the dual grid, which has dimensions of volume_dims - 1
18 |     if (any(global_id >= volume_info.dims.xyz - uint3(1))) {
19 |         return;
20 |     }
21 | 
22 |     var values: array<f32, 8>;
23 |     compute_voxel_values(global_id, &values);
24 |     // Compute the case this falls into to see if this voxel has vertices
25 |     var case_index = 0u;
26 |     for (var i = 0u; i < 8u; i++) {
27 |         if (values[i] <= volume_info.isovalue) {
28 |             case_index |= 1u << i;
29 |         }
30 |     }
31 |     let voxel_idx = global_id.x +
32 |         (volume_info.dims.x - 1) * (global_id.y + (volume_info.dims.y - 1) * global_id.z);
33 |     let is_active = select(0u, 1u, case_index != 0 && case_index != MC_NUM_CASES - 1);
34 |     voxel_active[voxel_idx] = is_active;
35 | 
36 |     // We don't care about inactive voxels here
37 |     if (is_active != 0) {
38 |         let output_offset = atomicAdd(&n_voxel_active[0], is_active);
39 |         voxel_id_output_offset[voxel_idx] = output_offset;
40 |     }
41 | }
42 | 
43 | 


--------------------------------------------------------------------------------
/src/mc_case_table.ts:
--------------------------------------------------------------------------------
  1 | // Edge and triangle tables for the cases of marching cubes
  2 | // From http://paulbourke.net/geometry/polygonise/ and
  3 | // https://graphics.stanford.edu/~mdfisher/MarchingCubes.html
  4 | export const MC_CASE_TABLE = new Int32Array([
  5 |     -1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
  6 |     0, 8, 3, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
  7 |     1, 9, 0, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
  8 |     8, 1, 9, 8, 3, 1, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
  9 |     2, 10, 1, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
 10 |     0, 8, 3, 1, 2, 10, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
 11 |     9, 2, 10, 9, 0, 2, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
 12 |     3, 2, 10, 3, 10, 8, 8, 10, 9, -1, 0, 0, 0, 0, 0, 0,
 13 |     2, 3, 11, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
 14 |     11, 0, 8, 11, 2, 0, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
 15 |     1, 9, 0, 2, 3, 11, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
 16 |     2, 1, 9, 2, 9, 11, 11, 9, 8, -1, 0, 0, 0, 0, 0, 0,
 17 |     3, 10, 1, 3, 11, 10, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
 18 |     1, 0, 8, 1, 8, 10, 10, 8, 11, -1, 0, 0, 0, 0, 0, 0,
 19 |     0, 3, 11, 0, 11, 9, 9, 11, 10, -1, 0, 0, 0, 0, 0, 0,
 20 |     11, 10, 9, 11, 9, 8, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
 21 |     4, 7, 8, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
 22 |     4, 3, 0, 4, 7, 3, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
 23 |     4, 7, 8, 9, 0, 1, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
 24 |     9, 4, 7, 9, 7, 1, 1, 7, 3, -1, 0, 0, 0, 0, 0, 0,
 25 |     4, 7, 8, 1, 2, 10, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
 26 |     4, 3, 0, 4, 7, 3, 2, 10, 1, -1, 0, 0, 0, 0, 0, 0,
 27 |     2, 9, 0, 2, 10, 9, 4, 7, 8, -1, 0, 0, 0, 0, 0, 0,
 28 |     3, 2, 7, 7, 9, 4, 7, 2, 9, 9, 2, 10, -1, 0, 0, 0,
 29 |     8, 4, 7, 3, 11, 2, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
 30 |     7, 11, 2, 7, 2, 4, 4, 2, 0, -1, 0, 0, 0, 0, 0, 0,
 31 |     2, 3, 11, 1, 9, 0, 8, 4, 7, -1, 0, 0, 0, 0, 0, 0,
 32 |     2, 1, 9, 2, 9, 4, 2, 4, 11, 11, 4, 7, -1, 0, 0, 0,
 33 |     10, 3, 11, 10, 1, 3, 8, 4, 7, -1, 0, 0, 0, 0, 0, 0,
 34 |     4, 7, 0, 0, 10, 1, 7, 10, 0, 7, 11, 10, -1, 0, 0, 0,
 35 |     8, 4, 7, 0, 3, 11, 0, 11, 9, 9, 11, 10, -1, 0, 0, 0,
 36 |     7, 9, 4, 7, 11, 9, 9, 11, 10, -1, 0, 0, 0, 0, 0, 0,
 37 |     4, 9, 5, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
 38 |     8, 3, 0, 4, 9, 5, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
 39 |     0, 5, 4, 0, 1, 5, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
 40 |     4, 8, 3, 4, 3, 5, 5, 3, 1, -1, 0, 0, 0, 0, 0, 0,
 41 |     1, 2, 10, 9, 5, 4, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
 42 |     4, 9, 5, 8, 3, 0, 1, 2, 10, -1, 0, 0, 0, 0, 0, 0,
 43 |     10, 5, 4, 10, 4, 2, 2, 4, 0, -1, 0, 0, 0, 0, 0, 0,
 44 |     4, 8, 3, 4, 3, 2, 4, 2, 5, 5, 2, 10, -1, 0, 0, 0,
 45 |     2, 3, 11, 5, 4, 9, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
 46 |     11, 0, 8, 11, 2, 0, 9, 5, 4, -1, 0, 0, 0, 0, 0, 0,
 47 |     5, 0, 1, 5, 4, 0, 3, 11, 2, -1, 0, 0, 0, 0, 0, 0,
 48 |     11, 2, 8, 8, 5, 4, 2, 5, 8, 2, 1, 5, -1, 0, 0, 0,
 49 |     3, 10, 1, 3, 11, 10, 5, 4, 9, -1, 0, 0, 0, 0, 0, 0,
 50 |     9, 5, 4, 1, 0, 8, 1, 8, 10, 10, 8, 11, -1, 0, 0, 0,
 51 |     10, 5, 11, 11, 0, 3, 11, 5, 0, 0, 5, 4, -1, 0, 0, 0,
 52 |     4, 10, 5, 4, 8, 10, 10, 8, 11, -1, 0, 0, 0, 0, 0, 0,
 53 |     7, 9, 5, 7, 8, 9, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
 54 |     0, 9, 5, 0, 5, 3, 3, 5, 7, -1, 0, 0, 0, 0, 0, 0,
 55 |     8, 0, 1, 8, 1, 7, 7, 1, 5, -1, 0, 0, 0, 0, 0, 0,
 56 |     3, 1, 5, 3, 5, 7, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
 57 |     7, 9, 5, 7, 8, 9, 1, 2, 10, -1, 0, 0, 0, 0, 0, 0,
 58 |     1, 2, 10, 0, 9, 5, 0, 5, 3, 3, 5, 7, -1, 0, 0, 0,
 59 |     7, 8, 5, 5, 2, 10, 8, 2, 5, 8, 0, 2, -1, 0, 0, 0,
 60 |     10, 3, 2, 10, 5, 3, 3, 5, 7, -1, 0, 0, 0, 0, 0, 0,
 61 |     9, 7, 8, 9, 5, 7, 11, 2, 3, -1, 0, 0, 0, 0, 0, 0,
 62 |     0, 9, 2, 2, 7, 11, 2, 9, 7, 7, 9, 5, -1, 0, 0, 0,
 63 |     3, 11, 2, 8, 0, 1, 8, 1, 7, 7, 1, 5, -1, 0, 0, 0,
 64 |     2, 7, 11, 2, 1, 7, 7, 1, 5, -1, 0, 0, 0, 0, 0, 0,
 65 |     11, 1, 3, 11, 10, 1, 7, 8, 9, 7, 9, 5, -1, 0, 0, 0,
 66 |     11, 10, 1, 11, 1, 7, 7, 1, 0, 7, 0, 9, 7, 9, 5, -1,
 67 |     5, 7, 8, 5, 8, 10, 10, 8, 0, 10, 0, 3, 10, 3, 11, -1,
 68 |     11, 10, 5, 11, 5, 7, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
 69 |     10, 6, 5, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
 70 |     0, 8, 3, 10, 6, 5, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
 71 |     9, 0, 1, 5, 10, 6, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
 72 |     8, 1, 9, 8, 3, 1, 10, 6, 5, -1, 0, 0, 0, 0, 0, 0,
 73 |     6, 1, 2, 6, 5, 1, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
 74 |     6, 1, 2, 6, 5, 1, 0, 8, 3, -1, 0, 0, 0, 0, 0, 0,
 75 |     5, 9, 0, 5, 0, 6, 6, 0, 2, -1, 0, 0, 0, 0, 0, 0,
 76 |     6, 5, 2, 2, 8, 3, 5, 8, 2, 5, 9, 8, -1, 0, 0, 0,
 77 |     2, 3, 11, 10, 6, 5, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
 78 |     0, 11, 2, 0, 8, 11, 6, 5, 10, -1, 0, 0, 0, 0, 0, 0,
 79 |     0, 1, 9, 3, 11, 2, 10, 6, 5, -1, 0, 0, 0, 0, 0, 0,
 80 |     10, 6, 5, 2, 1, 9, 2, 9, 11, 11, 9, 8, -1, 0, 0, 0,
 81 |     11, 6, 5, 11, 5, 3, 3, 5, 1, -1, 0, 0, 0, 0, 0, 0,
 82 |     11, 6, 8, 8, 1, 0, 8, 6, 1, 1, 6, 5, -1, 0, 0, 0,
 83 |     0, 3, 11, 0, 11, 6, 0, 6, 9, 9, 6, 5, -1, 0, 0, 0,
 84 |     5, 11, 6, 5, 9, 11, 11, 9, 8, -1, 0, 0, 0, 0, 0, 0,
 85 |     7, 8, 4, 6, 5, 10, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
 86 |     3, 4, 7, 3, 0, 4, 5, 10, 6, -1, 0, 0, 0, 0, 0, 0,
 87 |     6, 5, 10, 7, 8, 4, 9, 0, 1, -1, 0, 0, 0, 0, 0, 0,
 88 |     5, 10, 6, 9, 4, 7, 9, 7, 1, 1, 7, 3, -1, 0, 0, 0,
 89 |     1, 6, 5, 1, 2, 6, 7, 8, 4, -1, 0, 0, 0, 0, 0, 0,
 90 |     7, 0, 4, 7, 3, 0, 6, 5, 1, 6, 1, 2, -1, 0, 0, 0,
 91 |     4, 7, 8, 5, 9, 0, 5, 0, 6, 6, 0, 2, -1, 0, 0, 0,
 92 |     2, 6, 5, 2, 5, 3, 3, 5, 9, 3, 9, 4, 3, 4, 7, -1,
 93 |     4, 7, 8, 5, 10, 6, 11, 2, 3, -1, 0, 0, 0, 0, 0, 0,
 94 |     6, 5, 10, 7, 11, 2, 7, 2, 4, 4, 2, 0, -1, 0, 0, 0,
 95 |     4, 7, 8, 9, 0, 1, 6, 5, 10, 3, 11, 2, -1, 0, 0, 0,
 96 |     6, 5, 10, 11, 4, 7, 11, 2, 4, 4, 2, 9, 9, 2, 1, -1,
 97 |     7, 8, 4, 11, 6, 5, 11, 5, 3, 3, 5, 1, -1, 0, 0, 0,
 98 |     0, 4, 7, 0, 7, 1, 1, 7, 11, 1, 11, 6, 1, 6, 5, -1,
 99 |     4, 7, 8, 9, 6, 5, 9, 0, 6, 6, 0, 11, 11, 0, 3, -1,
100 |     7, 11, 4, 11, 9, 4, 11, 5, 9, 11, 6, 5, -1, 0, 0, 0,
101 |     10, 4, 9, 10, 6, 4, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
102 |     10, 4, 9, 10, 6, 4, 8, 3, 0, -1, 0, 0, 0, 0, 0, 0,
103 |     1, 10, 6, 1, 6, 0, 0, 6, 4, -1, 0, 0, 0, 0, 0, 0,
104 |     4, 8, 6, 6, 1, 10, 6, 8, 1, 1, 8, 3, -1, 0, 0, 0,
105 |     9, 1, 2, 9, 2, 4, 4, 2, 6, -1, 0, 0, 0, 0, 0, 0,
106 |     0, 8, 3, 9, 1, 2, 9, 2, 4, 4, 2, 6, -1, 0, 0, 0,
107 |     0, 2, 6, 0, 6, 4, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
108 |     3, 4, 8, 3, 2, 4, 4, 2, 6, -1, 0, 0, 0, 0, 0, 0,
109 |     4, 10, 6, 4, 9, 10, 2, 3, 11, -1, 0, 0, 0, 0, 0, 0,
110 |     8, 2, 0, 8, 11, 2, 4, 9, 10, 4, 10, 6, -1, 0, 0, 0,
111 |     2, 3, 11, 1, 10, 6, 1, 6, 0, 0, 6, 4, -1, 0, 0, 0,
112 |     8, 11, 2, 8, 2, 4, 4, 2, 1, 4, 1, 10, 4, 10, 6, -1,
113 |     3, 11, 1, 1, 4, 9, 11, 4, 1, 11, 6, 4, -1, 0, 0, 0,
114 |     6, 4, 9, 6, 9, 11, 11, 9, 1, 11, 1, 0, 11, 0, 8, -1,
115 |     11, 0, 3, 11, 6, 0, 0, 6, 4, -1, 0, 0, 0, 0, 0, 0,
116 |     8, 11, 6, 8, 6, 4, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
117 |     6, 7, 8, 6, 8, 10, 10, 8, 9, -1, 0, 0, 0, 0, 0, 0,
118 |     3, 0, 7, 7, 10, 6, 0, 10, 7, 0, 9, 10, -1, 0, 0, 0,
119 |     1, 10, 6, 1, 6, 7, 1, 7, 0, 0, 7, 8, -1, 0, 0, 0,
120 |     6, 1, 10, 6, 7, 1, 1, 7, 3, -1, 0, 0, 0, 0, 0, 0,
121 |     9, 1, 8, 8, 6, 7, 8, 1, 6, 6, 1, 2, -1, 0, 0, 0,
122 |     7, 3, 0, 7, 0, 6, 6, 0, 9, 6, 9, 1, 6, 1, 2, -1,
123 |     8, 6, 7, 8, 0, 6, 6, 0, 2, -1, 0, 0, 0, 0, 0, 0,
124 |     2, 6, 7, 2, 7, 3, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
125 |     11, 2, 3, 6, 7, 8, 6, 8, 10, 10, 8, 9, -1, 0, 0, 0,
126 |     9, 10, 6, 9, 6, 0, 0, 6, 7, 0, 7, 11, 0, 11, 2, -1,
127 |     3, 11, 2, 0, 7, 8, 0, 1, 7, 7, 1, 6, 6, 1, 10, -1,
128 |     6, 7, 10, 7, 1, 10, 7, 2, 1, 7, 11, 2, -1, 0, 0, 0,
129 |     1, 3, 11, 1, 11, 9, 9, 11, 6, 9, 6, 7, 9, 7, 8, -1,
130 |     6, 7, 11, 9, 1, 0, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
131 |     8, 0, 7, 0, 6, 7, 0, 11, 6, 0, 3, 11, -1, 0, 0, 0,
132 |     6, 7, 11, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
133 |     6, 11, 7, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
134 |     3, 0, 8, 11, 7, 6, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
135 |     6, 11, 7, 9, 0, 1, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
136 |     1, 8, 3, 1, 9, 8, 7, 6, 11, -1, 0, 0, 0, 0, 0, 0,
137 |     11, 7, 6, 2, 10, 1, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
138 |     1, 2, 10, 0, 8, 3, 11, 7, 6, -1, 0, 0, 0, 0, 0, 0,
139 |     9, 2, 10, 9, 0, 2, 11, 7, 6, -1, 0, 0, 0, 0, 0, 0,
140 |     11, 7, 6, 3, 2, 10, 3, 10, 8, 8, 10, 9, -1, 0, 0, 0,
141 |     2, 7, 6, 2, 3, 7, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
142 |     8, 7, 6, 8, 6, 0, 0, 6, 2, -1, 0, 0, 0, 0, 0, 0,
143 |     7, 2, 3, 7, 6, 2, 1, 9, 0, -1, 0, 0, 0, 0, 0, 0,
144 |     8, 7, 9, 9, 2, 1, 9, 7, 2, 2, 7, 6, -1, 0, 0, 0,
145 |     6, 10, 1, 6, 1, 7, 7, 1, 3, -1, 0, 0, 0, 0, 0, 0,
146 |     6, 10, 1, 6, 1, 0, 6, 0, 7, 7, 0, 8, -1, 0, 0, 0,
147 |     7, 6, 3, 3, 9, 0, 6, 9, 3, 6, 10, 9, -1, 0, 0, 0,
148 |     6, 8, 7, 6, 10, 8, 8, 10, 9, -1, 0, 0, 0, 0, 0, 0,
149 |     8, 6, 11, 8, 4, 6, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
150 |     11, 3, 0, 11, 0, 6, 6, 0, 4, -1, 0, 0, 0, 0, 0, 0,
151 |     6, 8, 4, 6, 11, 8, 0, 1, 9, -1, 0, 0, 0, 0, 0, 0,
152 |     1, 9, 3, 3, 6, 11, 9, 6, 3, 9, 4, 6, -1, 0, 0, 0,
153 |     8, 6, 11, 8, 4, 6, 10, 1, 2, -1, 0, 0, 0, 0, 0, 0,
154 |     2, 10, 1, 11, 3, 0, 11, 0, 6, 6, 0, 4, -1, 0, 0, 0,
155 |     11, 4, 6, 11, 8, 4, 2, 10, 9, 2, 9, 0, -1, 0, 0, 0,
156 |     4, 6, 11, 4, 11, 9, 9, 11, 3, 9, 3, 2, 9, 2, 10, -1,
157 |     3, 8, 4, 3, 4, 2, 2, 4, 6, -1, 0, 0, 0, 0, 0, 0,
158 |     2, 0, 4, 2, 4, 6, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
159 |     0, 1, 9, 3, 8, 4, 3, 4, 2, 2, 4, 6, -1, 0, 0, 0,
160 |     9, 2, 1, 9, 4, 2, 2, 4, 6, -1, 0, 0, 0, 0, 0, 0,
161 |     6, 10, 4, 4, 3, 8, 4, 10, 3, 3, 10, 1, -1, 0, 0, 0,
162 |     1, 6, 10, 1, 0, 6, 6, 0, 4, -1, 0, 0, 0, 0, 0, 0,
163 |     10, 9, 0, 10, 0, 6, 6, 0, 3, 6, 3, 8, 6, 8, 4, -1,
164 |     10, 9, 4, 10, 4, 6, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
165 |     6, 11, 7, 5, 4, 9, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
166 |     0, 8, 3, 9, 5, 4, 7, 6, 11, -1, 0, 0, 0, 0, 0, 0,
167 |     0, 5, 4, 0, 1, 5, 6, 11, 7, -1, 0, 0, 0, 0, 0, 0,
168 |     7, 6, 11, 4, 8, 3, 4, 3, 5, 5, 3, 1, -1, 0, 0, 0,
169 |     2, 10, 1, 11, 7, 6, 5, 4, 9, -1, 0, 0, 0, 0, 0, 0,
170 |     0, 8, 3, 1, 2, 10, 4, 9, 5, 11, 7, 6, -1, 0, 0, 0,
171 |     6, 11, 7, 10, 5, 4, 10, 4, 2, 2, 4, 0, -1, 0, 0, 0,
172 |     6, 11, 7, 5, 2, 10, 5, 4, 2, 2, 4, 3, 3, 4, 8, -1,
173 |     2, 7, 6, 2, 3, 7, 4, 9, 5, -1, 0, 0, 0, 0, 0, 0,
174 |     4, 9, 5, 8, 7, 6, 8, 6, 0, 0, 6, 2, -1, 0, 0, 0,
175 |     3, 6, 2, 3, 7, 6, 0, 1, 5, 0, 5, 4, -1, 0, 0, 0,
176 |     1, 5, 4, 1, 4, 2, 2, 4, 8, 2, 8, 7, 2, 7, 6, -1,
177 |     5, 4, 9, 6, 10, 1, 6, 1, 7, 7, 1, 3, -1, 0, 0, 0,
178 |     4, 9, 5, 7, 0, 8, 7, 6, 0, 0, 6, 1, 1, 6, 10, -1,
179 |     3, 7, 6, 3, 6, 0, 0, 6, 10, 0, 10, 5, 0, 5, 4, -1,
180 |     4, 8, 5, 8, 10, 5, 8, 6, 10, 8, 7, 6, -1, 0, 0, 0,
181 |     5, 6, 11, 5, 11, 9, 9, 11, 8, -1, 0, 0, 0, 0, 0, 0,
182 |     0, 9, 5, 0, 5, 6, 0, 6, 3, 3, 6, 11, -1, 0, 0, 0,
183 |     8, 0, 11, 11, 5, 6, 11, 0, 5, 5, 0, 1, -1, 0, 0, 0,
184 |     11, 5, 6, 11, 3, 5, 5, 3, 1, -1, 0, 0, 0, 0, 0, 0,
185 |     10, 1, 2, 5, 6, 11, 5, 11, 9, 9, 11, 8, -1, 0, 0, 0,
186 |     2, 10, 1, 3, 6, 11, 3, 0, 6, 6, 0, 5, 5, 0, 9, -1,
187 |     0, 2, 10, 0, 10, 8, 8, 10, 5, 8, 5, 6, 8, 6, 11, -1,
188 |     11, 3, 6, 3, 5, 6, 3, 10, 5, 3, 2, 10, -1, 0, 0, 0,
189 |     2, 3, 6, 6, 9, 5, 3, 9, 6, 3, 8, 9, -1, 0, 0, 0,
190 |     5, 0, 9, 5, 6, 0, 0, 6, 2, -1, 0, 0, 0, 0, 0, 0,
191 |     6, 2, 3, 6, 3, 5, 5, 3, 8, 5, 8, 0, 5, 0, 1, -1,
192 |     6, 2, 1, 6, 1, 5, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
193 |     8, 9, 5, 8, 5, 3, 3, 5, 6, 3, 6, 10, 3, 10, 1, -1,
194 |     1, 0, 10, 0, 6, 10, 0, 5, 6, 0, 9, 5, -1, 0, 0, 0,
195 |     0, 3, 8, 10, 5, 6, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
196 |     10, 5, 6, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
197 |     11, 5, 10, 11, 7, 5, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
198 |     5, 11, 7, 5, 10, 11, 3, 0, 8, -1, 0, 0, 0, 0, 0, 0,
199 |     11, 5, 10, 11, 7, 5, 9, 0, 1, -1, 0, 0, 0, 0, 0, 0,
200 |     9, 3, 1, 9, 8, 3, 5, 10, 11, 5, 11, 7, -1, 0, 0, 0,
201 |     2, 11, 7, 2, 7, 1, 1, 7, 5, -1, 0, 0, 0, 0, 0, 0,
202 |     3, 0, 8, 2, 11, 7, 2, 7, 1, 1, 7, 5, -1, 0, 0, 0,
203 |     2, 11, 0, 0, 5, 9, 0, 11, 5, 5, 11, 7, -1, 0, 0, 0,
204 |     9, 8, 3, 9, 3, 5, 5, 3, 2, 5, 2, 11, 5, 11, 7, -1,
205 |     10, 2, 3, 10, 3, 5, 5, 3, 7, -1, 0, 0, 0, 0, 0, 0,
206 |     5, 10, 7, 7, 0, 8, 10, 0, 7, 10, 2, 0, -1, 0, 0, 0,
207 |     1, 9, 0, 10, 2, 3, 10, 3, 5, 5, 3, 7, -1, 0, 0, 0,
208 |     7, 5, 10, 7, 10, 8, 8, 10, 2, 8, 2, 1, 8, 1, 9, -1,
209 |     7, 5, 1, 7, 1, 3, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
210 |     8, 1, 0, 8, 7, 1, 1, 7, 5, -1, 0, 0, 0, 0, 0, 0,
211 |     0, 5, 9, 0, 3, 5, 5, 3, 7, -1, 0, 0, 0, 0, 0, 0,
212 |     7, 5, 9, 7, 9, 8, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
213 |     4, 5, 10, 4, 10, 8, 8, 10, 11, -1, 0, 0, 0, 0, 0, 0,
214 |     11, 3, 10, 10, 4, 5, 10, 3, 4, 4, 3, 0, -1, 0, 0, 0,
215 |     9, 0, 1, 4, 5, 10, 4, 10, 8, 8, 10, 11, -1, 0, 0, 0,
216 |     3, 1, 9, 3, 9, 11, 11, 9, 4, 11, 4, 5, 11, 5, 10, -1,
217 |     8, 4, 11, 11, 1, 2, 4, 1, 11, 4, 5, 1, -1, 0, 0, 0,
218 |     5, 1, 2, 5, 2, 4, 4, 2, 11, 4, 11, 3, 4, 3, 0, -1,
219 |     11, 8, 4, 11, 4, 2, 2, 4, 5, 2, 5, 9, 2, 9, 0, -1,
220 |     2, 11, 3, 5, 9, 4, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
221 |     4, 5, 10, 4, 10, 2, 4, 2, 8, 8, 2, 3, -1, 0, 0, 0,
222 |     10, 4, 5, 10, 2, 4, 4, 2, 0, -1, 0, 0, 0, 0, 0, 0,
223 |     0, 1, 9, 8, 2, 3, 8, 4, 2, 2, 4, 10, 10, 4, 5, -1,
224 |     10, 2, 5, 2, 4, 5, 2, 9, 4, 2, 1, 9, -1, 0, 0, 0,
225 |     4, 3, 8, 4, 5, 3, 3, 5, 1, -1, 0, 0, 0, 0, 0, 0,
226 |     0, 4, 5, 0, 5, 1, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
227 |     0, 3, 9, 3, 5, 9, 3, 4, 5, 3, 8, 4, -1, 0, 0, 0,
228 |     4, 5, 9, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
229 |     7, 4, 9, 7, 9, 11, 11, 9, 10, -1, 0, 0, 0, 0, 0, 0,
230 |     8, 3, 0, 7, 4, 9, 7, 9, 11, 11, 9, 10, -1, 0, 0, 0,
231 |     0, 1, 4, 4, 11, 7, 1, 11, 4, 1, 10, 11, -1, 0, 0, 0,
232 |     10, 11, 7, 10, 7, 1, 1, 7, 4, 1, 4, 8, 1, 8, 3, -1,
233 |     2, 11, 7, 2, 7, 4, 2, 4, 1, 1, 4, 9, -1, 0, 0, 0,
234 |     0, 8, 3, 1, 4, 9, 1, 2, 4, 4, 2, 7, 7, 2, 11, -1,
235 |     7, 2, 11, 7, 4, 2, 2, 4, 0, -1, 0, 0, 0, 0, 0, 0,
236 |     7, 4, 11, 4, 2, 11, 4, 3, 2, 4, 8, 3, -1, 0, 0, 0,
237 |     7, 4, 3, 3, 10, 2, 3, 4, 10, 10, 4, 9, -1, 0, 0, 0,
238 |     2, 0, 8, 2, 8, 10, 10, 8, 7, 10, 7, 4, 10, 4, 9, -1,
239 |     4, 0, 1, 4, 1, 7, 7, 1, 10, 7, 10, 2, 7, 2, 3, -1,
240 |     4, 8, 7, 1, 10, 2, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
241 |     9, 7, 4, 9, 1, 7, 7, 1, 3, -1, 0, 0, 0, 0, 0, 0,
242 |     8, 7, 0, 7, 1, 0, 7, 9, 1, 7, 4, 9, -1, 0, 0, 0,
243 |     4, 0, 3, 4, 3, 7, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
244 |     4, 8, 7, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
245 |     8, 9, 10, 8, 10, 11, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
246 |     0, 11, 3, 0, 9, 11, 11, 9, 10, -1, 0, 0, 0, 0, 0, 0,
247 |     1, 8, 0, 1, 10, 8, 8, 10, 11, -1, 0, 0, 0, 0, 0, 0,
248 |     3, 1, 10, 3, 10, 11, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
249 |     2, 9, 1, 2, 11, 9, 9, 11, 8, -1, 0, 0, 0, 0, 0, 0,
250 |     0, 9, 3, 9, 11, 3, 9, 2, 11, 9, 1, 2, -1, 0, 0, 0,
251 |     11, 8, 0, 11, 0, 2, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
252 |     2, 11, 3, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
253 |     3, 10, 2, 3, 8, 10, 10, 8, 9, -1, 0, 0, 0, 0, 0, 0,
254 |     9, 10, 2, 9, 2, 0, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
255 |     3, 8, 2, 8, 10, 2, 8, 1, 10, 8, 0, 1, -1, 0, 0, 0,
256 |     2, 1, 10, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
257 |     8, 9, 1, 8, 1, 3, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
258 |     1, 0, 9, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
259 |     0, 3, 8, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
260 |     -1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
261 | ]);
262 | 
263 | 


--------------------------------------------------------------------------------
/src/push_constant_builder.ts:
--------------------------------------------------------------------------------
 1 | import {alignTo} from "./util";
 2 | 
 3 | // Generate the work group ID offset buffer and the dynamic offset buffer to use for chunking
 4 | // up a large compute dispatch. The start of the push constants data will be:
 5 | // {
 6 | //      u32: work group id offset
 7 | //      u32: totalWorkGroups
 8 | //      ...: optional additional data (if any)
 9 | // }
10 | export class PushConstants
11 | {
12 |     // The GPU buffer containing the push constant data, to be used
13 |     // as a uniform buffer with a dynamic offset
14 |     pushConstantsBuffer: GPUBuffer;
15 |     // Stride in bytes between push constants
16 |     // will be a multiple of device.minUniformBufferOffsetAlignment
17 |     stride: number;
18 |     // The total number of work groups that were chunked up into smaller
19 |     // dispatches for this set of push constants
20 |     totalWorkGroups: number;
21 | 
22 |     #maxWorkgroupsPerDimension: number;
23 | 
24 |     constructor(device: GPUDevice, totalWorkGroups: number, appPushConstants?: ArrayBuffer)
25 |     {
26 |         this.#maxWorkgroupsPerDimension = device.limits.maxComputeWorkgroupsPerDimension;
27 |         this.totalWorkGroups = totalWorkGroups;
28 | 
29 |         let nDispatches =
30 |             Math.ceil(totalWorkGroups / device.limits.maxComputeWorkgroupsPerDimension);
31 | 
32 |         // Determine if we have some additional push constant data and align the push constant
33 |         // stride accordingly
34 |         this.stride = device.limits.minUniformBufferOffsetAlignment;
35 |         let appPushConstantsView = null;
36 |         if (appPushConstants) {
37 |             this.stride = alignTo(8 + appPushConstants.byteLength,
38 |                 device.limits.minUniformBufferOffsetAlignment);
39 |             appPushConstantsView = new Uint8Array(appPushConstants);
40 |         }
41 | 
42 |         if (this.stride * nDispatches > device.limits.maxUniformBufferBindingSize) {
43 |             console.log("Error! PushConstants uniform buffer is too big for a uniform buffer");
44 |             throw Error("PushConstants uniform buffer is too big for a uniform buffer");
45 |         }
46 | 
47 |         this.pushConstantsBuffer = device.createBuffer({
48 |             size: this.stride * nDispatches,
49 |             usage: GPUBufferUsage.UNIFORM,
50 |             mappedAtCreation: true,
51 |         });
52 | 
53 |         let mapping = this.pushConstantsBuffer.getMappedRange();
54 |         for (let i = 0; i < nDispatches; ++i) {
55 |             // Write the work group offset push constants data
56 |             let u32view = new Uint32Array(mapping, i * this.stride, 2);
57 |             u32view[0] = device.limits.maxComputeWorkgroupsPerDimension * i;
58 |             u32view[1] = totalWorkGroups;
59 | 
60 |             // Copy in any additional push constants data if provided
61 |             if (appPushConstantsView) {
62 |                 var u8view =
63 |                     new Uint8Array(mapping, i * this.stride + 8, appPushConstants.byteLength);
64 |                 u8view.set(appPushConstantsView);
65 |             }
66 |         }
67 |         this.pushConstantsBuffer.unmap();
68 |     }
69 | 
70 |     // Get the total number of dispatches that must be performed to run the total set
71 |     // of workgroups, obeying the maxComputeWorkgroupsPerDimension restriction of the device.
72 |     numDispatches()
73 |     {
74 |         return this.pushConstantsBuffer.size / this.stride;
75 |     }
76 | 
77 |     // Get the offset to use for the pushConstants for a given dispatch index
78 |     pushConstantsOffset(dispatchIndex: number)
79 |     {
80 |         return this.stride * dispatchIndex;
81 |     }
82 | 
83 |     // Get the number of workgroups to launch for the given dispatch index
84 |     dispatchSize(dispatchIndex: number)
85 |     {
86 |         let remainder = this.totalWorkGroups % this.#maxWorkgroupsPerDimension;
87 |         if (remainder == 0 || dispatchIndex + 1 < this.numDispatches()) {
88 |             return this.#maxWorkgroupsPerDimension;
89 |         }
90 |         return remainder;
91 |     }
92 | };
93 | 


--------------------------------------------------------------------------------
/src/render_mesh.wgsl:
--------------------------------------------------------------------------------
 1 | // This type definition is just to make typing a bit easier
 2 | alias float3 = vec3<f32>;
 3 | alias float4 = vec4<f32>;
 4 | 
 5 | alias uint4 = vec4<u32>;
 6 | 
 7 | struct VertexInput {
 8 |     @location(0) position: float4,
 9 | };
10 | 
11 | struct VertexOutput {
12 |     // This is the equivalent of gl_Position in GLSL
13 |     @builtin(position) position: float4,
14 |     @location(0) world_pos: float3,
15 | };
16 | 
17 | struct ViewParams {
18 |     proj_view: mat4x4<f32>,
19 |     volume_dims: uint4,
20 | };
21 | 
22 | @group(0) @binding(0)
23 | var<uniform> params: ViewParams;
24 | 
25 | @vertex
26 | fn vertex_main(vert: VertexInput) -> VertexOutput {
27 |     var out: VertexOutput;
28 |     var pos = vert.position.xyz - float3(params.volume_dims.xyz) / 2.0;
29 |     out.position = params.proj_view * float4(pos, 1.0);
30 |     out.world_pos = pos;
31 |     return out;
32 | };
33 | 
34 | @fragment
35 | fn fragment_main(in: VertexOutput) -> @location(0) float4 {
36 |     let dx = dpdx(in.world_pos);
37 |     let dy = dpdy(in.world_pos);
38 |     let n = normalize(cross(dx, dy));
39 |     return float4((n + 1.0) * 0.5, 1.0);
40 | }
41 | 


--------------------------------------------------------------------------------
/src/stream_compact_ids.ts:
--------------------------------------------------------------------------------
  1 | import {PushConstants} from "./push_constant_builder";
  2 | import streamCompactIDs from "./stream_compact_ids.wgsl";
  3 | import {compileShader} from "./util";
  4 | 
  5 | // Serial version for validation
  6 | export function serialStreamCompactIDs(
  7 |     isActiveBuffer: Uint32Array, offsetBuffer: Uint32Array, idOutputBuffer: Uint32Array)
  8 | {
  9 |     for (let i = 0; i < isActiveBuffer.length; ++i) {
 10 |         if (isActiveBuffer[i] != 0) {
 11 |             idOutputBuffer[offsetBuffer[i]] = i;
 12 |         }
 13 |     }
 14 | }
 15 | 
 16 | export class StreamCompactIDs
 17 | {
 18 |     #device: GPUDevice;
 19 | 
 20 |     // Should be at least 64 so that we process elements
 21 |     // in 256b blocks with each WG. This will ensure that our
 22 |     // dynamic offsets meet the 256b alignment requirement
 23 |     readonly WORKGROUP_SIZE: number = 64;
 24 | 
 25 |     readonly #maxDispatchSize: number;
 26 | 
 27 |     #computePipeline: GPUComputePipeline;
 28 | 
 29 |     private constructor(device: GPUDevice)
 30 |     {
 31 |         this.#device = device;
 32 | 
 33 |         this.#maxDispatchSize = device.limits.maxComputeWorkgroupsPerDimension;
 34 |     }
 35 | 
 36 |     static async create(device: GPUDevice)
 37 |     {
 38 |         let self = new StreamCompactIDs(device);
 39 | 
 40 |         let paramsBGLayout = device.createBindGroupLayout({
 41 |             entries: [
 42 |                 {
 43 |                     binding: 0,
 44 |                     visibility: GPUShaderStage.COMPUTE,
 45 |                     buffer: {
 46 |                         type: "storage",
 47 |                         hasDynamicOffset: true,
 48 |                     }
 49 |                 },
 50 |                 {
 51 |                     binding: 1,
 52 |                     visibility: GPUShaderStage.COMPUTE,
 53 |                     buffer: {
 54 |                         type: "storage",
 55 |                         hasDynamicOffset: true,
 56 |                     }
 57 |                 },
 58 |                 {
 59 |                     binding: 2,
 60 |                     visibility: GPUShaderStage.COMPUTE,
 61 |                     buffer: {
 62 |                         type: "storage",
 63 |                     }
 64 |                 },
 65 |             ],
 66 |         });
 67 | 
 68 |         let pushConstantsBGLayout = device.createBindGroupLayout({
 69 |             entries: [
 70 |                 {
 71 |                     binding: 0,
 72 |                     visibility: GPUShaderStage.COMPUTE,
 73 |                     buffer: {type: "uniform", hasDynamicOffset: true}
 74 |                 },
 75 |             ]
 76 |         });
 77 | 
 78 |         self.#computePipeline = device.createComputePipeline({
 79 |             layout: device.createPipelineLayout(
 80 |                 {bindGroupLayouts: [paramsBGLayout, pushConstantsBGLayout]}),
 81 |             compute: {
 82 |                 module: await compileShader(device, streamCompactIDs, "StreamCompactIDs"),
 83 |                 entryPoint: "main",
 84 |                 constants: {"0": self.WORKGROUP_SIZE}
 85 |             }
 86 |         });
 87 | 
 88 |         return self;
 89 |     }
 90 | 
 91 |     async compactActiveIDs(isActiveBuffer: GPUBuffer,
 92 |         offsetBuffer: GPUBuffer,
 93 |         idOutputBuffer: GPUBuffer,
 94 |         size: number)
 95 |     {
 96 |         // Build the push constants
 97 |         let pushConstantsArg = new Uint32Array([size]);
 98 |         let pushConstants = new PushConstants(
 99 |             this.#device, Math.ceil(size / this.WORKGROUP_SIZE), pushConstantsArg.buffer);
100 | 
101 |         let pushConstantsBG = this.#device.createBindGroup({
102 |             layout: this.#computePipeline.getBindGroupLayout(1),
103 |             entries: [{
104 |                 binding: 0,
105 |                 resource: {
106 |                     buffer: pushConstants.pushConstantsBuffer,
107 |                     size: 12,
108 |                 }
109 |             }]
110 |         });
111 | 
112 |         // # of elements we can compact in a single dispatch.
113 |         const elementsPerDispatch = this.#maxDispatchSize * this.WORKGROUP_SIZE;
114 | 
115 |         // Ensure we won't break the dynamic offset alignment rules
116 |         if (pushConstants.numDispatches() > 1 && (elementsPerDispatch * 4) % 256 != 0) {
117 |             throw Error(
118 |                 "StreamCompactIDs: Buffer dynamic offsets will not be 256b aligned! Set WORKGROUP_SIZE = 64");
119 |         }
120 | 
121 |         // With dynamic offsets the size/offset validity checking means we still need to
122 |         // create a separate bind group for the remainder elements that don't evenly fall into
123 |         // a full size dispatch
124 |         let paramsBG = this.#device.createBindGroup({
125 |             layout: this.#computePipeline.getBindGroupLayout(0),
126 |             entries: [
127 |                 {
128 |                     binding: 0,
129 |                     resource: {
130 |                         buffer: isActiveBuffer,
131 |                         size: Math.min(size, elementsPerDispatch) * 4,
132 |                     }
133 |                 },
134 |                 {
135 |                     binding: 1,
136 |                     resource: {
137 |                         buffer: offsetBuffer,
138 |                         size: Math.min(size, elementsPerDispatch) * 4,
139 |                     }
140 |                 },
141 |                 {
142 |                     binding: 2,
143 |                     resource: {
144 |                         buffer: idOutputBuffer,
145 |                     }
146 |                 }
147 |             ]
148 |         });
149 | 
150 |         // Make a remainder elements bindgroup if we have some remainder to make sure
151 |         // we don't bind out of bounds regions of the buffer. If there's no remiander we
152 |         // just set remainderParamsBG to paramsBG so that on our last dispatch we can just
153 |         // always bindg remainderParamsBG
154 |         let remainderParamsBG = paramsBG;
155 |         const remainderElements = size % elementsPerDispatch;
156 |         if (remainderElements != 0) {
157 |             // Note: We don't set the offset here, as that will still be handled by the
158 |             // dynamic offsets. We just need to set the right size, so that
159 |             // dynamic offset + binding size is >= buffer size
160 |             remainderParamsBG = this.#device.createBindGroup({
161 |                 layout: this.#computePipeline.getBindGroupLayout(0),
162 |                 entries: [
163 |                     {
164 |                         binding: 0,
165 |                         resource: {
166 |                             buffer: isActiveBuffer,
167 |                             size: remainderElements * 4,
168 |                         }
169 |                     },
170 |                     {
171 |                         binding: 1,
172 |                         resource: {
173 |                             buffer: offsetBuffer,
174 |                             size: remainderElements * 4,
175 |                         }
176 |                     },
177 |                     {
178 |                         binding: 2,
179 |                         resource: {
180 |                             buffer: idOutputBuffer,
181 |                         }
182 |                     }
183 |                 ]
184 |             });
185 |         }
186 | 
187 |         let commandEncoder = this.#device.createCommandEncoder();
188 |         let pass = commandEncoder.beginComputePass();
189 |         pass.setPipeline(this.#computePipeline);
190 |         for (let i = 0; i < pushConstants.numDispatches(); ++i) {
191 |             let dispatchParamsBG = paramsBG;
192 |             if (i + 1 == pushConstants.numDispatches()) {
193 |                 dispatchParamsBG = remainderParamsBG;
194 |             }
195 |             pass.setBindGroup(0,
196 |                 dispatchParamsBG,
197 |                 [i * elementsPerDispatch * 4, i * elementsPerDispatch * 4]);
198 |             pass.setBindGroup(1, pushConstantsBG, [i * pushConstants.stride]);
199 |             pass.dispatchWorkgroups(pushConstants.dispatchSize(i), 1, 1);
200 |         }
201 |         pass.end();
202 |         this.#device.queue.submit([commandEncoder.finish()]);
203 |         await this.#device.queue.onSubmittedWorkDone();
204 |     }
205 | }
206 | 


--------------------------------------------------------------------------------
/src/stream_compact_ids.wgsl:
--------------------------------------------------------------------------------
 1 | @group(0) @binding(0)
 2 | var<storage, read_write> item_active: array<u32>;
 3 | 
 4 | @group(0) @binding(1)
 5 | var<storage, read_write> output_offset: array<u32>;
 6 | 
 7 | @group(0) @binding(2)
 8 | var<storage, read_write> output: array<u32>;
 9 | 
10 | struct PushConstants {
11 |     group_id_offset: u32,
12 |     total_workgoups: u32,
13 |     total_elements: u32
14 | };
15 | 
16 | @group(1) @binding(0)
17 | var<uniform> push_constants: PushConstants;
18 | 
19 | @id(0) override WORKGROUP_SIZE: u32 = 32;
20 | 
21 | @compute @workgroup_size(WORKGROUP_SIZE)
22 | fn main(@builtin(global_invocation_id) global_id: vec3<u32>) {
23 |     let item_id = global_id.x + push_constants.group_id_offset * WORKGROUP_SIZE;
24 |     // Handle out of bounds threads
25 |     if (item_id >= push_constants.total_elements) {
26 |         return;
27 |     }
28 |     // We compact down the IDs of the active elements in the buffer.
29 |     // Active elements have non-zero values
30 |     if (item_active[global_id.x] != 0) {
31 |         output[output_offset[global_id.x]] = item_id;
32 |     }
33 | }
34 | 
35 | 


--------------------------------------------------------------------------------
/src/util.ts:
--------------------------------------------------------------------------------
 1 | export function alignTo(val: number, align: number)
 2 | {
 3 |     return Math.floor((val + align - 1) / align) * align;
 4 | };
 5 | 
 6 | // Compute the shader and print any error log
 7 | export async function compileShader(device: GPUDevice, src: string, debugLabel?: string)
 8 | {
 9 |     let shaderModule = device.createShaderModule({code: src});
10 |     let compilationInfo = await shaderModule.getCompilationInfo();
11 |     if (compilationInfo.messages.length > 0) {
12 |         let hadError = false;
13 |         if (debugLabel) {
14 |             console.log(`Shader compilation log for ${debugLabel}:`);
15 |         } else {
16 |             console.log(`Shader compilation log:`);
17 |         }
18 |         let lines = src.split("\n");
19 |         for (let i = 0; i < compilationInfo.messages.length; ++i) {
20 |             let msg = compilationInfo.messages[i];
21 |             console.log(`${msg.lineNum}:${msg.linePos} - ${msg.message}`);
22 |             // TODO: Could use length/offset here but they seem to always be 0?
23 |             // Same for linepos, but the error in the console has a valid linepos.
24 |             // it seems to be lost?
25 |             console.log(`    ${lines[msg.lineNum - 1]}`);
26 |             hadError = hadError || msg.type == "error";
27 |         }
28 |         if (hadError) {
29 |             console.log("Shader failed to compile");
30 |             throw Error("Shader failed to compile");
31 |         }
32 |     }
33 |     return shaderModule;
34 | }
35 | 
36 | export function fillSelector(selector: HTMLSelectElement, dict: Map<string, string>)
37 | {
38 |     for (let v of dict.keys()) {
39 |         let opt = document.createElement("option") as HTMLOptionElement;
40 |         opt.value = v;
41 |         opt.innerHTML = v;
42 |         selector.appendChild(opt);
43 |     }
44 | }
45 | 


--------------------------------------------------------------------------------
/src/volume.ts:
--------------------------------------------------------------------------------
  1 | import {alignTo} from "./util";
  2 | 
  3 | export const volumes = new Map<string, string>([
  4 |     ["Fuel", "fuel_64x64x64_uint8.raw"],
  5 |     ["Neghip", "neghip_64x64x64_uint8.raw"],
  6 |     ["Hydrogen Atom", "hydrogen_atom_128x128x128_uint8.raw"],
  7 |     ["Bonsai", "bonsai_256x256x256_uint8.raw"],
  8 |     ["Foot", "foot_256x256x256_uint8.raw"],
  9 |     ["Skull", "skull_256x256x256_uint8.raw"],
 10 |     ["Aneurysm", "aneurism_256x256x256_uint8.raw"]
 11 | ]);
 12 | 
 13 | export enum VoxelType
 14 | {
 15 |     UINT8,
 16 |     UINT16,
 17 |     UINT32,
 18 |     FLOAT32
 19 | };
 20 | 
 21 | export function parseVoxelType(str: string)
 22 | {
 23 |     if (str == "uint8") {
 24 |         return VoxelType.UINT8;
 25 |     }
 26 |     if (str == "uint16") {
 27 |         return VoxelType.UINT16;
 28 |     }
 29 |     if (str == "UINT32") {
 30 |         return VoxelType.UINT32;
 31 |     }
 32 |     if (str == "FLOAT32") {
 33 |         return VoxelType.FLOAT32;
 34 |     }
 35 |     throw Error(`Unsupported/invalid voxel type string ${str}`);
 36 | }
 37 | 
 38 | export function voxelTypeSize(ty: VoxelType)
 39 | {
 40 |     switch (ty) {
 41 |         case VoxelType.UINT8:
 42 |             return 1;
 43 |         case VoxelType.UINT16:
 44 |             return 2;
 45 |         case VoxelType.UINT32:
 46 |         case VoxelType.FLOAT32:
 47 |             return 4;
 48 |     }
 49 | }
 50 | 
 51 | export function voxelTypeToTextureType(ty: VoxelType)
 52 | {
 53 |     switch (ty) {
 54 |         case VoxelType.UINT8:
 55 |             // TODO: should use the non-normalized types later
 56 |             return "r8unorm";
 57 |         case VoxelType.UINT16:
 58 |             return "r16uint";
 59 |         case VoxelType.UINT32:
 60 |             return "r32uint";
 61 |         case VoxelType.FLOAT32:
 62 |             return "r32float";
 63 |     }
 64 | }
 65 | 
 66 | export class Volume
 67 | {
 68 |     readonly #dimensions: Array<number>;
 69 | 
 70 |     readonly #dataType: VoxelType;
 71 | 
 72 |     readonly #file: string;
 73 | 
 74 |     #data: Uint8Array;
 75 | 
 76 |     #texture: GPUTexture;
 77 | 
 78 |     private constructor(file: string)
 79 |     {
 80 |         let fileRegex = /(\w+)_(\d+)x(\d+)x(\d+)_(\w+)\.*/;
 81 |         let m = file.match(fileRegex);
 82 | 
 83 |         this.#dimensions = [parseInt(m[2]), parseInt(m[3]), parseInt(m[4])];
 84 |         this.#dataType = parseVoxelType(m[5]);
 85 |         this.#file = file;
 86 |     }
 87 | 
 88 |     static async load(file: string, device: GPUDevice)
 89 |     {
 90 |         let volume = new Volume(file);
 91 |         await volume.fetch();
 92 |         await volume.upload(device);
 93 |         return volume;
 94 |     }
 95 | 
 96 |     async upload(device: GPUDevice)
 97 |     {
 98 |         this.#texture = device.createTexture({
 99 |             size: this.#dimensions,
100 |             format: voxelTypeToTextureType(this.#dataType),
101 |             dimension: "3d",
102 |             usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST
103 |         });
104 | 
105 |         // TODO: might need to chunk the upload to support very large volumes?
106 |         // I had some note about hitting some timeout or hang issues with 512^3 in the past?
107 |         let uploadBuf = device.createBuffer(
108 |             {size: this.#data.byteLength, usage: GPUBufferUsage.COPY_SRC, mappedAtCreation: true});
109 |         new Uint8Array(uploadBuf.getMappedRange()).set(this.#data);
110 |         uploadBuf.unmap();
111 | 
112 |         let commandEncoder = device.createCommandEncoder();
113 | 
114 |         let src = {
115 |             buffer: uploadBuf,
116 |             // Volumes must be aligned to 256 bytes per row, fetchVolume does this padding
117 |             bytesPerRow: alignTo(this.#dimensions[0] * voxelTypeSize(this.#dataType), 256),
118 |             rowsPerImage: this.#dimensions[1]
119 |         };
120 |         let dst = {texture: this.#texture};
121 |         commandEncoder.copyBufferToTexture(src, dst, this.#dimensions);
122 | 
123 |         device.queue.submit([commandEncoder.finish()]);
124 |         await device.queue.onSubmittedWorkDone();
125 |     }
126 | 
127 |     get dims()
128 |     {
129 |         return this.#dimensions;
130 |     }
131 | 
132 |     get diagonalLength()
133 |     {
134 |         return Math.sqrt(Math.pow(this.#dimensions[0], 2.0) + Math.pow(this.#dimensions[1], 2.0)
135 |             + Math.pow(this.#dimensions[2], 2.0));
136 |     }
137 | 
138 |     get dualGridDims()
139 |     {
140 |         return [this.#dimensions[0] - 1, this.#dimensions[1] - 1, this.#dimensions[2] - 1];
141 |     }
142 | 
143 |     get voxelType()
144 |     {
145 |         return this.#dataType;
146 |     }
147 | 
148 |     get texture()
149 |     {
150 |         return this.#texture;
151 |     }
152 | 
153 |     get numVoxels()
154 |     {
155 |         return this.#dimensions[0] * this.#dimensions[1] * this.#dimensions[2];
156 |     }
157 | 
158 |     get dualGridNumVoxels()
159 |     {
160 |         return (this.#dimensions[0] - 1) * (this.#dimensions[1] - 1) * (this.#dimensions[2] - 1);
161 |     }
162 | 
163 |     private pad(buf: Uint8Array)
164 |     {
165 |         const voxelSize = voxelTypeSize(this.#dataType);
166 | 
167 |         const paddedByteDims = [
168 |             alignTo(this.#dimensions[0] * voxelSize, 256),
169 |             this.#dimensions[1] * voxelSize,
170 |             this.#dimensions[2] * voxelSize
171 |         ];
172 |         let padded =
173 |             new Uint8Array(paddedByteDims[0] * paddedByteDims[1] * paddedByteDims[2]);
174 | 
175 |         // Copy each row into the padded volume buffer
176 |         const nrows = this.#dimensions[1] * this.#dimensions[2];
177 |         for (let i = 0; i < nrows; ++i) {
178 |             let inrow = buf.subarray(i * this.#dimensions[0] * voxelSize,
179 |                 i * this.#dimensions[0] * voxelSize + this.#dimensions[0] * voxelSize);
180 |             padded.set(inrow, i * paddedByteDims[0]);
181 |         }
182 |         return padded;
183 |     }
184 | 
185 |     private async fetch()
186 |     {
187 |         const voxelSize = voxelTypeSize(this.#dataType);
188 | 
189 |         const volumeSize = this.#dimensions[0] * this.#dimensions[1]
190 |             * this.#dimensions[2] * voxelSize;
191 | 
192 |         let loadingProgressText = document.getElementById("loadingText");
193 |         let loadingProgressBar = document.getElementById("loadingProgressBar");
194 |         loadingProgressText.innerHTML = "Loading Volume...";
195 |         loadingProgressBar.setAttribute("style", "width: 0%");
196 | 
197 |         let url = "https://cdn.willusher.io/demo-volumes/" + this.#file;
198 |         try {
199 |             let response = await fetch(url);
200 |             let reader = response.body.getReader();
201 | 
202 |             let receivedSize = 0;
203 |             let buf = new Uint8Array(volumeSize);
204 |             while (true) {
205 |                 let {done, value} = await reader.read();
206 |                 if (done) {
207 |                     break;
208 |                 }
209 |                 buf.set(value, receivedSize);
210 |                 receivedSize += value.length;
211 |                 let percentLoaded = receivedSize / volumeSize * 100;
212 |                 loadingProgressBar.setAttribute("style",
213 |                     `width: ${percentLoaded.toFixed(2)}%`);
214 |             }
215 |             loadingProgressText.innerHTML = "Volume Loaded";
216 | 
217 |             // WebGPU requires that bytes per row = 256, so we need to pad volumes
218 |             // that are smaller than this
219 |             if ((this.#dimensions[0] * voxelSize) % 256 != 0) {
220 |                 this.#data = this.pad(buf);
221 |             } else {
222 |                 this.#data = buf;
223 |             }
224 |         } catch (err) {
225 |             loadingProgressText.innerHTML = "Error loading volume";
226 |             throw Error(`Error loading volume data ${err}`);
227 |         }
228 |     }
229 | };
230 | 


--------------------------------------------------------------------------------
/src/wgsl.d.ts:
--------------------------------------------------------------------------------
1 | declare module "*.wgsl"
2 | {
3 |     const content: string;
4 |     export default content;
5 | }
6 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "compilerOptions": {
 3 |         "outDir": "./dist/",
 4 |         "noImplicitAny": true,
 5 |         "module": "ES6",
 6 |         "target": "ES6",
 7 |         "allowJs": true,
 8 |         "moduleResolution": "Node",
 9 |         "sourceMap": true,
10 |         "typeRoots": [ "./node_modules/@webgpu/types", "./node_modules/@types"]
11 |     }
12 | }
13 | 
14 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const HtmlWebpackPlugin = require("html-webpack-plugin");
 2 | const path = require("path");
 3 | 
 4 | module.exports = {
 5 |     entry: "./src/app.ts",
 6 |     mode: "development",
 7 |     devtool: "inline-source-map",
 8 |     output: {
 9 |         filename: "main.js",
10 |         path: path.resolve(__dirname, "dist"),
11 |     },
12 |     module: {
13 |         rules: [
14 |             {
15 |                 test: /\.(png|jpg|jpeg)$/i,
16 |                 type: "asset/resource",
17 |             },
18 |             {
19 |                 // Embed your WGSL files as strings
20 |                 test: /\.wgsl$/i,
21 |                 type: "asset/source",
22 |             },
23 |             {
24 |                 test: /\.tsx?$/,
25 |                 use: "ts-loader",
26 |                 exclude: /node_modules/,
27 |             }
28 |         ]
29 |     },
30 |     resolve: {
31 |         extensions: [".tsx", ".ts", ".js"],
32 |     },
33 |     plugins: [new HtmlWebpackPlugin({
34 |         template: "./index.html",
35 |     })],
36 | };
37 | 


--------------------------------------------------------------------------------