Cant change texture of a GLB model

Help & Support
1

I have implemented the PlayCanvas-gltf script and can succesfully load a model from my database. However I have it set up without embedded textures and I can’t seem to be able to add a texture to it.
For testing I exported a default cube in Blender as .glb, and have also tried a playcanvas cube.

Code for loading texture:

var asset = new pc.Asset(productCode + "_Diffuse", "texture", {
    url: "assets/text.png"
});

app.assets.add(asset);

asset.on("error", function (message) {
    console.log(message);
});

asset.on("load", function (asset) {
    var material = cube.model.material;
    material.diffuseMap = asset.resource;
    material.update(); //this works for the default cube

    var materialGlb = gltf.model.material;
    materialGlb.diffuseMap = asset.resource;
    materialGlb.update(); //this doesnt work for my own cube
});

app.assets.load(asset);

Code for loading the models:

//Default cube
var cube = new pc.Entity('cube');
cube.addComponent('model', {
    type: 'box'
});
cube.setLocalScale(1, 1, 1);
app.root.addChild(cube);

//GLB
app.assets.loadFromUrl(url, 'binary', function (err, asset) {
    var glb = asset.resource;
    loadGlb(glb, app.graphicsDevice, function (err, res) {
        // Wrap the model as an asset and add to the asset registry
        var asset = new pc.Asset('gltf', 'model', { url: '' });
        asset.resource = res.model;
        asset.loaded = true;
        app.assets.add(asset);

        // Add the loaded scene to the hierarchy
        var gltf = new pc.Entity('gltf');
        gltf.addComponent('model');
        gltf.model.model = res.model;
        gltf.setLocalScale(.1, .1, .1);
        gltf.setPosition(0, 0, 0);
    }
}

Does anyone know how to change the texture on my .glb model?

2

Hi @ivodidutch, your code seems right, thinking the issue might be the structure of your loaded model.

How many meshInstances/material slots your model has?

Try replacing this:

    var materialGlb = gltf.model.material;
    materialGlb.diffuseMap = asset.resource;
    materialGlb.update(); //this doesnt work for my own cube

With something like this:

gltf.model.meshInstances.forEach( function(meshInstance){
    meshInstance.material.diffuseMap = asset.resource;
    meshInstance.material.update();
});

Do you see any change?

3

Thank you for your reply.
My model only has one meshInstance and the new code snippet didn’t seem to make a difference… :confused:

4

Are you working in the editor or directly with the engine? If it is the former could you share a url to take a look?

Could you try with another GLB model just in case it is something with the specific exported model?

5

I have just tested with something from sketchfab. It turns out the problem is that my models do not include UVs (checkbox in blender’s export settings). Do you know if there is a workaround for this without reexporting all my models?
(working directly with the engine in vs code)

1 Like
6

I think you will have to reexport them sadly.

If you were working in the Editor you can automatically unwrap and generate UV1 co-ordinates for the model, but not UV0 (for light mapping).

7

Thanks a lot for the help :smiley:

1 Like
8

I actually have another problem now… The textures that I am applying are not correctly mapped on the model. I have tested with having an embedded texture and that does map correctly. Do you know why this could be happening? (both embedded and assigned textures are the same file)

image

9

Hi @ivodidutch, normally if you use the same material slot (meshInstance) and apply the same texture then you should be getting the same result.

Is it possible to share a simple example project that replicates the issue?

10

I have written this test, the first model is non-embedded texture and i assign a texture to it, second is purely embedded texture, third is embedded + texture assigned.
Project zip:

image
image.jpg505×959 62.8 KB

11

Indeed there seems to be an issue somewhere, both your models have proper unwrapping, didn’t have any issue adding the texture on Blender.

Your code seems correct, it should have been working. Could you add an issue to the playcanvas gltf repo? I know that the Playcanvas team is hard at work in implementing native support of GLB models in th editor, they might be able to take a look in the meantime on this.

12

I will, thanks for looking into it!

1 Like