docs: First of the new docs Your first gpu program#2457
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 (350 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.99, 2.02, 4.32, 6.49, 7.30, 9.52, 22.80, 25.81]
line [1.00, 1.94, 4.40, 6.07, 7.28, 10.70, 21.91, 22.61]
line [0.97, 1.91, 4.38, 6.90, 7.35, 10.57, 22.82, 24.33]
---
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.30, 0.55, 0.71, 0.85, 1.17, 1.25, 1.49, 1.66]
line [0.32, 0.54, 0.75, 0.90, 1.19, 1.25, 1.46, 1.61]
line [0.29, 0.54, 0.73, 0.84, 1.12, 1.19, 1.49, 1.64]
---
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.80, 2.02, 3.92, 6.32, 12.45, 25.33, 54.15, 111.92]
line [0.85, 2.02, 3.58, 6.09, 12.30, 26.15, 55.92, 114.28]
line [0.85, 1.87, 3.90, 6.22, 12.27, 25.04, 56.64, 114.01]
|
There was a problem hiding this comment.
Pull request overview
Adds the first page in a new “New Fundamentals” docs section, including runnable/inspectable TypeGPU examples embedded directly in the documentation UI.
Changes:
- Introduces a new docs page: “Your first GPU program” (compute pipeline, mutables, read/write/patch patterns).
- Adds a reusable runnable example wrapper that renders TypeScript snippets and captures console output while executing WebGPU code.
- Registers the new docs page in the Starlight sidebar under a new “New Fundamentals” group.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| apps/typegpu-docs/src/content/docs/new-fundamentals/your-first-gpu-program.mdx | New fundamentals page content introducing a first compute program + GPU state patterns. |
| apps/typegpu-docs/src/components/RunnableTypeGpuExample.tsx | New React component to run selected TypeGPU snippets and display captured console output. |
| apps/typegpu-docs/src/components/FirstGpuProgramExample.astro | Astro wrapper wiring Code + RunnableTypeGpuExample for the new docs page. |
| apps/typegpu-docs/astro.config.mjs | Adds “New Fundamentals” sidebar section linking to the new page. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const outputRef = useRef<HTMLPreElement | null>(null); | ||
| const runnableExample = runnableExamples[example]; | ||
|
|
||
| useEffect(() => { |
Comment on lines
+232
to
+238
| setSupported(true); | ||
|
|
||
| void navigator.gpu | ||
| .requestAdapter() | ||
| .then((adapter) => { | ||
| if (!cancelled && adapter === null) { | ||
| setSupported(false); |
Comment on lines
+287
to
+302
| try { | ||
| programRef.current ??= await runnableExample.createState(); | ||
| await runnableExample.execute(programRef.current); | ||
|
|
||
| setOutput((current) => { | ||
| const nextOutput = capturedLines.join('\n'); | ||
| if (!nextOutput) { | ||
| return current; | ||
| } | ||
| return current ? `${current}\n${nextOutput}` : nextOutput; | ||
| }); | ||
| } catch { | ||
| setSupported(false); | ||
| programRef.current?.root.destroy(); | ||
| programRef.current = null; | ||
| } finally { |
cieplypolar
reviewed
May 7, 2026
| import { Card, CardGrid, Steps } from '@astrojs/starlight/components'; | ||
| import FirstGpuProgramExample from '../../../components/FirstGpuProgramExample.astro'; | ||
|
|
||
| Running code on the GPU might sound intimidating, but **compute shaders** make it pretty easy to run arbitrary calculations. Most GPU programming guides start by creating a triangle (since that is what GPUs were primarily made for historically), but modern graphics programming is no longer bound by the classic execution model. We can **parallelize all kinds of work** with much less effort. |
Collaborator
There was a problem hiding this comment.
Suggested change
| Running code on the GPU might sound intimidating, but **compute shaders** make it pretty easy to run arbitrary calculations. Most GPU programming guides start by creating a triangle (since that is what GPUs were primarily made for historically), but modern graphics programming is no longer bound by the classic execution model. We can **parallelize all kinds of work** with much less effort. | |
| Running code on the GPU might sound intimidating, but **compute shaders** make it pretty easy to run arbitrary calculations. Most GPU programming guides start by creating a triangle (since that is what GPUs were primarily made for historically), but modern graphics programming is no longer bound by the classic execution model. Nowadays, you will often see the term **GPGPU**, which stands for *general-purpose computing on graphics processing units*. We can **parallelize all kinds of work** with much less effort. |
I think it would be a nice insight for beginners.
cieplypolar
reviewed
May 7, 2026
|
|
||
| 1. **Initialize the `root`**, which holds the reference to the GPU device and serves as the middleman when creating GPU resources: | ||
|
|
||
| ```ts |
Collaborator
There was a problem hiding this comment.
Suggested change
| ```ts | |
| ```ts twoslash |
// ---cut--- is visible
Same applies to all the steps below.
cieplypolar
reviewed
May 7, 2026
|
|
||
| When we need **global memory** on the GPU, we usually choose between two resource types: | ||
|
|
||
| <CardGrid> |
Collaborator
There was a problem hiding this comment.
I would be nice to add the references to the docs sections for buffers and textures.
| 'use gpu'; | ||
| const currentCount = countMutable.$; | ||
| console.log('current count:', currentCount); | ||
| countMutable.$ = currentCount + 1; |
Collaborator
There was a problem hiding this comment.
Suggested change
| countMutable.$ = currentCount + 1; | |
| countMutable.$++; |
To keep it consistent across code snippets.
| </div> | ||
| ) : ( | ||
| <> | ||
| <pre |
Collaborator
There was a problem hiding this comment.
Could you make console output column narrower? Output will fit and code won't be scrollable.
| ); | ||
|
|
||
| // ---cut--- | ||
| stateMutable.write({ counter: 0, incrementBy: 10 }); |
Collaborator
There was a problem hiding this comment.
I would explicitly mark that we didn't use this method.
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.
No description provided.