MeshRefractionMaterial - Shader error for some devices

[julianneatpencil]

• @react-three/drei": "^9.122.0
• @react-three/fiber": "^8.18.0
• three": "^0.174.0
• node version: 22.13.1
• npm version: 11.1

Though I've also tried an independent project with React 19/latest versions of everything and encounter the same issues

Problem description:

On certain devices (a lot of iOS/macOS though not exclusively those) we have users experiencing the following two bugs:

• null is not an object (evaluating 't.getShaderPrecisionFormat(t.VERTEX_SHADER,t.HIGH_FLOAT).precision')
• THREE.WebGLRenderer: A WebGL context could not be created. Reason: Could not create a WebGL context, VENDOR = 0x8086, DEVICE = 0x0102, GL_VENDOR = Google Inc. (Intel), GL_RENDERER = ANGLE (Intel, Intel(R) HD Graphics Direct3D9Ex vs_3_0 ps_3_0, igdumd64.dll -9.17.10.4459), GL_VERSION = 9.17.10.4459, Sandboxed = yes, Optimus = no, AMD switchable = no, Reset notification strategy = 0x8252, ErrorMessage = BindToCurrentSequence failed: .

For some users, this is so bad it crashes their browser. For other users, refreshing seems to fix the problem. I've been able to narrow down the problem to MeshRefractionMaterial, such that when that is removed, we don't experience the crashing problem. I also created a custom shader that was quite similar, but without the reference to BVH, and that worked without crashing. Weirdly enough, shader code with BVH that does not use React also seems to work (see code example)

Relevant code:

This example: https://gkjohnson.github.io/three-mesh-bvh/example/bundle/diamond.html works
However this one: https://codesandbox.io/p/sandbox/zqrreo?file=%2Fsrc%2FApp.js crashes the browser

Suggested solution:

I don't currently have a suggested solution beyond investigating why BVH and React together seem to cause this problem. Not sure if a ticket should be submitted to the BVH repo instead, if so, please let me know, I'm happy to submit one or help submit one. It is also a difficult bug to replicate. Internally, we have one device (an iPhone) that is consistently crashing from MeshRefractionMaterial and are happy to help test with that if needed.

[rohan-percept]

@julianneatpencil - Did you ever find any workaround on this? One of my apps has started to crash on newer iPads (with M4). It uses the Mesh Refraction Material. Now my M3 Max MacBook Pro also having issues in Safari with the same WebGL Context Lost and shader precision issue.
Please let me know if you got around this somehow.

[julianneatpencil]

Unfortunately not, we are not using Mesh Refraction Material as a workaround.