How to add image texture to no texture model

CesiumJS
1

How to add image texture to no texture model?

like this,but Don’t work :
var viewer =initCesium.initViewer(‘cesiumContainer’);
var scene = viewer.scene;

var imagePath = '../data/models/CesiumBalloon/CesiumBalloonPrint_singleDot.png';
var model = createModel('../data/models/ShadowTester/Shadow_Tester_4.gltf');

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) {
        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;
}

// Alernate approach - but requires fix in DelayLoadedTextureUniform to return this._textures[this._textureId] instead of this._value
model.readyPromise.then(function() {
var textureIndexToReplace = 0;
var textures = model._rendererResources.textures;
var oldTexture = textures[textureIndexToReplace];
// model.color = Cesium.Color.RED;
// saveJSON(model)
Cesium.Resource.fetchImage({
url : imagePath
}).then(function(image) {
image.width = oldTexture.width
image.height = oldTexture.height
var newTexture = new Cesium.Texture({
context : viewer.scene.frameState.context,
source : image
});

        // oldTexture.destroy();
        textures[textureIndexToReplace] = newTexture;
        newTexture.copyFrom(image);
        newTexture.generateMipmap();
    });
});

image

image

Shadow_Tester_4.gltf (115.4 KB)

2

Hi @lishulincug ! Apologies for the delayed response.

I’ve having some problems loading your glTF. Specifically, it’s giving me some errors when I load it into the official glTF validator:

{
    "uri": "Shadow_Tester_4.gltf",
    "mimeType": "model/gltf+json",
    "validatorVersion": "2.0.0-dev.3.4",
    "validatedAt": "2021-07-16T18:41:11.646Z",
    "issues": {
        "numErrors": 1,
        "numWarnings": 5,
        "numInfos": 0,
        "numHints": 0,
        "messages": [
            {
                "code": "UNEXPECTED_PROPERTY",
                "message": "Unexpected property.",
                "severity": 1,
                "pointer": "/programs"
            },
            {
                "code": "UNEXPECTED_PROPERTY",
                "message": "Unexpected property.",
                "severity": 1,
                "pointer": "/shaders"
            },
            {
                "code": "UNEXPECTED_PROPERTY",
                "message": "Unexpected property.",
                "severity": 1,
                "pointer": "/techniques"
            },
            {
                "code": "UNEXPECTED_PROPERTY",
                "message": "Unexpected property.",
                "severity": 1,
                "pointer": "/asset/premultipliedAlpha"
            },
            {
                "code": "UNEXPECTED_PROPERTY",
                "message": "Unexpected property.",
                "severity": 1,
                "pointer": "/asset/profile"
            },
            {
                "code": "UNKNOWN_ASSET_MAJOR_VERSION",
                "message": "Unknown glTF major asset version: 1.",
                "severity": 0,
                "pointer": "/asset/version"
            }
        ],
        "truncated": false
    }
}

In addition, when I upload it to BabylonJS’s online model viewer, there is no shading on the model.

image
image1743×995 104 KB

How did you create this glTF? And can you confirm that you created it with UV coordinates?

3

It comes from the cesium case SampleData。

image

image
image1245×693 313 KB

4

sorry，the gltf moedl is old SampleData。here is new。
Shadow_Tester_4.glb (128.1 KB)
the question is model can have a texture map, no not texture images。

5

Hi @lishulincug,

Thank you for the update. I viewed this file in the Babylon.js glTF viewer and it said that the model has no UV coordinates.

image
image721×470 12.5 KB

Unfortunately, models need UV coordinates to display the texture, so if you don’t have UV coordinates you can’t properly sample the texture.

What kind of texture are you trying to apply to this model? If you give me more details, I can try to see if there are any workarounds.

Best regards,
Janine

6

add a image texture to this model。like this：

7

Hi @lishulincug,

I see. The reason the Wood Tower model can be textured is because it has a set of UVs, whereas the Shadow Tester model does not. You will need to find another model has UVs to texture it.

Best regards,
Janine

8

Can I add a set of UVs to the Wood Tower model ?