Load gltf from arraybuffer or json, not using blob

Hey,
Because I didn’t find something related to this, I decided to ask.
So, do we can load a gltf without using direct link to it or blob?
I’m trying to import a gltf file in reactNative, and I didn’t find a workaroud yet :frowning:
Thank you @bghgary

Is this what you mean?

https://playground.babylonjs.com/#88CB6A

1 Like

Wow, seems to be exactly what I wanted. I’ll try and let you know.
Thanks!

1 Like

If you’re up for it, maybe you can help update the documentation for how to do this where you were looking. I didn’t find any documentation for this either.

Sure. Here is it ok?
https://doc.babylonjs.com/resources/external_pg_assets#embedded-assets
Maybe we can have import embedded as blob, or as string

Maybe here is better: Load from any file type - glTF, OBJ, STL, etc. - Babylon.js Documentation


Done, hope to be good.

2 Likes

Hey @bghgary I have other issue, related to gltf textures this time. It seems gltf loader convert the textures to blobs to handle them. Is there a way to avoid this?
I tried this inside a customLoader using this functions ‘loadMaterialPropertiesAsync’ but without success.
What I was able to do was to set the texture to null in the function bellow and manually add it once the gltf file is loaded in onSuccess callback of importMesh. But I’m curious if there is a better way. Thanks!:wink:

this.loadMaterialPropertiesAsync = function (context, material, babylonMaterial) {
            var promises = [];
            var pbrMetallicRoughness = material.pbrMetallicRoughness;
            if (pbrMetallicRoughness) {
                if (pbrMetallicRoughness.baseColorTexture) {
                    promises.push(
                        loader.loadTextureInfoAsync(
                            context + "/pbrMetallicRoughness/baseColorTexture",
                            pbrMetallicRoughness.baseColorTexture,
                            async function (babylonTexture) {
                                // alert('1 ', JSON.stringify(babylonTexture));
                                // babylonMaterial.albedoTexture = Texture.LoadFromDataString("image", babylonTexture, scene);
                                // const url = 'https://preview.smarteam3d.com/build/image2.jpg';
                                // const asset = await AssetUtils.resolveAsync(url);
                                babylonMaterial.albedoTexture = null; //Texture.LoadFromDataString("image", babylonTexture._buffer, loader.babylonScene, true,true,true, Texture.BILINEAR_SAMPLINGMODE); // Texture.LoadFromDataString("image", babylonTexture._buffer, loader.babylonScene);
                            }
                        )
                    );
                }

We’ve recently stopped using blobs for textures. What version of Babylon are you using?

4.1.0-alpha.19. I’ll update and let you know :wink:

Same issue for 4.1.0-alpha.22

Can you repro in a PG? There are no more blobs being used in the loader.

hI @bghgary you are right, I wasn’t able to repro in pg :smile:
But I’ll post here the warning I’m getting in reactNative app:
image
If I understood well, here I do not have this function createObjectURL and it is recomanded to convert the blob to base64 or use FileReader instead, but I don’t know where exactly to do this :frowning:

That call stack looks like blobs are still in use. Can you make sure the files are actually updated all the way to the end? Maybe there is a cached file somewhere that is still using an old version.

2 Likes

Oh, I empty npm cache, remove node-module, run npm i, empty android cache, but I’m still getting the same warning :unamused: I’ll check deeper. Thank you for now!

I looked at the code again. Even though we are not using Blobs anymore in the glTF loader, we are still using ArrayBuffers which ends up still using Blobs in LoadImage. I’m surprised this doesn’t repro in the PG.

Hey @bghgary, this is a good news…I’m not crazy yet :joy:
I didn’t know what I can do more to check it. I tried to import a simple image as texture and the error(warning) came again. Because of this when I import an image I’m using ‘Texture.createFromString’ instead of ‘new Texture’. Can we avoid using them in this function too? Or maybe use createFromString method on gltf files?

1 Like

I don’t have a good solution. I can change the loader to use urls directly, but this won’t work for loading GLB, so I’m hesitant to make this inconsistent.

‘Texture.createFromString’ instead of ‘new Texture’

What is Texture.createFromString?

1 Like

Oh sorry, I messed up the name of the method
About this I talked: Babylon.js/texture.ts at 97c8a42bdf57fa3155c83216b6a5d1ef8e9b4bf5 · BabylonJS/Babylon.js · GitHub
Like this I avoid to create blobs