Examples: Prefix Sum Compute Example
Related issue: #XXXX
Description
Creates an example demonstrating various prefix sum algorithms written using the TSL node system. Also measures the performance of the algorithms against each other. Ideally, this is an expanding example where different versions and increasingly performant versions of the prefix sum can be added over time, in a syntax that is hopefully much more familiar and accessible to Javascript programmers than equivalent examples in CUDA or other GPGPU languages.
As demonstrated in this visualization, validated elements of a prefix sum are highlighted in green, while incorrect elements are highlighted in red. The image below demonstrates a correct implementation of a Sklansky prefix sum against the reverse of the expected elements (i.e maxElements to 1 instead of 1 to maxElements).
Currently, I'd like to implement a few more algorithms before this is pulled in.
📦 Bundle size
Full ESM build, minified and gzipped.
| Before | After | Diff | |
|---|---|---|---|
| WebGL | 339.14 78.99 |
339.14 78.99 |
+0 B +0 B |
| WebGPU | 484.69 134.48 |
484.72 134.49 |
+34 B +8 B |
| WebGPU Nodes | 484.15 134.38 |
484.19 134.39 |
+34 B +7 B |
🌳 Bundle size after tree-shaking
Minimal build including a renderer, camera, empty scene, and dependencies.
| Before | After | Diff | |
|---|---|---|---|
| WebGL | 464.61 111.98 |
464.61 111.98 |
+0 B +0 B |
| WebGPU | 553.43 149.79 |
553.47 149.8 |
+34 B +15 B |
| WebGPU Nodes | 509.31 139.5 |
509.35 139.52 |
+34 B +16 B |
I think there's an issue with how performance is being measured. Using the renderer.info method used in the bitonic sort and storage buffer examples, it doesn't seem as if the performance is changing at all based on the selected compute shader. Is there perhaps a way to use the timestamp queries within WebGPU to more accurately measure performance, or is compute.info already using that functionality.
Additionally, I'm not sure if there's a way to revert my commit to specifically ignore the build files that were erroneously pushed in.
/ping @RenaudRohlinger
Thanks for this super useful example! It helped me identify a very tricky issue with timestamp queries.
I’ve submitted a PR (#29970) that should resolve the issues you encountered. I tested it using your example, and the logs now appear accurate, providing both render and compute timestamp information as expected.
PS: When using timestamp queries, please ensure you refer to await computeAsync and await renderAsync, as timestamp queries are asynchronous operations. Without this, the information will always be incorrect or return 0. /cc @cmhhelgeson
@cmhhelgeson Could you remove test file, console.log() and revert the builds files?
What would be the best way to quickly revert only the build files?
Going to be re-addressed with a different approach in a coming PR.