Skip to content

docs: Add interactive cloth example using @typegpu/geometry - #3000

Open
reczkok wants to merge 5 commits into
docs/geometryfrom
docs/geometry-cloth
Open

reczkok wants to merge 5 commits into
docs/geometryfrom
docs/geometry-cloth

Conversation

@reczkok

@reczkok reczkok commented Sep 8, 2026

Copy link
Copy Markdown
Contributor

No description provided.

@github-actions

github-actions Bot commented Sep 8, 2026 •

Copy link
Copy Markdown

pkg.pr.new

packages
Ready to be installed by your favorite package manager ⬇️

https://pkg.pr.new/software-mansion/TypeGPU/typegpu@1c246a86f35d0f50846298da2d3c6a0060a40356
https://pkg.pr.new/software-mansion/TypeGPU/@typegpu/react@1c246a86f35d0f50846298da2d3c6a0060a40356

benchmark
view benchmark

commit
view commit

@reczkok
reczkok force-pushed the docs/geometry-cloth branch from 3894880 to 9ee6a3f Compare September 8, 2026 03:35
@github-actions

github-actions Bot commented Sep 8, 2026 •

Copy link
Copy Markdown

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.89, 1.98, 4.19, 5.96, 7.66, 13.90, 24.24, 27.35]
  line [0.98, 2.02, 4.11, 6.79, 7.66, 13.87, 24.52, 24.09]
  line [0.82, 1.71, 3.82, 6.11, 6.75, 12.25, 23.53, 24.84]
Loading
---
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.36, 0.52, 0.78, 0.88, 1.12, 1.20, 1.39, 1.62]
  line [0.31, 0.52, 0.65, 0.83, 1.11, 1.09, 1.29, 1.53]
  line [0.30, 0.51, 0.66, 0.76, 1.06, 1.05, 1.25, 1.35]
Loading
---
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.92, 2.11, 4.08, 6.87, 12.88, 25.61, 56.44, 120.12]
  line [0.98, 2.06, 3.99, 6.68, 11.57, 25.42, 56.24, 115.45]
  line [0.93, 2.13, 3.41, 6.64, 11.93, 25.36, 53.69, 108.36]
Loading

@github-actions

github-actions Bot commented Sep 8, 2026 •

Copy link
Copy Markdown

Bundle size comparison (import * as ... in PR vs import * as ... in target):

🟢 Decreased ➖ Unchanged 🔴 Increased ❔ Unknown
0 355 0 0

No notable changes.

If you wish to run a comparison for other, slower bundlers, run the 'Tree-shake test' from the GitHub Actions menu.

@reczkok
reczkok force-pushed the docs/geometry-cloth branch 2 times, most recently from 407a03a to c274e3b Compare September 8, 2026 04:10
@reczkok
reczkok force-pushed the docs/geometry-cloth branch from c274e3b to 40ef3d3 Compare September 9, 2026 14:48
@reczkok
reczkok removed this pull request from stack #2999 September 9, 2026 14:49
@reczkok
reczkok added this pull request to stack #3015 September 9, 2026 14:50
@reczkok
reczkok force-pushed the docs/geometry-cloth branch from 073bfec to d90f02b Compare October 6, 2026 15:11
@reczkok
reczkok force-pushed the docs/geometry-cloth branch from d90f02b to a8dd76c Compare October 16, 2026 18:56
@reczkok
reczkok force-pushed the docs/geometry-cloth branch from a8dd76c to c9de4c7 Compare October 22, 2026 11:58
@reczkok
reczkok force-pushed the docs/geometry-cloth branch 3 times, most recently from 0ee067b to 2ad434a Compare October 22, 2026 12:44
@reczkok
reczkok marked this pull request as ready for review October 22, 2026 13:00
Copilot AI balanced review requested due to automatic review settings October 22, 2026 13:00

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 Changes recommended

Touch handoff breaks pinch zoom, and drag cleanup leaves canvas event handlers active.

2 open issues
What changed in this PR

Adds an interactive cloth simulation to the documentation examples, demonstrating how @typegpu/geometry meshes can be animated directly on the GPU.

Changes:

  • Adds cloth picking, spring-force simulation, and normal updates.
  • Integrates rendering, dragging, camera controls, and simulation settings.
  • Adds example metadata, interaction instructions, and a shader-resolution test.
File Description
apps/​typegpu-docs/​tests/​individual-example-tests/​cloth-mesh.test.ts Tests shader resolution for picking, simulation, and rendering.
apps/​typegpu-docs/​src/​examples/​simulation/​cloth-mesh/​meta.json Registers the simulation in the example gallery.
apps/​typegpu-docs/​src/​examples/​simulation/​cloth-mesh/​index.ts Connects GPU pipelines, rendering, camera, and controls.
apps/​typegpu-docs/​src/​examples/​simulation/​cloth-mesh/​index.html Provides the canvas and interaction instructions.
apps/​typegpu-docs/​src/​examples/​simulation/​cloth-mesh/​drag.ts Implements pointer-based cloth dragging.
apps/​typegpu-docs/​src/​examples/​simulation/​cloth-mesh/​cloth.ts Defines mesh data and cloth compute shaders.

Review effort: Balanced

Comment thread apps/typegpu-docs/src/examples/simulation/cloth-mesh/drag.ts
Comment thread apps/typegpu-docs/src/examples/simulation/cloth-mesh/drag.ts

@pullfrog pullfrog Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Important

Two interaction issues remain in the drag helper: pinch-to-zoom is broken once a second touch lands, and cleanup() leaves its canvas listeners attached.

Reviewed changes

  • Interactive cloth example — adds cloth-mesh with a baked @typegpu/geometry sheet, GPU spring simulation, screen-space grab picking, and normal recomputation (cloth.ts).
  • Pointer dragging — drag.ts maps pointer events to NDC, captures the pointer, and hands multi-touch off to the orbit camera.
  • Wiring & controls — index.ts builds the render/compute pipelines, patches the scene uniform, and exposes Wind/Stiffness/Pause/Reset.
  • Docs metadata & UI — meta.json, the index.html controls help, and a thumbnail register the example in the gallery.
  • Test — a jsdom smoke test drives a frame and a pointerdown, asserting 8 shader modules and the atomicMin pick shader.

Pullfrog  | Fix all ➔ | Fix 👍s ➔ | View workflow run | Using deepseek-v4.1-flash (free via Pullfrog for OSS) | 𝕏

Comment thread apps/typegpu-docs/src/examples/simulation/cloth-mesh/drag.ts
Comment thread apps/typegpu-docs/src/examples/simulation/cloth-mesh/drag.ts
@reczkok
reczkok force-pushed the docs/geometry-cloth branch from 2ad434a to 1c246a8 Compare October 22, 2026 14:43

@pullfrog pullfrog Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ No new issues found.

Reviewed changes

Incremental re-review of the commits pushed after the prior pullfrog review (2ad434a → 1c246a8). The branch was rebased onto an advanced docs/geometry, but the example's own files are otherwise byte-identical to the prior head (index.ts now uses the shared setupOrbitCamera from the base branch). The only net change is in drag.ts:

  • Stopped releasing the primary pointer's capture on grab handoff — release() no longer calls canvas.releasePointerCapture, so when a second touch ends the cloth grab the primary pointer stays captured and the orbit camera keeps both fingers, restoring pinch zoom. The normal end path is unaffected because the browser implicitly releases capture on pointerup/pointercancel.

Verified locally: the cloth-mesh jsdom test passes and pnpm run --filter typegpu-docs test:types reports 0 errors.

Pullfrog  | Fix it ➔ | View workflow run | Using deepseek-v4.1-flash (free via Pullfrog for OSS) | 𝕏

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants