Metal to WebGPU
Paste Metal and get WGSL, the shading language of WebGPU: your functions as they are, or a whole module that draws a shader full screen in any browser. It all happens on this page.
What the module expects
| Binding | Name | Type |
|---|
All in group 0. Uniforms is 32 bytes: resolution (two floats, in pixels), time and timeDelta in seconds, mouse (two floats, in pixels from the bottom left; the middle when there is no pointer), then frame and a pad. Params is one float for each // @param line, in order, rounded up to 16 bytes. Draw three vertices: rk_vertex makes one triangle over the screen, with uv from 0 at the bottom left to 1 at the top right. A shader with sound also has the compute pass rk_sound.
What it takes
Metal as Ray Kiln writes it: functions, structs and constants, and a shader's float4 shade(float2 uv, constant Uniforms& u, constant Params& p). That covers the maths and texture-free shaders the episodes are made of; vertex functions, textures and Metal's own attributes don't convert yet, and the converter names the line it stopped at. It is the converter the playground runs every episode through, tested on all of them.