WebP CanvasTexture scene.environment crashing on iPhone Safari and Chrome

Questions
1

Hi,

Anyone know why WebP CanvasTexture scene.environment crashing on iPhone Safari and Chrome?

Is there a better way to use an ENV for a loaded GLTF?

Thanks

2

Depending on the OS version, WEbP might not yet be supported.

You normally want to use a HDR environment map for best quality so you probably want to load a .hdr or .exr file. Check out the following example for more details:

https://threejs.org/examples/#webgl_loader_gltf

1 Like
3

Env textures of this detail and file size are not needed and are too big file size, this is for dull room env lighting and non detailed reflections. 10mb textures are not an option. This is why I’ve gone the WebP route via CanvasTexture and then onto scene.environment.

However I have also built a custom node tool which takes a GLTF replaces all jpeg/png to webp and compresses all the textures to webp of a specified compression and drops it into a dynamically generated three project and displays it for review. This is fine on all browsers on PC, OSX and Android but iPhones are (even with latest version of OS and Software) get a few seconds of life till they FPS drop and crash. I have also had this result using TextureLoader using JPG via onLoad inline function attach to this.scene.environment = env.

All iPhones tested are updated to latest versions (stable/official) of their os and software versions of safari & chrome, also on browserstack.

4

Confirmed WebP is loading in the GLTF and scene.background via THREE.CanvasTexture.

An ENV WebP does not work on iphones using THREE.CanvasTexture on scene.environment = cTex

It does on Android.