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
copyBufferToBuffer✅✅Copy 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.