mrdoob/three.js · error · Error

THREE.WebGLBackend: Unsupported buffer data format:

Error message

THREE.WebGLBackend: Unsupported buffer data format: 

What it means

Thrown by WebGLAttributeUtils (WebGPU WebGL-fallback backend) when a BufferAttribute's `.array` is not one of the recognized typed-array types. The uploader maps Float32Array, Float16-marked Uint16Array, Uint16Array, Int16Array, Uint32Array, Int32Array, Int8Array, Uint8Array, and Uint8ClampedArray to GL constants; anything else (plain Array, Float64Array, BigInt64Array, DataView) is unsupported because WebGL has no corresponding buffer target type.

Source

Thrown at src/renderers/webgl-fallback/utils/WebGLAttributeUtils.js:159

		} else if ( array instanceof Int32Array ) {

			type = gl.INT;

		} else if ( array instanceof Int8Array ) {

			type = gl.BYTE;

		} else if ( array instanceof Uint8Array ) {

			type = gl.UNSIGNED_BYTE;

		} else if ( array instanceof Uint8ClampedArray ) {

			type = gl.UNSIGNED_BYTE;

		} else {

			throw new Error( 'THREE.WebGLBackend: Unsupported buffer data format: ' + array );

		}

		let attributeData = {
			bufferGPU,
			bufferType,
			type,
			byteLength: array.byteLength,
			bytesPerElement: array.BYTES_PER_ELEMENT,
			version: attribute.version,
			pbo: attribute.pbo,
			isInteger: type === gl.INT || type === gl.UNSIGNED_INT || attribute.gpuType === IntType,
			id: _id ++
		};

		if ( attribute.isStorageBufferAttribute || attribute.isStorageInstancedBufferAttribute ) {

			// create buffer for transform feedback use

View on GitHub (pinned to da05705fa3)

Solutions

1. Wrap your data in a typed array matching the GPU type: `new BufferAttribute(new Float32Array(data), itemSize)`.
2. For integer attributes use the matching Int/Uint typed array (Int32Array, Uint8Array, etc.).
3. If you need Float64 precision on CPU, downcast to Float32Array before creating the BufferAttribute.
4. Avoid passing plain `[]`-built arrays; convert with the appropriate typed-array constructor.

Example fix

// before
const positions = vertices.map(v => v.x); // plain Array
geom.setAttribute('position', new BufferAttribute(positions, 1)); // throws

// after
const positions = new Float32Array(vertices.flatMap(v => [v.x, v.y, v.z]));
geom.setAttribute('position', new BufferAttribute(positions, 3));

const SUPPORTED = [Float32Array, Float16Array, Uint16Array, Int16Array, Uint32Array, Int32Array, Int8Array, Uint8Array, Uint8ClampedArray];
function assertSupportedArray(array) {
  if (!SUPPORTED.some(T => array instanceof T)) {
    throw new TypeError('BufferAttribute.array must be a supported typed array');
  }
}

function isSupportedTypedArray(array) {
  return ArrayBuffer.isView(array) && typeof array.BYTES_PER_ELEMENT === 'number' && !(array instanceof Float64Array) && !(array instanceof BigUint64Array) && !(array instanceof BigInt64Array);
}

When it happens

Trigger: Creating `new BufferAttribute(new Array(n), itemSize)`, passing a Float64Array, a BigInt64Array, or a non-typed-array as the attribute's array. Also triggered by a custom BufferAttribute subclass that returns an unsupported array type.

Common situations: Loading a plain JS array from JSON and assigning it directly to a BufferAttribute without `new Float32Array(...)`. Using Float64Array for precision then uploading to GPU. Copying example code that built arrays with `.map()` returning a normal Array. Custom geometry generators yielding non-typed arrays.

Related errors

• THREE.WebGLAttributes: Unsupported buffer data format:
• THREE.WebGLAttributes: The size of the buffer attribute's ar
• THREE.BufferAttribute: array should be a Typed Array.
• THREE.WebGLTextureUtils: Unsupported WebGL type: ${glType}
• THREE.WebGPUAttributeUtils: Bad vertex format item size.

AI-assisted analysis of mrdoob/three.js@da05705fa3 (2026-08-12). Data as JSON: /api/errors/4bbab942c68df178. Report an issue: GitHub.