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

问题描述

我有许多可能很长的折线(或短的，顶点数非常不稳定)要显示，所以我想将它们打包成一堆固定大小(比如 10000 个顶点)的位置 BufferAttribute并为每条折线发送一个 drawcall.如果多段线越过 10000 的限制边界，我可以将它拆分，重复前一个缓冲区的最后一个顶点作为新缓冲区的第一个顶点，然后继续处理多个 THREE.Line 对象.

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.

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

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

在此示例中，我将 setDrawRange() 替换为 addGroup():http://jsfiddle.net/1v00pxx5/ 并且它不再动画( 用three.js动态画一条线 ).

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

我替换了:

line.geometry.setDrawRange( 0, drawCount );

由

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.

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

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 现在用于支持多种材质(以前是 MultiMaterial 或 MeshFaceMaterial).例如，

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 );

设置 geometry.drawRange 将渲染几何的子范围.

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 );

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

three.js r.91

three.js r.91

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