Skip to main content

Engine

Overview

@luma.gl/engine turns common rendering patterns into reusable classes. Geometry describes CPU-side attributes, ShaderInputs manages shader-module values, and Model connects them to Core resources, pipelines, bindings, and draw calls while tracking redraw needs. The generated Engine API index at /docs/api-reference/generated/engine contains every public value and TypeScript type with source links.

When to use it

Use Engine for most rendered applications. Drop to Core when you need exact resource or command control. Use Shadertools to make shader behavior reusable. Add GPU scheduling only when work becomes a scheduled GPU dataflow; a single Model does not need a graph.

Live example

This portable example maps the Engine objects to the Core work they manage.

Loading interactive example…

Core concepts

resourceA GPU object or logical value that work reads or writes, such as a buffer, texture, pipeline, or graph allocation.
A GPU object or logical value that work reads or writes, such as a buffer, texture, pipeline, or graph allocation.
bindingThe connection that makes a buffer, texture, sampler, or uniform block available to shader code.
The connection that makes a buffer, texture, sampler, or uniform block available to shader code.
pipelineCompiled shader stages plus fixed GPU state used for rendering or compute work.
Compiled shader stages plus fixed GPU state used for rendering or compute work.
passA related sequence of render or compute commands recorded against a defined set of outputs.
A related sequence of render or compute commands recorded against a defined set of outputs.
redrawA request to render another frame because visible state changed; it is not necessarily a continuous loop.
A request to render another frame because visible state changed; it is not necessarily a continuous loop.
ownershipThe responsibility for destroying a GPU resource and deciding how long it remains valid.
The responsibility for destroying a GPU resource and deciding how long it remains valid.

The learning spine is: geometry, shader inputs, models, redraw/frame lifecycle, dynamic resources, interaction and picking, scenegraphs, animation, compute helpers, and postprocessing. Engine objects wrap Core resources but do not make ownership disappear.

Engine conceptCore work it manages
GeometryBuffer data + BufferLayout
ShaderInputsBindings + uniform/storage buffers
ModelShaders + RenderPipeline + VertexArray
model.draw(pass)Pass bindings + draw command
needsRedraw()Whether another submission is necessary

Feature card

GeometryKeep CPU attributes and shader-facing GPU layouts connected without hiding either side.
ModelOwn the shaders, pipeline, bindings, geometry, and draw contract for one rendered object.
Shader inputsUpdate module props and bindings through one structured interface.
Demand-driven redrawRender when visible state changes instead of continuously burning GPU time.
Interaction and scenesCompose picking, controls, hierarchy, and reusable scenegraph nodes.
Animation, compute, and passesAdd time-varying state, GPU transforms, and postprocessing with focused helpers.

Workflows

  1. Learn the workflowBuild the mental model before choosing classes.
  2. Copy a focused recipeStart from a complete, small task.
  3. Check the complete APIConfirm exact types, defaults, and ownership.

The Engine cookbook covers rendering, updates, on-demand animation, picking and highlighting, scenes, and shader passes.

API index

Reusable geometry, shader inputs, models, redraw state, interaction, animation, compute, and postprocessing.

  • Geometry
  • Shader inputs
  • Model
  • Redraw lifecycle
  • Picking and scenes
  • Animation, compute, and passes

The generated Engine API index is the exhaustive, source-linked inventory of every public value and TypeScript export. The curated pages explain how the related families fit together.

Limits and compatibility

  • Engine is portable where its underlying Core resources and shaders are portable.
  • Provide WGSL and GLSL when the same application must run on WebGPU and WebGL.
  • A redraw flag avoids unnecessary rendering only when the application honors it.
  • Experimental helpers are labeled in their individual references and may have narrower backend support.
  • Use Core for direct resource and command control.
  • Use Shadertools for modules, hooks, and plugins.
  • Use GPU scheduling for scheduled multi-stage GPU work.