drei
drei copied to clipboard
MeshRefractionMaterial doesn't render with android mobile
dependencies
"@react-spring/three": "^9.7.3",
"@react-three/drei": "9.75.0",
"@react-three/fiber": "8.13.3",
"vite": "^4.1.0"
Chrome 115.0.5790.166 Android 10
Problem description:
as you can see in this url, 2 objects are missing in android mobile version (the star and the diamond) as they use MeshRefractionMaterial
Relevant code:
const texture = useTexture("./textures/surreal_scary_mountains.jpg")
<MeshRefractionMaterial
bounces={1}
aberrationStrength={0.01}
envMap={texture}
toneMapped={false}
/>
Suggested solution:
None
Which devices have you tested on? This is very device/GPU specific, but could be a wider issue with software limits which we can address shortly.
Mi 10T Lite CPU Octa-code Max 2.2Bhz
I am having issues on my device as well.
device: Samsung Galaxy S20 FE 5G GPU: Adreno 650
SPECS: https://www.gsmarena.com/samsung_galaxy_s20_fe_5g-10377.php
I got the same problem, the diamond that using MeshRefractionMaterial isn't rendered in my android phone, but other object such as Ring (the Ring doesn't use MeshRefractionMaterial) is rendered. I've tried using different browser, but the problem occur. However it's working well in PC and Android 13+ (Xiaomi POCO M3 Pro).
Device: Samsung Galaxy A52s 5G (Android 12) Log: android-console-log.log
Running into the same issue.
Device: Nothing Phone (2) android phone Specs: Snapdragon® 8+ Gen 1 | GPU Adreno 730 OS: Android 13
Same issue on Galaxy A54
Appears to be a ubiquitous Android issue
Same issue galaxy s23 ultra
I can reproduce on my Pixel 3a. Will try to update three-mesh-bvh
since we've caught a myriad of device issues there.