[Bug] Invalid handling bufferSubData after grown source array size

[eXponenta]

Description

Sometimes we require use a dynamic size of buffer data, but three not allow use it, because use a bufferSubData without checking a reference size, and we down by "Buffer Overflow"

Bug located in updateBuffer method:

three.js/src/renderers/webgl/WebGLAttributes.js

Line 95 in 4527c3e

gl.bufferSubData( bufferType, 0, array );

On this line three should check a source array size and throw error or call bufferData if source array greater than was before.

We easy can store creating size inside a metadata.

three.js/src/renderers/webgl/WebGLAttributes.js

Line 75 in 4527c3e

return {

Reproduction steps

1. Create a new BufferGeometry
2. Bind a attribute with specific size
3. Conditionally try update attribute source data onto array that greater than was before on this attribute.
4. Get a "WebGL: INVALID_VALUE: bufferSubData: buffer overflow"
5. Cry!!

Code

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000 );
const renderer = new THREE.WebGLRenderer({ antialias: true });

renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xaaaaaa, 1);
document.body.appendChild(renderer.domElement);

const vertices = new Float32Array([
	-1.0, -1.0, 1.0, // v0
	1.0, -1.0, 1.0, // v1
	1.0, 1.0, 1.0, // v2
]);

const geometry = new THREE.BufferGeometry();

geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));

const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const mesh = new THREE.Mesh(geometry, material);

scene.add(mesh);
camera.position.z = 5;

function render() {
	renderer.render(scene, camera);
	requestAnimationFrame(render);
}
render();

/** --------------------------- LOOKS TO THIS ----------------------- */
document.addEventListener('DOMContentLoaded', () => {
	document.querySelector("#updateBuffer").addEventListener("click", () => {
	
		const attr = geometry.getAttribute("position");

		// try update buffer data with overflow
		attr.array = new Float32Array([
				-1.0, -1.0, 1.0, // v0
				1.0, -1.0, 1.0, // v1
				1.0, 1.0, 1.0, // v2
				
				 1.0,  1.0,  1.0, // v3
				-1.0,  1.0,  1.0, // v4
				-1.0, -1.0,  1.0  // v5
		]);
	
		attr.needsUpdate = true;
	});
});

Live example

Replit demo:

• [release 158 demo] (https://bufferbugthreejs.exponenta.repl.co/)
• [release 158 source] (https://replit.com/@eXponenta/BufferBugThreeJS#script.js)

Screenshots

Version

any

Device

Desktop, Mobile, Headset

Browser

Chrome, Firefox, Safari, Edge

OS

Windows, MacOS, Linux, ChromeOS, Android

[Mugen87]

Sorry, but we are not planning to support dynamic resizing of buffer attributes. There are two strategies to solve the issue:

• Create the buffers large enough right from the beginning so a resize isn't required.
• Call dispose() on the geometry and create a new one.

To be more precise: The following code isn't allowed:

attr.array = new Float32Array([
		-1.0, -1.0, 1.0, // v0
		1.0, -1.0, 1.0, // v1
		1.0, 1.0, 1.0, // v2
		
		1.0,  1.0,  1.0, // v3
		-1.0,  1.0,  1.0, // v4
		-1.0, -1.0,  1.0  // v5
]);

Once a buffer attribute has been created, you are not supposed to assign a new object to its array property.

[eXponenta]

@Mugen87 This code is allowed due to no any alerts about other variants.
Also there are not a restrictions in attributes about that.

Also there are UB, when you can replace a buffer before render, but not after.

Must be a exception throw instead of hidden webgl error which can't be handled in any ways.

A a lot of UB can be fixed by 2 lines - checking buffer size while upload.

[mrdoob]

Feel free to submit a PR with the exception throw code 👌

[WestLangley]

Once a buffer attribute has been created, you are not supposed to assign a new object to its array property.

@Mugen87 Do you mean "rendered"?

It sounds like the OP is asking for improved documentation and/or more graceful error handling.

Or, perhaps you feel the documentation is sufficient?

three.js/docs/manual/en/introduction/How-to-update-things.html

Lines 44 to 46 in 75cb813

	With regards to updating BufferGeometries, the most important thing to understand is that
	you cannot resize buffers (this is very costly, basically the equivalent to creating a new geometry).
	You can however update the content of buffers.

[eXponenta]

Problem witch current implementaion that it not point to documentation like in chrome in this situation.
No real exceptions, WebGL runtime warns isn't trackable, you can't use a Sentry, also this generating a bugs with invalid buffer data on next render, if buffers has different dimensions.

[Mugen87]

I thought the documentation is already sufficient since there is a separate guide for updating things in three.js.

However, I agree a better error handling could be useful to indicate devs what's going wrong.