feat: Common fullScreenTriangle vertex function (#1831)

Author: iwoplaza

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

@@ -1,6 +1,7 @@
 import tgpu, { type TgpuBindGroup } from 'typegpu';
 import * as d from 'typegpu/data';
 import * as std from 'typegpu/std';
+import { fullScreenTriangle } from 'typegpu/common';
 
 const root = await tgpu.init();
 
@@ -45,19 +46,6 @@ const characterFn = tgpu.fn([d.u32, d.vec2f], d.f32)((n, p) => {
   return d.f32((n >> a) & 1);
 });
 
-const fullScreenTriangle = tgpu['~unstable'].vertexFn({
-  in: { vertexIndex: d.builtin.vertexIndex },
-  out: { pos: d.builtin.position, uv: d.vec2f },
-})((input) => {
-  const pos = [d.vec2f(-1, -1), d.vec2f(3, -1), d.vec2f(-1, 3)];
-  const uv = [d.vec2f(0, 1), d.vec2f(2, 1), d.vec2f(0, -1)];
-
-  return {
-    pos: d.vec4f(pos[input.vertexIndex], 0, 1),
-    uv: uv[input.vertexIndex],
-  };
-});
-
 /**
  * Adapted from the original Shadertoy implementation by movAX13h:
  * https://www.shadertoy.com/view/lssGDj

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

@@ -4,6 +4,7 @@
 import tgpu from 'typegpu';
 import * as d from 'typegpu/data';
 import * as std from 'typegpu/std';
+import { fullScreenTriangle } from 'typegpu/common';
 
 const root = await tgpu.init();
 const device = root.device;
@@ -127,19 +128,6 @@ const computeFn = tgpu['~unstable'].computeFn({
   }
 });
 
-const fullScreenTriangle = tgpu['~unstable'].vertexFn({
-  in: { vertexIndex: d.builtin.vertexIndex },
-  out: { pos: d.builtin.position, uv: d.vec2f },
-})((input) => {
-  const pos = [d.vec2f(-1, -1), d.vec2f(3, -1), d.vec2f(-1, 3)];
-  const uv = [d.vec2f(0, 1), d.vec2f(2, 1), d.vec2f(0, -1)];
-
-  return {
-    pos: d.vec4f(pos[input.vertexIndex], 0, 1),
-    uv: uv[input.vertexIndex],
-  };
-});
-
 const renderFragment = tgpu['~unstable'].fragmentFn({
   in: { uv: d.vec2f },
   out: d.vec4f,

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

@@ -1,23 +1,12 @@
 import tgpu from 'typegpu';
 import * as d from 'typegpu/data';
+import { fullScreenTriangle } from 'typegpu/common';
 import { perlin3d } from '@typegpu/noise';
 import { abs, mix, mul, pow, sign, tanh } from 'typegpu/std';
 
 /** The depth of the perlin noise (in time), after which the pattern loops around */
 const DEPTH = 10;
 
-const fullScreenTriangle = tgpu['~unstable'].vertexFn({
-  in: { vertexIndex: d.builtin.vertexIndex },
-  out: { pos: d.builtin.position, uv: d.vec2f },
-})((input) => {
-  const pos = [d.vec2f(-1, -1), d.vec2f(3, -1), d.vec2f(-1, 3)];
-
-  return {
-    pos: d.vec4f(pos[input.vertexIndex], 0.0, 1.0),
-    uv: mul(0.5, pos[input.vertexIndex]),
-  };
-});
-
 const gridSizeAccess = tgpu['~unstable'].accessor(d.f32);
 const timeAccess = tgpu['~unstable'].accessor(d.f32);
 const sharpnessAccess = tgpu['~unstable'].accessor(d.f32);

apps/typegpu-docs/src/examples/simple/liquid-glass/common.ts

@@ -1,8 +1,8 @@
 import tgpu from 'typegpu';
 import * as d from 'typegpu/data';
 import * as std from 'typegpu/std';
+import { fullScreenTriangle } from 'typegpu/common';
 import { sdRoundedBox2d } from '@typegpu/sdf';
-import { fullScreenTriangle } from './common.ts';
 
 const root = await tgpu.init();
 const device = root.device;

apps/typegpu-docs/src/examples/simple/liquid-glass/index.ts

@@ -1,6 +1,7 @@
 import tgpu from 'typegpu';
 import * as d from 'typegpu/data';
 import * as std from 'typegpu/std';
+import { fullScreenTriangle } from 'typegpu/common';
 import { randf } from '@typegpu/noise';
 import * as m from 'wgpu-matrix';
 
@@ -346,19 +347,6 @@ const blur = tgpu['~unstable'].computeFn({
   );
 });
 
-const fullScreenTriangle = tgpu['~unstable'].vertexFn({
-  in: { vertexIndex: d.builtin.vertexIndex },
-  out: { pos: d.builtin.position, uv: d.vec2f },
-})((input) => {
-  const pos = [d.vec2f(-1, -1), d.vec2f(3, -1), d.vec2f(-1, 3)];
-  const uv = [d.vec2f(0, 1), d.vec2f(2, 1), d.vec2f(0, -1)];
-
-  return {
-    pos: d.vec4f(pos[input.vertexIndex], 0, 1),
-    uv: uv[input.vertexIndex],
-  };
-});
-
 const sampler = root['~unstable'].createSampler({
   magFilter: canFilter ? 'linear' : 'nearest',
   minFilter: canFilter ? 'linear' : 'nearest',

apps/typegpu-docs/src/examples/simulation/slime-mold-3d/index.ts

@@ -1,5 +1,6 @@
 import tgpu from 'typegpu';
 import * as d from 'typegpu/data';
+import { fullScreenTriangle } from 'typegpu/common';
 
 const root = await tgpu.init();
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
@@ -47,18 +48,6 @@ let bindGroup = root.createBindGroup(layout, {
   myTexture: texture,
 });
 
-const fullScreenTriangle = tgpu['~unstable'].vertexFn({
-  in: { vertexIndex: d.builtin.vertexIndex },
-  out: { pos: d.builtin.position, uv: d.vec2f },
-})((input) => {
-  const pos = [d.vec2f(-1, -1), d.vec2f(3, -1), d.vec2f(-1, 3)];
-  const uv = [d.vec2f(0, 1), d.vec2f(2, 1), d.vec2f(0, -1)];
-
-  return {
-    pos: d.vec4f(pos[input.vertexIndex], 0, 1),
-    uv: uv[input.vertexIndex],
-  };
-});
 const biasUniform = root.createUniform(d.f32);
 
 const fragmentFunction = tgpu['~unstable'].fragmentFn({

apps/typegpu-docs/src/examples/tests/texture-test/index.ts

@@ -9,7 +9,8 @@
     "./package.json": "./package.json",
     ".": "./src/index.ts",
     "./data": "./src/data/index.ts",
-    "./std": "./src/std/index.ts"
+    "./std": "./src/std/index.ts",
+    "./common": "./src/common/index.ts"
   },
   "publishConfig": {
     "directory": "dist",
@@ -35,6 +36,12 @@
         "module": "./dist/std/index.js",
         "import": "./dist/std/index.js",
         "default": "./dist/std/index.cjs"
+      },
+      "./common": {
+        "types": "./dist/common/index.d.ts",
+        "module": "./dist/common/index.js",
+        "import": "./dist/common/index.js",
+        "default": "./dist/common/index.cjs"
       }
     }
   },

packages/typegpu/package.json

@@ -0,0 +1,29 @@
+import { builtin } from '../builtin.ts';
+import { vertexFn } from '../core/function/tgpuVertexFn.ts';
+import { vec2f } from '../data/vector.ts';
+
+/**
+ * A vertex function that defines a single full-screen triangle out
+ * of three points.
+ *
+ * @example
+ * ```ts
+ * import { fullScreenTriangle } from 'typegpu/common';
+ *
+ * const pipeline = root['~unstable']
+ *   .withVertex(fullScreenTriangle)
+ *   .withFragment(yourFragmentShader)
+ *   .createPipeline();
+ *
+ * pipeline.draw(3);
+ * ```
+ */
+export const fullScreenTriangle = vertexFn({
+  in: { vertexIndex: builtin.vertexIndex },
+  out: { pos: builtin.position, uv: vec2f },
+})`{
+  const pos = array<vec2f, 3>(vec2f(-1, -1), vec2f(3, -1), vec2f(-1, 3));
+  const uv = array<vec2f, 3>(vec2f(0, 1), vec2f(2, 1), vec2f(0, -1));
+
+  return Out(vec4f(pos[in.vertexIndex], 0, 1), uv[in.vertexIndex]);
+}`;

packages/typegpu/src/common/fullScreenTriangle.ts

@@ -0,0 +1 @@
+export { fullScreenTriangle } from './fullScreenTriangle.ts';