docs: TypeGPU functions (#1793)

Author: iwoplaza

apps/typegpu-docs/astro.config.mjs

@@ -131,11 +131,6 @@ export default defineConfig({
               label: 'Functions',
               slug: 'fundamentals/functions',
             },
-            {
-              label: 'TGSL',
-              slug: 'fundamentals/tgsl',
-              badge: { text: 'new' },
-            },
             {
               label: 'Pipelines',
               slug: 'fundamentals/pipelines',

apps/typegpu-docs/package.json

@@ -50,10 +50,10 @@
     "remeda": "^2.21.2",
     "sharp": "^0.34.2",
     "starlight-blog": "^0.23.2",
-    "starlight-typedoc": "^0.21.4",
+    "starlight-typedoc": "^0.19.0",
     "tinybench": "^3.1.0",
-    "typedoc": "^0.28.13",
-    "typedoc-plugin-markdown": "^4.3.0",
+    "typedoc": "^0.27.9",
+    "typedoc-plugin-markdown": "4.3.0",
     "typegpu": "workspace:*",
     "typescript": "catalog:types",
     "unplugin-typegpu": "workspace:*",

apps/typegpu-docs/src/content/docs/fundamentals/buffers.mdx

@@ -195,7 +195,7 @@ Since the buffer is already created, you are responsible for the buffer's lifecy
 
 ## Writing to a buffer
 
-To write data to a buffer, you can use the `.write(value)` method. The typed schema enables auto-complete as well as static validation of this
+To write data to a buffer from the CPU, you can use the `.write(value)` method. The typed schema enables auto-complete as well as static validation of this
 method's arguments.
 
 ```ts twoslash
@@ -285,7 +285,7 @@ backupParticleBuffer.copyFrom(particleBuffer);
 
 ## Reading from a buffer
 
-To read data from a buffer, you can use the `.read()` method.
+To read data from a buffer on the CPU, you can use the `.read()` method.
 It returns a promise that resolves to the data read from the buffer.
 
 ```ts twoslash
@@ -348,32 +348,25 @@ import * as d from 'typegpu/data';
 
 const root = await tgpu.init();
 // ---cut---
-const pointsBuffer = root
-  .createBuffer(d.arrayOf(d.vec2i, 100))
-  .$usage('storage');
-
-const bindGroupLayout = tgpu.bindGroupLayout({
-  points: { storage: d.arrayOf(d.vec2i, 100), access: 'mutable' },
+const layout = tgpu.bindGroupLayout({
+  points: { storage: d.arrayOf(d.vec2i), access: 'mutable' },
 });
 
-const bindGroup = root
-  .createBindGroup(bindGroupLayout, { points: pointsBuffer });
-
-const mainCompute = tgpu['~unstable'].computeFn({
-  in: { gid: d.builtin.globalInvocationId },
-  workgroupSize: [1],
-})((input) => {
+const pipeline = root['~unstable'].createGuardedComputePipeline((x) => {
+  'use gpu';
   // Access and modify the bound buffer via the layout
-  bindGroupLayout.$.points[input.gid[0]] = d.vec2i(1, 2);
+  layout.$.points[x] = d.vec2i(1, 2);
 });
 
-const pipeline = root['~unstable']
-  .withCompute(mainCompute)
-  .createPipeline();
+const pointsBuffer = root
+  .createBuffer(d.arrayOf(d.vec2i, 100))
+  .$usage('storage');
+
+const bindGroup = root.createBindGroup(layout, {
+  points: pointsBuffer
+});
 
-pipeline
-  .with(bindGroupLayout, bindGroup)
-  .dispatchWorkgroups(100);
+pipeline.with(bindGroup).dispatchThreads(100);
 ```
 
 ### Using fixed resources
@@ -394,18 +387,15 @@ import * as d from 'typegpu/data';
 
 const root = await tgpu.init();
 // ---cut---
-const pointsBuffer = root.createMutable(d.arrayOf(d.vec2i, 100));
+const pointsMutable = root.createMutable(d.arrayOf(d.vec2i, 100));
 
-const mainCompute = tgpu['~unstable'].computeFn({
-  in: { gid: d.builtin.globalInvocationId },
-  workgroupSize: [1],
-})((input) => {
+const pipeline = root['~unstable'].createGuardedComputePipeline((x) => {
+  'use gpu';
   // Access and modify the fixed buffer directly
-  pointsBuffer.$[input.gid[0]] = d.vec2i();
+  pointsMutable.$[x] = d.vec2i();
 });
 
-const pipeline = root['~unstable'].withCompute(mainCompute).createPipeline();
-pipeline.dispatchWorkgroups(100);
+pipeline.dispatchThreads(100);
 ```
 
 TypeGPU automatically generates a "catch-all" bind group and populates it with the fixed resources.