explainx / blog
WebGPU guide: next-generation graphics API for high-performance 3D, compute shaders, ML inference, and real-time data visualization in the browser.
Apr 24, 2026
HTML Canvas is a powerful API for creating dynamic graphics, animations, games, and visualizations directly in the browser. This guide covers everything from basic shapes to advanced techniques like pixel manipulation, transformations, and performance optimization.
Jun 27, 2026
Chrome extensions are small apps that run inside your browser and can modify any web page. This guide walks you through exactly what they are, how the three required files fit together, and a complete working example you can load into Chrome in under ten minutes.
Jun 27, 2026
Next.js from zero: what it is, why people use it, how to install it with create-next-app, and how to build your first pages with the App Router. Real commands, no assumed knowledge.
WebGPU marks one of the most significant structural upgrades to the web platform in over a decade. In 2026, it has matured into a legitimate high-performance graphics and compute environment that unlocks capabilities previously reserved for native applications—real-time 3D rendering, GPU compute, ML inference, and advanced data visualization all running directly in the browser.
This comprehensive guide covers everything from fundamental concepts to practical implementation, with performance insights and real-world use cases based on 2026 production deployments.
WebGPU is a modern web API that provides low-level access to GPU hardware for both graphics (3D rendering) and compute (general-purpose GPU calculations). Unlike its predecessor WebGL—which was based on OpenGL ES from 2011—WebGPU is built on modern GPU APIs:
This foundation gives WebGPU better performance, more features, and a cleaner API that reflects how modern GPUs actually work.
| Factor | WebGL 2.0 | WebGPU |
|---|---|---|
| Based on | OpenGL ES 3.0 (2012) | Vulkan/Metal/D3D12 (2020s) |
| API design | Implicit state machine | Explicit command encoding |
| Performance | Good | Excellent (20-50% faster typical) |
| Compute shaders | No (workarounds only) | Yes (first-class support) |
| Modern features | Limited | Ray tracing, mesh shaders, etc. |
| Learning curve | Moderate | Steep initially, cleaner long-term |
| Browser support (2026) | Universal | Chrome, Edge, Safari (Firefox in dev) |
| Best for | Legacy apps, wide compatibility | New apps, performance-critical work |
When to use WebGPU over WebGL:
When to stick with WebGL:
WebGPU starts by requesting an adapter (represents physical GPU) and device (logical interface):
// Request adapter
const adapter = await navigator.gpu.requestAdapter();
if (!adapter) {
console.error('WebGPU not supported');
return;
}
// Request device
const device = await adapter.requestDevice();
// Handle device loss
device.lost.then((info) => {
console.error('Device lost:', info.message);
// Recreate device
});
WebGPU uses an explicit pipeline that defines how vertices become pixels:
const pipeline = device.createRenderPipeline({
layout: 'auto',
vertex: {
module: device.createShaderModule({ code: vertexShaderCode }),
entryPoint: 'main',
buffers: [vertexBufferLayout]
},
fragment: {
module: device.createShaderModule({ code: fragmentShaderCode }),
entryPoint: 'main',
targets: [{
format: navigator.gpu.getPreferredCanvasFormat()
}]
},
primitive: {
topology: 'triangle-list'
}
});
WebGPU uses WGSL (WebGPU Shading Language), not GLSL:
// Vertex shader
struct VertexOutput {
@builtin(position) position: vec4<f32>,
@location(0) color: vec4<f32>,
}
@vertex
fn main(@location(0) position: vec2<f32>,
@location(1) color: vec3<f32>) -> VertexOutput {
var output: VertexOutput;
output.position = vec4<f32>(position, 0.0, 1.0);
output.color = vec4<f32>(color, 1.0);
return output;
}
// Fragment shader
@fragment
fn main(@location(0) color: vec4<f32>) -> @location(0) vec4<f32> {
return color;
}
WGSL key differences from GLSL:
WebGPU uses command buffers for explicit GPU control:
// Create command encoder
const commandEncoder = device.createCommandEncoder();
// Begin render pass
const renderPass = commandEncoder.beginRenderPass({
colorAttachments: [{
view: context.getCurrentTexture().createView(),
clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 },
loadOp: 'clear',
storeOp: 'store',
}]
});
// Record commands
renderPass.setPipeline(pipeline);
renderPass.setVertexBuffer(0, vertexBuffer);
renderPass.draw(3); // Draw 3 vertices (triangle)
renderPass.end();
// Submit to GPU
device.queue.submit([commandEncoder.finish()]);
const canvas = document.querySelector('canvas');
const context = canvas.getContext('webgpu');
const canvasFormat = navigator.gpu.getPreferredCanvasFormat();
context.configure({
device: device,
format: canvasFormat,
});
// Triangle vertices (position + color)
const vertices = new Float32Array([
// X, Y, R, G, B
0.0, 0.5, 1.0, 0.0, 0.0, // Top (red)
-0.5, -0.5, 0.0, 1.0, 0.0, // Bottom-left (green)
0.5, -0.5, 0.0, 0.0, 1.0, // Bottom-right (blue)
]);
// Create vertex buffer
const vertexBuffer = device.createBuffer({
size: vertices.byteLength,
usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
});
device.queue.writeBuffer(vertexBuffer, 0, vertices);
const vertexBufferLayout = {
arrayStride: 20, // 5 floats * 4 bytes
attributes: [
{
// Position
shaderLocation: 0,
offset: 0,
format: 'float32x2',
},
{
// Color
shaderLocation: 1,
offset: 8,
format: 'float32x3',
}
]
};
function render() {
const commandEncoder = device.createCommandEncoder();
const renderPass = commandEncoder.beginRenderPass({
colorAttachments: [{
view: context.getCurrentTexture().createView(),
clearValue: { r: 0.1, g: 0.1, b: 0.1, a: 1.0 },
loadOp: 'clear',
storeOp: 'store',
}]
});
renderPass.setPipeline(pipeline);
renderPass.setVertexBuffer(0, vertexBuffer);
renderPass.draw(3);
renderPass.end();
device.queue.submit([commandEncoder.finish()]);
requestAnimationFrame(render);
}
render();
Compute shaders are WebGPU's superpower—they enable general-purpose GPU computing for tasks like:
// Compute shader (WGSL)
const computeShader = `
@group(0) @binding(0) var<storage, read> input: array<f32>;
@group(0) @binding(1) var<storage, read_write> output: array<f32>;
@compute @workgroup_size(64)
fn main(@builtin(global_invocation_id) global_id: vec3<u32>) {
let i = global_id.x;
// Example: square each value
output[i] = input[i] * input[i];
}
`;
// Create compute pipeline
const computePipeline = device.createComputePipeline({
layout: 'auto',
compute: {
module: device.createShaderModule({ code: computeShader }),
entryPoint: 'main',
}
});
// Create buffers
const inputData = new Float32Array([1, 2, 3, 4, 5]);
const inputBuffer = device.createBuffer({
size: inputData.byteLength,
usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
});
device.queue.writeBuffer(inputBuffer, 0, inputData);
const outputBuffer = device.createBuffer({
size: inputData.byteLength,
usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC,
});
// Create bind group
const bindGroup = device.createBindGroup({
layout: computePipeline.getBindGroupLayout(0),
: [
{ : , : { : inputBuffer } },
{ : , : { : outputBuffer } },
],
});
commandEncoder = device.();
passEncoder = commandEncoder.();
passEncoder.(computePipeline);
passEncoder.(, bindGroup);
passEncoder.(.(inputData. / ));
passEncoder.();
device..([commandEncoder.()]);
| Task | CPU (JavaScript) | GPU (WebGPU Compute) | Speedup |
|---|---|---|---|
| 1M float operations | ~15ms | ~0.5ms | 30x |
| Image blur (4K) | ~200ms | ~8ms | 25x |
| Particle physics (10K) | ~50ms | ~2ms | 25x |
| Matrix multiplication (512×512) | ~100ms | ~3ms | 33x |
Benchmarks from production deployments on mid-range GPUs (RTX 3060, M1 Pro)
Financial dashboards rendering millions of data points:
// Render 1M+ candlesticks with WebGPU instancing
renderPass.setPipeline(candlestickPipeline);
renderPass.setVertexBuffer(0, instanceBuffer);
renderPass.draw(6, 1000000); // 6 vertices per candlestick, 1M instances
Why WebGPU: WebGL struggles above 100K instances; WebGPU handles millions.
3D modeling applications like Figma 3D, Spline, and Womp use WebGPU for:
TensorFlow.js and ONNX Runtime Web leverage WebGPU for 10-50x faster inference:
// TensorFlow.js with WebGPU backend
await tf.setBackend('webgpu');
const model = await tf.loadLayersModel('model.json');
const prediction = model.predict(inputTensor);
Interactive physics, fluid dynamics, and molecular visualization:
Unity, Unreal, and custom engines targeting web:
1. Minimize CPU-GPU transfers
// BAD: Update buffer every frame
device.queue.writeBuffer(buffer, 0, data); // Slow
// GOOD: Use double buffering or update only changed data
device.queue.writeBuffer(buffer, offset, partialData);
2. Use bind group caching
// Cache bind groups to avoid recreation
const bindGroupCache = new Map();
function getBindGroup(key) {
if (!bindGroupCache.has(key)) {
bindGroupCache.set(key, device.createBindGroup({...}));
}
return bindGroupCache.get(key);
}
3. Batch draw calls
// BAD: Many draw calls
for (let i = 0; i < 1000; i++) {
renderPass.draw(6, 1, 0, i); // 1000 draw calls
}
// GOOD: Single instanced draw call
renderPass.draw(6, 1000); // 1 draw call with instancing
4. Use compute for heavy calculations
Move physics, animation, and data processing to compute shaders instead of JavaScript.
| Tool | Use Case |
|---|---|
| Chrome DevTools | GPU timeline, memory, validation |
| WebGPU Error Scopes | Detailed error tracking |
| RenderDoc | Frame capture and analysis |
| GPU vendor tools | NVIDIA Nsight, AMD Radeon Profiler |
if (!navigator.gpu) {
console.error('WebGPU not supported');
// Fallback to WebGL or canvas
return;
}
const adapter = await navigator.gpu.requestAdapter();
if (!adapter) {
console.error('No appropriate GPU adapter found');
return;
}
// Check for optional features
const hasTimestampQuery = adapter.features.has('timestamp-query');
const hasDepthClipControl = adapter.features.has('depth-clip-control');
| Browser | Support | Notes |
|---|---|---|
| Chrome 113+ | ✅ Full | Stable since 2023 |
| Edge 113+ | ✅ Full | Same as Chrome (Chromium) |
| Safari 17+ | ✅ Full | macOS/iOS support |
| Firefox | 🟡 Experimental | Behind flag, stable soon |
| Mobile browsers | ✅ Growing | iOS Safari, Android Chrome |
| Pitfall | Problem | Solution |
|---|---|---|
| Validation errors | Pipeline creation fails | Enable validation layers, read error messages |
| Buffer alignment | Data corruption | Follow alignment rules (4/16 byte boundaries) |
| Resource cleanup | Memory leaks | Call destroy() on buffers, textures |
| Excessive CPU-GPU sync | Poor performance | Avoid mapAsync in hot paths |
| No fallback | Broken on unsupported browsers | Detect support, provide WebGL/Canvas fallback |
Combining WebGPU (GPU compute) with WebAssembly (CPU performance) enables near-native performance for complex applications:
// WASM handles game logic
const wasmModule = await WebAssembly.instantiateStreaming(fetch('game.wasm'));
// WebGPU handles rendering
function gameLoop() {
// Update (WASM)
wasmModule.instance.exports.update(deltaTime);
// Render (WebGPU)
renderScene(device, context);
requestAnimationFrame(gameLoop);
}
Use cases:
For more on WebAssembly, see our WebAssembly guide.
WebGPU represents a fundamental shift in what's possible on the web. In 2026, it has moved from experimental to production-ready, powering everything from financial dashboards to browser-based CAD tools to ML inference.
Key takeaways:
Start with simple examples, gradually build complexity, and don't hesitate to use libraries like Three.js (adding WebGPU support) or Babylon.js to abstract complexity while learning.
For live data integration with your WebGPU visualizations, explore the MCP ecosystem to connect to real-time data sources.
Further reading:
Happy rendering!