Using an external typed function in existing WebGPU programs.

[iwoplaza]

Scenario

The developer wants to use the function rand1f from the typegpu-noise package in their vanilla WebGPU project, and does not want to migrate their codebase to use TypeGPU.

Their custom shader resembles the following code:

// shader.wgsl

@compute @workgroup_size(32, 1, 1)
fn main() {
  // ...
  let value = rand1f(); // external function
  // ...
}

Steps to succeed

1. Run @typegpu/tgpu-cli to generate typed definitions based on a .wgsl file.

tgpu-cli gen -i shader.wgsl -o shader.js

The generated file will look like:

// shader.js

/* generated via tgpu-cli by TypeGPU */

import tgpu from 'typegpu';

export const main = tgpu
  .computeFn([32, 1, 1])
  .implement(/* wgsl */`
    // ...
    let value = rand1f(); // external function
    // ...
  `);

3. In a file that the dev owns, e.g. main.js, add import to the external typed function you want to call, and to the entry function.

import { rand1f } from 'typegpu-noise';
import { main } from './shader.js';

4. Link the external function to the main function.

main.$uses({ rand1f });

5. Unwrap the entry function to retrieve the raw WGSL

const root = await tgpu.init();

const computeShader = device.createShaderModule({ code: root.unwrap(main) });