Richer Materials with glTF Specular Glossiness in CesiumJS
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.
Materials on this model are powered by the new specular-glossiness 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.
Bike model with a metallic-roughness material vs. specular-glossiness.
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.
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 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.