fix(native): use MSAA for antialias on iOS

[CodyJasonBennett]

Fixes #3114.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit a28f63e:

Sandbox	Source
example	Configuration

[ninjz]

@CodyJasonBennett I see that this fix only applies to iOS. Is there any way to get MSAA working on Android as well?

I have been using EffectComposer with FXAA however it changes the lighting effects and it doesn't match up to the lighting to iOS with MSAA on.

[CodyJasonBennett]

It should work on Android by default. Otherwise, render to a rendertarget with samples configured.

[ninjz]

Yeah, on Android it doesn't seem to be on by default. When trying to set the render target with samples configured I get this error:

Error: Exception in HostFunction: EXGL: renderbufferStorageMultisample() isn't implemented yet!, js engine: hermes

Here is how I am setting the render target:

<Canvas
    camera={cameraRef.current}
    gl={{
        powerPreference: 'high-performance',
        logarithmicDepthBuffer: true,
        antialias: true,
        stencil: false,
        depth: false,
    }}
    scene={sceneRef.current}
    onCreated={state => {
        state.gl.setRenderTarget(
            new THREE.WebGLRenderTarget(deviceWidth, deviceHeight, {
                samples: 1,
            }),
        );
    }}>
   {/* Omitted */}
</Canvas>

Am I missing something here?

[CodyJasonBennett]

I'd continue this in expo-gl if you must have that. IMO I would stick with FXAA or SMAA for mobile unless you're hellbent on alpha-to-coverage.

Please, create a discussion or ask in our Discord for questions like this. I mostly miss stuff in old triage and it's not a good place for back and forth conversation.