feat: Defaults for targets in .createRenderPipeline and .withColorAttachments (#2196)

Author: iwoplaza

apps/typegpu-docs/src/content/docs/fundamentals/functions/index.mdx

@@ -657,16 +657,10 @@ const mainFragment = tgpu.fragmentFn({
 const pipeline = root.createRenderPipeline({
   vertex: mainVertex,
   fragment: mainFragment,
-  targets: { format: presentationFormat },
 });
 
 pipeline
-  .withColorAttachment({
-    view: context.getCurrentTexture().createView(),
-    clearValue: [0, 0, 0, 0],
-    loadOp: 'clear',
-    storeOp: 'store',
-  })
+  .withColorAttachment({ view: context })
   .draw(3);
 ```
 

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

@@ -250,11 +250,7 @@ tgpu.resolve([innerPipeline]);
 
 ```ts
 renderPipeline
-  .withColorAttachment({
-    view: context.getCurrentTexture().createView(),
-    loadOp: 'clear',
-    storeOp: 'store',
-  })
+  .withColorAttachment({ view: context })
   .draw(3);
 
 computePipeline.dispatchWorkgroups(16);
@@ -274,7 +270,7 @@ renderPipeline
   .withColorAttachment({
     color: {
       view: msaaTextureView,
-      resolveTarget: context.getCurrentTexture().createView(),
+      resolveTarget: context,
       loadOp: 'clear',
       storeOp: 'store',
     },

apps/typegpu-docs/src/content/docs/integration/react-native/index.mdx

@@ -156,16 +156,10 @@ export function Triangle() {
         'use gpu';
         return d.vec4f(0.114, 0.447, 0.941, 1);
       },
-      targets: { format: presentationFormat },
     });
 
     pipeline
-      .withColorAttachment({
-        view: context.getCurrentTexture().createView(),
-        clearValue: [0, 0, 0, 0],
-        loadOp: 'clear',
-        storeOp: 'store',
-      })
+      .withColorAttachment({ view: context })
       .draw(3);
 
     context.present();

apps/typegpu-docs/src/examples/algorithms/jump-flood-distance/index.ts

@@ -287,15 +287,9 @@ function swap() {
 }
 
 function render() {
-  const colorAttachment = {
-    view: context.getCurrentTexture().createView(),
-    loadOp: 'clear' as const,
-    storeOp: 'store' as const,
-  };
-
   distancePipeline
     .with(resources.renderBindGroups[0])
-    .withColorAttachment(colorAttachment)
+    .withColorAttachment({ view: context })
     .draw(3);
 }
 

apps/typegpu-docs/src/examples/algorithms/jump-flood-voronoi/index.ts

@@ -223,15 +223,9 @@ function swap() {
 }
 
 function render() {
-  const colorAttachment = {
-    view: context.getCurrentTexture().createView(),
-    loadOp: 'clear' as const,
-    storeOp: 'store' as const,
-  };
-
   voronoiPipeline
     .with(resources.renderBindGroups[sourceIdx])
-    .withColorAttachment(colorAttachment)
+    .withColorAttachment({ view: context })
     .draw(3);
 }
 

apps/typegpu-docs/src/examples/geometry/circles/index.ts

@@ -140,11 +140,9 @@ setTimeout(() => {
       ...(multisample
         ? {
           view: msaaTextureView,
-          resolveTarget: context.getCurrentTexture().createView(),
+          resolveTarget: context,
         }
-        : {
-          view: context.getCurrentTexture().createView(),
-        }),
+        : { view: context }),
       clearValue: [0, 0, 0, 0],
       loadOp: 'clear',
       storeOp: 'store',

apps/typegpu-docs/src/examples/geometry/lines-combinations/index.ts

@@ -16,7 +16,7 @@ import {
   startCapSlot,
   uvToLineSegment,
 } from '@typegpu/geometry';
-import tgpu from 'typegpu';
+import tgpu, { type ColorAttachment } from 'typegpu';
 import {
   arrayOf,
   builtin,
@@ -30,7 +30,6 @@ import {
   vec4f,
 } from 'typegpu/data';
 import { clamp, cos, min, mix, select, sin } from 'typegpu/std';
-import type { ColorAttachment } from '../../../../../../packages/typegpu/src/core/pipeline/renderPipeline.ts';
 import { TEST_SEGMENT_COUNT } from './constants.ts';
 import * as testCases from './testCases.ts';
 import { defineControls } from '../../common/defineControls.ts';
@@ -372,10 +371,9 @@ const draw = (timeMs: number) => {
     time: timeMs * 1e-3,
   });
   const colorAttachment: ColorAttachment = {
-    view: context.getCurrentTexture().createView(),
+    view: context,
     clearValue: [1, 1, 1, 1],
     loadOp: 'load',
-    storeOp: 'store',
   };
   pipelines.fill
     .with(uniformsBindGroup)

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

@@ -48,7 +48,6 @@ const video = document.querySelector('video') as HTMLVideoElement;
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
 const spinner = document.querySelector('.spinner-background') as HTMLDivElement;
 const context = root.configureContext({ canvas, alphaMode: 'premultiplied' });
-const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
 canvas.parentElement?.appendChild(video);
 
 const pipeline = root.createRenderPipeline({
@@ -156,7 +155,6 @@ const pipeline = root.createRenderPipeline({
     }
     return d.vec4f(resultColor, 1.0);
   },
-  targets: { format: presentationFormat },
 });
 
 if (navigator.mediaDevices.getUserMedia) {
@@ -213,11 +211,7 @@ function processVideoFrame(
 
   pipeline
     .with(bindGroup)
-    .withColorAttachment({
-      loadOp: 'clear',
-      storeOp: 'store',
-      view: context.getCurrentTexture().createView(),
-    })
+    .withColorAttachment({ view: context })
     .draw(3);
 
   spinner.style.display = 'none';

apps/typegpu-docs/src/examples/image-processing/background-segmentation/index.ts

@@ -68,7 +68,6 @@ navigator.gpu.requestAdapter = async () => adapter;
 adapter.requestDevice = async () => device;
 const root = tgpu.initFromDevice({ device });
 const context = root.configureContext({ canvas, alphaMode: 'premultiplied' });
-const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
 
 // resources
 
@@ -164,7 +163,6 @@ const drawWithMaskPipeline = root
   .createRenderPipeline({
     vertex: common.fullScreenTriangle,
     fragment: fragmentFn,
-    targets: { format: presentationFormat },
   });
 
 // recalculating mask
@@ -309,10 +307,8 @@ async function processVideoFrame(
 
   drawWithMaskPipeline
     .withColorAttachment({
-      view: context.getCurrentTexture().createView(),
+      view: context,
       clearValue: [1, 1, 1, 1],
-      loadOp: 'clear',
-      storeOp: 'store',
     })
     .with(root.createBindGroup(drawWithMaskLayout, {
       inputTexture: device.importExternalTexture({ source: video }),

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

@@ -8,8 +8,6 @@ const root = await tgpu.init();
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
 const context = root.configureContext({ canvas });
 
-const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
-
 const response = await fetch('/TypeGPU/plums.jpg');
 const imageBitmap = await createImageBitmap(await response.blob());
 const [srcWidth, srcHeight] = [imageBitmap.width, imageBitmap.height];
@@ -155,7 +153,6 @@ const computePipeline = root.createComputePipeline({ compute: computeFn });
 const renderPipeline = root.createRenderPipeline({
   vertex: common.fullScreenTriangle,
   fragment: renderFragment,
-  targets: { format: presentationFormat },
 });
 
 function render() {
@@ -175,11 +172,9 @@ function render() {
       );
   }
 
-  renderPipeline.withColorAttachment({
-    view: context.getCurrentTexture().createView(),
-    loadOp: 'clear',
-    storeOp: 'store',
-  }).draw(3);
+  renderPipeline
+    .withColorAttachment({ view: context })
+    .draw(3);
 }
 render();