drawcalls如何在three.js中工作? [英] how do drawcalls work in three.js?

问题描述

我要显示许多潜在的长折线(或者说短，折点的高度易变)，所以我正在考虑将它们打包成一堆固定大小(假设为10000个折点)的位置 BufferAttribute 并为每条折线发送一个 drawcall .而且，如果一条折线越过10000个极限边界，我可以将其拆分，将上一个缓冲区的最后一个顶点作为新缓冲区的第一个顶点重复，并继续使用多个 THREE.Line 对象./p>

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

在此示例中，我用 addGroup()替换了 setDrawRange():动态地与three.js画一条线).

我替换了:

  line.geometry.setDrawRange(0，drawCount); 

通过

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

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

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

解决方案

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

  geometry.clearGroups();geometry.addGroup(start1，count1，0);//materialIndex 0geometry.addGroup(start2，count2，1);//materialIndex 1var 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

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.

解决方案

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

这篇关于drawcalls如何在three.js中工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！