glTF model is not loading in iOS & Android

Questions
1

Hi All,

I am trying to load a gltf model in mobiles using gltf loader but it is not loading up. Model is working in desktop browser but not in mobile browser as expected. I checked the log to see error but i couldnt able to find any pls help me on this.

website link: https://gowtthii.000webhostapp.com/3dmodel/example/webgl_loader_gltf.html
model link:https://drive.google.com/file/d/1-BsuJ4lRYxrAQatcOWG6tG2X0FZgGrE1/view?usp=sharing

2

On my Pixel, I get the following error in the browser console with Chrome.

DOMException: The ImageBitmap could not be allocated.

I suspect that mobile devices do not have enough memory to allocate image bitmaps for the 46 textures of your model.

3

BTW: Does it work if you go back to r117?

4

Hi mugen,

Thanks for your reply, how do i go back to r117?could you pls help me on this?

I know it is a silly question to ask but as i am new to three js pls help.

As you mentioned i am facing the same error while testing it on android mobile.

5

Try it with the sources from: GitHub - mrdoob/three.js at r117

6

Wow, now it is working like a charm in android but still facing same issue on my iphone 8(IOS). Here is the log

WARNINGTHREE.WebGLRenderer: EXT_frag_depth extension not supported.
WARNINGTHREE.WebGLRenderer: WEBGL_draw_buffers extension not supported.
WARNINGTHREE.GLTFLoader: Custom UV set 1 for texture normalMap not yet supported.

pls help

Thanks!

7

I think your model is just too complex for mobile devices. Consider to reduce the amount of textures and their resolution.

8

That’s interesting that it loads in r117 but not r119 on Android. :confused: Maybe we need an option to disable the ImageBitmapLoader mode, like GLTFLoader: Option to enable/disable ImageBitmapLoader · Issue #20055 · mrdoob/three.js · GitHub? But yeah, it sounds like the model is borderline / too complex either way.

@GOWTHAM there are seven 4K textures in this model, and those consume ~50MB of GPU memory each on a mobile device. That’s quite a lot, and much more than the model needs, so as @Mugen87 suggests you will need to optimize this model.

The easiest way to do that is to unpack the textures with glTF-Pipeline, then just resize them to at most 2K each.

9

You guys are awesome @Mugen87 @donmccurdy

Now it is working on both platform thank you so much for helping me out.

10

How do you create application for both platform. I am also trying to create an application by integrating the three.js with React Native. But I couldn’t load the gltf file. I am using expo-three for react native as the alternate of “THREE” , because expo-three only suitable for mobile version. Can you please say how do you load objects and in which technology you are creating this application.