WebGLRenderer: Add support for multiple programs per material.

[Mugen87]

Fixed #15047.
Fixed #19056.
Fixed #17701.

A material can now reference to multiple shader programs. This avoids expensive shader recompilation effects and solves some conceptual issues like #17701. Since this PR is a deep change in how WebGLRenderer manages shader programs, I recommend to merge it at the beginning of a dev cycle.

The performance of existing apps should not be affected by this change since the general code flow in the renderer is the same. That said, it's still room for performance improvements since I've noticed during the development that certain tasks like the build of uniforms lists could be optimized.

BTW: I've renamed initMaterial() to getProgram() since the method now returns an instance of WebGLProgram to the caller.

[cedemax]

Would this fix the closed issue #19566? If so, is there any example or tips on how to modify the use of overridematerial (in SSAOPass for example) to use this new feature? Thanks!

[Mugen87]

Would this fix the closed issue #19566?

Yes, I think so.

[mrdoob]

Lets try merging this one this cycle! Do you mind resolving the conflicts?

[Mugen87]

Conflicts resolved!

[mrdoob]

@Oletus Do you have time to take a look at this PR?

[Oletus]

This is definitely a welcome change! Few things I'd like to see changed inline but nothing major.

Also, what I'm a bit worried about is loading multiple versions of the same shader program unintentionally, though it's obviously better than wrecking runtime performance by constantly recompiling programs. For example, it's easy to end up using multiple framebuffer formats in a situation where just using sRGB for everything would be fine. Each format multiplies the number of shaders that need to be loaded, increasing load times. Would there be any suitable mechanism for communicating to the three.js app developer that their render pipeline may be using more variants of shaders than they expect?

[Oletus]

Looks good!

[mrdoob]

Would there be any suitable mechanism for communicating to the three.js app developer that their render pipeline may be using more variants of shaders than they expect?

We could try to add this to https://github.com/threejs/three-devtools?

[mrdoob]

Maaaaaany thanks!