有没有办法知道 WebGL 中的帧如何处理顶点？答案

【问题标题】：Is there a way to know how may vertices are processed by frame in WebGL?有没有办法知道 WebGL 中的帧如何处理顶点？
【发布时间】：2015-01-11 05:39:00
【问题描述】：

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

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

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数组直到合适的长度（系统和边缘的顶点总和，我添加到场景中的唯一两个对象），但我不断收到下一个错误（在三.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

【问题讨论】：

提示：调试时使用未缩小版的three.js。
感谢您的提示。我现在进步了一点。我正确地传递了值（初始化时，因为如果我设置 values.push(1000); 那么我可以看到它正在移动）但是一旦我单击或拖动错误就会出现（在第 18910 行，three.js R69）：索引 = 排序数组[ ca ][ 1 ]; Uncaught TypeError: Cannot read property '1' of undefined 所以我现在的猜测是，当我单击（并实例化光线投射器）时，它会向顶点着色器发送其他内容，尽管这对我来说似乎很奇怪。我已经尝试将 attributes.displacement.value 数组填充到一个巨大的索引，但错误不断出现

标签： debugging three.js webgl vertex-shader

【解决方案1】：

我发现了错误，（我有点笨），所以我希望它对某人有所帮助。事实是，自从我阅读了很多教程以来，我一直在添加代码 sn-ps，有时并没有引起应有的注意。

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

system.sortParticles = true;

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

【讨论】：

【解决方案2】：

启用 Chrome 画布分析器，并查看结果

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

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

即面数，即顶点数/3

【讨论】：

非常感谢，这正是我要寻找的。我还发现本教程解释了一些关于 Chrome 画布分析器的内容：html5rocks.com/en/tutorials/canvas/inspection