Phaser Geometry Performance - Canvas vs WebGL

[jackrugile]

I am considering getting started with Phaser. I might like to use it in LD29 next weekend. I had question about the performance of geometry in Phaser.

 

When tinkering with the circle geometry example, I set the rendering mode to WebGL. I noticed that basic animations on the circle made it very choppy. I thought that WebGL was typically more performant compared to 2D canvas. Is this only true for displaying raster graphics, or should it apply to generated geometry as well? Just want to make sure this situation wasn't an anomaly for my system.

 

If working with rectangles, circles, lines, and points is meant for 2D canvas, that is fine, I just want to prepare for that going in so that I can get the best performance possible. Thank you in advance for any answers!

[rich]

As you're probably aware there's no concept of native geometry in WebGL (i.e. there's no "circle" shape, or "line", etc), so they're created from lots of vertices instead. The more complex graphics objects in your code, the more hard work WebGL is doing. There are two ways to mitigate this:

 

1) Use Canvas instead (most of the time this will be significantly fast enough)

 

2) Use textures. This is what GPUs are designed to blast around at extremely high rates. You can generate textures from Graphics objects, so you don't need to use external PNGs for everything.

[jackrugile]

Ok, thanks for your reply. So essentially, the graphics call (line, circle, rect, whatever) get cached and used as if they were a bitmap texture, is that correct? I imagine it would be some combo of these two examples:

 

Graphics

Render Texture

[rich]

Pretty sure Graphics now has cacheAsBitmap support (Pixi added it very recently). Experiment and see, but should work without needing a RenderTexture.

[jackrugile]

Great, thanks! I've been reluctant to commit to any of the many frameworks out there... but Phaser is looking damn promising.