Problems with loading (alpha) .basis textures

Questions
, ,
1

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:

2

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?

3

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…

4

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
5

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:

6

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:

7
  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
8

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:

9

So there is PNG somewhere? JPG have no transparency

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

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

10

Maybe @bghgary knows the answer to this one ?

11

@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
12

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:

13

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
14

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

15

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