Use external VBO

[raub]

Hello!
This is a feature request. I want to be able to optionally feed my VBO to three.js BufferAttribute. I walked through some (three.js) code and couldn't find any way to do so (from outside).

In previous versions of three.js I was able to hack into renderer.properties to replace VBO with my custom one. However, after an upgrade to r86 three's VBO are stored in WebGLAttributes module which is not exposed. Since now the storage is hidden from the outside, I can no longer hack into it from my external codes. Therefore I want to legalize such behavior, to prevent further struggles and hacks.

An example of what I might do with it is following:

	const geo = new THREE.BufferGeometry();
	geo.setDrawRange( 0, REAL_SIZE );
	// ...
	const ba = new THREE.BufferAttribute(_dummyArray, 3);
	ba.count = REAL_SIZE * 3;
	geo.setDrawRange( 0, REAL_SIZE );

	// HERE! set buffer-creator callback
	ba.onCreateCallback = function () {
		// I create it just for example, actually it can come from other lib
		const vertices = [];
		for ( i = 0; i < REAL_SIZE; i ++ ) {
			vertices.push( Math.random() * 2000 - 1000 );
			vertices.push( Math.random() * 2000 - 1000 );
			vertices.push( Math.random() * 2000 - 1000 );
		}
		const vbo = gl.createBuffer();
		gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
		gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
		// Return back to three.js
		return vbo;
	};

	geo.addAttribute('position', ba);
	// ...
	particles = new THREE.Points( geo, materials[0] );
	scene.add( particles );

More of it you can see here.

To summarize: sometimes you end up with preallocated GL buffer and a lack of an ability to use it in three.js BufferGeometry, where it would fit perflectly.

If it sounds reasonable, then I can also show an example of a patch, that makes the above code work:

		var buffer;

		if (attribute.onCreateCallback) {

			buffer = attribute.onCreateCallback();

		} else {

			buffer = gl.createBuffer();

			gl.bindBuffer( bufferType, buffer );
			gl.bufferData( bufferType, array, usage );

		}

		attribute.onUploadCallback();

Just add the condition to see if there is user-defined buffer-creator callback. In WebGLAttributes.js, that's all I need.

If you want me to give more specific reasons for what I do with my buffers, I'll be glad to answer. I can then create a PR with the above changes, if it makes sense.

Three.js version

• r86+

Browser

• All of them
• Even more than that

OS

• All of them

Thanks for your time! 😃

[alexahdp]

+1

[pavel-kudinov]

+1

[pailhead]

+∞

[mrdoob]

Instead of trying to hack BufferAttribute... What about an API like this?

var positions = new THREE.GLBufferAttribute( function ( gl ) {

	const vertices = [];

	for ( i = 0; i < REAL_SIZE; i ++ ) {
		vertices.push( Math.random() * 2000 - 1000 );
		vertices.push( Math.random() * 2000 - 1000 );
		vertices.push( Math.random() * 2000 - 1000 );
	}

	const vbo = gl.createBuffer();
	gl.bindBuffer( gl.ARRAY_BUFFER, vbo );
	gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( vertices ), gl.STATIC_DRAW );
	return vbo;

} );
geometry.addAttribute( 'position', positions );

[raub]

Ofcourse that would also do the trick. Even var positions = new THREE.GLBufferAttribute(vbo) actually would.

There is one more thing to consider here. WebGL2 is comming (and it already works, sometimes). So GLBufferAttribute could be implemented in such a way to allow changing VBO on flight. See this demo.

This whole feature request is really into GPGPU, be it on Node.js or in browser. Most of the usecases require tackling with VBO here and there. Because no one wants to pass tens to hundreds of megabytes between host and device each frame...

Being available as a property of GLBufferAttribute could be really handy. Then just positions.vbo = anotherVbo, or an external call to gl.bindBuffer( gl.ARRAY_BUFFER, positions.vbo ); from outside of the GLBufferAttribute class implementation.

[mrdoob]

Success! Would you like to do a PR adding GLBufferAttribute?

[raub]

I'd like to. But as I started thinking of it now, I understood that I don't have the full picture.

1. What will actually WebGLAttributes do, when it has to deal with GLBufferAttribute? Specifically in that very hack-place of 152c85f, which is invoked from WebGLAttributes.update...

2. Should GLBufferAttribute subclass BufferAttribute? And how it should behave in all the interactions previously occupied by the usual BufferAttribute? (there probably are some which I don't even know of)

3. Is there a problem switching VBO back and forth within GLBufferAttribute? I can't predict if three.js has some caching for that matter.

My guess would be: subclass BufferAttribute and tweak WebGLAttributes to account for it, and then just try and see if it works (a bit slippery).

[mrdoob]

My guess would be: subclass BufferAttribute and tweak WebGLAttributes to account for it, and then just try and see if it works (a bit slippery).

Yep! Sounds like a good start.

[raub]

@mrdoob Come see the #13196, it kinda works. I've created (mostly copy-pasted) a separate example for it. Need further advice.

[Mugen87]

Solved via #13196.