Support ability to dynamically change a 3D model's texture

[lilleyse]

The ability to change a model's texture dynamically would be a cool feature to have. There's been some interest on the forum lately about this: https://groups.google.com/forum/#!topic/cesium-dev/K5ahn2_Nff4.

Possibly a good code sprint idea, or a project for someone wanting to make a nice self-contained contribution to Cesium.

[pjcozzi]

CC #2387

[freder]

what would be possible workarounds that can be used right now? things I can think of:

• one texture-less model, and then somehow change the material (/ fragment shader?) per instance.
• simply use separate models (same geometry, but different textures). although, ideally I would like to be able to create and use textures dynamically.
• create gltf models with different textures on the fly at runtime.

do you have any other ideas or suggestions?

[lilleyse]

Once you get the model's texture you can edit it directly. Note that the textures being swapped here are the same dimensions, and I haven't tested this with multiple models. If multiple models doesn't work you could provide each model with a custom cacheKey. Anyways here's the code:

var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;

function createModel(url) {
    var origin = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 0.0);
    var modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(origin, new Cesium.HeadingPitchRoll(0.0, 0.0, 0.0));

    var model = scene.primitives.add(Cesium.Model.fromGltf({
        url : url,
        modelMatrix : modelMatrix,
        minimumPixelSize : 128,
        incrementallyLoadTextures : false
    }));

    model.readyPromise.then(function(model) {
        // Play and loop all animations at half-speed
        model.activeAnimations.addAll({
            speedup : 0.5,
            loop : Cesium.ModelAnimationLoop.REPEAT
        });

        var camera = viewer.camera;

        // Zoom to model
        var controller = scene.screenSpaceCameraController;
        var r = 2.0 * Math.max(model.boundingSphere.radius, camera.frustum.near);
        controller.minimumZoomDistance = r * 0.5;

        var center = Cesium.Matrix4.multiplyByPoint(model.modelMatrix, model.boundingSphere.center, new Cesium.Cartesian3());
        var heading = Cesium.Math.toRadians(230.0);
        var pitch = Cesium.Math.toRadians(-20.0);
        camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, r * 2.0));
    }).otherwise(function(error){
        window.alert(error);
    });
    
    return model;
}

var imagePath = '../../SampleData/models/CesiumAir/0_Cesium_Air.png';
var model = createModel('../../SampleData/models/CesiumGround/Cesium_Ground.glb');
model.readyPromise.then(function() {
    var texture = model._rendererResources.textures.texture_Image0001;
    
    Cesium.loadImage(imagePath).then(function(imageData) {
        texture.copyFrom(imageData);
        texture.generateMipmap(); // Also replaces textures in mipmap
    });
});

[freder]

thanks a lot, @lilleyse! looks easier than I thought.
out of curiosity: is there also a way to make this work with model entities (instead of primitives)?

[lilleyse]

I'm not actually sure if it's possible to grab the base Model from the entity API. So for now I would say no, unless someone else has an idea.

[robmilton]

Hey lilleyse, I have been experimenting with the example code you provided above. However, I'm having a hard time getting the model's texture. Here's an excerpt of my code...

       var model = Cesium.Model.fromGltf({
            url: "resources/models/A320.gltf",
            modelMatrix:modelMatrix,
            scale:this.ModelSize,
            minimumPixelSize:5.0,
            colorBlendMode: Cesium.ColorBlendMode.MIX,
            colorBlendAmount: 0.0
        });
        
        this.Model = model;
        
        this.Model['colored'] = false;
        this.Model['TrackId'] = this.TrackId;
        this.Model['ModelId'] = strModelId;
        
        var imagePath = "resources/models/a320_NWA.jpg";
        model.readyPromise.then(function() {

            var texture = model._rendererResources.textures.texture_a320_default_jpg;

            Cesium.loadImage(imagePath).then(function(imageData) {
                texture.copyFrom(imageData);
                texture.generateMipmap(); // Also replaces textures in mipmap
            });
        });        

When I look at the model's texture in the _rendererResources I see the path used in the code above (see screen capture from console below). However, the texture variable ends up being undefined.

Is there something I'm missing?

Rob

[lilleyse]

Try setting incrementallyLoadTextures to false (like the sample code above).

By default this is true, meaning textures may not be ready even though the model is ready.

[robmilton]

Hmmm... I'm still not getting anything. I changed the code as follows...

        this.Model = Cesium.Model.fromGltf({
            url: "resources/models/A320.gltf",
            modelMatrix:modelMatrix,
            incrementallyLoadTextures: false,
            scale:this.ModelSize,
            minimumPixelSize:5.0,
            colorBlendMode: Cesium.ColorBlendMode.MIX,
            colorBlendAmount: 0.0
        });
        this.Model['colored'] = false;
        this.Model['TrackId'] = this.TrackId;
        this.Model['ModelId'] = strModelId;
        
        var imagePath = "resources/models/a320_NWA.jpg";
        this.Model.readyPromise.then(function(model) {
            var texture = model._rendererResources.textures.texture_a320_default_jpg;
            Cesium.loadImage(imagePath).then(function(imageData) {
                texture.copyFrom(imageData);
                texture.generateMipmap(); 
            })(this.Model);
        });

But the texture variable is still undefined.

[lilleyse]

Hm, I'm not sure why that's happening.

[lilleyse]

More interest from the forum: https://groups.google.com/forum/#!topic/cesium-dev/8Y2lHMgJZVM

[robmilton]

I'm really glad to see there's more interest in this because this is something we still would desperately like to be able to do. I was never able to get the method above to work.

[robmilton]

Just wondering if there has been any progress on this? We would love the ability to change the texture applied to models during run time. Unfortunately I could never get the approach/hack above to work. But this is something that would be a big deal for us. In our case we want to be able to load various aircraft models and then apply the appropriate airline paint job (texture) instead of having to create a unique model/airline gltf for every aircraft/airline.

[hpinkos]

@robmilton sorry, we haven't been able to spend any time on this yet, and I don't think we'll get to it in the near future. @lilleyse might be able to provide some suggestions for a path forward. And we're always happy to review a pull request if you have time to implement this! Thanks =)