WebGL：什么更快？

Question

What is faster in WebGL?

once: create 1000 shaders for 1000 objects and set uniforms to them

every frame: bind shaders when rendering them

Or

once: create 10 shaders for 1000 objects

every frame: bind shaders + update uniforms according to objects?

I know I can write test on it. But I feel that someone surely thought about it before me. Thank you very much.

Answer 1

更改着色器很昂贵（它会使指令缓存无效），更新制服很便宜（它只是更新寄存器文件中的值）。

Answer 2

It's helpful to remember that the Graphics Pipeline is an actual pipeline typically implemented in hardware. You get to configure the pipeline by assigning shaders and setting uniforms, and then you get to activate the pipeline (by calling drawElements or one of its friends). This essentially loads a pile of input data into the start of the pipeline, and kicks off a process that is highly parallel. For example, in the middle of a run, some early vertices will have made it through the vertex shader and rasterizer, and the resulting fragments are being shaded, while other vertices are still back at the vertex shader stage being transformed. The different sections of the pipeline are all doing their thing to the data flowing by.

After you kick off this process, the CPU is free to do other stuff while the pipeline runs. But, if you want to reconfigure the pipeline, such as by changing shaders or altering uniforms, the CPU will block your thread and wait for the pipeline to be completely done to the last pixel.

This means you want to avoid stopping and restarting the pipeline, to the extent possible. So the usual strategy is batching: Get as much work done as possible in a single draw call, with a single set of uniforms. That way, you exploit the parallel nature of the pipeline to the best extent possible in your app.