docs: "Trippy Raymarching" example - #2770
Conversation
|
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.87, 1.87, 4.15, 5.69, 6.94, 11.21, 22.26, 24.06]
line [0.90, 1.90, 3.96, 6.07, 7.34, 11.60, 22.50, 24.61]
line [0.86, 1.76, 3.66, 6.23, 7.97, 10.07, 21.82, 24.39]
---
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.49, 0.68, 0.80, 1.10, 1.15, 1.39, 1.49]
line [0.29, 0.51, 0.67, 0.81, 1.12, 1.21, 1.39, 1.52]
line [0.26, 0.50, 0.71, 0.87, 1.14, 1.23, 1.42, 1.52]
---
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.76, 2.08, 3.19, 6.28, 11.31, 24.85, 52.20, 107.45]
line [0.76, 2.05, 4.03, 6.30, 11.70, 24.45, 52.67, 108.79]
line [1.04, 2.05, 3.95, 6.24, 11.97, 25.90, 54.37, 111.19]
|
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.
There was a problem hiding this comment.
✅ No new issues found.
Reviewed changes — adds a "Trippy Raymarching" interactive docs example with a full-screen fragment shader rendering a 3D SDF scene with live controls and pointer/touch input.
- Add fragment shader raymarching example — a
palette-based color scheme, twist/wave/displacement SDF scene, half-Lambert lighting, and glow accumulation in the marching loop. - Add interactive controls — resolution scale, sphere spacing/base radius, max distance/raymarching steps, wave frequencies/amplitude, and twist factor via
defineControlssliders. - Add pointer and touch input — maps pointer/touch coordinates to a world-space mouse uniform that offsets the SDF scene.
- Add resolution scaling — manual
ResizeObserver+ DPR-aware canvas sizing with a user-adjustable scale slider for performance tuning. - Add cleanup —
AbortControllerfor event listeners,ResizeObserver.disconnect(),cancelAnimationFrame(), androot.destroy().
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
Adds a new interactive docs example showcasing a “trippy” 3D SDF/raymarching scene, fitting into the TypeGPU docs examples gallery under the rendering category.
Changes:
- Introduces a new raymarching example implementation (shader + controls + cleanup).
- Adds example metadata (title/category/tags/cool factor) for discovery/sorting.
- Adds a minimal HTML entry with a canvas configured for pixelated rendering.
Reviewed changes
Copilot reviewed 3 out of 4 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| apps/typegpu-docs/src/examples/rendering/trippy-raymarching/meta.json | Registers the example in the docs gallery with metadata/tags. |
| apps/typegpu-docs/src/examples/rendering/trippy-raymarching/index.ts | Implements the raymarching scene, uniforms, interaction, resize handling, and controls/cleanup. |
| apps/typegpu-docs/src/examples/rendering/trippy-raymarching/index.html | Provides the canvas host element with image-rendering styles. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
✅ No new issues found.
Reviewed changes — applies review feedback to the "Trippy Raymarching" docs example.
- Simplified context and uniforms — removed the unused
alphaMode: 'premultiplied', dropped default zero initializers, and replaced the full-resolution uniform with a singleaspectRatioBuf. - Streamlined pointer handling — moved
touch-action: noneintoindex.htmland removed the redundant touch event listeners, relying onpointermoveonly. - Tightened shader helpers — simplified the palette function, collapsed the SDF cell math into a vector expression, and deferred hit position/color calculation until after the raymarching loop.
- Cleaned up controls — introduced a
paramSliderhelper to remove repetitive slider definitions. - Fixed metadata consistency — changed
coolFactorto an integer (7) to match every other example.
Kimi K2 (free via Pullfrog for OSS) | 𝕏

Adds trippy interactive 3d sdf raymarching example.