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: / 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.

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/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.

• javascript
• three.js

• See stackoverflow./questions/32819344/…. Does that answer your question? – WestLangley Commented Oct 3, 2015 at 12:07
• I messed up my JSfiddle link the first time, sorry. I'm looking into the material thing, thanks. – nraynaud Commented Oct 3, 2015 at 12:14
• Yes, perfect, that was the lack of multimaterial thing (strangely this answer did not appear in my googling), may I suggest that you regularize the interface? you could make setDrawRange() create a single group, and support non-multi materials as "the same material" for all the groups. Groups then also bee the natural way cut a line_strip or a triangle_fan. You can report it as an answer if you want the brownie points ( here is the corrected link from your ment jsfiddle/1v00pxx5/1 ). – nraynaud Commented Oct 3, 2015 at 12:22
• Would you be willing to file a three.js enhancement request suggesting your simplified interface proposal? – WestLangley Commented Oct 3, 2015 at 12:56

1 Answer 1

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/w67tzfhx/

three.js r.91