WebGLPrograms: Optimize program cache key generation.

[gero3]

Description

Related #22530.

Adds a performance boost to getprogramcachekey. This is done in 2 steps:

• unrolling the loop for the parameters

• separating the boolean parameters and combining them into 2 integers.
  Before:old link to indeterministic example
  After unrolling parameters: old link to indeterministic example
  After separating booleans:old link to indeterministic example

• Dev Version now: link

• after unrolling the parameters: link

• after separating booleans: link

• Add layers link

For me, the example before any changes has only 35fps. After unrolling the parameters it becomes 40fps. And separating the booleans gets me to 50fps.

[mrdoob]

On a Pixel 6 the first one runs at 50fps, second one at 48fps and third one at 46fps 🤔

[gero3]

My example seems to have a big difference in performance between landscape mode and portrait mode. Can you check if you have the same result when rotating your screen? I think the differences you measure are because the example has randomness.

I'll recreate an example without randomness to make sure that we always measure the same thing. the viewport needs to see many objects to make the example work, so I'll add info to show how many objects actually get rendered.

[gero3]

more deterministic example added =>

• Dev Version now: link
• after unrolling the parameters: link
• after separating booleans: link

Now the example takes the following timings on my system

• 29fps before changes,
• 34 after unrolling the parameters
• 46 after separating booleans

The example has been improved by adding a pseudorandom generator to add the meshes always in the same way if the screen resolution stays the same. The example also always now shows 2500 objects in the viewport no matter what.

[Mugen87]

I guess I would simplify the example and remove custom shaders and post-processing.

It's sufficient for the performance test for producing many different programs which does not require custom shaders and post-processing.

[Mugen87]

Now the example takes the following timings on my system
29fps before changes,
34 after unrolling the parameters
46 after separating booleans

I have:

24fps before changes,
28 after unrolling the parameters
37 after separating booleans

Looks promising 🎉 .

[gero3]

@Mugen87

I guess I would simplify the example and remove custom shaders and post-processing.

It's sufficient for the performance test for producing many different programs which does not require custom shaders and post-processing.

There are still 2 major performance issues in getProgramCacheKey which I haven't fixed here.

• hashString(shadercode) is not very performant & is only executed on custom shaders.
• Array.join() & every time creating a new array is not very performant & very garbage collecting heavy.

So the example was written with these performance issues also taken into account. The post processing isn't really required for the example.

[Mugen87]

The post processing isn't really required for the example.

Okay, then let's remove the post processing so the example only has the bits which are actually required.

[Mugen87]

Seems the screenshot of webgl_performance_shader needs an update.

[arpu]

21 fps before changes,
24 after unrolling the parameters
33 after separating booleans

ANGLE (AMD, AMD Radeon (TM) RX 460 Graphics (POLARIS11), OpenGL 4.6 (Core Profile) Mesa 21.2.5)]
Linux Chrome 96.0.4664.45 (Offizieller Build) (64-Bit)

[gero3]

Seems the screenshot of webgl_performance_shader needs an update.

I've updated the screenshot

[mrdoob]

Thanks!