Skip to main content

Using GPU Buffers

See also Issuing GPU Commands for guidance on when buffer operations should use immediate resource helpers versus explicit command encoding.

Buffer-Relevant Limits

device.limits exposes the main caps that influence buffer sizing, GPU data representation, and binding pressure.

LimitWebGPU
max
WebGPU
core
WebGPU
compat
WebGL2Why it matters
maxBufferSizeN/AN/AN/AN/AUpper bound for one GPU buffer allocation.
maxUniformBufferBindingSizeN/AN/AN/AN/AMaximum bytes visible through one uniform-buffer binding.
maxStorageBufferBindingSizeN/AN/AN/AN/AMaximum bytes visible through one storage-buffer binding.
maxVertexBuffersN/AN/AN/AN/ATotal vertex-buffer bindings available to a render pipeline.
maxVertexAttributesN/AN/AN/AN/ATotal shader vertex attributes available.
maxUniformBuffersPerShaderStageN/AN/AN/AN/AUniform-buffer binding pressure within one shader stage.
maxStorageBuffersPerShaderStageN/AN/AN/AN/AStorage-buffer binding pressure within one shader stage.
maxStorageBuffersInVertexStageN/AN/AN/AN/AStorage-buffer binding pressure available to vertex shaders.
maxBindingsPerBindGroupN/AN/AN/AN/ATotal bindings available inside one WebGPU bind group.
maxBindGroupsPlusVertexBuffersN/AN/AN/AN/ACombined WebGPU pressure across bind groups and vertex buffers.

See Device Limits for the complete portable limit surface.

Buffer Operations

The ability to copy memory between CPU, buffers and textures

DimensionWebGPUWebGL2Description
Buffer.write()Write a buffer synchronously
Buffer.mapAndWriteAsync()✅ *Write a buffer synchronously
Buffer.readAsync()✅ *Read a buffer asynchronously without copy.
Buffer.mapAndReadAsync()✅ *Read a buffer asynchronously
Buffer.readSyncWebGL()Read a buffer synchronously
copyBufferToBufferCopy a buffer to another buffer without CPU roundtrip
copyBufferToTexture✅ *Copy a buffer to a texture without CPU roundtrip
copyTextureToBuffer✅ *Copy a buffer to a texture without CPU roundtrip

Remarks:

  • The mapAndWriteAsync() API is available on WebGL2, however a temporary buffer is created. For optimal performance, applications may want to use write() on WebGL2.
  • The mapAndReadAsync() API is available on WebGL2, however the data is actually copied. The lifetime callback parameter indicates whether the ArrayBuffer can be retained.
  • Asynchronous buffer reads are emulated on WebGL2. The actual reads are still synchronous under the hood.
  • A WebGL extension does exist that enables asynchronous buffer reads, but it is not implemented on MacOS which is the primary development environment for luma.gl.
  • On WebGPU, buffer-to-texture and texture-to-buffer copies use linear buffer layouts, so bytesPerRow must satisfy WebGPU's row-alignment rules (typically a multiple of 256). Packed CPU-side data should use Texture.writeData() instead of a buffer copy path.
  • On WebGL, copy commands are best-effort compatibility operations. They are portable, but they do not imply WebGPU-style deferred command recording for rendering.