MeshPortalMaterial incompatible with React Native

[jorgenbuilder]

• three version: 0.179.1
• @react-three/fiber version: 9.3.0
• @react-three/drei version: 10.7.4
• node version: 20.17.0
• npm (or yarn) version: 11.5.2

Problem description:

Attempting to use <MeshPortalMaterial /> in an Expo / React Native app breaks and throws the following error:

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

This seems to occur because expo-gl does not implement multisampling? By recreating an isolated example, I can see that setting samples: 0 on the underlying frame buffer object resolves this error, i.e.:

const rt = useFBO(512, 512, {
  samples: 0,
});
// Works!

const rt = useFBO(512, 512, {
  samples: 2,
  depthBuffer: true,
});
// Error: renderbufferStorageMultisample() isn't implemented yet!

Relevant code:

I have not included a sandbox because the error behaviour relies on the expo bundler.

Suggested solution:

Update @react-three/drei/native so that it disables multisampling instead of simply returning the core module.

[DennisSmolek]

Tracking this down shows that the FBO that is done is actually in RenderTexture

It's set this way because its used for anti-aliasing in THREE.WebGLRenderTargets https://threejs.org/docs/#api/en/renderers/WebGLRenderTarget

Have you tried setting `samples={0} on the material? it seems to pass all props to the RenderTexture

Types might complain but its worth testing.

IMPORTANT NOTE: after a year of messing with it I (and many others) realized react-native hates 3d. Many many things simply wont work and I wouldnt expect them to help any time soon.

There does seem to be msaa related... something happening.

[jorgenbuilder]

Ah so 3D is a black sheep in react-native, good to know.

I tried jamming a samples={0} prop in a few places to no avail.

Perhaps add a samples prop to <MeshPortalMaterial /> which would be passed to the underlying <RenderTexture />?

[DennisSmolek]

Ah so 3D is a black sheep in react-native, good to know.

I tried jamming a samples={0} prop in a few places to no avail.

Perhaps add a samples prop to <MeshPortalMaterial /> which would be passed to the underlying <RenderTexture />?

If I followed correctly the props should be passing already (but TS would flag it)

If you put it on and didn't work someone will have to take a look.

Its such a pain to get a testcase setup though to resolve this.

Do you have a MVP setup with RN? otherwise this will have to wait for someone to have time to set that up and test it

[jorgenbuilder]

I'll throw together a repo to isolate.

[jorgenbuilder]

Here's a minimal reproduction: https://github.com/jorgenbuilder/Mesh-Portal-Material-React-Native

Note, edited my local <MeshPortalMaterial /> module to pass a samples prop to <RenderTexture />, and it fixed the error.

[jorgenbuilder]

Seems like the PR I just created should fix things.