WebGPU Instanced Lines
High-performance, flexible GPU-accelerated line rendering for WebGPU. This is a direct port of regl-gpu-lines to WebGPU. The focus is on speed and customizability rather than sophisticated stroke expansion algorithms.
Contents
Interactive demo
The visualization below shows basic line rendering with debug visualizations when Debug view is enabled.
Installation
npm install webgpu-instanced-lines
Usage
import { createGPULines } from 'webgpu-instanced-lines';
const gpuLines = createGPULines(device, {
format: canvasFormat,
join: 'round',
cap: 'round',
vertexShaderBody: /* wgsl */`
@group(1) @binding(0) var<storage, read> positions: array<vec4f>;
struct Vertex {
position: vec4f,
width: f32,
}
fn getVertex(index: u32) -> Vertex {
return Vertex(positions[index], 10.0);
}
`,
fragmentShaderBody: /* wgsl */`
fn getColor(lineCoord: vec2f) -> vec4f {
return vec4f(0.2, 0.5, 0.9, 1.0);
}
`
});
// In render loop:
gpuLines.draw(pass, {
vertexCount: numPoints,
resolution: [canvas.width, canvas.height]
}, [dataBindGroup]);
For background on GPU line rendering, see Matt DesLauriers’ Drawing Lines is Hard and Rye Terrell’s Instanced Line Rendering.