docs: Add "Fire Text" example and control sections - #2776
Open
vende11s wants to merge 2 commits into
Open
Conversation
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
|
pkg.pr.new packages benchmark commit |
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.76, 1.48, 3.12, 4.66, 5.51, 8.76, 16.04, 17.21]
line [0.67, 1.33, 3.12, 4.82, 5.52, 9.07, 16.66, 17.47]
line [0.73, 1.52, 3.19, 5.02, 5.59, 8.85, 16.89, 18.63]
---
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.21, 0.43, 0.53, 0.66, 0.87, 1.01, 1.19, 1.28]
line [0.25, 0.43, 0.48, 0.58, 0.80, 0.83, 1.04, 1.08]
line [0.22, 0.48, 0.56, 0.66, 0.92, 0.97, 1.20, 1.27]
---
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.72, 1.89, 3.04, 5.27, 9.56, 20.53, 41.53, 85.95]
line [0.66, 1.82, 3.40, 5.25, 9.90, 19.29, 42.43, 83.65]
line [0.91, 1.70, 3.33, 5.25, 9.86, 20.83, 43.87, 88.47]
|
Bundle size comparison (
|
| 🟢 Decreased | ➖ Unchanged | 🔴 Increased | ❔ Unknown |
|---|---|---|---|
| 0 | 322 | 0 | 0 |
import { ... } in PR vs import * as ... in PR (is the library tree-Shakeable?):
| Test | tsdown |
|---|---|
| tgpu_init.ts | 260.04 kB ( |
| tgpu_initFromDevice.ts | 259.51 kB ( |
| tgpu_resolve.ts | 165.41 kB ( |
| tgpu_resolveWithContext.ts | 165.35 kB ( |
| tgpu_bindGroupLayout.ts | 69.27 kB ( |
| tgpu_mutableAccessor.ts | 66.27 kB ( |
| tgpu_accessor.ts | 66.26 kB ( |
| tgpu_privateVar.ts | 65.61 kB ( |
| tgpu_workgroupVar.ts | 65.60 kB ( |
| tgpu_const.ts | 64.85 kB ( |
| tgpu_fn.ts | 38.45 kB ( |
| tgpu_fragmentFn.ts | 38.45 kB ( |
| tgpu_vertexFn.ts | 38.27 kB ( |
| tgpu_computeFn.ts | 37.97 kB ( |
| tgpu_vertexLayout.ts | 27.08 kB ( |
| tgpu_comptime.ts | 14.77 kB ( |
| tgpu_unroll.ts | 1.66 kB ( |
| tgpu_slot.ts | 1.54 kB ( |
| tgpu_lazy.ts | 1.19 kB ( |
If you wish to run a comparison for other, slower bundlers, run the 'Tree-shake test' from the GitHub Actions menu.
![pullfrog[bot]](https://avatars.githubusercontent.com/in/1768019?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
✅ No new issues found.
Reviewed changes — new section() abstraction for grouping example controls, and the Fire Text simulation example.
section()control grouping:defineControls.tsgains asection()factory;flattenControls.ts(new) flattens nested sections into a linear list consumed by both the React control panel (ControlPanel.tsx) and the standalone StackBlitz runner (stackBlitzIndex.ts). The existingexampleRunner.tsandexampleControlAtom.tswere updated to match.stackBlitzIndex.tsrefactor: control rendering was rewritten to useflattenControlsinstead of inline iteration; gained scroll support for tall panels.- Fire Text example: full GPU fluid simulation (advection, Jacobi pressure, vorticity/thermal confinement) with text masking via Canvas 2D, particle spawns, keyboard input, and organized control sections.
DeepSeek Pro (free via Pullfrog for OSS) (Kimi K2 not used — the program covers this model; add its provider key to run your pick) ｜ 𝕏
There was a problem hiding this comment.
Pull request overview
This PR enhances the docs example-control system to support grouped control sections, and adds a new “Fire Text” simulation example demonstrating interactive fluid/fire + text masking.
Changes:
- Add
section()/ControlSectionsupport and flattening logic so controls can be grouped under headers. - Update the docs control panel and StackBlitz runner to render section headers and use the shared flatten/initialize utilities.
- Add the new
simulation/fire-textexample (GPU fluid + text mask + particles) and its metadata.
Reviewed changes
Copilot reviewed 16 out of 17 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| apps/typegpu-docs/src/utils/examples/exampleRunner.ts | Switches example control collection/initialization to shared flatten/initialize helpers. |
| apps/typegpu-docs/src/utils/examples/exampleControlAtom.ts | Extends control param union with a section/header param shape. |
| apps/typegpu-docs/src/examples/common/defineControls.ts | Introduces section() and allows nested control trees. |
| apps/typegpu-docs/src/examples/common/flattenControls.ts | New shared utility to flatten sectioned controls + eager initialization. |
| apps/typegpu-docs/src/components/ControlPanel.tsx | Renders section headers in the main docs control panel. |
| apps/typegpu-docs/src/components/stackblitz/stackBlitzIndex.ts | Updates StackBlitz control UI to render sections and use flatten/initialize. |
| apps/typegpu-docs/src/components/stackblitz/openInStackBlitz.ts | Adjusts StackBlitz index preprocessing to account for the new flattenControls import path. |
| apps/typegpu-docs/src/examples/simulation/fire-text/config.ts | Adds configuration struct/defaults for the Fire Text simulation. |
| apps/typegpu-docs/src/examples/simulation/fire-text/fluid.ts | Implements the fluid simulation pipelines + bind groups. |
| apps/typegpu-docs/src/examples/simulation/fire-text/emitter.ts | Adds a brush/source stamping compute pipeline. |
| apps/typegpu-docs/src/examples/simulation/fire-text/particles.ts | Implements particle update + render pipelines with text occlusion. |
| apps/typegpu-docs/src/examples/simulation/fire-text/render.ts | Adds render pipelines for fire/density/velocity visualization. |
| apps/typegpu-docs/src/examples/simulation/fire-text/text.ts | Implements the canvas-driven text mask uploader + typing behavior. |
| apps/typegpu-docs/src/examples/simulation/fire-text/index.ts | Wires the simulation loop, UI controls (sectioned), and cleanup. |
| apps/typegpu-docs/src/examples/simulation/fire-text/index.html | Adds the example’s canvas + in-example help overlay. |
| apps/typegpu-docs/src/examples/simulation/fire-text/meta.json | Registers example metadata (title/category/tags). |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+45
to
+50
| if (typeof value === 'object') { | ||
| result.push({ | ||
| ...(value as Record<string, unknown>), | ||
| label, | ||
| }); | ||
| } |
| container.style.flex = '1 1 0'; | ||
| container.style.minHeight = '0'; | ||
| container.style.justifyContent = 'center'; | ||
| container.style.alignItems = 'top'; |
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.
section()support to example controls so panels can group related parameters