有没有办法知道如何在WebGL中按帧处理顶点？

Question

为了调试我使用ThreeJS开发的WebGL应用程序，我想知道是否可以知道有多少顶点被发送到GPU，以及每帧处理多少顶点。

问题出现了，因为我试图将属性（置换）传递给顶点着色器（如本教程中所示：http://aerotwist.com/tutorials/an-introduction-to-shaders-part-2/）。这是代码片段：

var values = attributes.displacement.value;
var verts = system.geometry.vertices.length + edges.geometry.vertices.length;
for (var v = 0; v < verts; v++) {
    values.push(1);
}

虽然我认为我正在填充displacement.value数组，直到适当的长度（系统和边缘的顶点之和，我添加到场景中的两个唯一对象），我不断得到下一个错误（在three.min.js：467，R69）：

Uncaught TypeError: Cannot read property '1' of undefined

所以我的猜测是ThreeJS向顶点着色器发送了更多的东西，虽然这听起来很怪异，或者我正在捣乱。顺便说一句，虽然属性是在加载时初始化的，但只有在单击或拖动尝试时才会出现错误。

这是一个现场演示（错误输出）： http://hyperbrowser.herokuapp.com/hyperbrowser.html?graph=random&depth=5

整个代码在github上： https://github.com/vabada/hyperBrowser

Answer 1

启用Chrome canvas Profiler，并查看结果

她可以看到对绑定缓冲区的调用，其中bufferData是一个大小为48483的浮点数组。这是顶点计数。你也可以看到BUFFER_SIZE = 193932，这是乘法48483 x 4的结果。（每个顶点的大小）

之后6次调用，你会看到对drawElements的调用（TRIANGLES，18161，...

这是面数，即顶点数/ 3

Answer 2

我发现错误，（我有点愚蠢），所以我希望它可以帮助别人。事实是，由于我一直在阅读很多教程，所以我一直在添加代码片段，有时却没有给予适当的关注。

所以，在我的代码中，当点击或拖动时，我执行补间以简化转换，并在我对系统的粒子进行排序后：

system.sortParticles = true;

我在SO中找到了这个问题：In three.js, when we need PointCloud.sortParticles enabled? 现在我知道在我的情况下根本不需要，所以我删除它并且代码工作正常，我能够修改发送到渲染函数中着色器的制服。