v148 · Graphics · demo

Linear Memory Visualizer

See how the WebGPU linear-indexing optional feature maps 2D texture coordinates to flat linear buffer indices. Reshape the same 256-element grid and watch indices reflow in real time.

⟳ Checking WebGPU availability…
Grid shape:
16 × 16 grid — 256 cells — linear index gradient Canvas 2D fallback
Hover a cell to see coordinates and linear index.
WGSL Shader — Linear Index Calculation
Performance Comparison — JavaScript index calculation vs simulated linear-indexing shader path
MethodTime (ms)Relative
Standard 2D indexing (row × width + col) —
Linear indexing (direct flat offset) — 
// WebGPU linear-indexing optional feature check
const adapter = await navigator.gpu.requestAdapter();
const hasLinear = adapter.features.has('linear-indexing');

const device = await adapter.requestDevice({
  requiredFeatures: hasLinear ? ['linear-indexing'] : [],
});

// WGSL: with linear-indexing, access buffer[linear_index] directly
// without the 2D coord multiplication
@group(0) @binding(0) var<storage, read> data: array<f32>;

@compute @workgroup_size(16, 16)
fn main(@builtin(global_invocation_id) id: vec3u) {
  // Standard path: manual row-major calculation
  let idx_standard = id.y * 16u + id.x;

  // Linear-indexing path: hardware-accelerated flat access
  let idx_linear = linearIndex(id.xy, vec2u(16u, 16u));

  let value = data[idx_linear];
}

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗