impr: Simplify pipelines with method

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();

apps/typegpu-docs/src/examples/rendering/perlin-noise/index.ts

@@ -114,7 +114,7 @@ function draw(timestamp: number) {
   time.write(timestamp * 0.0002 % DEPTH);
 
   renderPipelines[activeSharpenFn]
-    .with(dynamicLayout, bindGroup)
+    .with(bindGroup)
     .withColorAttachment({
       view: context.getCurrentTexture().createView(),
       loadOp: 'clear',

apps/typegpu-docs/src/examples/rendering/two-boxes/index.ts

@@ -289,7 +289,7 @@ function drawObject(
       depthStoreOp: 'store',
     })
     .with(vertexLayout, buffer)
-    .with(layout, group)
+    .with(group)
     .draw(vertexCount);
 }
 

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

@@ -173,7 +173,7 @@ function draw() {
   `;
 
   pipeline
-    .with(layout, bindGroup)
+    .with(bindGroup)
     .withColorAttachment({
       view: context.getCurrentTexture().createView(),
       clearValue: [0, 0, 0, 0],

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

@@ -274,7 +274,7 @@ function frame() {
   even = !even;
 
   computePipeline
-    .with(computeBindGroupLayout, computeBindGroups[even ? 0 : 1])
+    .with(computeBindGroups[even ? 0 : 1])
     .dispatchWorkgroups(triangleAmount);
 
   renderPipeline

apps/typegpu-docs/src/examples/simulation/gravity/index.ts

@@ -153,11 +153,11 @@ let depthTexture = root.device.createTexture({
 
 function render() {
   computeCollisionsPipeline
-    .with(computeLayout, dynamicResourcesBox.data.computeCollisionsBindGroup)
+    .with(dynamicResourcesBox.data.computeCollisionsBindGroup)
     .dispatchWorkgroups(celestialBodiesCount);
 
   computeGravityPipeline
-    .with(computeLayout, dynamicResourcesBox.data.computeGravityBindGroup)
+    .with(dynamicResourcesBox.data.computeGravityBindGroup)
     .dispatchWorkgroups(celestialBodiesCount);
 
   skyBoxPipeline
@@ -184,7 +184,7 @@ function render() {
       depthStoreOp: 'store',
     })
     .with(renderVertexLayout, sphereVertexBuffer)
-    .with(renderBindGroupLayout, dynamicResourcesBox.data.renderBindGroup)
+    .with(dynamicResourcesBox.data.renderBindGroup)
     .draw(sphereVertexCount, celestialBodiesCount);
 }
 

apps/typegpu-docs/src/examples/simulation/stable-fluid/index.ts

@@ -320,55 +320,53 @@ function loop() {
     });
 
     brushPipeline
-      .with(c.brushLayout, brushBindGroup)
+      .with(brushBindGroup)
       .dispatchWorkgroups(dispatchX, dispatchY);
 
     addInkPipeline
-      .with(c.addInkLayout, addInkBindGroups[inkBuffer.currentIndex])
+      .with(addInkBindGroups[inkBuffer.currentIndex])
       .dispatchWorkgroups(dispatchX, dispatchY);
     inkBuffer.swap();
 
     addForcePipeline
-      .with(c.addForcesLayout, addForceBindGroups[velBuffer.currentIndex])
+      .with(addForceBindGroups[velBuffer.currentIndex])
       .dispatchWorkgroups(dispatchX, dispatchY);
   } else {
     velBuffer.setCurrent(0);
   }
 
   advectPipeline
-    .with(c.advectLayout, advectBindGroups[velBuffer.currentIndex])
+    .with(advectBindGroups[velBuffer.currentIndex])
     .dispatchWorkgroups(dispatchX, dispatchY);
 
   for (let i = 0; i < p.params.jacobiIter; i++) {
     diffusionPipeline
-      .with(c.diffusionLayout, diffusionBindGroups[velBuffer.currentIndex])
+      .with(diffusionBindGroups[velBuffer.currentIndex])
       .dispatchWorkgroups(dispatchX, dispatchY);
     velBuffer.swap();
   }
 
   divergencePipeline
-    .with(c.divergenceLayout, divergenceBindGroups[velBuffer.currentIndex])
+    .with(divergenceBindGroups[velBuffer.currentIndex])
     .dispatchWorkgroups(dispatchX, dispatchY);
 
   pressureBuffer.setCurrent(0);
   for (let i = 0; i < p.params.jacobiIter; i++) {
     pressurePipeline
-      .with(c.pressureLayout, pressureBindGroups[pressureBuffer.currentIndex])
+      .with(pressureBindGroups[pressureBuffer.currentIndex])
       .dispatchWorkgroups(dispatchX, dispatchY);
     pressureBuffer.swap();
   }
 
   projectPipeline
     .with(
-      c.projectLayout,
       projectBindGroups[velBuffer.currentIndex][pressureBuffer.currentIndex],
     )
     .dispatchWorkgroups(dispatchX, dispatchY);
   velBuffer.swap();
 
   advectInkPipeline
     .with(
-      c.advectInkLayout,
       advectInkBindGroups[velBuffer.currentIndex][inkBuffer.currentIndex],
     )
     .dispatchWorkgroups(dispatchX, dispatchY);
@@ -406,7 +404,7 @@ function loop() {
       loadOp: 'clear',
       storeOp: 'store',
     })
-    .with(renderLayout, renderBG)
+    .with(renderBG)
     .draw(3);
 
   requestAnimationFrame(loop);

apps/typegpu-docs/src/examples/tests/dispatch/index.ts

@@ -114,8 +114,8 @@ async function testDifferentBindGroups(): Promise<boolean> {
     }
   });
 
-  test.with(layout, bindGroup1).dispatch();
-  test.with(layout, bindGroup2).dispatch();
+  test.with(bindGroup1).dispatch();
+  test.with(bindGroup2).dispatch();
 
   const filled1 = await buffer1.read();
   const filled2 = await buffer2.read();

packages/typegpu-noise/src/perlin-2d/dynamic-cache.ts

@@ -97,7 +97,7 @@ const DefaultPerlin2DLayoutPrefix = 'perlin2dCache__' as const;
  *   const group = root.createBindGroup(dynamicLayout, { ...cache.bindings });
  *
  *   pipeline
- *     .with(dynamicLayout, group)
+ *     .with(group)
  *     // ...
  *     .draw(3);
  * };
@@ -198,7 +198,7 @@ export function dynamicCacheConfig<Prefix extends string>(
       });
 
       computePipeline
-        .with(computeLayout, computeBindGroup)
+        .with(computeBindGroup)
         .dispatchWorkgroups(size.x, size.y);
 
       return memory;

packages/typegpu-noise/src/perlin-3d/dynamic-cache.ts

@@ -97,7 +97,7 @@ const DefaultPerlin3DLayoutPrefix = 'perlin3dCache__' as const;
  *   const group = root.createBindGroup(dynamicLayout, { ...perlinCache.bindings });
  *
  *   pipeline
- *     .with(dynamicLayout, group)
+ *     .with(group)
  *     // ...
  *     .draw(3);
  * };
@@ -202,7 +202,7 @@ export function dynamicCacheConfig<Prefix extends string>(
       });
 
       computePipeline
-        .with(computeLayout, computeBindGroup)
+        .with(computeBindGroup)
         .dispatchWorkgroups(size.x, size.y, size.z);
 
       return memory;

packages/typegpu/src/core/pipeline/computePipeline.ts

@@ -6,9 +6,11 @@ import { type ResolutionResult, resolve } from '../../resolutionCtx.ts';
 import type { TgpuNamable } from '../../shared/meta.ts';
 import { getName, PERF, setName } from '../../shared/meta.ts';
 import { $getNameForward, $internal, $resolve } from '../../shared/symbols.ts';
-import type {
-  TgpuBindGroup,
-  TgpuBindGroupLayout,
+import {
+  isBindGroup,
+  type TgpuBindGroup,
+  type TgpuBindGroupLayout,
+  type TgpuLayoutEntry,
 } from '../../tgpuBindGroupLayout.ts';
 import { logDataFromGPU } from '../../tgsl/consoleLog/deserializers.ts';
 import type { LogResources } from '../../tgsl/consoleLog/types.ts';
@@ -45,10 +47,15 @@ export interface TgpuComputePipeline
   readonly [$internal]: ComputePipelineInternals;
   readonly resourceType: 'compute-pipeline';
 
-  with(
-    bindGroupLayout: TgpuBindGroupLayout,
-    bindGroup: TgpuBindGroup,
-  ): TgpuComputePipeline;
+  /**
+   * @deprecated This overload is outdated.
+   * Call `pipeline.with(bindGroup)` instead.
+   */
+  with<Entries extends Record<string, TgpuLayoutEntry | null>>(
+    bindGroupLayout: TgpuBindGroupLayout<Entries>,
+    bindGroup: TgpuBindGroup<Entries>,
+  ): this;
+  with(bindGroup: TgpuBindGroup): this;
 
   dispatchWorkgroups(
     x: number,
@@ -118,17 +125,32 @@ class TgpuComputePipelineImpl implements TgpuComputePipeline {
     return this._core.unwrap().pipeline;
   }
 
+  with<Entries extends Record<string, TgpuLayoutEntry | null>>(
+    bindGroupLayout: TgpuBindGroupLayout<Entries>,
+    bindGroup: TgpuBindGroup<Entries>,
+  ): this;
+  with(bindGroup: TgpuBindGroup): this;
   with(
-    bindGroupLayout: TgpuBindGroupLayout,
-    bindGroup: TgpuBindGroup,
-  ): TgpuComputePipeline {
+    layoutOrBindGroup: TgpuBindGroupLayout | TgpuBindGroup,
+    bindGroup?: TgpuBindGroup,
+  ): this {
+    if (isBindGroup(layoutOrBindGroup)) {
+      return new TgpuComputePipelineImpl(this._core, {
+        ...this._priors,
+        bindGroupLayoutMap: new Map([
+          ...(this._priors.bindGroupLayoutMap ?? []),
+          [layoutOrBindGroup.layout, layoutOrBindGroup],
+        ]),
+      }) as this;
+    }
+
     return new TgpuComputePipelineImpl(this._core, {
       ...this._priors,
       bindGroupLayoutMap: new Map([
         ...(this._priors.bindGroupLayoutMap ?? []),
-        [bindGroupLayout, bindGroup],
+        [layoutOrBindGroup as TgpuBindGroupLayout, bindGroup as TgpuBindGroup],
       ]),
-    });
+    }) as this;
   }
 
   withPerformanceCallback(