search

pmndrs / drei

🥉 useful helpers for react-three-fiber
https://drei.pmnd.rs/
MIT License
7.85k stars 641 forks source link

MeshRefractionMaterial crashes the page or disappears on older devices #1916

Closed nthnmillar closed 1 month ago

nthnmillar commented 2 months ago

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 commented 1 month ago

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.