Help with Creating Outline Shader for Cesium3DTileset

3D Tiles
1

Hi everyone,

I’m working on a project where I need to add outline effects to a Cesium3DTileset, and I’m wondering if anyone has experience with this or could point me in the right direction.

What I’m trying to achieve is an outline/edge highlighting shader that can be applied to 3D tilesets to make certain features stand out visually. I’ve attached an example image below showing the kind of effect I’m aiming for.

outline-demo
outline-demo720×405 36 KB

I’ve looked into CustomShaders, but I’m not entirely sure about the best approach for implementing this with 3D tilesets specifically. Some questions I have:

  • Has anyone successfully implemented outline shaders for Cesium3DTileset?

  • Would a post-processing approach work better than modifying the tileset shader directly?

  • Are there any existing examples or resources that demonstrate similar effects?

Any guidance, code snippets, or pointers to relevant documentation would be greatly appreciated. Thanks in advance for your help!

2

The example at Sandcastle | CesiumJS contains a “Silhouette rendering” functionality, which might be similar to what you’re looking for. The example at Sandcastle | CesiumJS also allows selecting the silhouette style.

This is not exactly what you suggested in that image/screenshot. In order to highlight “inner edges” as well, it will be necessary to tell the renderer which edges that should be.

There already is an extension that offers the basic functionality for that. An example of an asset that uses this extension is at 3d-tiles-samples/glTF/CESIUM_primitive_outline/BoxPrimitiveOutline at main · CesiumGS/3d-tiles-samples · GitHub

Beyond that, there currently is a glTF extension in the process of being developed that should offer much more flexibility here. You can have a look at EXT_mesh_primitive_edge_visibility by pmconne · Pull Request #2479 · KhronosGroup/glTF · GitHub to track its progress.

3

Hi Marco,

Thanks for the quick reply and the resources!

I actually came across those Sandcastle examples earlier. The blue highlight (silhouette) approach is a good start, but I found that the coloring/visuals don’t look very good when viewed from certain angles.

The example you shared with the red outlines looks visually perfect—that is exactly what I am aiming for. However, in my tests, I was only able to get that working with standard Primitives, not with a full Cesium3DTileset.

Is it actually possible to apply that extension (or a similar technique) to a Cesium3DTileset?

Thanks again!

4

It’s quite tricky to apply the primitive_outline yoursel on a glTF, but it can be done in Blender with a bit of development.

Otherwise, if you’re familiar with the GIS world and tools like QGIS or FME, you can quite easily transform a glTF into a GeoPackage, and then use Geodan’s pg2b3dm tool to transform this GPKG in a 3DTileset and add the –add_outlines parameter to the command line in order to create a 3DTileset with outlines.