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
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.
BTW: Does it work if you go back to
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.
Try it with the sources from: https://github.com/mrdoob/three.js/tree/r117
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.
I think your model is just too complex for mobile devices. Consider to reduce the amount of textures and their resolution.
That’s interesting that it loads in r117 but not r119 on Android. 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.
You guys are awesome @Mugen87 @donmccurdy
Now it is working on both platform thank you so much for helping me out.
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.