I have a cc.drawNode that clears and draws approximately 450 32 pixel segments on every update tick. Now let’s not debate whether or not I should be doing this ;P. The reason I bring it up is that when I do this with WebGL the FPS drops immediately to about 10. Ok, maybe this isn’t too unexpected since I’m trying to draw so much. However, if I don’t use WebGL and instead use canvas, the FPS remains above 50.
That is unexpected to me :). Why might this be? Are there any tips? I don’t necessarily need to redraw the segments every tick but I’m having a tough time relying on the dirty bits to figure out if things moved on screen.
Tips? Tricks? Answers?
C.J.
GG Chrome’s CPU profiling tool.
Turns out all the CPU was being spent constructing all of the segments for WebGL then the actual drawing step of CCDirector. Turns out it’s pretty expensive when you are constructing 500 segments, doing the math to figure out 8 vertices, and constructing 6 triangles to represent each segment. The reason this wasn’t noticeable on canvas is that it’s a simple element push into an array.
The solution is to try not to need to clear/redraw each update tick if you can get away with it. For me the solution is to instead of redrawing when the layer moved is to have the DrawNode a child of the node you expect might move. I suppose it’s cheaper to transform the already constructed vertices than it is to reconstruct them :).
