Problems with loading (alpha) .basis textures

Hello everyone,

i’m trying to use .basis textures in my project, and it works great (performance wise)!

loading regular emissiveTexture works fine, however, the loader prints an error, when i try to load an alpha-texture saying:

Uncaught (in promise) RuntimeError: Unable to load from assets/3d/gltf_moebel/moebel_reexport.gltf: /textures/3: TextureLoader failed to load data - Fallback texture was used

The (alpha) .basis-texture-file exists (all the emissiveTextures are getting loaded), so i assume, i’m doing something wrong with my loadingapproch?


this.loadMaterialPropertiesAsync = function (context, material, babylonMaterial) {
    var promises = [];
                
    if (material.emissiveTexture) {
        promises.push(loader.loadTextureInfoAsync(context + "/emissiveTexture", material.emissiveTexture, function (babylonTexture) {
            babylonMaterial.emissiveTexture = babylonTexture;

        }));
    }
    else {
        var pbrMetallicRoughness = material.pbrMetallicRoughness;
            if (pbrMetallicRoughness) {
                if (pbrMetallicRoughness.baseColorTexture) {
                    promises.push(loader.loadTextureInfoAsync(context + "/pbrMetallicRoughness/baseColorTexture", material.pbrMetallicRoughness.baseColorTexture, function (babylonTexture) {
                        babylonMaterial.diffuseTexture = babylonTexture;
                    }));
                }
            }
    }
}

In the .glft the material is defined like so:

 {
            "alphaMode" : "BLEND",
            "doubleSided" : true,
            "name" : "moeblscreen16x9_rahmen_shadow",
            "pbrMetallicRoughness" : {
                "baseColorFactor" : [
                    0,
                    0,
                    0,
                    1
                ],
                "baseColorTexture" : {
                    "index" : 1
                },
                "metallicFactor" : 0
            }
        },

when packing the .gltf as a .glb in blender with .jpg and .png textures everything works fine…

Can someone please tell me, what i’m doing wrong? Thanks alot! :slight_smile:

I’m not an expert of material exports from blender, but isn’t it so that for pbrMetallic, the diffuseTexture is replaced through the baseTexture?

hey mawa,
thanks for your reply!

unfortunately i think that is not the problem. i tried a bunch of different approches like

babylonMaterial.emissiveTexture = babylonTexture;
or
babylonMaterial.opacityTexture = babylonTexture;

sadly, the error remains the same… :confused: i think it has something to do with the loader not finding the texture, but i don’t understand why…

Oh, I’m sry. I don’t have the entire script. Just detected this. But emissive and opacity should make it through if (as you say) it would find the reference to the texture. I’m afraid I cannot help you further with this. As I said, I don’t really use this. My materials are mostly all created straight in BJS (old school like :wink:)
I can however try push your question and callin some people who might be able to help.
@labris @RaananW , would Yours please kindly have a look at the above and help out @fab with this?
Thanks and have a great sunday Everyone, :sunglasses:

1 Like

Thanks again for the reply.

i was able to reproduce the problem in a playground:
Babylon.js Playground

if one removes the lines 87 to 89 it works (mostly) as intendet - sadly without loading the alpha-textures

maybe soneone can point me in the right direction…? Thanks! :slight_smile:

Thx for the PG. This will certainly help. I’m sure the answer will come shortly. Though, you might have to wait until tomorrow. It’s sunday, after all :sunglasses: :parasol_on_ground:

  1. Does you code work for usual textures?
  2. How .basis textures are produced?
  3. Did you try any other compressed textures formats?
1 Like

hey labris,

1.: i load 3 different .glft-files with the same approch. it works with .basis and .jpg, only in one .gltf-file (the one with the alpha-textures) i have problems(with the alpha-textures, the others in that file (normal emissive-textures in .basis) load fine)
2.: baked in blender, then transformed via GitHub - BinomialLLC/basis_universal: Basis Universal GPU Texture Codec
3.: i did not. from what i understand .basis is the only format that has a cross-plattform support?

the error sais : “TextureLoader failed to load data” so i assumed it has something to do with the formating/ the way i try to access the the url of the basis, which is in the .gltf… could it be a problem with the .basis as well?

Thanks! :slight_smile:

So there is PNG somewhere? JPG have no transparency

  1. Could you try another texture compression tool, like CLI | glTF-Transform ?
    You may convert all GLB and see what will happen.

From one point you are right. Here is KTX specification - KTX File Format Specification
Still there are Basis Universal UASTC Format, Basis Universal ETC1S Format and other things which may have effect on a final result.

Maybe @bghgary knows the answer to this one ?

@fab Are you using Basis textures with glTF? This isn’t officially supported. If you want to use glTF, you should use KTX files.

That said, I don’t know why alpha doesn’t work. The PG you posted earlier doesn’t work for me:

Access to XMLHttpRequest at ‘https://loewn.de/bjs/textures/schellenbergrundaufzug.basis’ from origin ‘https://playground.babylonjs.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
loewn.de/bjs/textures/schellenbergrundaufzug.basis:1

1 Like

sry for the delay, had a mean deadline yesterday…

i’ll post the solution i endet up using here, maybe it will help someone in the future:

so in blender we set all textures as emissive, then in the loader-extention i iterated over all texture-names, loading a .png file if there was the word shadow in the name and setting it as diffuseTexture with alpha. Otherwise i used the .basis file as emissiveTexture… It feels like a bit of a hacky solution, but it ended up working :slight_smile:

If someone knows a better solution i’d still be interested :slight_smile:
apparently .basis (or the babylon-basis-interpreter) can’t handle transparencies? (or at least i allways got an error when i tried to load a .basis file that was created using a .png with alpha…)

@labris: thx, i’ll have a look at the tool you recommended. I’m not super satisfied with the result i got from BinomialLLC-converter, since all the clay-render textures i used it on got some kind os redish flair in the highlights, that isn’t there in the original png. (But this is maybe a topic for another post:)

@bghgary: Thanks for your reply. Yes i do (and it works :slight_smile:
correct me if i’m wrong, but isn’t .gltf just fancy json, only storing paths and dependencies? :slight_smile:

in my playground, there was an old test-texture missing, i fixed it now. But the problem remains the same: when trying to load .basis-textures created from .png with alpha the loader crashes. (if one removes lines 87-89 in the playground it works fine - not loading these textures)

in the meantime i found a different post with a similar problem, but i only unterstand half of it… :slight_smile:

i’ll have to do some more research on the compressed textures topic obviously. i’m completly new to this…

thank’s everyone :slight_smile:

Uhm, no? :slight_smile: It is a standard created and maintained by the 3D Formats working group of the Khronos Group. Disclaimer: I am part of this working group. See the specification: glTF/specification/2.0 at main · KhronosGroup/glTF (github.com)

1 Like

Hey @fab just checking in if you’d still like any help :slight_smile:

hey @carolhmj,
thanks for asking. I couldn’t get .basis with alpha to function, but the work-around using alpha-.png instead of .basis for the shadows worked quite well… :slight_smile:

2 Likes