mrdoob/three.js · error · Error
THREE.WebGLAttributes: Unsupported buffer data format:
Error message
THREE.WebGLAttributes: Unsupported buffer data format:
What it means
Thrown by the legacy WebGLAttributes (WebGLRenderer path) when a BufferAttribute's `.array` is not a recognized typed-array type. Identical in spirit to the WebGL-fallback variant: only Float32Array, (Float16-marked) Uint16Array, Uint16Array, Int16Array, Uint32Array, Int32Array, Int8Array, Uint8Array, and Uint8ClampedArray are accepted because each maps to a concrete WebGL buffer type.
Source
Thrown at src/renderers/webgl/WebGLAttributes.js:66
} 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.WebGLAttributes: Unsupported buffer data format: ' + array );
}
return {
buffer: buffer,
type: type,
bytesPerElement: array.BYTES_PER_ELEMENT,
version: attribute.version,
size: size
};
}
function updateBuffer( buffer, attribute, bufferType ) {
const array = attribute.array;
const updateRanges = attribute.updateRanges;
View on GitHub (pinned to da05705fa3)
Solutions
- Convert to a typed array: `new BufferAttribute(new Float32Array(coords), 3)`.
- Pick the typed array matching your GPU integer/float needs (Uint32Array for indices, Int8Array for byte attributes, etc.).
- Downcast Float64 computation results to Float32Array before upload.
- Run a one-line assertion `Number.isFinite(attr.array.BYTES_PER_ELEMENT)` to catch plain arrays early.
Example fix
// before
const geom = new BufferGeometry();
geom.setAttribute('position', new BufferAttribute(rawPositionsArray, 3)); // throws
// after
geom.setAttribute('position', new BufferAttribute(new Float32Array(rawPositionsArray), 3)); Defensive patterns
Strategy: type-guard
Validate before calling
function makeAttribute(data, itemSize, T = Float32Array) {
const array = data instanceof ArrayBuffer ? new T(data) : (Array.isArray(data) ? new T(data) : data);
if (!ArrayBuffer.isView(array)) throw new TypeError('attribute array must be a typed array');
return new THREE.BufferAttribute(array, itemSize);
} Type guard
function isSupportedTypedArray(array) {
return ArrayBuffer.isView(array) && typeof array.BYTES_PER_ELEMENT === 'number' && !(array instanceof Float64Array) && !(array instanceof BigUint64Array) && !(array instanceof BigInt64Array);
} Prevention
- Convert parsed JSON / plain arrays into typed arrays before assigning to BufferAttribute.
- Use Float32Array for vertex data, Uint32Array/Uint16Array for indices.
- Assert BYTES_PER_ELEMENT is defined on attribute arrays during development.
When it happens
Trigger: Using WebGLRenderer (not WebGPURenderer) and creating a BufferAttribute with a plain Array, Float64Array, BigInt64Array, DataView, or other non-typed-array as the `.array`.
Common situations: Assigning parsed JSON arrays directly to geometry attributes without converting to a typed array. Custom geometry builders returning native arrays. Mixing Float64 data on the CPU and forgetting to downcast. Examples copied from non-three sources.
Related errors
- THREE.WebGLBackend: 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/410fa80e745f5962.
Report an issue: GitHub.