How do I draw lots of big circles without huge lag?

Hey,

In my game I have a cool 'portal effect' at the end of every level. Currently, it's done by drawing a whole lot of sprites that look like this:

They are quite large and there's a lot of them, so it's a HUGE strain on the GPU fillrate - it's drawing something like 90% empty pixels for every circle! Add to that the pixel shader on each of them, and, well... you can see the problem.

Recently I came up with the idea of using Canvas instead to draw the circles, however that option didn't work either - drawing a circle with a line width of >1 is apparently something Canvas can't handle too well without making a ton of draw calls. You can turn this option on in the capx to see the performance problems.

Since it looks like attachments are broken at the moment, here's a temporary link to the capx (requires Canvas).

https://dl.dropboxusercontent.com/u/41931267/SpiralCircles.capx

So, does anyone have any ideas about how to draw a few big circles (of different colours) without melting the computer?

Cheers!

Still weird you cant draw 2d shapes in C2, being a 2D game engine and all, its a bit funny, that it cant draw 2d shapes. I think

Anyway, your problem is not uncommon I think and personally I would try to see if you could use the video functionality to do it. Even though it also have its problems, it might be better for performance.

Have you tried using Particles? I understand they have a minimal overhead compared to the Sprite object. I'm on my phone so can't check the capx yet.

Colludium they have lower CPU overhead however I'd highly doubt that they have lower GPU overhead - if it's using an image file at all, no matter what the GPU will be pushing a huge amount of empty pixels.

A shader is the best bet. Hard to get nice anti-aliased circles though.

drawing a circle with a line width of >1 is apparently something Canvas can't handle too well without making a ton of draw calls

I've only just started looking into this, but I'm finding my frame rates are higher when drawing lots of circles with thick line widths than with a width of 1.

Try this capx - with the line width at 10 I'm getting 75% cpu, 60fps in firefox, but with width at 1 it's 85% cpu, 40fps...

https://dl.dropboxusercontent.com/u/523 ... _test.capx

edit - sqiddster - I get almost the same results with your capx - low frame rate with 1 pixel width, then 60fps at 10 pixels, & it drops off after that

So, like everybody knows Canvas wont work with webgl .... right?

evidently not me thanks for the tip.

so with webgl off, in my above capx i get 60fps, 40% cpu on all line widths from 1-50

newt uhh I thought it was fixed to work with webGL? Like, it clearly *works* with webGL on.

I might have a crack at writing a shader, how hard could it be?

mattb your results in firefox line up with the theory that Chrome has some sort of optimkzation for 1-pixel width lines.

It will work with webgl on, but it can't take advantage of it.

Paster, on the other hand can.