WebGL performance truth, webgl truth

WebGL performance truth, webgl truth

WebGL performance truth

HTML5 Canvas provides two drawing contexts: 2d for drawing 2d vector graphs and webgl for drawing 3D images. The functions provided by the two-dimensional vector graph API are very user-friendly and can be started in 10 minutes. Therefore, cantk chose to use the two-dimensional vector graph API ." The webgl interface is similar to OpenGL ES 2.0, and it is quite tedious to use (I spent a whole day trying to clear how to draw a picture ).

As we all know, "webgl" is accelerated by hardware, and I think "webgl" is faster than "2d. Http://jsperf.com/it is also evidenced that the drawArrays of "webgl" is an order of magnitude faster than the drawImage of "2d. Some time ago, I decided to use webgl to implement a set of "2d" interfaces, so that the performance advantages of webgl can be used without modifying cantk.

I also found the library for webgl to implement the "2d" API on github, but it cannot be used on chrome and has not been updated for several years. So I decided to take this opportunity to learn about WebGL, write such a database by yourself. I have done a lot of work in terms of software performance. I usually have a lot of disappointment, so I did a performance test after implementation of drawImage, so that I would not find that the performance is not as good as expected after completion.

The test results are surprising. Think carefully and anticipate:

• 1. for Android 4.4 and earlier mobile phones, I do not support WebGL. Please provide test data (for more information about the test program, see below ).

• 2. for Android 4.4 low-end mobile phones (such as red rice), the implementation of WebGL is slower, regardless of the number of images, the implementation of WebGL is always slow.

• 3. for mid-and high-end Android 4.4 mobile phones (such as Nexus 5), WebGL has a weak advantage after over 100 images (256x256.

Why is the case in jsperf so different from the actual situation? I analyzed several reasons:

• 1. The matrix operation of WebGL is implemented by JS. When many objects exist, the calculation workload cannot be ignored. In jsperf, there is no matrix operation at all, which is totally different from the actual situation.

• 2. State saving and restoration of the matrix of WebGL are implemented by JS. When there are many objects, the computing workload cannot be ignored. The case in jsperf is not taken into consideration, and is totally different from the actual situation.

• 3. direct comparison between drawImage and drawArrays is meaningless. Even if texture creation and Shader creation are not taken into account, or even switching between multiple textures is not considered, the switching of GL Program is not considered. You need to draw an image, before drawArrays, you need to call a lot of functions to complete a texture.

In general, on mobile phones after Android 4.4, the "2d" API has enabled 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 use WebGL to develop 2D games. The performance of WebGL cannot be compared with that of native gl es, so I don't think WebGL will be of great use in a short time.

Attachment of test procedure, welcome to test and improvement: https://github.com/drawapp8/webgl-2d-perfomance