V

Avatar

Rendering partial Geometry in Three.js

Update: I was told by Mr.Doob that it is possible to render partial geometry using offsets/drawcalls, therefore no need to change the library. There is a catch.. It only works for indexed geometry, which in my specific case would not do the trick, still it is good to know there is such an option.

—–

One thing i’ve missed when using Threejs was the possibility to render a set of a Geometry. In my case a large BufferGeometry pool.

Setting up one was quite easy:

// Non-indexed geometry data
var numVertices = 1024 * 10;
cubePoolGeometry.addAttribute( "position", new THREE.Float32Attribute( numVertices, 3 ) );
cubePoolGeometry.addAttribute( "color", new THREE.Float32Attribute( numVertices, 3 ) );
cubePoolGeometry.addAttribute( "uv", new THREE.Float32Attribute( numVertices, 2 ) );
cubePoolGeometry.addAttribute( "normal", new THREE.Float32Attribute( numVertices, 3 ) );

When rendering the geometry it will internally use the size of the buffer, being the total length allocated at init time. Internal code shows exactly that:

_gl.drawArrays( _gl.TRIANGLES, 0, position.array.length / 3 );
_this.info.render.vertices += position.array.length / 3;
_this.info.render.faces += position.array.length / 9;

This will always render the full batch, which i did not want. The change was easy and could be a good thing for future releases of the library:

_gl.drawArrays( _gl.TRIANGLES, 0, position.numItems / 3 );
_this.info.render.vertices += position.numItems / 3;
_this.info.render.faces += position.numItems / 9;

This allows to render a subset of the geometry by changing the attribute variable numItems, like so:

// Render only first 20%
var numVertices = 1024 * 2;
cubePoolGeometry.attributes.position.numItems = numVertices * 3;
//cubePoolGeometry.attributes.color.numItems = numVertices * 3;
//cubePoolGeometry.attributes.uv.numItems = numVertices * 2;
//cubePoolGeometry.attributes.normal.numItems = numVertices * 3;

The full buffer is untouched and you can still get the total size by querying the array length (or save it for future reference). That was it.

No Comments, Comment or Ping

Comments are closed.