WebGL2 versus WebGPU
Quick answer
This tutorial compares the WebGL2 and WebGPU backends behind one luma.gl interface and the five differences that surface at runtime. It registers webgl2Adapter and webgpuAdapter with type best-available, writes GLSL ES 3.00 for WebGL2 but WGSL plus vertexEntryPoint and fragmentEntryPoint for WebGPU, and configures colorAttachmentFormats and depthStencilAttachmentFormat. It also queries features and limits. Readers can ship one codebase across both backends and predict where behaviour diverges.
Key points
- List webgpuAdapter before webgl2Adapter when using type best-available.
- Supply WGSL through source plus vertexEntryPoint and fragmentEntryPoint.
- Query isTextureFormatSupported and device.features before choosing code paths.
Example
import { luma } from '@luma.gl/core';
import { webgl2Adapter } from '@luma.gl/webgl';
import { webgpuAdapter } from '@luma.gl/webgpu';
const device = await luma.createDevice({
type: 'best-available',
adapters: [webgpuAdapter, webgl2Adapter],
createCanvasContext: {
canvas: document.getElementById('cv'),
useDevicePixels: Math.min(window.devicePixelRatio, 2),
autoResize: true
}
});
console.log(device.type); // 'webgpu' 或 'webgl'
console.log(device.info.gpu); // WebGPU 下的适配器信息if (device.type === 'webgl') {
pipeline = device.createRenderPipeline({
vs: glslVS,
fs: glslFS,
topology: 'triangle-list',
bufferLayout: [{ name: 'positions', stepMode: 'vertex', format: 'float32x3' }]
});
} else {
pipeline = device.createRenderPipeline({
source: wgslSource,
vertexEntryPoint: 'vsMain',
fragmentEntryPoint: 'fsMain',
topology: 'triangle-list',
bufferLayout: [{ name: 'positions', stepMode: 'vertex', format: 'float32x3' }],
colorAttachmentFormats: ['rgba8unorm'],
depthStencilAttachmentFormat: device.preferredDepthFormat
});
}Notes
- stage compute works only on WebGPU, so use a fragment pass for portable computation.
- After context loss device.lost settles and every GPU resource must be recreated.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). WebGL2 versus WebGPU. https://www.jingweizhi.com/en/lumagl/tutorials/webgpu-vs-webgl.html (accessed 2026-11-03).