Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WebGLPrograms: Optimize program cache key generation. #22960

Merged
merged 9 commits into from
Dec 8, 2021

Conversation

gero3
Copy link
Contributor

@gero3 gero3 commented Dec 5, 2021

Description

Related #22530.

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

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.

@gero3 gero3 marked this pull request as ready for review December 5, 2021 18:11
@gero3 gero3 changed the title add perfrmance shader example add performance shader example Dec 5, 2021
@mrdoob
Copy link
Owner

mrdoob commented Dec 5, 2021

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

@gero3
Copy link
Contributor Author

gero3 commented Dec 5, 2021

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
Copy link
Contributor Author

gero3 commented Dec 6, 2021

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 Mugen87 changed the title add performance shader example WebGLPrograms: Optimize program cache key generation. Dec 6, 2021
@Mugen87
Copy link
Collaborator

Mugen87 commented Dec 6, 2021

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
Copy link
Collaborator

Mugen87 commented Dec 6, 2021

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
Copy link
Contributor Author

gero3 commented Dec 6, 2021

@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
Copy link
Collaborator

Mugen87 commented Dec 7, 2021

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
Copy link
Collaborator

Mugen87 commented Dec 7, 2021

Seems the screenshot of webgl_performance_shader needs an update.

@arpu
Copy link

arpu commented Dec 7, 2021

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
Copy link
Contributor Author

gero3 commented Dec 7, 2021

Seems the screenshot of webgl_performance_shader needs an update.

I've updated the screenshot

@mrdoob
Copy link
Owner

mrdoob commented Dec 8, 2021

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants