MeshRefractionMaterial crashes the page or disappears on older devices

[nthnmillar]

I found that the MeshRefractionMaterial applied on a gem mesh crashes the page on iPhone 11 or the mesh doesn't appear on a Galaxy Tab S4.

three version: 0.148.0
@react-three/fiber version: 8.0.0
@react-three/drei version: 9.53.3

The drei MeshRefractionMaterial examples provided also crash. I've seen other websites with gem refraction working on these older devices though, not all users may have a latest device.

@react-three/drei": "9.53.3"

Below is some code console logged during the issue, seems to be a shader issue.

THREE.WebGLProgram: Shader Error 0 - VALIDATE_STATUS false

Program Info Log: Fragment shader is not compiled.
FRAGMENT
ERROR: 0:85: '_ucount' : undeclared identifier
ERROR: 0:85: '+' : wrong operand types no operation '+' exists that takes a left-hand operand of type 'in uint' and a right operand of type 'float' (or there is no acceptable conversion)
ERROR: 0:94: '_uminDistance' : undeclared identifier
ERROR: 0:98: '_ufaceIndices' : undeclared identifier
ERROR: 0:98: 'assign' : cannot convert from '4-component vector of uint' to 'float'
ERROR: 0:99: '_ufaceNormal' : undeclared identifier
...

Here is the entire log:
https://drive.google.com/file/d/1UKtNY9ZExrBMgtebXlmElqzViG3pW5EU/view?usp=sharing

[nthnmillar]

These issues were resolved by upgrading to the latest modules:

"@react-three/drei": "^9.105.6",
"@react-three/fiber": "^8.16.6",
"three": "^0.164.1",

The refraction now renders on the older devices as well.