Three enviroment not loading on iphone

Questions
,
1

I’m making a portfolio website and the three eviroment works fine in most devices (I have tried it on desktop, ipad and android) but it’s not loading on iphone. The rest of the website loads normally and there are not errors in the console, it just appears empty. Has anyone else had this issue?

This is my website: renatacampuzano.com
(a work in progress)

Thank you in advanced!

2 Likes
2

Excellent portfolio website, try to check your postprocessing if u r using a post processing or check the WebGL settings, in some phone the WebGL or WebGPU doesn’t work, but in most case like iPhone it should work

3

I’m not using any post-processing and I just checked the iPhone WebGL settings, everything seems to be enabled. But thanks for the reply! Any other ideas are welcome (:

4

Since you are using RGBELoader to load your HDR environment map, I could imagine that certain Apple mobile devices do not support half float textures. These devices usually use an outdated version of iOS (and thus do not support WebGL 2) or a really old hardware.

There is not much what you can do about this other than applying a fallback environment map to WebGL 1 devices which do not support the half float texture WebGL extension (OES_texture_half_float). You can test if there is a WebGL 2 context with a helper class from the three.js repository. The usage looks like so:

An extension test looks like so:

console.log( renderer.extensions.has( 'OES_texture_half_float'  ) );
1 Like
6

I removed the environment map completely and is still not working ): any other ideas?
Thanks for the help.

7

Quick update! I installed the new iOS 16.6 on my iphone and now it works even with the environment map, so maybe it was an issue with a particular iOS version? The problem is now I’m scared it wont work in some iphones.

if someone could try it in an iphone I would appreciate to know if it the 3D loads or not and what iOS version you have. Thanks everyone!

renatacampuzano.com

8

I guess so. The good thing is that the adoption rate of iOS 16 is already good. Meaning:

  • 90% of all devices introduced in the last four years use iOS 16.
  • 81% of all devices use iOS 16.

These statistics are from May 30, 2023 and directly from Apple.

So your website should definitely work on the vast majority of iOS devices.

9

That’s good news! Thank you again