调用是如何在three.js中工作的?

how do drawcalls work in three.js?

本文关键字：工作 js three 调用      更新时间：2023-09-26

我有许多潜在的长折线(或短，顶点数是高度不稳定的)要显示，所以我正在考虑将它们打包在一堆固定大小(假设10000个顶点)位置BufferAttribute中，并发送一个drawcall每个折线。如果一条折线越过10000个极限边界，我可以把它分割，重复前一个缓冲区的最后一个顶点作为新缓冲区的第一个顶点，并继续使用多个THREE.Line对象。

我的理解是drawcall是由addGroup()在最近的three.js中定义的，但我很难理解与setDrawRange()的链接。

我在这个例子中用addGroup()代替了setDrawRange(): http://jsfiddle.net/1v00pxx5/，它不再动画了(用three.js动态地画一条线)。

我替换了:

line.geometry.setDrawRange( 0, drawCount );


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

看起来我误解了一些东西，因为它呈现了所有内容，而不仅仅是我定义的单个组。

这是我疯狂的上下文:我正在构建一个chrome封装的应用程序访问USB, webgl和USB都必须在主JS线程上，但有时当将几何图形上传到webgl时，它会饿死USB，我不能使用更大的USB缓冲区，因为USB电缆的另一边的设备没有足够的内存。

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

相关文章：