Advanced webgl performance optimization

author ｜vorshen

original text ｜http://www.alloyteam.com/2017/05/webgl-performance-optimizations-first-taste/

The last article introduced how to use webgl Quickly create a small world of your own , Before we get started webgl after , And you can use native webgl Write demo More and more complicated , You may be a little confused ： That's what I use webgl Is your posture right . because webgl Can control shader Add the super bottom layer API, It brings about the same phenomenon , It can be implemented in many ways , At this time, how should we choose ？ This article will go a little deeper webgl, I'd like to introduce something to you webgl The optimization knowledge of .

speak webgl Before optimization, let's briefly recall canvas2D The optimization of the , frequently-used display list、 Dynamic area redrawing, etc . use canvas2D Many students should know more or less about the above optimization , But you're right about webgl The optimization of , If you don't understand it, just look down ~ Here we will start with how the underlying image is rendered to the screen , Gradually start our webgl Optimize .

gpu How to render an object

Let's start with a simple example of a ball , The following is to use webgl A ball drawn , Add a little light effect , The code is simple , I'm not going to expand on that . A ball （https://vorshen.github.io/simple-3d-text-universe/doc/0.html） This ball is a simple 3D Model , There are no complicated changes , So the sphericity in the example can be very good , see FPS The value is stable at 60. Later we will try to make it more complicated , Then do some optimization , But in this section, we have to understand the principle of rendering , Only by knowing the fundamentals can we know the principle of optimization .

We all know webgl And shaders are inseparable ,webgl There are vertex shaders and clip shaders , Let's use a picture to briefly illustrate that the next object consists of 0 To 1 The process of generation .

0 It's the starting point , Corresponding to the above figure 3D mesh, In the program, this is 3D Vertex information 1 It's the end , Corresponding to the above figure Image Output, Now it has been rendered to the screen Our focus is on the middle three stages , The first is a standard triangle , Even three circles on the triangle indicate three points , Plus vertex keyword , You can clearly know that it is the stage of vertex shader processing , The picture is translated into Chinese ： We pass vertex information to vertex shaders (drawElements/drawArray), Then the shader processes the vertex information and starts drawing triangles (gl_Position)

Then look at the last two pictures , The obvious fragments Keyword indicates that this is the slice shader stage .Rasterization It's grating , From the visual point of view, the triangle is represented by three lines instead of pixels , In fact, it is the same , See the following address for more details , It's not going to unfold here . How to understand rasterization - You know （https://www.zhihu.com/question/29163054） The later stage is coloring , It can be used textture perhaps color Fine , Anyway, the unification is based on rgba Give to gl_FragColor In the figure vertexShader Will execute 3 Time , and fragmentShader Will execute 35 Time ( Yes 35 Square block ) Find out fragmentShader Far more than vertexShader, At this time, the witty friends must think of trying to fragmentShader The calculations in are placed in vertexShader in , But can you play like this ？

You can still find such a scene by force , For example, reflected light . The calculation of reflected light is not very complicated , But there is also a certain amount of calculation , Look at the core code

The above reflected light code will not be explained in detail , The core is built-in reflect Method . This code can be placed in fragmentShader Can also be placed in vertexShader in , But the results are somewhat different , The results are as follows Put it in vertexShader in （https://vorshen.github.io/simple-3d-text-universe/doc/-1.html） Put it in fragmentShader in （https://vorshen.github.io/simple-3d-text-universe/doc/0.html）

So the optimization here is flawed , You can see vertexShader Perform light calculation and fragmentShader The difference between the results of the execution generation in the . In other words, if you want to achieve the effect of real reflected light , Must be in fragmentShader Calculation in the middle . It was said at the beginning that the theme of this article is The same effect , What is the best way , therefore continue~

gpu Computing power is very strong

The last section said gpu The principle of rendering , Just a few more words here gpu Related news Baidu artificial intelligence is widely adopted gpu,PhysX Collision detection uses gpu To speed up …… All kinds of similar phenomena show that gpu In simple computing power, it is more than ordinary cpu, And let's focus on the previous section shader Code inside vertexShader

fragmentShader

You can find that there are very few logical statements , More of it is calculation , Especially the operation of matrix , Two mat4 Multiply by js It needs to be written like this ( Code from glMatrix)

It can be said that compared with ordinary addition, subtraction, multiplication and division, the amount of matrix related calculation is still a little large , and gpu The calculation of the matrix has been specially optimized , It's very fast

So our first reaction must be Can be in shader Don't let js Toss , For example, in the previous code proMatrix/viewMatrix/modelMatrix All put in shader Calculation in the middle . Even the modelMatrix It is divided into moveMatrix and rotateMatrix It can be better maintained ~

But understand threejs Or students who read other learning materials must know threejs Will put these calculations in js To perform , Why is this ？？ For example, the following code ( Excerpt from webgl Programming Guide ) vertexShader in

javascript in

There are proMatrix/viewMatrix/modelMatrix All in js Calculated in , And then into shader In the middle , Why do you do this ？

Let's take a look at the first section vertexShader The number of executions is related to the vertex , And each vertex needs to be an object coordinate -> World coordinates -> Transformation of eye coordinates , If you pass in three vertices , On behalf of gpu Need to put proMatrix * viewMatrix * modelMatrix Calculate three times , And if we were in js It is calculated in , As a matrix to gpu, Is excellent .js Although compared with gpu slow , But the victory lies in the few times . Look at the following two results stay shader Middle computation stay js Middle computation The first is to pass all the matrices into gpu To calculate , I see FPS Keep at 50 about The second is to calculate the partial matrix in js Done in , I see FPS Keep at 60 What kind of Used here 180 A ball , If there are more balls , The difference can be more obvious . So gpu The calculation is good , But don't abuse it ~

js And shader The cost of interaction

Animation is to draw a static scene, then erase it and draw a new one , Keep repeating . In the first section we use setInterval To perform the , every last tick What we must do in is update shader Medium attribute perhaps uniform, These operations are time-consuming , the reason being that js and glsl Procedures to communicate , Now let's think about , Is there anything you can optimize ？ For example, there is a scene , It's also a ball , The material color of this ball is special

x,y There are gradients in both directions , It is no longer the one color above the first section , What should we do at this time ？ First, analyze the ball

All in all, there are gradients in both horizontal and vertical directions , If you expand by the previous logic , That means we have to have more uniform De identification Let's try , Use the following code , Switch uniform The way ：

Use switch uniform The way （https://vorshen.github.io/simple-3d-text-universe/doc/4.html） Find out FPS stay 40 about , It's still pretty stuck . Then let's think about , Where's carton ？ vertexShader and fragmentShader The number of executions can be said to be the same , however uniform4fv and drawElements every time tick Has been executed many times in , represents js And shader It takes a lot of time . So how should we optimize ？ The core is to avoid multiple changes uniform, For example, we can try to use attribute To replace uniform See how it turns out Use attribute The way （https://vorshen.github.io/simple-3d-text-universe/doc/3.html） Instantaneous FPS Just go up, right ~ So flexibility is very important , You can't be rigid , Reduce... As much as possible js And shader The interaction of is very helpful to improve the performance ~

Switch program Cost of

In the last section we found frequent Switch... Switch uniform It costs a lot of money , Is there a bigger one ？ Of course. , That is switching program, Let's use the previous example to switch program Try... In a different way , Look directly at the following example Be careful before clicking , May cause the browser to crash Switch program（https://vorshen.github.io/simple-3d-text-universe/doc/5.html） There is no need to care FPS Of course. , You can intuitively feel that chica is incomparable . Switch program The cost should be in webgl The cost is very large , So you must switch less program This is about less switching program, Instead of saying don't switch program, Theoretically, a single program After writing the whole program , When do I need to switch program Well ？ program The function of is to replace if else sentence , Is equivalent to if else Take out a single one program, So if a shader Inside if else It costs more than program The cost of , At this point we can choose to use program La . Of course, the degree here is a little difficult to grasp , Developers need to try more , Choose according to the actual situation . Here is a question about choice program still if else The discussion of the , Those of you who are interested can take a look https://forums.khronos.org/showthread.php/7144-Performance-More-Shaderprograms-VS-IF-Statements-in-Shader

Conclusion

Here we trigger from the principle , tried webgl Some of the optimizations of ~ If you have any suggestions or doubts ~ Feel free to leave a comment ~

Scan the QR code below the code ,

Follow more front-end dry goods articles at any time ！

▼

WeChat ：IMWebTech