luma.gl and deck.gl
Quick answer
This tutorial positions luma.gl as the GPU abstraction beneath deck.gl and explains which layer owns which responsibility. It maps Deck and MapboxOverlay to layers such as ScatterplotLayer and GeoJsonLayer, then down to Device, Buffer, Model and RenderPipeline, and lists the v9 packages core, webgl, webgpu, shadertools and engine. It ends with criteria for writing luma.gl directly instead of a custom deck.gl layer. Readers can decide where their rendering code belongs.
Key points
- Register adapters explicitly, since v9 no longer auto-registers them.
- Reach for luma.gl when custom passes, depth, blending or instancing are required.
- Use deck.gl layers when accessors, picking and transitions already suffice.
Example
import { luma } from '@luma.gl/core';
import { webgl2Adapter } from '@luma.gl/webgl';
import { Model, AnimationLoop } from '@luma.gl/engine';
const device = await luma.createDevice({
type: 'webgl',
adapters: [webgl2Adapter],
createCanvasContext: { canvas }
});
const buffer = device.createBuffer(new Float32Array([
-0.5, -0.5, 0,
0.5, -0.5, 0,
0.0, 0.5, 0
]));
const model = new Model(device, {
vs: vertexShaderSource,
fs: fragmentShaderSource,
attributes: { positions: buffer },
bufferLayout: [
{ name: 'positions', stepMode: 'vertex', format: 'float32x3' }
],
vertexCount: 3,
topology: 'triangle-list'
});
const loop = new AnimationLoop({
device,
onRender: function (props) {
const pass = props.device.beginRenderPass({ clearColor: [0.05, 0.07, 0.1, 1] });
model.draw(pass);
pass.end();
}
});
loop.start();Notes
- Omitting the adapter yields No matching device found with little extra detail.
- luma.gl is a low-level GPU abstraction, not a simpler replacement for three.js.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). luma.gl and deck.gl. https://www.jingweizhi.com/en/lumagl/tutorials/luma-and-deck.html (accessed 2026-11-03).