Composer kills performance?

Questions
1

Hello Forum :slight_smile: I am new to Three and tried out an example project.

When using the composer to render SSAO i receive massive performance drops. But even when not adding SSAO to the composer, the FPS drop to the floor. So I suspect the cause does not lie in the SSAOPass, but in my implementation of the composer or something else.

Does anyone spot any Problems that might cause these issues?
Please excuse the unclean code (I am not an experienced coder either)

I also ran into the problem that I can’t manage to have a Skybox and also nice reflections on my chrome parts… But I might do another Post on that topic :smiley:

Thank you for any help! <3

2

Not sure what the problem is, but this runs just fine: Edit fiddle - JSFiddle - Code Playground

Make sure you don’t call renderer.render when you’re also using the effects composer. Maybe that was the issue?

3

When using the composer, my performance gets almost cut in half.

Here i am using the normal renderer with 60+ FPS

image
image738Ă—303 12.2 KB

Here i am using the composer (with SSAO not added to it, so it should not do much) with 30 FPS

image
image728Ă—303 11.8 KB

Is the composer just so demanding by default?

The immage also gets pale/foggy when using the composer (even when not adding SSO so its not that) and I dont know why :frowning:

Thank yo for your time!

4

Hmm, are you maybe running on a laptop with integrated graphics instead of a dedicated GPU?

Bloom/SSAO-like passes are somewhat demanding, but it shouldn’t tank your FPS in half, unless your GPU just can’t handle it. :thinking: You could try setting powerPreference to high-performance in the options object of the WebGLRenderer constructor. See docs here: three.js docs

5

Even when not using the Bloom/SSAO-Pass but using the composer, i am experiencing low FPS. So i thought it had to do something with the composer and not the actual effects used.

No SSAO, No Bloom, but using the composer → 30 FPS

image
image841Ă—326 14.5 KB

6

What about now? Edit fiddle - JSFiddle - Code Playground

7

Runs smooth! What did you change? :heart_eyes:

Edit: You changed the render settigns right? The anti aliassing and the render quality has dropped in return…

8

I replaced the SSAARenderPass with the normal RenderPass. I think your GPU doesn’t like that very much. It’s either that, or the powerPreference setting I suggested earlier.

9

Ok, thank you very much!

I’ll have to check what settings work best for me and if my priotiry lies in quality or performance i guess…

1 Like
10

You’re welcome.

Depending on the type of app you’re making, these could be configurable by the end user in some form of an “options” screen. :wink:

1 Like
11

I’ll look into it, thank you :slight_smile:

It surprises me that Three JS is so demanding for my Laptop… Using PlayCanvas or Babylon JS the Performance problems are way smaller :smiley:
Thats why i thought i just used the wrong settings…