CODEWITHSUNDEEP
javascriptthree.js
nraynaud
nraynaud

Reputation: 5122

how do drawcalls work in three.js?

I have numerous potentially long polylines (or short, vertices count is highly volatile) to display, so I was thinking about packing them in a bunch of fixed size (let's say 10000 vertices) position BufferAttribute and sending one drawcall per polyline. And if a polyline crosses the 10000 limit boundary, I can just split it, repeat the last vertex from the previous buffer as the first vertex of the new buffer and carry on with multiple THREE.Line objects.

My understanding is that a drawcall is defined by addGroup() in the recent three.js, but I have troubles understanding the link with setDrawRange().

I replaced setDrawRange() by addGroup() in this example: http://jsfiddle.net/1v00pxx5/ and it doesn't animate anymore ( Drawing a line with three.js dynamically ).

I replaced :

line.geometry.setDrawRange( 0, drawCount );

by 

line.geometry.clearGroups();
line.geometry.addGroup( 0, drawCount );

It looks like I misunderstood something, because it's rendering everything instead of just the single group I was defining.

Here is my crazy context: I am building a chrome packaged application that accesses the USB, and both webgl and USB have to be on the main JS thread, but sometimes when uploading the geometries to webgl, it starves the USB, and I can't use a bigger USB buffer because the device on the other side of the usb cable doesn't have enough memory.

Upvotes: 3

Views: 3869

Answers (1)

WestLangley
WestLangley

Reputation: 104783

BufferGeometry.groups is now used to support multiple materials ( formerly MultiMaterial or MeshFaceMaterial ). For example,

geometry.clearGroups();
geometry.addGroup( start1, count1, 0 ); // materialIndex 0
geometry.addGroup( start2, count2, 1 ); // materialIndex 1

var mesh = new THREE.Mesh( geometry, materialsArray );

Setting geometry.drawRange will render a sub-range of the geometry.

geometry.setDrawRange( start, count );

var material = new THREE.LineBasicMaterial( { color: 0xff0000 } );
var line = new THREE.Line( geometry, material );

fiddle: http://jsfiddle.net/w67tzfhx/

three.js r.91

Upvotes: 7

Related Questions