typegpu 0.12.6 → 0.12.8

package/common/writeSoA.js

@@ -5,6 +5,7 @@ import { undecorate } from "../data/dataTypes.js";
 import { offsetsForProps } from "../data/offsets.js";
 import { sizeOf } from "../data/sizeOf.js";
 import { isAtomic, isMat, isMat2x2f, isMat3x3f, isWgslArray } from "../data/wgslTypes.js";
+import { getName } from "../shared/meta.js";
 function packedSchemaOf(schema) {
     const unpackedSchema = undecorate(schema);
     return isAtomic(unpackedSchema) ? unpackedSchema.inner : unpackedSchema;
@@ -92,6 +93,17 @@ function scatterSoA(target, arraySchema, soaData, startOffset, endOffset) {
         }
     }
 }
+// Mirrors the check in `buffer.write()`. That check only runs after the data has been
+// scattered into `buffer.arrayBuffer`, so we check up front to leave it untouched on failure.
+function assertAlignedWrite(buffer, startOffset, endOffset) {
+    // Writes that reach the end of the schema also cover the padding up to a multiple of 4
+    const paddedEndOffset = endOffset === sizeOf(buffer.dataType) ? roundUp(endOffset, 4) : endOffset;
+    if (startOffset % 4 !== 0 || (paddedEndOffset - startOffset) % 4 !== 0) {
+        throw new Error(`Cannot write to bytes ${startOffset}-${endOffset} of buffer '${getName(buffer) ?? '<unnamed>'}'. ` +
+            'WebGPU requires writes to start and end at a multiple of 4 bytes. ' +
+            'Align the range to 4 bytes, write the whole buffer, or use 4-byte elements (e.g. d.u32 instead of d.u16).');
+    }
+}
 export function writeSoA(buffer, data, options) {
     const arrayBuffer = buffer.arrayBuffer;
     const startOffset = options?.startOffset ?? 0;
@@ -99,6 +111,10 @@ export function writeSoA(buffer, data, options) {
     const naturalSize = computeSoAByteLength(buffer.dataType, data);
     const endOffset = options?.endOffset ??
         (naturalSize === undefined ? bufferSize : Math.min(startOffset + naturalSize, bufferSize));
+    // Writes to mapped memory have no alignment rules
+    if (buffer.buffer.mapState !== 'mapped') {
+        assertAlignedWrite(buffer, startOffset, endOffset);
+    }
     scatterSoA(new Uint8Array(arrayBuffer), buffer.dataType, data, startOffset, endOffset);
     buffer.write(arrayBuffer, { startOffset, endOffset });
 }

package/core/buffer/buffer.js

@@ -1,6 +1,7 @@
 import { getCompiledWriter } from "../../data/compiledIO.js";
 import { convertPartialToPatch, getPatchInstructions } from "../../data/partialIO.js";
 import { sizeOf } from "../../data/sizeOf.js";
+import { roundUp } from "../../mathUtils.js";
 import { isWgslData } from "../../data/wgslTypes.js";
 import { getName, setName } from "../../shared/meta.js";
 import { $internal, $soul } from "../../shared/symbols.js";
@@ -10,6 +11,14 @@ import { patchArrayBuffer } from "../../data/partialIO.js";
 import { mutable, readonly, uniform, } from "./bufferBinding.js";
 import { warnIfNotUniformAligned } from "../pipeline/webgpuLimitations.js";
 const usageToUsageConstructor = { uniform, mutable, readonly };
+/**
+ * WebGPU requires buffer sizes, writes, copies and mappings
+ * to be multiples of 4 bytes. Schemas like `arrayOf(u16, 3)` can have a smaller logical
+ * size, so the underlying allocation gets padded up to the next multiple of 4.
+ */
+function physicalSizeOf(schema) {
+    return roundUp(sizeOf(schema), 4);
+}
 export function INTERNAL_createBuffer(group, typeSchema, initialOrBuffer) {
     if (!isWgslData(typeSchema)) {
         return new TgpuBufferImpl(group, typeSchema, initialOrBuffer, ['storage', 'uniform']);
@@ -32,7 +41,7 @@ class TgpuBufferImpl {
     #destroyed = false;
     #internalBuffer;
     get #hostBuffer() {
-        return (this.#internalBuffer ??= new ArrayBuffer(sizeOf(this.dataType)));
+        return (this.#internalBuffer ??= new ArrayBuffer(physicalSizeOf(this.dataType)));
     }
     #mappedRange;
     #initialCallback;
@@ -76,7 +85,7 @@ class TgpuBufferImpl {
                 const soul = this[$soul];
                 if (!soul.raw) {
                     soul.raw = soul.device.createBuffer({
-                        size: sizeOf(soul.dataType),
+                        size: physicalSizeOf(soul.dataType),
                         usage: soul.flags,
                         mappedAtCreation: !!this.initial || !!this.#initialCallback,
                         label: getName(this) ?? '<unnamed>',
@@ -195,15 +204,31 @@ class TgpuBufferImpl {
             writeToArrayBuffer(mapped, this.dataType, data, options);
             return;
         }
+        const { startOffset, endOffset } = calculateOffsets(options, this.dataType, data);
+        const size = this.#alignedWriteSize(startOffset, endOffset);
         // If the caller already wrote directly into #hostBuffer via
         // arrayBuffer, skip the redundant copy, the data is already in place.
         if (!(data instanceof ArrayBuffer && data === this.#hostBuffer)) {
             writeToArrayBuffer(this.#hostBuffer, this.dataType, data, options);
         }
-        const { startOffset, endOffset } = calculateOffsets(options, this.dataType, data);
-        const size = endOffset - startOffset;
         this[$soul].device.queue.writeBuffer(gpuBuffer, startOffset, this.#hostBuffer, startOffset, size);
     }
+    /**
+     * Returns the number of bytes to upload when writing to `[startOffset, endOffset)`.
+     * Writes that reach the end of the schema also cover the trailing padding (see {@link physicalSizeOf}).
+     * Other writes have to be 4-byte aligned already, since filling in the neighboring bytes
+     * from the host could overwrite data that was changed on the GPU.
+     */
+    #alignedWriteSize(startOffset, endOffset) {
+        const paddedEndOffset = endOffset === sizeOf(this.dataType) ? physicalSizeOf(this.dataType) : endOffset;
+        const size = paddedEndOffset - startOffset;
+        if (startOffset % 4 !== 0 || size % 4 !== 0) {
+            throw new Error(`Cannot write to bytes ${startOffset}-${endOffset} of buffer '${getName(this) ?? '<unnamed>'}'. ` +
+                'WebGPU requires writes to start and end at a multiple of 4 bytes. ' +
+                'Align the range to 4 bytes, write the whole buffer, or use 4-byte elements (e.g. d.u32 instead of d.u16).');
+        }
+        return size;
+    }
     /** @deprecated Use {@link patch} instead. */
     writePartial(data) {
         this.patch(convertPartialToPatch(this.dataType, data));
@@ -214,9 +239,19 @@ class TgpuBufferImpl {
             patchArrayBuffer(this.#getMappedRange(), this.dataType, data);
         }
         else {
-            const instructions = getPatchInstructions(this.dataType, data, this.#hostBuffer);
-            for (const { data, gpuOffset } of instructions) {
-                this[$soul].device.queue.writeBuffer(gpuBuffer, gpuOffset, data);
+            // Every range is validated before the patch touches #hostBuffer, so a failing patch
+            // is neither uploaded halfway nor left behind in `arrayBuffer`
+            const instructions = getPatchInstructions(this.dataType, data, this.#hostBuffer, (start, end) => this.#alignedWriteSize(start, end));
+            for (const { data, gpuOffset, uploadSize } of instructions) {
+                if (uploadSize === data.byteLength) {
+                    this[$soul].device.queue.writeBuffer(gpuBuffer, gpuOffset, data);
+                }
+                else {
+                    // Extending the write into the trailing padding (see physicalSizeOf)
+                    const padded = new Uint8Array(uploadSize);
+                    padded.set(data);
+                    this[$soul].device.queue.writeBuffer(gpuBuffer, gpuOffset, padded);
+                }
             }
         }
     }
@@ -238,7 +273,7 @@ class TgpuBufferImpl {
         if (this.buffer.mapState === 'mapped') {
             throw new Error('Cannot copy to a mapped buffer.');
         }
-        const size = sizeOf(this.dataType);
+        const size = physicalSizeOf(this.dataType);
         if (encoder) {
             encoder[$internal].rawEncoder.copyBufferToBuffer(srcBuffer.buffer, 0, this.buffer, 0, size);
             return;
@@ -258,14 +293,15 @@ class TgpuBufferImpl {
             this.#unmapBuffer();
             return res;
         }
+        const size = physicalSizeOf(this.dataType);
         const stagingBuffer = this[$soul].device.createBuffer({
-            size: sizeOf(this.dataType),
+            size,
             usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ,
         });
         const commandEncoder = this[$soul].device.createCommandEncoder();
-        commandEncoder.copyBufferToBuffer(gpuBuffer, 0, stagingBuffer, 0, sizeOf(this.dataType));
+        commandEncoder.copyBufferToBuffer(gpuBuffer, 0, stagingBuffer, 0, size);
         this[$soul].device.queue.submit([commandEncoder.finish()]);
-        await stagingBuffer.mapAsync(GPUMapMode.READ, 0, sizeOf(this.dataType));
+        await stagingBuffer.mapAsync(GPUMapMode.READ, 0, size);
         const res = readFromArrayBuffer(stagingBuffer.getMappedRange(), this.dataType);
         stagingBuffer.unmap();
         stagingBuffer.destroy();

package/core/commandEncoder/attachments.js

@@ -1,16 +1,19 @@
+import { WeakMemo } from "../../memo.js";
 import { $internal } from "../../shared/symbols.js";
 import { isQuerySet } from "../querySet/querySet.js";
 import { isGPUCanvasContext } from "../pipeline/typeGuards.js";
 import { isTexture, isTextureView, } from "../texture/texture.js";
+// Canvas contexts return the same texture within a frame, so its identity is enough to cache views
+const defaultAttachmentViews = new WeakMemo((texture) => texture.createView());
 export function unwrapAttachmentView(root, view) {
     if (isTexture(view)) {
-        return root.unwrap(view).createView();
+        return defaultAttachmentViews.getOrMake(root.unwrap(view));
     }
     if (isTextureView(view)) {
         return root.unwrap(view);
     }
     if (isGPUCanvasContext(view)) {
-        return view.getCurrentTexture().createView();
+        return defaultAttachmentViews.getOrMake(view.getCurrentTexture());
     }
     return view;
 }

package/core/function/autoIO.js

@@ -39,7 +39,8 @@ export class AutoFragmentFn {
             setName(impl, 'fragmentFn');
         }
         this.#core = createFnCore(impl, 'fragment');
-        this.autoIn = new AutoStruct({ ...builtinFragmentIn, ...varyings }, undefined, locations);
+        this.autoIn = new AutoStruct({ ...builtinFragmentIn, ...varyings }, undefined, locations, 
+        /* autoInterpolateIntegers */ true);
         setName(this.autoIn, 'FragmentIn');
         this.autoOut = new AutoStruct(builtinFragmentOut, vec4f);
         setName(this.autoOut, 'FragmentOut');
@@ -66,9 +67,10 @@ export class AutoVertexFn {
             setName(impl, 'vertexFn');
         }
         this.#core = createFnCore(impl, 'vertex');
-        this.autoIn = new AutoStruct({ ...builtinVertexIn, ...attribs }, undefined, locations);
+        this.autoIn = new AutoStruct({ ...builtinVertexIn, ...attribs }, undefined);
         setName(this.autoIn, 'VertexIn');
-        this.autoOut = new AutoStruct(builtinVertexOut, undefined);
+        this.autoOut = new AutoStruct(builtinVertexOut, undefined, locations, 
+        /* autoInterpolateIntegers */ true);
         setName(this.autoOut, 'VertexOut');
     }
     toString() {

package/core/function/comptime.js

@@ -2,7 +2,8 @@ import { WgslTypeError } from "../../errors.js";
 import { setName } from "../../shared/meta.js";
 import { $getNameForward, $gpuCallable, $internal } from "../../shared/symbols.js";
 import { coerceToSnippet } from "../../tgsl/generationHelpers.js";
-import { isKnownAtComptime, NormalState } from "../../types.js";
+import { stringifySnippet } from "../../tgsl/stringifySnippet.js";
+import { asComptime, NormalState } from "../../types.js";
 export function isComptimeFn(value) {
     return !!value?.[$internal]?.isComptime;
 }
@@ -38,15 +39,16 @@ export function comptime(func) {
     impl[$getNameForward] = func;
     impl[$gpuCallable] = {
         call(ctx, args) {
-            if (!args.every((s) => isKnownAtComptime(s))) {
+            const comptimeArgs = args.map((s) => asComptime(s));
+            if (!comptimeArgs.every((s) => s !== undefined)) {
                 throw new WgslTypeError(`Called comptime function with runtime-known values: ${args
-                    .filter((s) => !isKnownAtComptime(s))
-                    .map((s) => `'${s.value}'`)
+                    .filter((_, idx) => comptimeArgs[idx] === undefined)
+                    .map((s) => `'${stringifySnippet(s)}'`)
                     .join(', ')}`);
             }
             ctx.pushMode(new NormalState());
             try {
-                return coerceToSnippet(func(...args.map((s) => s.value)));
+                return coerceToSnippet(func(...comptimeArgs.map((s) => s.value)));
             }
             finally {
                 ctx.popMode();

package/core/function/createCallableSchema.js

@@ -3,7 +3,7 @@ import { isPtr } from "../../data/wgslTypes.js";
 import { setName } from "../../shared/meta.js";
 import { $gpuCallable } from "../../shared/symbols.js";
 import { tryConvertSnippet } from "../../tgsl/conversion.js";
-import { isKnownAtComptime, NormalState } from "../../types.js";
+import { asComptime, NormalState } from "../../types.js";
 export function callableSchema(options) {
     const impl = ((...args) => {
         return options.normalImpl(...args);
@@ -30,10 +30,11 @@ export function callableSchema(options) {
                 return tryConvertSnippet(ctx, s, argType, false);
             });
             let result;
-            if (converted.every((s) => isKnownAtComptime(s))) {
+            const comptimeArgs = converted.map((s) => asComptime(s));
+            if (comptimeArgs.every((s) => s !== undefined)) {
                 ctx.pushMode(new NormalState());
                 try {
-                    result = snip(options.normalImpl(...converted.map((s) => s.value)), options.schema(), 
+                    result = snip(options.normalImpl(...comptimeArgs.map((s) => s.value)), options.schema(), 
                     // Functions give up ownership of their return value
                     /* origin */ 'constant');
                 }

package/core/function/dualImpl.js

@@ -3,7 +3,7 @@ import { setName } from "../../shared/meta.js";
 import { $gpuCallable } from "../../shared/symbols.js";
 import { tryConvertSnippet } from "../../tgsl/conversion.js";
 import { concretize } from "../../tgsl/generationHelpers.js";
-import { isKnownAtComptime, NormalState } from "../../types.js";
+import { asComptime, NormalState } from "../../types.js";
 import { isPtr } from "../../data/wgslTypes.js";
 export class MissingCpuImplError extends Error {
     constructor(message) {
@@ -43,25 +43,26 @@ export function dualImpl(options) {
                 }
                 return tryConvertSnippet(ctx, s, argType, !options.ignoreImplicitCastWarning);
             });
-            if (!options.noComptime &&
-                converted.every((s) => isKnownAtComptime(s)) &&
-                typeof options.normalImpl === 'function') {
-                ctx.pushMode(new NormalState());
-                try {
-                    return snip(options.normalImpl(...converted.map((s) => s.value)), returnType, 
-                    // Functions give up ownership of their return value
-                    /* origin */ 'constant', options.sideEffects);
-                }
-                catch (e) {
-                    // cpuImpl may in some cases be present but implemented only partially.
-                    // In that case, if the MissingCpuImplError is thrown, we fallback to codegenImpl.
-                    // If it is any other error, we just rethrow.
-                    if (!(e instanceof MissingCpuImplError)) {
-                        throw e;
+            if (!options.noComptime && typeof options.normalImpl === 'function') {
+                const comptimeArgs = converted.map((s) => asComptime(s));
+                if (comptimeArgs.every((s) => s !== undefined)) {
+                    ctx.pushMode(new NormalState());
+                    try {
+                        return snip(options.normalImpl(...comptimeArgs.map((s) => s.value)), returnType, 
+                        // Functions give up ownership of their return value
+                        /* origin */ 'constant', options.sideEffects);
+                    }
+                    catch (e) {
+                        // cpuImpl may in some cases be present but implemented only partially.
+                        // In that case, if the MissingCpuImplError is thrown, we fallback to codegenImpl.
+                        // If it is any other error, we just rethrow.
+                        if (!(e instanceof MissingCpuImplError)) {
+                            throw e;
+                        }
+                    }
+                    finally {
+                        ctx.popMode('normal');
                     }
-                }
-                finally {
-                    ctx.popMode('normal');
                 }
             }
             const possibleSideEffects = options.sideEffects || args.some((a) => a.possibleSideEffects);

package/core/function/ioSchema.d.ts

@@ -7,7 +7,22 @@ export type WithLocations<T extends Record<string, BaseData>> = {
 export type IOLayoutToSchema<T> = T extends BaseData ? HasCustomLocation<T> extends true ? T : Decorate<T, Location<0>> : T extends Record<string, BaseData> ? WgslStruct<WithLocations<T>> : T extends {
     type: 'void';
 } ? void : never;
-export declare function withLocations<T extends BaseData>(members: Record<string, T> | undefined, locations?: Record<string, number>): Record<string, BaseData>;
+/**
+ * Assigns locations to members.
+ * The priority of assigned location is as follows:
+ * - location already present in member,
+ * - location provided in `locations`,
+ * - a free number.
+ *
+ * Assumes `locations` are consistent with already decorated `members`,
+ * throws if a location is repeated.
+ */
+export declare function withLocations<T extends BaseData>(members: Record<string, T> | undefined, locations?: Record<string, number>, autoInterpolateIntegers?: boolean): Record<string, BaseData>;
 export declare function separateBuiltins(schema: Record<string, BaseData>, locations?: Record<string, number>): SeparatedEntryArgs;
 export declare function separateAllAsPositional(schema: Record<string, BaseData>): SeparatedEntryArgs;
-export declare function createIoSchema<T extends BaseData | Record<string, BaseData>>(layout: T, locations?: Record<string, number>): IOLayoutToSchema<T>;
+export declare function createIoSchema<T extends BaseData | Record<string, BaseData>>(layout: T, locations?: Record<string, number>, autoInterpolateIntegers?: boolean): IOLayoutToSchema<T>;
+/**
+ * WGSL requires integer inter-stage values to be flat interpolated. Interpolation is only
+ * inferred for shellless entry functions, so shells have to specify it explicitly.
+ */
+export declare function assertIntegerVaryingsInterpolated(layout: BaseData | Record<string, BaseData> | undefined, location: string): void;

package/core/function/ioSchema.js

@@ -1,32 +1,44 @@
-import { location, } from "../../data/attributes.js";
+import { interpolate, location, } from "../../data/attributes.js";
 import { isBuiltin } from "../../data/attributes.js";
 import { getCustomLocation, isData } from "../../data/dataTypes.js";
 import { INTERNAL_createStruct } from "../../data/struct.js";
-import { isVoid } from "../../data/wgslTypes.js";
-export function withLocations(members, locations = {}) {
+import { isDecorated, isInteger, isIntegerVec, isInterpolateAttrib, isVoid, } from "../../data/wgslTypes.js";
+/**
+ * Assigns locations to members.
+ * The priority of assigned location is as follows:
+ * - location already present in member,
+ * - location provided in `locations`,
+ * - a free number.
+ *
+ * Assumes `locations` are consistent with already decorated `members`,
+ * throws if a location is repeated.
+ */
+export function withLocations(members, locations = {}, autoInterpolateIntegers = false) {
     let nextLocation = 0;
-    const usedCustomLocations = new Set();
-    return Object.fromEntries(Object.entries(members ?? {})
+    const usedCustomLocations = new Set([
+        ...Object.values(locations),
+        ...Object.values(members ?? {})
+            .map(getCustomLocation)
+            .filter((v) => v !== undefined),
+    ]);
+    const entries = Object.entries(members ?? {})
         .map(([key, member]) => {
-        const customLocation = getCustomLocation(member);
-        if (customLocation !== undefined) {
-            if (usedCustomLocations.has(customLocation)) {
-                throw new Error('Duplicate custom location attributes found');
-            }
-            usedCustomLocations.add(customLocation);
-        }
-        return [key, member];
+        // Interpolate
+        const interpolated = autoInterpolateIntegers
+            ? withFlatInterpolationForInteger(member)
+            : member;
+        return [key, interpolated];
     })
         .map(([key, member]) => {
+        // Assign locations
         if (isBuiltin(member)) {
-            // skipping builtins
             return [key, member];
         }
         if (getCustomLocation(member) !== undefined) {
             // this member is already marked
             return [key, member];
         }
-        if (locations[key]) {
+        if (locations[key] !== undefined) {
             // location has been determined by a previous procedure
             return [key, location(locations[key], member)];
         }
@@ -34,7 +46,19 @@ export function withLocations(members, locations = {}) {
             nextLocation++;
         }
         return [key, location(nextLocation++, member)];
-    }));
+    });
+    // Check for duplicate locations
+    const used = new Map();
+    entries.forEach(([key, member]) => {
+        const location = getCustomLocation(member);
+        if (location !== undefined) {
+            if (used.has(location)) {
+                throw new Error(`Location '${location}' is used by multiple keys: '${used.get(location)}', '${key}'.`);
+            }
+            used.set(location, key);
+        }
+    });
+    return Object.fromEntries(entries);
 }
 export function separateBuiltins(schema, locations = {}) {
     const positionalArgs = [];
@@ -57,15 +81,38 @@ export function separateAllAsPositional(schema) {
     const positionalArgs = Object.entries(withLocs).map(([key, type]) => ({ schemaKey: key, type }));
     return { dataSchema: undefined, positionalArgs };
 }
-export function createIoSchema(layout, locations = {}) {
-    return (isData(layout)
-        ? isVoid(layout)
-            ? layout
-            : isBuiltin(layout)
-                ? layout
-                : getCustomLocation(layout) !== undefined
-                    ? layout
-                    : location(0, layout)
-        : INTERNAL_createStruct(withLocations(layout, locations), 
-        /* isAbstruct */ false));
+export function createIoSchema(layout, locations = {}, autoInterpolateIntegers = false) {
+    if (isData(layout)) {
+        if (isVoid(layout) || isBuiltin(layout)) {
+            return layout;
+        }
+        return (getCustomLocation(layout) !== undefined ? layout : location(0, layout));
+    }
+    return INTERNAL_createStruct(withLocations(layout, locations, autoInterpolateIntegers), 
+    /* isAbstruct */ false);
+}
+function needsFlatInterpolation(data) {
+    if (isBuiltin(data) || (isDecorated(data) && data.attribs.some(isInterpolateAttrib))) {
+        return false;
+    }
+    const inner = isDecorated(data) ? data.inner : data;
+    return isInteger(inner) || isIntegerVec(inner);
+}
+function withFlatInterpolationForInteger(data) {
+    return needsFlatInterpolation(data) ? interpolate('flat', data) : data;
+}
+/**
+ * WGSL requires integer inter-stage values to be flat interpolated. Interpolation is only
+ * inferred for shellless entry functions, so shells have to specify it explicitly.
+ */
+export function assertIntegerVaryingsInterpolated(layout, location) {
+    if (layout === undefined || isData(layout)) {
+        // A single value is either a builtin or a fragment output, neither are varyings
+        return;
+    }
+    for (const [key, member] of Object.entries(layout)) {
+        if (needsFlatInterpolation(member)) {
+            throw new Error(`Integer value "${key}" in ${location} requires flat interpolation. Wrap its schema in d.interpolate('flat', ...) or d.interpolate('flat, either', ...).`);
+        }
+    }
 }

package/core/function/tgpuFn.d.ts

@@ -6,7 +6,7 @@ import type { Prettify } from '../../shared/utilityTypes.ts';
 import type { DualFn } from '../../types.ts';
 import { type Providing } from '../slot/slotTypes.ts';
 import type { AnyFn, Implementation, InferArgs, InferImplSchema, InheritArgNames } from './fnTypes.ts';
-import type { Withable } from '../root/rootTypes.ts';
+import type { Configurable, Withable } from '../root/rootTypes.ts';
 /**
  * Describes a function signature (its arguments and return type)
  */
@@ -29,6 +29,11 @@ interface TgpuFnBase<ImplSchema extends AnyFn> extends TgpuNamable, Withable<Tgp
     readonly shell: TgpuFnShellHeader<Parameters<ImplSchema>, Extract<ReturnType<ImplSchema>, BaseData>>;
     readonly [$providing]?: Providing | undefined;
     $uses(dependencyMap: Record<string, unknown>): this;
+    /**
+     * Applies a configuration transform to the slots and accessors this function reads,
+     * as `root.pipe` does to a pipeline's.
+     */
+    pipe(transform: (cfg: Configurable) => Configurable): TgpuFn<ImplSchema>;
 }
 export type TgpuFn<ImplSchema extends AnyFn = (...args: any[]) => any> = DualFn<InferImplSchema<ImplSchema>> & TgpuFnBase<ImplSchema>;
 /**
@@ -40,6 +45,11 @@ export interface TgpuGenericFn<T extends AnyFn> extends TgpuNamable, Withable<Tg
     };
     readonly [$providing]?: Providing | undefined;
     readonly resourceType: 'generic-function';
+    /**
+     * Applies a configuration transform to the slots and accessors this function reads,
+     * as `root.pipe` does to a pipeline's.
+     */
+    pipe(transform: (cfg: Configurable) => Configurable): TgpuGenericFn<T>;
     (...args: Parameters<T>): ReturnType<T>;
 }
 export declare function fn<Args extends BaseData[] | []>(argTypes: Args, returnType?: undefined): TgpuFnShell<Args, Void>;

package/core/function/tgpuFn.js

@@ -12,6 +12,7 @@ import { dualImpl } from "./dualImpl.js";
 import { createFnCore } from "./fnCore.js";
 import { stripTemplate } from "./templateUtils.js";
 import { comptime } from "./comptime.js";
+import { ConfigurableImpl } from "../root/configurableImpl.js";
 export function fn(argTypesOrCallback, returnType) {
     if (typeof argTypesOrCallback === 'function') {
         return createGenericFn(argTypesOrCallback, []);
@@ -39,6 +40,9 @@ export function isGenericFn(value) {
 function stringifyPair([slot, value]) {
     return `${getName(slot) ?? '<unnamed>'}=${value}`;
 }
+function bindingsOf(transform) {
+    return transform(new ConfigurableImpl([])).bindings;
+}
 function createFn(shell, _implementation) {
     let pairs = [];
     // Unwrapping generic functions
@@ -68,6 +72,7 @@ function createFn(shell, _implementation) {
             const s = isAccessor(slot) || isMutableAccessor(slot) ? slot.slot : slot;
             return createBoundFunction(fn, [[s, value]]);
         }),
+        pipe: comptime((transform) => createBoundFunction(fn, bindingsOf(transform))),
         [$resolve](ctx) {
             if (typeof implementation === 'string') {
                 addArgTypesToExternals(implementation, shell.argTypes, core);
@@ -129,6 +134,7 @@ function createBoundFunction(innerFn, pairs) {
             const s = isAccessor(slot) || isMutableAccessor(slot) ? slot.slot : slot;
             return createBoundFunction(innerFn, [...pairs, [s, value]]);
         }),
+        pipe: comptime((transform) => createBoundFunction(innerFn, [...pairs, ...bindingsOf(transform)])),
     };
     const call = dualImpl({
         name: undefined, // setting name here would override autonaming
@@ -170,10 +176,11 @@ function createGenericFn(inner, pairs) {
         [$resolve](ctx) {
             return ctx.resolve(inner);
         },
-        with(slot, value) {
+        with: comptime((slot, value) => {
             const s = isAccessor(slot) || isMutableAccessor(slot) ? slot.slot : slot;
             return createGenericFn(inner, [...pairs, [s, value]]);
-        },
+        }),
+        pipe: comptime((transform) => createGenericFn(inner, [...pairs, ...bindingsOf(transform)])),
     };
     const call = (...args) => {
         return inner(...args);

package/core/function/tgpuFragmentFn.d.ts

@@ -13,7 +13,7 @@ export type VertexOutToVarying<T> = OmitBuiltins<{
     [K in keyof T]: InstanceToSchema<T[K]>;
 }>;
 type FragmentColorValue = Vec4f | Vec4i | Vec4u;
-export type FragmentOutConstrained = IOLayout<FragmentColorValue | Decorated<FragmentColorValue, (Location | Interpolate)[]> | AnyFragmentOutputBuiltin>;
+export type FragmentOutConstrained = IOLayout<FragmentColorValue | Decorated<FragmentColorValue, Location[]> | AnyFragmentOutputBuiltin>;
 /**
  * Describes a fragment entry function signature (its arguments, return type and targets)
  */

package/core/function/tgpuFragmentFn.js

@@ -3,7 +3,7 @@ import { $getNameForward, $internal, $resolve } from "../../shared/symbols.js";
 import { addReturnTypeToExternals } from "../resolve/externals.js";
 import { shaderStageSlot } from "../slot/internalSlots.js";
 import { createFnCore } from "./fnCore.js";
-import { createIoSchema, separateBuiltins } from "./ioSchema.js";
+import { assertIntegerVaryingsInterpolated, createIoSchema, separateBuiltins, } from "./ioSchema.js";
 import { stripTemplate } from "./templateUtils.js";
 /**
  * Creates a shell of a typed entry function for the fragment shader stage. Any function
@@ -55,6 +55,7 @@ function createFragmentFn(shell, implementation) {
             return this;
         },
         [$resolve](ctx) {
+            assertIntegerVaryingsInterpolated(shell.in, `fragmentFn (${getName(this) ?? '<unnamed>'}) input`);
             const entryInput = separateBuiltins(shell.in ?? {}, ctx.varyingLocations ?? {});
             if (entryInput.dataSchema && isNamable(entryInput.dataSchema)) {
                 entryInput.dataSchema.$name(`${getName(this) ?? ''}_Input`);

package/core/function/tgpuVertexFn.js

@@ -2,7 +2,7 @@ import { getName, setName } from "../../shared/meta.js";
 import { $getNameForward, $internal, $resolve } from "../../shared/symbols.js";
 import { shaderStageSlot } from "../slot/internalSlots.js";
 import { createFnCore } from "./fnCore.js";
-import { createIoSchema, separateAllAsPositional } from "./ioSchema.js";
+import { assertIntegerVaryingsInterpolated, createIoSchema, separateAllAsPositional, } from "./ioSchema.js";
 import { stripTemplate } from "./templateUtils.js";
 /**
  * Creates a shell of a typed entry function for the vertex shader stage. Any function
@@ -50,6 +50,7 @@ function createVertexFn(shell, implementation) {
             return this;
         },
         [$resolve](ctx) {
+            assertIntegerVaryingsInterpolated(shell.out, `vertexFn (${getName(this) ?? '<unnamed>'}) output`);
             const outputWithLocation = createIoSchema(shell.out, ctx.varyingLocations).$name(`${getName(this) ?? ''}_Output`);
             if (typeof implementation === 'string') {
                 core.setExternals('out', { Out: outputWithLocation });

package/core/pipeline/connectAttachmentToShader.d.ts

@@ -1,4 +1,4 @@
-import { type BaseData } from '../../data/wgslTypes.ts';
 import type { ColorAttachment } from '../commandEncoder/attachments.ts';
+import type { ConnectedTarget } from './connectTargetsToShader.ts';
 import type { AnyFragmentColorAttachment } from './renderPipeline.ts';
-export declare function connectAttachmentToShader(fragmentOut: BaseData, attachment: AnyFragmentColorAttachment): ColorAttachment[];
+export declare function connectAttachmentToShader(connectedTargets: (ConnectedTarget | null)[] | undefined, attachment: AnyFragmentColorAttachment): (ColorAttachment | null)[];