Cesium model with external texture(s)

CesiumJS
1

I have converted a model from Collada to glb and gltf and get an "invalid array length" error. It probably has to do with a texture0.jpg reference.

I need to create multiple objects for display on the same model but with a different texture, so the texture cannot be embedded in the gltf. How do I do this in Cesium, like I was able to do in the Google-Earth plugin.

GE with external texture:
    gliderObject.prototype.newAddModel = function(gModel) {
      // Create a 3D model, initialize it from a Collada file, and place it in the world.
      var placemark = ge.createPlacemark('');
      placemark.setName(gModel.CL);

      // Can't set ALIAS with javascript, so create KML amd parse it in
      var modelKML =
      '<Model>'+
      ' <Link><href>'+
         path + gModel.model +
         '</href></Link>'+
      ' <ResourceMap>'+
      ' <Alias> <targetHref>' +
           gModel.Target +
           '</targetHref> <sourceHref>' +
           gModel.Source +
           '</sourceHref> </Alias>'+
      ' </ResourceMap>'+
      '</Model>';

      var model = ge.parseKml(modelKML);
      model.setAltitudeMode(ge.ALTITUDE_ABSOLUTE);
      placemark.setGeometry(model);

2

Hello,

With the online converter on our website, you have to include all of the reference data like the textures.

Once the gltf JSON has been loaded into Cesium, you can change the gltf.images.image_id.uri property as needed so each model you create has the correct texture.

Best,

Hannah

3

Can you provide an example on how to do this for replacing texture0.jpg by TextureReplacement.jpg

    "images": {
        "ID45": {
            "name": "ID45",
            "uri": "texture0.jpg"
        }
    },

in this model:

var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
    Cesium.Cartesian3.fromDegrees(-75.103, 45.449, 10));
var model = scene.primitives.add(Cesium.Model.fromGltf({
    url : './glider.gltf',
    modelMatrix : modelMatrix,
    scale : 200.0
}));

4

Here’s an example:

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

var url = ‘…/…/SampleData/models/CesiumAir/Cesium_Air.gltf’;
var promise = Cesium.loadJson(url);

promise.then(function(gltf){
gltf.images.TextureAtlas0.uri = ‘…/…/SampleData/models/CesiumGround/images/1_Cesium_Ground-body.jpg’;
var height = Cesium.defaultValue(height, 100.0);
var origin = Cesium.Cartesian3.fromDegrees(-100, 44, height);
var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(origin);

scene.primitives.add(new Cesium.Model({
    gltf : gltf,
    modelMatrix : modelMatrix,
    minimumPixelSize : 128
}));

origin = Cesium.Cartesian3.fromDegrees(-75, 44, height);
modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(origin);
gltf = JSON.parse(JSON.stringify(gltf)); //clone
gltf.images.TextureAtlas0.uri = '../../SampleData/models/CesiumMan/Cesium_Man.jpg';
scene.primitives.add(new Cesium.Model({
    gltf : gltf,
    modelMatrix : modelMatrix,
    minimumPixelSize : 128
}));

});

``

Best,

Hannah

5

Thank you so much. I tried it in SandCastle and it is what I was looking for. I will now try it with my models and textures.

My converted model from Collada to gltf (and glb) is mostly transparent except for one surface. The Collada model converter has materials with a transparency property such as:

"ID112": {
    "name": "material_4",
    "technique": "technique0",
    "values": {
        "diffuse": [
            0.8823530077934265,
            0.8823530077934265,
            0.784313976764679,
            1
        ],
        "transparency": 0
  
The only visible surface has a transparency of 0.5, so I manually tried changing the transparency to 1 from zero for other transparency properties and now I can see the model, but it is still translucent instead of white. Is this a bug ? it seems to me that transparency: 0, is like saying NOT transparent.

http://varicalc.synology.me/tracker/CesiumTracker/tracker2.php

6

If you look at the technique that is being used, there is a states.enable array. This array will enable blending if it contains the value 3042. To disable blending remove that from the array. Another way would be to remove the transparent value from the Collada material and reconvert.

7

Hello Tom,

I tried removing the 3042 as suggested, but the whole model lost transparency altogether. Removing the transparency field from the Collada file as suggested was not possible since there wasn’t any in the first place. I downloaded the Collada spec. got familiar with the transparency filed and tried a few things, but concluded that the Collada file was OK.

It turns out that there is a bug in the Collada to gltf online converter in that the “transparency”: 0 is added when the Collada model has no transparency specified, and thus makes it transparent by default.

<profile_COMMON>

    <technique sid="COMMON">

        <lambert>

            <diffuse>

                <color>1 1 1 1</color>

            </diffuse>

        </lambert>

    </technique>

</profile_COMMON>

“materials”: {

“ID11”: {

“name”: “material_1”,

“technique”: “technique0”,

“values”: {

“diffuse”: [

1,

1,

1,

1

],

        "transparency": 0

}

},

If I add a transparency field in the Collada, such that transparency is effectively opaque, the “transparency”: 0 field no longer appears in the converted file, and the problem is solved.

<profile_COMMON>

    <technique sid="COMMON">

        <lambert>

            <diffuse>

                <color>1 1 1 1</color>

            </diffuse>

            <transparent opaque="RGB_ZERO">

                <color>1 1 1 1</color>

            </transparent>

            <transparency>

                <float>1</float>

            </transparency>

        </lambert>

    </technique>

</profile_COMMON>

“materials”: {

“ID11”: {

“name”: “material_1”,

“technique”: “technique0”,

“values”: {

“diffuse”: [

1,

1,

1,

1

]

}

},

Perhaps you can look in this matter and see what can be done to fix the online converter.

Regards,

Nick