impr: Simplify pipelines with method (#1767)

Author: aleksanderkatan

apps/typegpu-docs/src/content/docs/ecosystem/typegpu-noise.mdx

@@ -260,7 +260,7 @@ let bindGroup = initBindGroup(d.vec3u(10, 10, 1));
 
 // Dispatching the pipeline
 pipeline
-  .with(dynamicLayout, bindGroup)
+  .with(bindGroup)
   .dispatchWorkgroups(1);
 
 // Can be called again to reinitialize the cache with

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

@@ -277,7 +277,7 @@ renderPipeline
 
 ### Resource bindings
 
-Before executing pipelines, it is necessary to bind all of the utilized resources, like bind groups, vertex buffers and slots. It is done using the `with` method. It accepts a pair of arguments: [a bind group layout and a bind group](/TypeGPU/fundamentals/bind-groups) (render and compute pipelines) or [a vertex layout and a vertex buffer](/TypeGPU/fundamentals/vertex-layouts) (render pipelines only).
+Before executing pipelines, it is necessary to bind all of the utilized resources, like bind groups, vertex buffers and slots. It is done using the `with` method. It accepts either [a bind group](/TypeGPU/fundamentals/bind-groups) (render and compute pipelines) or [a vertex layout and a vertex buffer](/TypeGPU/fundamentals/vertex-layouts) (render pipelines only).
 
 ```ts
 // vertex layout
@@ -305,11 +305,11 @@ const bindGroup = root.createBindGroup(bindGroupLayout, {
 // binding and execution
 renderPipeline
   .with(vertexLayout, vertexBuffer)
-  .with(bindGroupLayout, bindGroup)
+  .with(bindGroup)
   .draw(8);
 
 computePipeline
-  .with(bindGroupLayout, bindGroup)
+  .with(bindGroup)
   .dispatchWorkgroups(1);
 ```
 

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

@@ -62,7 +62,7 @@ prepareDispatch(root, (x, y) => {
 console.log(await waterLevelMutable.read());
 ```
 
-Analogously to `TgpuComputePipeline`, the result of `prepareDispatch` can have bind groups bound using the `with` method.
+The result of `prepareDispatch` can have bind groups bound using the `with` method.
 
 ```ts twoslash
 import tgpu, { prepareDispatch } from 'typegpu';
@@ -89,8 +89,8 @@ const test = prepareDispatch(root, (x) => {
   layout.$.buffer[x] *= 2;
 });
 
-test.with(layout, bindGroup1).dispatch(3);
-test.with(layout, bindGroup2).dispatch(4);
+test.with(bindGroup1).dispatch(3);
+test.with(bindGroup2).dispatch(4);
 
 console.log(await buffer1.read()); // [2, 4, 6];
 console.log(await buffer2.read()); // [4, 8, 16, 32];

apps/typegpu-docs/src/examples/algorithms/matrix-next/index.ts

@@ -176,7 +176,7 @@ async function compute() {
       };
 
       pipelines[state.strategy]
-        .with(computeLayout, bindGroup)
+        .with(bindGroup)
         .dispatchWorkgroups(workgroupCount.x, workgroupCount.y);
 
       await root.device.queue.onSubmittedWorkDone();

apps/typegpu-docs/src/examples/algorithms/mnist-inference/index.ts

@@ -165,8 +165,8 @@ function createNetwork(layers: [LayerData, LayerData][]): Network {
       const isLastLayer = i === buffers.length - 1;
 
       let boundPipeline = pipeline
-        .with(ioLayout, ioBindGroups[i])
-        .with(weightsBiasesLayout, weightsBindGroups[i]);
+        .with(ioBindGroups[i])
+        .with(weightsBindGroups[i]);
 
       if (querySet && (isFirstLayer || isLastLayer)) {
         const descriptor = {

apps/typegpu-docs/src/examples/algorithms/probability/executor.ts

@@ -123,7 +123,7 @@ export class Executor {
     }
 
     pipeline
-      .with(this.#bindGroupLayout, this.#bindGroup)
+      .with(this.#bindGroup)
       .dispatchWorkgroups(Math.ceil(this.#count / 64));
 
     return await this.#samplesBuffer.read();

apps/typegpu-docs/src/examples/image-processing/ascii-filter/index.ts

@@ -234,7 +234,7 @@ function processVideoFrame(
   }
 
   pipeline
-    .with(layout, bindGroup)
+    .with(bindGroup)
     .withColorAttachment({
       loadOp: 'clear',
       storeOp: 'store',

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

@@ -257,7 +257,7 @@ function frame(timestamp: DOMHighResTimeStamp) {
   cameraBuffer.write(camera);
 
   computePipeline
-    .with(computeBindGroupLayout, computeBindGroups[odd ? 1 : 0])
+    .with(computeBindGroups[odd ? 1 : 0])
     .dispatchWorkgroups(p.fishAmount / p.workGroupSize);
 
   renderPipeline
@@ -280,7 +280,7 @@ function frame(timestamp: DOMHighResTimeStamp) {
     })
     .with(modelVertexLayout, oceanFloorModel.vertexBuffer)
     .with(renderInstanceLayout, oceanFloorDataBuffer)
-    .with(renderBindGroupLayout, renderOceanFloorBindGroup)
+    .with(renderOceanFloorBindGroup)
     .draw(oceanFloorModel.polygonCount, 1);
 
   renderPipeline
@@ -303,7 +303,7 @@ function frame(timestamp: DOMHighResTimeStamp) {
     })
     .with(modelVertexLayout, fishModel.vertexBuffer)
     .with(renderInstanceLayout, fishDataBuffers[odd ? 1 : 0])
-    .with(renderBindGroupLayout, renderFishBindGroups[odd ? 1 : 0])
+    .with(renderFishBindGroups[odd ? 1 : 0])
     .draw(fishModel.polygonCount, p.fishAmount);
 
   root['~unstable'].flush();

apps/typegpu-docs/src/examples/rendering/cubemap-reflection/icosphere.ts

@@ -307,7 +307,7 @@ export class IcosphereGenerator {
     );
 
     this.pipeline
-      .with(generatorLayout, bindGroup)
+      .with(bindGroup)
       .dispatchWorkgroups(xGroups, yGroups, 1);
 
     this.root['~unstable'].flush();

apps/typegpu-docs/src/examples/rendering/cubemap-reflection/index.ts

@@ -300,8 +300,8 @@ function render() {
       storeOp: 'store',
     })
     .with(cubeVertexLayout, cubeVertexBuffer)
-    .with(renderLayout, renderBindGroup)
-    .with(textureLayout, textureBindGroup)
+    .with(renderBindGroup)
+    .with(textureBindGroup)
     .draw(cubeVertices.length);
 
   pipeline
@@ -312,8 +312,8 @@ function render() {
       storeOp: 'store',
     })
     .with(vertexLayout, vertexBuffer)
-    .with(renderLayout, renderBindGroup)
-    .with(textureLayout, textureBindGroup)
+    .with(renderBindGroup)
+    .with(textureBindGroup)
     .draw(vertexBuffer.dataType.elementCount);
 
   root['~unstable'].flush();