Non-embedded glTF texture not applied correctly in code... but works using Inspector

Questions
, ,
1

I have a glTF file that contains a number of different models of trees (in particular, it is a glTF binary Blender export of the fbx from this low poly trees pack, which was part of Humble Bundle’s recent Low Poly 3D bundle). The textures for the models are supplied as separate png files, which seems sensible, as some models have a number of different skins.

As a first step, I want to get a single type of tree into my scene. The problem is that the texture gets applied incorrectly with the code I have (scroll to the next screenshot to see how it is supposed to look):

original-tree-texture
original-tree-texture981×1153 93.8 KB 

const material = new BABYLON.StandardMaterial("tree", scene);
material.diffuseTexture = new BABYLON.Texture("/assets/tree/png/t1.png", scene)
// TODO: look into waiting for the texture to load

const treeName = "tree_1_1";
BABYLON.SceneLoader.LoadAssetContainerAsync("/assets/tree/gltf/", "all.glb", scene).then((result) => {
    const tree = result.meshes.find(entity => entity.name === treeName);
    tree.material = material;

    result.addToScene((entity) => {
        return entity.name === treeName;
    });
});

Curiously, if I use the Inspector to delete the diffuse texture associated to the tree material, and then Add Diffuse texture the same texture file, the result is as expected:

replace-tree-texture
replace-tree-texture981×1153 97.5 KB

Does anyone have any idea what I’m doing wrong?

Note: I get exactly the same problem with the Lowpoly farm animals that I have too so I don’t think the tree models are to fault!

2

I bet you need to setup the invertY parameter of the texture constructor to false for the one you create by code as GLTF tends to keep them uninverted for perfs.

2 Likes
3

Yes, that is exactly it! To help anyone else that ends up here - the change to the constructor is:

material.diffuseTexture = new BABYLON.Texture("/assets/tree/png/t1.png", scene, {invertY: false});

Many thanks!

1 Like