Multiple textures not displaying correctly

[Mykita]

Hi, We're looking to expand our workflow working with the amazing technology that glTF has to offer - while doing so we are experiencing some differences in how textures are being displayed in the Babylon viewer and in the glTF viewer.

Our Blender workflows enables textures being stacked on top of each other. In the images below you can see what I mean: we have baked an AO map in 1:1 scale and placed that on top of a tiled texture (brick wall) to avoid baking this as a large texture wrapping all around the facade.

Babylon viewer

glTF viewer

If I were to guess, it seems to me that the glTF viewer is not able to read the map channels and therefore display textures without their attached map channel data. In the Babylon viewer, you can see that the loading displays correctly. Is this because the Babylon viewer allows several Map Channels? Unity for example only allows the two first map channels to be displayed (like most game engine does). Or do you belive there's another problem?

Here's how the texture nodes looks inside Blender (the custom node in the top is the one that displays the AO over the bricks)

[Mykita]

https://www.dropbox.com/s/lptpls14zxpxqp3/File9.gltf?dl=0

There’s the file if someone would be able to inspect it. I opened it in the http://editor.babylonjs.com/ and I think the result is caused by the Metallic/Rough workflow. When exported to gltf/glb, this is interpreted totally different in Babylon and glTF it seems

[donmccurdy]

Three.js (used for https://gltf-viewer.donmccurdy.com/) is limited in how UV maps can be applied to textures. It supports only two UV maps per material, and they must be used in a particular way:

• UV2 applies to ambient occlusion and light maps.
• UV1 applies to everything else.

That is a complex limitation to fix. But if all the materials in your scene use exactly the arrangement above, the problem is likely less complex: the order of some UV maps is probably just swapped from what three.js requires. That could be fixed in three.js loader, perhaps: swapping the UVs where necessary. Or Blender should also let you reorder UVs, I think.

[Mykita]

Thanks for your reply @donmccurdy.

Here you can see our AO map selected inside Blender:

The material outputs like this in the exported glTF file:

    "materials" : [
        {
            "doubleSided" : true,
            "emissiveFactor" : [
                0,
                0,
                0
            ],
            "name" : "brick(yellow)",
            "normalTexture" : {
                "index" : 0,
                "scale" : 0.5,
                "texCoord" : 1
            },
            "occlusionTexture" : {
                "index" : 1,
                "texCoord" : 0
            },
            "pbrMetallicRoughness" : {
                "baseColorTexture" : {
                    "index" : 2,
                    "texCoord" : 1
                },
                "metallicFactor" : 0,
                "metallicRoughnessTexture" : {
                    "index" : 3,
                    "texCoord" : 1
                }
            }
        },

I've tried to rearrange the indexes but with no luck. Would you be able to see if its solvable? Thanks a lot

[Mykita]

@donmccurdy it works. Had to reorder it in Blender before export. Btw - keep it up - your viewer is amazing both for viewing/testing and debugging