Is there a way to know how may vertices are processed by frame in WebGL?

Question

In order to debug a WebGL application that I am developing using ThreeJS, I would like to know if it's possible to know how many vertices are being sent to the GPU, and thus how many are processed each frame.

The question arises because I am trying to pass an attribute (displacement) to the vertex shader (as seen in this tutorial: http://aerotwist.com/tutorials/an-introduction-to-shaders-part-2/). Here is that code snippet:

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

And although I think I am filling the displacement.value array until the proper length (that sum of the vertices from the system and edges, the two only objects I add to my scene), I keep getting the next error (in three.min.js:467, R69):

Uncaught TypeError: Cannot read property '1' of undefined

So my guesses are that either ThreeJS sends some more things to the vertex-shader, although that sounds weird, or I am mising something. By the way, although the attribute is initialised on loading, the error only comes once there is a click or dragging attempt.

Here is a live demo (with the error outcoming): http://hyperbrowser.herokuapp.com/hyperbrowser.html?graph=random&depth=5

And the whole code is on github: https://github.com/vabada/hyperBrowser

Answer 1

Enable Chrome canvas profiler, and take a look at the results

Her you can see a call to bind buffer, where the bufferData is a float array of size 48483. This is the vertex count. You can see also BUFFER_SIZE = 193932, that's the result of multiply 48483 x 4. (the size of each vertex)

6 calls later, you see a call to drawElements (TRIANGLES, 18161, ...

That is the number of faces, that is the number of vertices / 3