feat: Move prepareDispatch to root, and enable slot bindings (#1794)

Author: iwoplaza

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

@@ -10,13 +10,13 @@ Under the hood, it wraps the callback in a `TgpuFn`, creates a compute pipeline,
 Since the pipeline is reused, there’s no additional overhead for subsequent calls.
 
 ```ts twoslash
-import tgpu, { prepareDispatch } from 'typegpu';
+import tgpu from 'typegpu';
 import * as d from 'typegpu/data';
 const root = await tgpu.init();
 // ---cut---
 const data = root.createMutable(d.arrayOf(d.u32, 8), [0, 1, 2, 3, 4, 5, 6, 7]);
 
-const doubleUp = prepareDispatch(root, (x) => {
+const doubleUp = root['~unstable'].prepareDispatch((x) => {
   'use gpu';
   data.$[x] *= 2;
 });
@@ -39,7 +39,7 @@ Buffer initialization commonly uses random number generators.
 For that, you can use the [`@typegpu/noise`](TypeGPU/ecosystem/typegpu-noise) library.
 
 ```ts twoslash
-import tgpu, { prepareDispatch } from 'typegpu';
+import tgpu from 'typegpu';
 import * as d from 'typegpu/data';
 // ---cut---
 import { randf } from '@typegpu/noise';
@@ -51,7 +51,7 @@ const waterLevelMutable = root.createMutable(
   d.arrayOf(d.arrayOf(d.f32, 512), 1024),
 );
 
-prepareDispatch(root, (x, y) => {
+root['~unstable'].prepareDispatch((x, y) => {
   'use gpu';
   randf.seed2(d.vec2f(x, y).div(1024));
   waterLevelMutable.$[x][y] = 10 + randf.sample();
@@ -65,7 +65,7 @@ console.log(await waterLevelMutable.read());
 The result of `prepareDispatch` can have bind groups bound using the `with` method.
 
 ```ts twoslash
-import tgpu, { prepareDispatch } from 'typegpu';
+import tgpu from 'typegpu';
 import * as d from 'typegpu/data';
 import * as std from 'typegpu/std';
 const root = await tgpu.init();
@@ -84,7 +84,7 @@ const bindGroup2 = root.createBindGroup(layout, {
   buffer: buffer2,
 });
 
-const test = prepareDispatch(root, (x) => {
+const test = root['~unstable'].prepareDispatch((x) => {
   'use gpu';
   layout.$.buffer[x] *= 2;
 });
@@ -123,13 +123,13 @@ Yes, you read that correctly, TypeGPU implements logging to the console on the G
 Just call `console.log` like you would in plain JavaScript, and open the console to see the results.
 
 ```ts twoslash
-import tgpu, { prepareDispatch } from 'typegpu';
+import tgpu from 'typegpu';
 import * as d from 'typegpu/data';
 
 const root = await tgpu.init();
 // ---cut---
 const callCountMutable = root.createMutable(d.u32, 0);
-const compute = prepareDispatch(root, () => {
+const compute = root['~unstable'].prepareDispatch(() => {
   'use gpu';
   callCountMutable.$ += 1;
   console.log('Call number', callCountMutable.$);
@@ -151,7 +151,7 @@ The buffer is of fixed size, which may limit the total amount of information tha
 If that's an issue, you may specify the size manually when creating the `root` object.
 
 ```ts twoslash
-import tgpu, { prepareDispatch } from 'typegpu';
+import tgpu from 'typegpu';
 import * as d from 'typegpu/data';
 
 const presentationFormat = undefined as any;

apps/typegpu-docs/src/examples/rendering/3d-fish/compute.ts

@@ -1,15 +1,11 @@
-import tgpu from 'typegpu';
 import * as d from 'typegpu/data';
 import * as std from 'typegpu/std';
 import * as p from './params.ts';
 import { computeBindGroupLayout as layout, ModelData } from './schemas.ts';
 import { projectPointOnLine } from './tgsl-helpers.ts';
 
-export const computeShader = tgpu['~unstable'].computeFn({
-  in: { gid: d.builtin.globalInvocationId },
-  workgroupSize: [p.workGroupSize],
-})((input) => {
-  const fishIndex = input.gid.x;
+export const simulate = (fishIndex: number) => {
+  'use gpu';
   // TODO: replace it with struct copy when Chromium is fixed
   const fishData = ModelData({
     position: layout.$.currentFishData[fishIndex].position,
@@ -131,4 +127,4 @@ export const computeShader = tgpu['~unstable'].computeFn({
   );
   fishData.position = std.add(fishData.position, translation);
   layout.$.nextFishData[fishIndex] = fishData;
-});
+};

apps/typegpu-docs/src/examples/rendering/3d-fish/index.ts

@@ -1,9 +1,9 @@
 import { randf } from '@typegpu/noise';
-import tgpu, { prepareDispatch } from 'typegpu';
+import tgpu from 'typegpu';
 import * as d from 'typegpu/data';
 import * as std from 'typegpu/std';
 import * as m from 'wgpu-matrix';
-import { computeShader } from './compute.ts';
+import { simulate } from './compute.ts';
 import { loadModel } from './load-model.ts';
 import * as p from './params.ts';
 import { fragmentShader, vertexShader } from './render.ts';
@@ -98,7 +98,7 @@ function enqueuePresetChanges() {
 const buffer0mutable = fishDataBuffers[0].as('mutable');
 const buffer1mutable = fishDataBuffers[1].as('mutable');
 const seedUniform = root.createUniform(d.f32);
-const randomizeFishPositionsOnGPU = prepareDispatch(root, (x) => {
+const randomizeFishPositionsOnGPU = root['~unstable'].prepareDispatch((x) => {
   'use gpu';
   randf.seed2(d.vec2f(d.f32(x), seedUniform.$));
   const data = ModelData({
@@ -198,9 +198,7 @@ let depthTexture = root.device.createTexture({
   usage: GPUTextureUsage.RENDER_ATTACHMENT,
 });
 
-const computePipeline = root['~unstable']
-  .withCompute(computeShader)
-  .createPipeline();
+const simulateAction = root['~unstable'].prepareDispatch(simulate);
 
 // bind groups
 
@@ -256,9 +254,9 @@ function frame(timestamp: DOMHighResTimeStamp) {
   lastTimestamp = timestamp;
   cameraBuffer.write(camera);
 
-  computePipeline
+  simulateAction
     .with(computeBindGroups[odd ? 1 : 0])
-    .dispatchWorkgroups(p.fishAmount / p.workGroupSize);
+    .dispatch(p.fishAmount);
 
   renderPipeline
     .withColorAttachment({

apps/typegpu-docs/src/examples/rendering/3d-fish/params.ts

@@ -1,8 +1,6 @@
 import * as d from 'typegpu/data';
 import * as std from 'typegpu/std';
 
-export const workGroupSize = 256;
-
 export const fishAmount = 1024 * 8;
 export const fishModelScale = 0.07;
 

apps/typegpu-docs/src/examples/simple/increment/index.ts

@@ -1,12 +1,12 @@
-import tgpu, { prepareDispatch } from 'typegpu';
+import tgpu from 'typegpu';
 import * as d from 'typegpu/data';
 
 const root = await tgpu.init();
 // Allocating memory for the counter
 const counter = root.createMutable(d.u32);
 
 // A 0-dimentional shader function
-const gpuIncrement = prepareDispatch(root, () => {
+const gpuIncrement = root['~unstable'].prepareDispatch(() => {
   'use gpu';
   counter.$ += 1;
 });

apps/typegpu-docs/src/examples/simulation/boids-next/index.ts

@@ -177,11 +177,8 @@ const computeBindGroupLayout = tgpu.bindGroupLayout({
 
 const { currentTrianglePos, nextTrianglePos } = computeBindGroupLayout.bound;
 
-const mainCompute = tgpu['~unstable'].computeFn({
-  in: { gid: d.builtin.globalInvocationId },
-  workgroupSize: [1],
-})((input) => {
-  const index = input.gid.x;
+const simulate = (index: number) => {
+  'use gpu';
   const instanceInfo = currentTrianglePos.value[index];
   let separation = d.vec2f();
   let alignment = d.vec2f();
@@ -250,11 +247,9 @@ const mainCompute = tgpu['~unstable'].computeFn({
   instanceInfo.position = std.add(instanceInfo.position, instanceInfo.velocity);
 
   nextTrianglePos.value[index] = instanceInfo;
-});
+};
 
-const computePipeline = root['~unstable']
-  .withCompute(mainCompute)
-  .createPipeline();
+const simulateAction = root['~unstable'].prepareDispatch(simulate);
 
 const computeBindGroups = [0, 1].map((idx) =>
   root.createBindGroup(computeBindGroupLayout, {
@@ -273,9 +268,9 @@ function frame() {
 
   even = !even;
 
-  computePipeline
+  simulateAction
     .with(computeBindGroups[even ? 0 : 1])
-    .dispatchWorkgroups(triangleAmount);
+    .dispatch(triangleAmount);
 
   renderPipeline
     .withColorAttachment({