CODEWITHSUNDEEP
javascripthtmlcanvaswebgl
NoNameProvided
NoNameProvided

Reputation: 8987

Why WebGL slower than Canvas?

I am just started to play around with canvas and webgl, read some article, etc.. and as per my knowledge, WebGL should be much more faster than canvas, but in these following tests it is remarkably slower:

I run them in Chrome and Firefox, in both browser the difference was around 80% percent.

Why does canvas render faster? Is jsperf inaccurate? Did canvas become much more optimized in browsers?

(PS: I am not the author of the tests, I just found them.)

Upvotes: 4

Views: 2210

Answers (1)

WacławJasper
WacławJasper

Reputation: 3364

The short answer is that webgl/opengl is not meant for drawing a SINGLE quad at a time. GPUs are designed to be massively parallel and thus to gain the most out of webgl you have to draw in batches.

You should be comparing drawing 10k images in canvas versus drawing 10k images in webgl using an appropriate webgl implementation. Most of the webgl libs you find, however, are written for the convenience for the client but not necessarily for max performance.

My implementation of 2d webgl renderer is much faster than canvas (100 times+), particularly if you need to rotate/scale the images. And of course, if you need your own blending operations, then webgl is the only way to go.

Upvotes: 6

Related Questions