Examples
Explore practical examples demonstrating how to use Gridwise WebGPU primitives for scan, sort, and reduce operations. Each example includes code snippets, explanations of key concepts, and links to source code and performance benchmarks.
Scan Example
Compact example that demonstrates exclusive vs inclusive scans using DLDFScan: how to choose scanType, build the input array, run the primitive, and validate outputs. Good for understanding prefix-sum semantics and the effect of different binary ops (add/max/min).
Open the page, pick parameters in the pane (datatype/binop/input length), click Start, then inspect the result and plots.
Scan Types
Exclusive: Output[i] = sum of all elements before position i (output[0] is identity).
Inclusive: Output[i] = sum of all elements up to and including position i.
Binary Operations
Add, Min, Max — combines elements using the specified operation. Custom operations supported via binop.mjs.
Supported Data Types
u32, i32, f32 — all data types work with all binary operations.
Code Structure
const primitive = new DLDFScan({
device,
binop: new BinOpAdd({ datatype: "u32" }),
type: "exclusive",
datatype: "u32"
});
// Inclusive scan with max operation
const primitive = new DLDFScan({
device,
binop: new BinOpMax({ datatype: "i32" }),
type: "inclusive",
datatype: "i32"
});
Key/Value Sort Demo
Demonstrates OneSweepSort with two modes: key-only sorting and key-value pair sorting with payload validation. Shows how to configure the primitive for different operations and data types.
Open the page, pick parameters in the pane (datatype/binop/input length), click Start, then inspect the result and plots.
Sort Operations
Sort Keys: Sorts only the keys array in ascending or descending order.
Sort Pairs: Sorts keys while maintaining associated payloads, useful for sorting complex data structures.
Supported Data Types
u32, i32, f32 — all data types support both sort modes with configurable sort direction.
Code Structure
const primitive = new OneSweepSort({
device,
datatype: "u32",
direction: "ascending",
copyOutputToTemp: true,
inputLength: 1024
});
// Key-value pair sort
const primitive = new OneSweepSort({
device,
datatype: "u32",
direction: "ascending",
copyOutputToTemp: true,
type: "keyvalue",
inputLength: 1024
});
Reduce Operation
A minimal, hands-on example showing how to run the reduce primitive end-to-end: device setup, buffer upload, a single execution, and result readback. Use this to learn the basic API calls and validation pattern. Parameters shown: datatype and binop (add/max/min). Ideal as the first example before any benchmarking.
Open the page, pick parameters in the pane (datatype/binop/input length), click Start, then inspect the result and plots.
What is Reduce?
Reduces an entire array to a single value by repeatedly applying a binary operation across all elements.
Binary Operations
Add, Min, Max — aggregates all elements using the specified operation. Custom operations supported via binop.mjs.
Supported Data Types
u32, i32, f32 — all data types work with all binary operations.
Code Structure
const primitive = new DLDFScan({
device,
binop: new BinOpAdd({ datatype: "u32" }),
type: "reduce",
datatype: "u32"
});
// Reduce with min operation
const primitive = new DLDFScan({
device,
binop: new BinOpMin({ datatype: "i32" }),
type: "reduce",
datatype: "i32"
});