CODEWITHSUNDEEP
debuggingthree.jswebglvertex-shader
vabada
vabada

Reputation: 1814

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

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

Upvotes: 0

Views: 328

Answers (2)

vals
vals

Reputation: 64164

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

enter image description here

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

Upvotes: 2

vabada
vabada

Reputation: 1814

I found the error, (I was a bit dumb), so I hope it helps someone. The fact is that since I have been reading a lot of tutorials, I have been adding code snippets and sometimes without paying the proper attention.

So, in my code, when there was a click or dragging, I perform a tweening to ease transformations, and after I was sorting the particles of the system:

system.sortParticles = true;

I found this question in SO: In three.js, when we need PointCloud.sortParticles enabled? and now I know that's not needed in my case at all so I deleted it and the code is working perfectly, I am able to modify the uniforms sent to the shaders in the render function.

Upvotes: 1

Related Questions