AnimationLoop
Quick answer
AnimationLoop bundles a Device with per-frame callbacks, replacing a hand-written requestAnimationFrame loop. Supply onInitialize, onRender, onFinalize and onError, and it manages timing, viewport resizing and cleanup. Use it for standalone luma.gl demos; inside deck.gl, the Deck instance already owns the frame loop.
new AnimationLoop ( props ) → AnimationLoop
Key points
- Constructor takes device, onInitialize, onRender, onFinalize and onError callbacks.
- autoResizeViewport keeps the viewport matched to the device pixel ratio each frame.
- Call stop() to halt frames and destroy() to release device resources.
Example
const loop = new AnimationLoop({
device: device,
onInitialize: function (props) {
console.log('画布尺寸', props.width, props.height);
},
onRender: function (props) {
const pass = props.device.beginRenderPass({
clearColor: [0.05, 0.07, 0.10, 1]
});
model.draw(pass);
pass.end();
},
onFinalize: function () {
model.destroy();
},
onError: function (error) {
console.error('渲染出错', error);
}
});
await loop.start();onRender: function (props) {
if (!loop.needsRedraw()) return;
const pass = props.device.beginRenderPass({ clearColor: [0, 0, 0, 1] });
model.draw(pass);
pass.end();
}
loop.setNeedsRedraw('data-updated');Notes
- device is required in v9; the loop never creates one for you.
- Forgetting to call start() leaves the callbacks registered but no frames running.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). AnimationLoop. https://www.jingweizhi.com/en/lumagl/api/animation-loop.html (accessed 2026-11-03).