Split display with 3d buildings view


I do not have much experience with Cesium. I am looking for information on whether it is possible to obtain a split screen effect, like here: ‘https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/?src=Imagery%20Layers%20Split.html’, but for a view of 3d buildings models. I want to show buildings with textures and without textures side by side and move the layers view with the slider, as in the above example. Thank you very much for help!



Hey Mariusz,

Unfortunately, there’s nothing built in to CesiumJS to do that for textures. What this is doing is that the fragment shader on the globe discards pixels that are on the left of the split position. You can see this Globe shader here:


There’s no tutorial for doing exactly this, but I think to do it you’d need to create a custom material (as described here https://cesiumjs.org/tutorials/Geometry-and-Appearances/ ) and write your own shader to do that. If you’re unfamiliar with graphics shaders it might not be a trivial task.

The other trick you could do is render Cesium twice, once with the materials and once without, like in this example:

And then use regular HTML and JavaScript to create the slider.

The easiest thing here if you just want to see it with and without material might be to create a button that when toggled will remove/add the materials.

Hope this helps!

Also, refer to this link