docs: Remake the fluid-with-atomics example#2474
Open
reczkok wants to merge 6 commits into
Open
Conversation
|
pkg.pr.new packages benchmark commit |
📊 Bundle Size Comparison
👀 Notable resultsStatic test results:No major changes. Dynamic test results:No major changes. 📋 All resultsClick to reveal the results table (354 entries).
If you wish to run a comparison for other, slower bundlers, run the 'Tree-shake test' from the GitHub Actions menu. |
Resolution Time Benchmark---
config:
themeVariables:
xyChart:
plotColorPalette: "#E63946, #3B82F6, #059669"
---
xychart
title "Random Branching (🔴 PR | 🔵 main | 🟢 release)"
x-axis "max depth" [1, 2, 3, 4, 5, 6, 7, 8]
y-axis "time (ms)"
line [0.94, 1.93, 4.17, 6.86, 8.06, 10.93, 21.72, 23.75]
line [1.00, 1.94, 4.05, 6.15, 8.24, 11.24, 22.69, 23.83]
line [0.95, 1.98, 4.56, 6.75, 7.28, 11.25, 21.59, 23.37]
---
config:
themeVariables:
xyChart:
plotColorPalette: "#E63946, #3B82F6, #059669"
---
xychart
title "Linear Recursion (🔴 PR | 🔵 main | 🟢 release)"
x-axis "max depth" [1, 2, 3, 4, 5, 6, 7, 8]
y-axis "time (ms)"
line [0.28, 0.51, 0.69, 0.84, 1.13, 1.17, 1.39, 1.59]
line [0.31, 0.55, 0.71, 0.87, 1.16, 1.25, 1.54, 1.66]
line [0.32, 0.53, 0.68, 0.83, 1.16, 1.21, 1.49, 1.63]
---
config:
themeVariables:
xyChart:
plotColorPalette: "#E63946, #3B82F6, #059669"
---
xychart
title "Full Tree (🔴 PR | 🔵 main | 🟢 release)"
x-axis "max depth" [1, 2, 3, 4, 5, 6, 7, 8]
y-axis "time (ms)"
line [0.96, 1.93, 4.05, 6.89, 13.58, 25.76, 56.81, 117.45]
line [0.96, 2.19, 4.63, 7.26, 13.47, 27.07, 57.21, 115.99]
line [0.94, 2.16, 4.43, 6.23, 12.70, 26.68, 57.13, 115.44]
|
There was a problem hiding this comment.
Pull request overview
This PR remakes the fluid-with-atomics docs example to shift most work to GPU-side compute (simulation + brush), modernize helper usage with shell-less GPU functions, and significantly speed up rendering by switching from per-tile quads to a fullscreen triangle render pass.
Changes:
- Replaced the old packed “cell state” buffer approach with separate
flags,currentWater, and atomicnextWaterbuffers plus compute-based brush updates. - Implemented the simulation update as a guarded compute pipeline and the rendering as a fullscreen-triangle render pipeline.
- Updated the example shader snapshot test to expect 3 generated shader modules instead of 2.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| apps/typegpu-docs/tests/individual-example-tests/fluid-with-atomics.test.ts | Updates the expected shader-module count and WGSL inline snapshot for the remade example. |
| apps/typegpu-docs/src/examples/simulation/fluid-with-atomics/index.ts | Major refactor of the example: GPU-driven brush + simulation pipelines, new state layouts/buffers, and fullscreen-triangle rendering. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
iwoplaza
reviewed
May 12, 2026
Comment on lines
+26
to
+29
| const CELL_EMPTY = tgpu.const(d.u32, CellKind.empty); | ||
| const CELL_WALL = tgpu.const(d.u32, CellKind.wall); | ||
| const CELL_SOURCE = tgpu.const(d.u32, CellKind.source); | ||
| const CELL_DRAIN = tgpu.const(d.u32, CellKind.drain); |
Collaborator
There was a problem hiding this comment.
Why wrap these in a const, instead of using CellKind.* directly?
Contributor
Author
There was a problem hiding this comment.
I remember running into some implicit conversion issues, but I will check if that is still the case
aleksanderkatan
approved these changes
May 13, 2026
| } | ||
| }); | ||
|
|
||
| canvas.onmousedown = (event) => { |
Contributor
There was a problem hiding this comment.
nit: could you handleDrawing on click/press as well? This would make it easier to place precise pixels
Comment on lines
+281
to
283
| if (handleCellFlags(coord)) { | ||
| return; | ||
| } |
Contributor
There was a problem hiding this comment.
Is no simulation on boundary intentional?
|
|
||
| const isInBounds = (coord: d.v2u): boolean => { | ||
| 'use gpu'; | ||
| return coord.x < simParams.$.resolution.x && coord.y < simParams.$.resolution.y; |
Contributor
There was a problem hiding this comment.
This function is asymetric without coord.x > 0 && coord.y > 0, is this intentional?
Comment on lines
+317
to
+318
| brushStateLayout.$.currentWater[index] = 0; | ||
| std.atomicStore(brushStateLayout.$.nextWater[index], 0); |
Contributor
There was a problem hiding this comment.
Do we modify both buffers to avoid copying entire nextWater back to currentWater?
…omics-remake # Conflicts: # apps/typegpu-docs/tests/individual-example-tests/fluid-with-atomics.test.ts
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Rework of the old fluid-with-atomics example: