Is it possible to modify materials of a loaded gltf model?

CesiumJS
1

I need the ability to dynamically adjust the colors and/or opacity of components within a loaded gLTF model. I can do this without difficulty in THREE.js, but am unable to get the model to update in Cesium.

I can access the named materials on the loaded model in Cesium using model.gltf.materials[MATERIAL_NAME]. From here, material.instanceTechnique.values.diffuse corresponds to the defined color of the material. I can modify these values directly, however the results are never redrawn. Do I need to call another function to force an update of the model, or should I be taking a different approach?

thanks,

  • David
2

Hi David,

We just started adding support for modifying glTF material/technique parameters. The initial support will ship on Thursday in b28. It is in master now. See Model.getMaterial, ModelMaterial, and ModelMesh.material. For example:

if (model.ready) {

model.getMaterial(‘Default’).setValue(‘diffuse’, Cartesian4.fromColor(this.color, scratchColor));

}

model.gltf is just a read-only object of the original glTF JSON.

Regards,

Patrick

3

Good timing then. I just updated and the getMaterial calls are working nicely.

I also like the new minimumPixelSize option for the gLTF models. Are there any plans on adding an equivalent option to other components for consistency? For example, the various Primitive or Geometry classes for directly drawing geometric objects.

Thanks for another nice update,

  • David
4

Hi David,

Are there any plans on adding an equivalent option to other components for consistency? For example, the various Primitive or Geometry classes for directly drawing geometric objects.

Maybe. It doesn’t fit for some geometries like Polygon, but could be useful for others like sphere or box. What is your use case? Currently, you can, of course, just use a glTF model in place of a geometry.

Patrick

5

I am currently drawing translucent highlight spheres (variable colors) around certain objects (a mix of Billboard icons and gltf models) and simply giving them a large radius to keep them visible. Up to now, this has been the only way to create fully dynamic highlights like this, though I still prefer explicitly drawing them versus creating and loading a new model.

A separate issue that I need to tackle next is to make that highlight invisible when the camera zooms into its radius (where my gLTF model with dynamic material shadings will come in). Now that I think of it, that may also be an issue more easily solved by moving to a gLTF model…

6

Is there a method to clone an existing gltf model? If I take the gLTF model route in place of the sphere/ellipsoid geometries, then I will need to load multiple instances of the model. The model would be small enough that this shouldn’t matter, but a clone method would be preferable if one exists.

thanks,

  • David
7

Hi David,

Allocate a new Model instance each time. We have instancing on the roadmap (#927) and I’m pretty sure it is going to be transparent in the API. For example, if we create ten instances of the same Model, only one glTF model will be loaded, but each instance will have independently modifiable transforms, materials, animation, etc.

This is a ways out as we are currently working on stabilizing the API.

Patrick

8

Hi Patrick,

I also have a use-case in which I need multiple (500-ish) instances of the same model. I checked the roadmap you mentioned and saw that the topic "Reuse texture and vertex buffers when loading multiple models. Probably separate model and instances." is checked. Not sure though if this means that instancing of gltf models is now possible.

Neither I could find a clone() method on Cesium.Model in the API. Could you fill me in about the current status?

Best,
Lucas

9

Hi Lucas,

The model cache was added in Cesium 1.5: https://cesiumjs.org/2015/01/05/Cesium-version-1.5-released/

Patrick