Before (edit me!):
function dft(inputData = new Float32Array(), outputData = []) { const N = i32(inputData.length); const k = threadId.x; let sum = vec2f(0, 0); for (let n = 0; n < N; n++) { const phase = 2 * Math.PI * f32(k) * f32(n) / f32(N); sum = sum + vec2f( inputData[n] * Math.cos(phase), -inputData[n] * Math.sin(phase) ); } const outputIndex = k * 2; if (outputIndex + 1 < outputData.length) { outputData[outputIndex] = sum.x; outputData[outputIndex + 1] = sum.y; } return { inputData, outputData }; } After:
//Bindings (data passed to/from CPU) struct InputDataStruct { values: array<f32> }; @group(0) @binding(0) var<storage, read_write> inputData: InputDataStruct; struct OutputDataStruct { values: array<f32> }; @group(0) @binding(1) var<storage, read_write> outputData: OutputDataStruct; //Main function call //threadId tells us what x,y,z thread we are on @compute @workgroup_size(64) fn compute_main( @builtin(global_invocation_id) threadId: vec3<u32>, //shader grid position @builtin(local_invocation_id) localId: vec3<u32>, //workgroup grid position @builtin(local_invocation_index) localIndex: u32, //linear index within workgroup grid @builtin(num_workgroups) workgroups: vec3<u32>, //dispatch size (x,y,z) group count @builtin(workgroup_id) workgroupId: vec3<u32> //position of workgroup in compute shader grid ) { let N = i32(arrayLength(&inputData.values)); let k = threadId.x; var sum = vec2f(0, 0); for (var n = 0; n < N; n++) { let phase = 2 * 3.141592653589793 * f32(k) * f32(n) / f32(N); sum = sum + vec2f( inputData.values[n] * cos(phase), -inputData.values[n] * sin(phase) ); } let outputIndex = k * 2; if (outputIndex + 1 < arrayLength(&outputData.values)) { outputData.values[outputIndex] = sum.x; outputData.values[outputIndex + 1] = sum.y; } //return { inputData, outputData }; }

Before (edit me!):
function vertexExample() { const tri = array( //consts get extracted vec2f(0, 0.5), vec2f(-0.5, -0.5), vec2f(0.5, -0.5) ); const cols = [ vec4f(1, 0, 0, 1), vec4f(0, 1, 0, 1), vec4f(0, 0, 1, 1) ]; color = cols[vertexIndex]; position = vec4f(tri[vertexIndex], 0, 1); } After:
//Bindings (data passed to/from CPU) const cols : array<vec4f, 3> = array<vec4f, 3>( vec4f(1, 0, 0, 1), vec4f(0, 1, 0, 1), vec4f(0, 0, 1, 1) ); const tri = array( //consts get extracted vec2f(0, 0.5), vec2f(-0.5, -0.5), vec2f(0.5, -0.5) ); struct Vertex { @builtin(position) position: vec4<f32>, //pixel location //uploaded vertices from CPU, in interleaved format @location(0) color: vec4f }; @vertex fn vtx_main( @builtin(vertex_index) vertexIndex : u32, //current vertex @builtin(instance_index) instanceIndex: u32, //current instance @location(0) colorIn: vec4f ) -> Vertex { var pixel: Vertex; pixel.color = cols[vertexIndex]; pixel.position = vec4f(tri[vertexIndex], 0, 1); return pixel; }

Before (edit me!):
function fragmentExample() { return color; } After:
//Bindings (data passed to/from CPU) struct Vertex { @builtin(position) position: vec4<f32>, //pixel location //uploaded vertices from CPU, in interleaved format @location(0) color: vec4f }; @fragment fn frag_main( pixel: Vertex, @builtin(front_facing) is_front: bool, //true when current fragment is on front-facing primitive @builtin(sample_index) sampleIndex: u32, //sample index for the current fragment @builtin(sample_mask) sampleMask: u32 //contains a bitmask indicating which samples in this fragment are covered by the primitive being rendered ) -> @location(0) vec4<f32> { return pixel.color; }