Richer Materials with glTF Specular Glossiness in CesiumJS

by

With the 1.50 release, CesiumJS now supports the new specular glossiness glTF extension. This extension gives you greater control over how a 3D model responds to various realistic lighting conditions.

Bike with specular glossiness materialsMaterials on this model are powered by the new specular-glosssiness extension. Racing bicycle by Francesco Coldesina.

glTF’s physically based rendering (PBR) material models define how a surface responds to light, e.g., how reflective or dull it is. As opposed to glTF’s built-in metallic-roughness model, the specular-glossiness extension can represent a broader range of materials by exposing more parameters, such as the specular color.

For example, by setting the specular color of this bike to a slightly reddish tint, we can simulate the soft glow of sunset.

Reddish BikeBike model with a metallic-roughness material vs. specular-glossiness.

Since we only changed the specular color of our bike’s material, only the shiny and reflective surfaces, such as the rims and the spokes, are affected by the red tint; the frame of the bike is unaffected. This is the kind of fine-grained control that is easier to achieve with specular glossiness.

Another benefit of supporting this extension is that it makes CesiumJS compatible with a lot more models. For example, a lot of assets on Sketchfab use this PBR workflow.

If I were working on a proposal to add some solar panels to our headquarters, I could visualize it by grabbing a high quality solar panel model from Sketchfab and placing it on top of a photogrammetry model of our building in CesiumJS.

Solar panel proposal in CesiumSolar panel model by Joel on Sketchfab displayed on top of a photogrammetry model in CesiumJS.

That way I can quickly experiment with different placements and easily share my results on the web.

Try this out in CesiumJS either by grabbing a model from Sketchfab or converting your OBJ files to glTF with obj2gltf.

I’d love to see how you use this in your projects! You can reach me on Twitter @Omar4ur.

Get started with a Cesium ion account

Sign up for free