feat: Pipelines .pipe (#1414)

* feat: Pipelines `.pipe`

* More specific type for pipes

---------

Co-authored-by: Iwo Plaza <[email protected]>

Author: mhawryluk

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

@@ -58,16 +58,16 @@ const mainFragment = tgpu['~unstable'].fragmentFn({
 
 // Configuring a dynamic (meaning it's size can change) cache
 // for perlin noise gradients.
-const PerlinCacheConfig = perlin3d.dynamicCacheConfig();
+const perlinCacheConfig = perlin3d.dynamicCacheConfig();
 
 /** Contains all resources that the perlin cache needs access to */
-const dynamicLayout = tgpu.bindGroupLayout({ ...PerlinCacheConfig.layout });
+const dynamicLayout = tgpu.bindGroupLayout({ ...perlinCacheConfig.layout });
 
 const root = await tgpu.init();
 const device = root.device;
 
 // Instantiating the cache with an initial size.
-const perlinCache = PerlinCacheConfig.instance(root, d.vec3u(4, 4, DEPTH));
+const perlinCache = perlinCacheConfig.instance(root, d.vec3u(4, 4, DEPTH));
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
 const context = canvas.getContext('webgpu') as GPUCanvasContext;
@@ -86,8 +86,7 @@ const renderPipelineBase = root['~unstable']
   .with(gridSizeAccess, gridSize)
   .with(timeAccess, time)
   .with(sharpnessAccess, sharpness)
-  .with(perlin3d.getJunctionGradientSlot, PerlinCacheConfig.getJunctionGradient)
-  .with(PerlinCacheConfig.valuesSlot, dynamicLayout.$);
+  .pipe(perlinCacheConfig.inject(dynamicLayout.$));
 
 const renderPipelines = {
   exponential: renderPipelineBase

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

@@ -1,4 +1,5 @@
 import tgpu, {
+  type Configurable,
   type StorageFlag,
   type TgpuBuffer,
   type TgpuFn,
@@ -9,7 +10,10 @@ import tgpu, {
 import * as d from 'typegpu/data';
 import { allEq } from 'typegpu/std';
 import type { PrefixKeys, Prettify } from '../utils.ts';
-import { computeJunctionGradient } from './algorithm.ts';
+import {
+  computeJunctionGradient,
+  getJunctionGradientSlot,
+} from './algorithm.ts';
 
 const MemorySchema = (n: number) => d.arrayOf(d.vec3f, n);
 
@@ -46,6 +50,10 @@ export interface DynamicPerlin3DCacheConfig<Prefix extends string> {
     root: TgpuRoot,
     initialSize: d.v3u,
   ): DynamicPerlin3DCache<Prefix>;
+
+  inject(
+    layoutValue: LayoutValue<Prefix>,
+  ): (cfg: Configurable) => Configurable;
 }
 
 export interface DynamicPerlin3DCache<Prefix extends string> {
@@ -243,5 +251,10 @@ export function dynamicCacheConfig<Prefix extends string>(
     valuesSlot,
     getJunctionGradient,
     instance,
+
+    inject: (layoutValue) => (cfg) =>
+      cfg
+        .with(getJunctionGradientSlot, getJunctionGradient)
+        .with(valuesSlot, layoutValue),
   };
 }

packages/typegpu/src/core/root/init.ts

@@ -87,6 +87,7 @@ import {
   type TgpuVertexLayout,
 } from '../vertexLayout/vertexLayout.ts';
 import type {
+  Configurable,
   CreateTextureOptions,
   CreateTextureResult,
   ExperimentalTgpuRoot,
@@ -140,6 +141,10 @@ class WithBindingImpl implements WithBinding {
       multisampleState: undefined,
     });
   }
+
+  pipe(transform: (cfg: Configurable) => Configurable): Configurable {
+    return transform(this);
+  }
 }
 
 class WithComputeImpl implements WithCompute {

packages/typegpu/src/core/root/rootTypes.ts

@@ -111,7 +111,7 @@ export interface WithFragment<
   createPipeline(): TgpuRenderPipeline<Output>;
 }
 
-export interface WithBinding {
+export interface Configurable {
   with<T>(slot: TgpuSlot<T>, value: Eventual<T>): WithBinding;
   with<T extends AnyWgslData>(
     accessor: TgpuAccessor<T>,
@@ -122,6 +122,10 @@ export interface WithBinding {
       | Infer<T>,
   ): WithBinding;
 
+  pipe(transform: (cfg: Configurable) => Configurable): Configurable;
+}
+
+export interface WithBinding extends Configurable {
   withCompute<ComputeIn extends IORecord<AnyComputeBuiltin>>(
     entryFn: TgpuComputeFn<ComputeIn>,
   ): WithCompute;

packages/typegpu/src/index.ts

@@ -91,6 +91,7 @@ export { isTgpuFn } from './core/function/tgpuFn.ts';
 // types
 
 export type {
+  Configurable,
   TgpuRoot,
   WithBinding,
   WithCompute,