fix: Disallow missing varyings in shell-less fragment input (#2165)

iwoplaza · web-flow · commit e8804de23e92 · 2026-02-16T20:52:50.000+01:00
diff --git a/apps/typegpu-docs/src/examples/rendering/perlin-noise/index.ts b/apps/typegpu-docs/src/examples/rendering/perlin-noise/index.ts
@@ -1,15 +1,11 @@
-import tgpu, { common, d } from 'typegpu';
 import { perlin3d } from '@typegpu/noise';
+import tgpu, { common, d } from 'typegpu';
 import { abs, mix, mul, pow, sign, tanh } from 'typegpu/std';
 import { defineControls } from '../../common/defineControls.ts';
 
 /** The depth of the perlin noise (in time), after which the pattern loops around */
 const DEPTH = 10;
 
-const gridSizeAccess = tgpu['~unstable'].accessor(d.f32);
-const timeAccess = tgpu['~unstable'].accessor(d.f32);
-const sharpnessAccess = tgpu['~unstable'].accessor(d.f32);
-
 const exponentialSharpen = (n: number, sharpness: number): number => {
   'use gpu';
   return sign(n) * pow(abs(n), 1 - sharpness);
@@ -20,30 +16,6 @@ const tanhSharpen = (n: number, sharpness: number): number => {
   return tanh(n * (1 + sharpness * 10));
 };
 
-const sharpenFnSlot = tgpu.slot<(n: number, sharpness: number) => number>(
-  exponentialSharpen,
-);
-
-const mainFragment = tgpu['~unstable'].fragmentFn({
-  in: { uv: d.vec2f },
-  out: d.vec4f,
-})((input) => {
-  const uv = mul(gridSizeAccess.$, input.uv);
-
-  const n = perlin3d.sample(d.vec3f(uv, timeAccess.$));
-
-  // Apply sharpening function
-  const sharp = sharpenFnSlot.$(n, sharpnessAccess.$);
-
-  // Map to 0-1 range
-  const n01 = sharp * 0.5 + 0.5;
-
-  // Gradient map
-  const dark = d.vec3f(0, 0.2, 1);
-  const light = d.vec3f(1, 0.3, 0.5);
-  return d.vec4f(mix(dark, light, n01), 1);
-});
-
 // Configuring a dynamic (meaning it's size can change) cache
 // for perlin noise gradients.
 const perlinCacheConfig = perlin3d.dynamicCacheConfig();
@@ -53,38 +25,46 @@ const dynamicLayout = tgpu.bindGroupLayout({ ...perlinCacheConfig.layout });
 
 const root = await tgpu.init();
 
+const gridSize = root.createUniform(d.f32);
+const time = root.createUniform(d.f32, 0);
+const sharpness = root.createUniform(d.f32, 0.1);
+
 // Instantiating the cache with an initial size.
 const perlinCache = perlinCacheConfig.instance(root, d.vec3u(4, 4, DEPTH));
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
 const context = root.configureContext({ canvas, alphaMode: 'premultiplied' });
 const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
 
-const gridSize = root.createUniform(d.f32);
-const time = root.createUniform(d.f32, 0);
-const sharpness = root.createUniform(d.f32, 0.1);
-
-const renderPipelineBase = root['~unstable']
-  .with(gridSizeAccess, gridSize)
-  .with(timeAccess, time)
-  .with(sharpnessAccess, sharpness)
-  .pipe(perlinCacheConfig.inject(dynamicLayout.$));
-
-const renderPipelines = {
-  exponential: renderPipelineBase
-    .with(sharpenFnSlot, exponentialSharpen)
-    .createRenderPipeline({
-      vertex: common.fullScreenTriangle,
-      fragment: mainFragment,
-      targets: { format: presentationFormat },
-    }),
-  tanh: renderPipelineBase
-    .with(sharpenFnSlot, tanhSharpen)
+const createRenderPipeline = (
+  sharpenFn: (n: number, sharpness: number) => number,
+) =>
+  root['~unstable']
+    .pipe(perlinCacheConfig.inject(dynamicLayout.$))
     .createRenderPipeline({
       vertex: common.fullScreenTriangle,
-      fragment: mainFragment,
+      fragment: ({ uv }) => {
+        'use gpu';
+        const suv = mul(gridSize.$, uv);
+        const n = perlin3d.sample(d.vec3f(suv, time.$));
+
+        // Apply sharpening function
+        const sharp = sharpenFn(n, sharpness.$);
+
+        // Map to 0-1 range
+        const n01 = sharp * 0.5 + 0.5;
+
+        // Gradient map
+        const dark = d.vec3f(0, 0.2, 1);
+        const light = d.vec3f(1, 0.3, 0.5);
+        return d.vec4f(mix(dark, light, n01), 1);
+      },
       targets: { format: presentationFormat },
-    }),
+    });
+
+const renderPipelines = {
+  exponential: createRenderPipeline(exponentialSharpen),
+  tanh: createRenderPipeline(tanhSharpen),
 };
 
 let activeSharpenFn: 'exponential' | 'tanh' = 'exponential';
@@ -118,7 +98,7 @@ export const controls = defineControls({
     initial: '4',
     options: [1, 2, 4, 8, 16, 32, 64, 128, 256].map((x) => x.toString()),
     onSelectChange: (value: string) => {
-      const iSize = Number.parseInt(value);
+      const iSize = Number.parseInt(value, 10);
       perlinCache.size = d.vec3u(iSize, iSize, DEPTH);
       gridSize.write(iSize);
       bindGroup = root.createBindGroup(dynamicLayout, perlinCache.bindings);
diff --git a/packages/typegpu/src/core/function/tgpuFragmentFn.ts b/packages/typegpu/src/core/function/tgpuFragmentFn.ts
@@ -48,9 +48,9 @@ export type FragmentInConstrained = IORecord<
   | AnyFragmentInputBuiltin
 >;
 
-export type FragmentInFromVertexOut<T> =
-  & OmitBuiltins<{ [K in keyof T]: InstanceToSchema<T[K]> }>
-  & Record<string, AnyFragmentInputBuiltin>;
+export type VertexOutToVarying<T> = OmitBuiltins<
+  { [K in keyof T]: InstanceToSchema<T[K]> }
+>;
 
 type FragmentColorValue = Vec4f | Vec4i | Vec4u;
 
diff --git a/packages/typegpu/src/core/root/rootTypes.ts b/packages/typegpu/src/core/root/rootTypes.ts
@@ -1,4 +1,8 @@
-import type { AnyComputeBuiltin, OmitBuiltins } from '../../builtin.ts';
+import type {
+  AnyComputeBuiltin,
+  AnyFragmentInputBuiltin,
+  OmitBuiltins,
+} from '../../builtin.ts';
 import type { TgpuQuerySet } from '../../core/querySet/querySet.ts';
 import type {
   AnyData,
@@ -56,9 +60,9 @@ import type {
 import type { IORecord } from '../function/fnTypes.ts';
 import type {
   FragmentInConstrained,
-  FragmentInFromVertexOut,
   FragmentOutConstrained,
   TgpuFragmentFn,
+  VertexOutToVarying,
 } from '../function/tgpuFragmentFn.ts';
 import type { TgpuVertexFn } from '../function/tgpuVertexFn.ts';
 import type { TgpuComputePipeline } from '../pipeline/computePipeline.ts';
@@ -300,13 +304,14 @@ export interface WithBinding extends Withable<WithBinding> {
           ) => AutoVertexOut<Assume<TVertexOut, AnyAutoCustoms>>);
         fragment:
           | TgpuFragmentFn<
-            FragmentInFromVertexOut<TVertexOut>,
+            & VertexOutToVarying<TVertexOut>
+            & Record<string, AnyFragmentInputBuiltin>,
             Assume<TFragmentOut, TgpuFragmentFn.Out>
           >
           | ((
             input: AutoFragmentIn<
               Assume<
-                InferGPURecord<FragmentInFromVertexOut<TVertexOut>>,
+                InferGPURecord<VertexOutToVarying<TVertexOut>>,
                 AnyAutoCustoms
               >
             >,
@@ -339,7 +344,8 @@ export interface WithBinding extends Withable<WithBinding> {
         fragment?:
           | undefined
           | TgpuFragmentFn<
-            FragmentInFromVertexOut<OmitBuiltins<TVertexOut>>,
+            & VertexOutToVarying<OmitBuiltins<TVertexOut>>
+            & Record<string, AnyFragmentInputBuiltin>,
             Record<string, never> | Void
           >
           | ((
@@ -387,7 +393,8 @@ export interface WithBinding extends Withable<WithBinding> {
               >,
             ) => AutoFragmentOut<Assume<TFragmentOut, AnyAutoCustoms | v4f>>)
             | TgpuFragmentFn<
-              FragmentInFromVertexOut<OmitBuiltins<TVertexOut>>,
+              & VertexOutToVarying<OmitBuiltins<TVertexOut>>
+              & Record<string, AnyFragmentInputBuiltin>,
               Assume<TFragmentOut, TgpuFragmentFn.Out>
             >;
           targets: FragmentOutToTargets<NoInfer<TFragmentOut>>;
@@ -407,7 +414,8 @@ export interface WithBinding extends Withable<WithBinding> {
           fragment?:
             | undefined
             | TgpuFragmentFn<
-              FragmentInFromVertexOut<OmitBuiltins<TVertexOut>>,
+              & VertexOutToVarying<OmitBuiltins<TVertexOut>>
+              & Record<string, AnyFragmentInputBuiltin>,
               Record<string, never>
             >
             | ((
diff --git a/packages/typegpu/tests/examples/individual/perlin-noise.test.ts b/packages/typegpu/tests/examples/individual/perlin-noise.test.ts
@@ -141,13 +141,13 @@ describe('perlin noise example', () => {
 
       @group(0) @binding(2) var<uniform> sharpness: f32;
 
-      struct mainFragment_Input {
+      struct FragmentIn {
         @location(0) uv: vec2f,
       }
 
-      @fragment fn mainFragment(input: mainFragment_Input) -> @location(0) vec4f {
-        var uv = (gridSize * input.uv);
-        let n = sample(vec3f(uv, time));
+      @fragment fn fragment(_arg_0: FragmentIn) -> @location(0) vec4f {
+        var suv = (gridSize * _arg_0.uv);
+        let n = sample(vec3f(suv, time));
         let sharp = exponentialSharpen(n, sharpness);
         let n01 = ((sharp * 0.5f) + 0.5f);
         var dark = vec3f(0, 0.20000000298023224, 1);
diff --git a/packages/typegpu/tests/renderPipeline.test.ts b/packages/typegpu/tests/renderPipeline.test.ts
@@ -1314,6 +1314,7 @@ describe('root.createRenderPipeline', () => {
         'use gpu';
         return { $position: d.vec4f() };
       },
+      // @ts-expect-error: The prop is not in the object
       fragment: ({ prop }) => {
         'use gpu';
         const a = prop;
