GLView of React Native has performance issues in iOS simulator

Question

Running React Native with (expo's) GLView has probably terrible performance in iOS simulator, making it unusable to develop your application.

My setup:

    "expo": "~47.0.8",
    "expo-gl": "~12.0.0",
    "expo-three": "^7.0.0",
    "react": "18.1.0",
    "react-native": "0.70.5",
    "three": "~0.145.0"

Running simple rotating Cube scene renders few FPS on M1 Mac running in iOS Simulator (iPhone 14Pro, iOS 16.1) The same project runs flawlesly on Androd simulator (Android 13 SDK, API33, pixel device)

What can be done to speedup the rendering?

Answer 1

TLDR: Disable the antialiasing that is enabled by default for iOS devices in GLView component.

When creating GLView pass msaaSamples property and set it to 0 (default: 4)

      <GLView
        msaaSamples={0}
        onContextCreate={....

This will bring the performance close to the Android simulator.

Why this helps?

I am just guessing its some memory issue. Mobile retina displays on its own use like 2K pixels. Adding 4 times Multisample anti-aliasing (short msaa) quadruples the amount of video memory needed to store one frame.

Note: Feel free to add more comments how to squeeze more performance out of it and I can incorporate it in this answer.