WebGL Performance Truth

WebGL Performance Truth

HTML5 's canvas provides two drawing contexts (Graphic context): One is "2d" for plotting two-dimensional vectors, and the other is "WebGL" for drawing three-dimensional graphics. The two-dimensional vector diagram API provides a very user-friendly function, 10 minutes to get started, so CANTK chose to use the two-dimensional vector diagram API. The "WebGL" interface is about the same as OpenGL ES 2.0, and it's pretty tedious to use (I toss it all day to get rid of how to draw a picture).

We all know that "WEBGL" is hardware-accelerated, and I think that "WebGL" will be faster than "2d" for many people. http://jsperf.com/also has evidence of the idea that the drawarrays of "WebGL" is an order of magnitude faster than the drawimage of "2d". A while ago I decided to use WebGL to implement a "2d" interface, so that CANTK can take advantage of WebGL's performance without making changes.

I found a library of WEBGL implementations of the "2d" API on GitHub, but it didn't work on Chrome, and it hasn't been updated in years, so I decided to take this opportunity to learn WebGL and write a library of my own. In terms of software performance I have done a lot of work, usually disappointed when more, so in the implementation of DrawImage, the first to do a performance test, so that after the completion of the performance is not expected to be good.

The test results are surprising, and it is expected to be careful:

• 1. For Android 4.4 phone, I do not support WEBGL mobile phone, welcome to provide test data (test program see later).

• 2. For Android 4.4 Low-end phones (such as red rice), the WEBGL implementation is slower, regardless of the number of images, WEBGL implementation is always a slow shot.

• 3. For Android 4.4 's mid-to-high-end handsets (such as Nexus 5), the WEBGL implementation has a slight advantage over more than 100 images (256x256).

Why does the case in Jsperf differ so much from the actual situation? I analyzed it for a few reasons:

• 1.WebGL matrix operation is JS implementation, when the object is more, the computational amount should not be neglected. And the case of Jsperf no matrix operation, and the actual situation completely inconsistent.

• 2.WebGL Matrix and other state preservation and recovery is JS implementation, in many objects, computational capacity should not be neglected. and Jsperf in the case also did not consider, and the actual situation completely inconsistent.

• 3.drawImage and Drawarrays Direct comparison does not make sense, even regardless of the creation of textures and shader, even regardless of the switch of multiple textures, regardless of the change of the GL program, to draw a picture, before the drawarrays to call a lot of functions, To complete the map once.

On the whole, after Android 4.4, the "2d" API has turned on hardware acceleration, and WEBGL has no obvious advantage in developing 2D games. On the iphone, the "2d" API is very efficient, and it is not necessary to develop 2D games with WebGL. WebGL has no comparable performance to native GL Es, so I don't think WebGL will do much for a short period of time.

Test procedures are included, welcome to test and improve: https://github.com/drawapp8/webgl-2d-perfomance

WebGL Performance Truth