Skip to main content


The Device class manages the application's connection with the GPU, providing methods to:

  • create GPU resources
  • query the capabilities of the GPU
  • detect GPU error conditions.

A Device instance is created through the luma.createDevice(...) method. Note that the actual Device returned by luma.createDevice() will be either a WebGLDevice wrapping a WebGL context or a WebGPUDevice wrapping a WebGPU device based on what the run-time environment supports.

The Device API is intentionally designed to be similar to the WebGPU GPUDevice class API with changes to enable a WebGL2 implementation.


Create a new Device, auto creating a canvas and a new WebGL 2 context

import {Device} from '';
const device = new luma.createDevice({type: 'webgl2'});

Attaching a Device to an externally created WebGL2RenderingContext.

import {Device} from '';
import {Model} from '';

const gl = canvas.createContext('webgl2');
const device = Device.attach(gl);

const model = new Model(device, options);

Handle GPU disconnections:

if (!device.isLost) {
console.error('Device lost');

const {message} = await device.lost;



type'best-available''webgpu', 'webgl', 'best-available'
canvasN/AA string id of an existing HTML element or a DOMElement. If not provided, a new canvas will be created.
debug?: booleanfalseWebGL API calls will be logged to the console and WebGL errors will generate JavaScript exceptions.
break?: string[][]Insert a break point (debugger) if one of the listed gl functions is called.
alpha?: booleantrueDefault render target has an alpha buffer.
depth?: booleantrueDefault render target has a depth buffer of at least 16 bits.
stencil?falseDefault render target has a stencil buffer of at least 8 bits.
antialias?trueBoolean that indicates whether or not to perform anti-aliasing.
premultipliedAlpha?trueBoolean that indicates that the page compositor will assume the drawing buffer contains colors with pre-multiplied alpha.
preserveDrawingBuffer?falseDefault render target buffers will preserve their values until cleared or overwritten. Useful for screen capture.
failIfMajorPerformanceCaveat?falseDo not create if the system performance is low.



readonly id: string

A string identifier, for debug purposes.


statsManager: StatsManager

Provides access to bags of stats containing information about resource usage and performance of the device.


props: Required<DeviceProps>

A readonly copy of the props that were used to create this device.


userData: Record<string, any>

Reserved for the application.


info: DeviceInfo

Information about the device (vendor, versions etc).

Get debug information about the device:

vendorstringGPU vendor (unmasked if possible)
rendererstringRenderer (unmasked if possible)
versionstringWebGL version
gpustringGPU name
gpuBackend?string'angle' | 'metal' | 'unknown'
shadingLanguagestringshading language ('glsl' | 'wgsl')
shadingLanguageVersionnumbershading language version


  • Shading language version is the highest supported version of the device's shading language.
  • Version numbers are calculated as: <major version> * 100 + <minor version> * 10 + <patch version>.
  • The WGSL version is always 100
  • The GLSL version is always 300 (WebGL2).
  • Sometimes a vendor provides multiple backends (e.g. Apple ANGLE vs Apple Metal)
  • WebGPU Devices currently do not provide much information due to limitations in the WebGPU API.
  • WebGL Devices can usually provide rich information (through the WEBGL_debug_renderer_info extension).


features: Set<DeviceFeature>

Applications can determine whether the device implements an optional features by checking device.features.has(...).


limits: DeviceLimits

An object with various device limits. WebGPU style.


isTextureFormatSupported(format: TextureFormat): boolean

Check if device supports a specific texture format (creation and nearest sampling).


isTextureFormatFilterable(format: TextureFormat): boolean

Check if linear filtering (sampler interpolation) is supported for a specific texture format.


isTextureFormatRenderable(format: TextureFormat): boolean

Check if device supports rendering to a specific texture format.


isLost: boolean

True if the device is already lost (GPU is disconnected).


lost: Promise<{reason: 'destroyed', message: string}>

Promise that resolves with an error message if the device is lost (GPU is disconnected).


GPU disconnections normally happen when the computer goes to sleep but it can also happen when too many applications use the GPU, too many Device instances are created etc.


Recovering from a lost GPU device is typically challenging as all GPU resources need to be recreated. For applications that auto-save state, it may be better to simply reload the page or ask the user to reload the page.


canvasContext?: CanvasContext

Returns the default CanvasContext.

Note that a WebGPU Device may not have a canvas context.




Device is an abstract class and the constructor should not be called directly. Use the static Device.create() method to create classes.


Releases resources associated with this Device.


WebGPU only. Calling device.destroy() on a WebGL Device will not immediately release GPU resources. The WebGL API does not provide a context destroy function, instead relying on garbage collection to eventually release the resources.


Interaction between Device.destroy(), Device.lost and Device.isLost is implementation-dependent. The application should not assume that destroying a device triggers a device loss, or that the lost promise is resolved before any API errors are triggered by access to the destroyed device.


createCanvasContext(props?: CanvasContextProps): CanvasContext

Creates a new CanvasContext.


WebGPU only. WebGL devices can only render into the canvas they were created with.


getCanvasContext(): CanvasContext
  • Returns the primary canvas context of a device.
  • Throws an error if no canvas context is available (a WebGPU compute device).

In TypeScript applications this helps applications avoid having to repeatedly check if device.canvasContext is null, otherwise the two are equivalent.


submit(): void

The application should call device.submit() after rendering of a frame is complete to ensure that the generated command queue is submitted to the GPU.


createBuffer(props: BufferProps): Buffer
createBuffer(data: ArrayBuffer | ArrayBufferView): Buffer

Creates a Buffer used to manage memory on the GPU.

Deduces indexType if usage.


createTexture(props: TextureProps): Texture
createTexture(data: Promise<TextureData>): Texture

Creates a Texture, used to manage image data memory on the GPU.


createSampler(props: SamplerProps): Sampler

Creates a Sampler.


createFramebuffer(props: FramebufferProps): Framebuffer

Creates a Framebuffer.


createShader(props: ShaderProps): Shader

Creates a Shader.


createRenderPipeline(props: RenderPipelineProps): RenderPipeline

Creates a RenderPipeline (aka program)


createComputePipeline(props: ComputePipelineProps): ComputePipeline

Creates a ComputePipeline (aka program)


beginRenderPass(props: RenderPassProps): RenderPass

Creates a RenderPass.

  • props.framebuffer If omitted, renders into the default canvas context's default framebuffer.


beginComputePass(props?: ComputePassProps): ComputePass

Creates a ComputePass which can be used to bind data and run compute operations using compute pipelines.


loseDevice(): boolean

Triggers device loss (see below). After this call, the Device.lost promise will be resolved with an error message and Device.isLost will be set to true.

  • Returns true if an actual or emulated device loss was triggered, false otherwise. Note that even if device loss emulation is not supported by the platform this function will still update the Device instance to indicate that the device was lost, however the device can still be used.

The loseDevice() method is primarily intended for debugging of device loss handling and should not be relied upon for production code. loseDevice() can currently only emulate context loss on WebGL devices on platform's where WebGL API provides the required WEBGL_lose_context WebGL debug extension.