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:

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.
              
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.
              
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.