EffectComposer dulls lighting effects

Questions
, , , ,
1

So I’m using three-js on my React Native application via react-three-fiber and adding EffectComposer through react-processing.

I am trying to use anti-aliasing so that I can avoid jagged edges on my character models but it seems that I cannot get native MSAA on Android due to expo-gl not supporting this. On iOS everything is fine.

The only way to get anti-aliasing on Android is through FXAA using EffectComposer however when using EffectComposer it seems to dull the lighting in the scene. Trying to use SMAA or any effect seems to also do this.

Here is what happens when adding EffectComposer into the scene:

Without EffectComposer (no AA) With EffectComposer and FXAA

Is there a way to correct the lighting after adding EffectComposer? Or am I doing something wrong?

2

three had a breaking change recently that changed how tonemapping works. TM now needs to be off, and toneMapped on the material is ignored. the composer must map on its own.

<Canvas flat gl={{ antialias: false }}>
  <EffectComposer disableNormalPass>
    <... your effects ...>
    <ToneMapping />
</Canvas>

in the jsm/composer it’s similar, there i think it was called outputpass.

1 Like
3

Thank you so much for your reply. I tried your suggestion and the lighting on the character model definitely looks right now! However the background of the scene which was white has now turned into a grey.

With EffectComposer (FXAA, ToneMapping) Without EffectComposer
1046×856 95.9 KB
1072×814 89.8 KB

I need the background of my scene to be white. Is there any way to correct this?

4

Update: I was able to fix the white background of the scene by just removing the white color from the scene and rendering the parent non threejs view white.

5

with postpro it’s often better to use scene.background. alpha bg doesn’t play well with a lot of effects like bloom, just something to keep in mind. ever since threejs has changed colors are slightly off, or different. the tonemapping effect btw has more properties that can be fine tuned, there’s contrast and whitepoint i believe. also dedicated passes for contrast, gamma, hue and so on.

ps, rt/postpro effectcomposer uses MSAA by default, you normally don’t need FXAA. and if you use FXAA you should disable the other: <EffectComposer multisampling={0}> otherwise it’s wasted performance.

1 Like
6

Thanks for the tips. It seems I have to use FXAA on Android because the underlying expo-gl view for React Native does not support MSAA on Android. I guess I can use FXAA on Android and use MSAA on iOS.

However I was told to stick with FXAA on mobile if possible for some reason.

7

did not know, in that case it’s better to stick to fxaa indeed and not go through the hassle. but still switch msaa off or else you incur double perf hit for aa.

1 Like