drawcalls如何在three.js中工作？

Question

我有许多可能长的折线(或短,顶点数很高的易变性)来显示,所以我考虑将它们打包成一堆固定大小(比如10000个顶点)位置BufferAttribute并drawcall每个折线发送一个.如果折线穿过10000极限边界,我可以将其拆分,重复上一个缓冲区中的最后一个顶点作为新缓冲区的第一个顶点,并继续使用多个THREE.Line对象.

我的理解是a drawcall是addGroup()在最近的three.js中定义的,但是我很难理解与之相关的链接setDrawRange().

我在这个例子中替换setDrawRange()了addGroup():http://jsfiddle.net/1v00pxx5/并且它不再动画(动态地绘制一条带有three.js的行).

我换了:

line.geometry.setDrawRange( 0, drawCount );

通过

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

看起来我误解了一些东西,因为它渲染了所有内容,而不仅仅是我定义的单个组.

这是我疯狂的上下文:我正在构建一个访问USB的chrome打包应用程序,webgl和USB都必须在主要的JS线程上,但有时当将几何上传到webgl时,它会使USB匮乏,我可以'使用更大的USB缓冲区,因为USB电缆另一侧的设备没有足够的内存.

Answer 1

BufferGeometry.groups现在用于支持多种材料(以前MultiMaterial或以前MeshFaceMaterial).例如,

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

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

设置geometry.drawRange将呈现几何体的子范围.

geometry.setDrawRange( start, count );

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

小提琴:http://jsfiddle.net/w67tzfhx/

three.js r.91