Hi
I am trying to understand if I have to use WebGL always, or if it is faster to use canvas sometimes. I think WebGL is faster always, but I think I am wrong because... why do we have the choice to use canvas then. When is it better to use canvas?
Hi
I am trying to understand if I have to use WebGL always, or if it is faster to use canvas sometimes. I think WebGL is faster always, but I think I am wrong because... why do we have the choice to use canvas then. When is it better to use canvas?
Hi amaso83, this is not a simple issue and Gio is probably better equipped to answer but I will give it a shot.
There are multiple factors here that make the answer very dependent on what you are trying to do, this is why we included the ability to select which rendering mode to use for individual layers.
WADE has alot of optimizations for canvas mode making it pretty good at most tasks, having said that, if you throw a huge number of pixels at the hardware, you will likely have better luck with WebGL
This does not necessarily mean WebGL is always faster. Draw calls in GL are expensive, if you are drawing a large number of small sprites, the performance could be slower than the canvas. With every draw call
WebGL has to do many calculations, setting things up on the GPU which is slow. Modern GPU's are designed to process a few huge batches of triangles at a time, not thousands of smaller batches as this greatly increases the overhead.
I realise the above is a little confusing so I have summarized below some basic rules.
* WebGL is still not fully compatible with many devices. WADE will automatically revert to canvas if WebGL is not available, but this is something to keep in mind, your app ideally should not
be dependent on the possible performance boost WebGL can offer.
* For objects that don't move, a static background for example, use canvas. After the initial draw, so long as you do not move the background, it will not have to be redrawn to canvas.
* If you have a small number of very large images that are moving often, try using WebGL to crunch those pixels faster, it could help quite alot.
* Test on as many real devices as you can, there are so many possible situations that testing your application really is the best way.
I hope Gio responds to this post soon, I will make sure he see's it as he has a great deal of experience with Graphics Programming.
You are asking a VERY tricky question there... foxcode's answer is essentially correct, I don't know if adding more details to it is going to help or confuse you, as it gets quite technical :) Here it goes anyway:
WebGL is always hardware accelerated so, in general, it tends to be faster than canvas (which may or may not be hardware accelerated, and when you're doing anything remotely complex with it, it most certainly isn't). However:
Also consider that there is scope for improving the performance of our WebGL renderer, we do have some further optimizations planned.
TL;DR: Which one is faster does depend on your particular scenario, though WebGL is generally better. But you can use both canvas and WebGL together (on different layers), so it may be worth trying to groups all vector graphics objects on one layer for example and set that layer to canvas. This isn't always an option, and whether it actually speeds things up significantly, again, depends on what exactly you are doing.