Zagged artefacts, possibly jagged shadows on glb model

CesiumJS
1

Hello folks, when a load a glb in cesiumjs, The shadows look zagged. When move close the shadows become crisp. I see none of this problem in other gltf viewer. I have looked around in the forum, but could not find similar issues, hence writing here. appreciate if someone can help me fix this…I have uploaded the model here for reference as well. Here is my code, which i have tried unsuccessfully so far.

const viewer = new Cesium.Viewer(“cesiumContainer”, {

terrain: Cesium.Terrain.fromWorldTerrain(),

timeline: false,

animation: false,

});

// viewer.resolutionScale = 1.2; // Try 1.5–2.0, higher = smoother but slower.

// Turn on Cesium’s light source based on the Sun position

viewer.scene.globe.enableLighting = true;

// Enable dynamic sunlight from the current simulation time

viewer.scene.light = new Cesium.SunLight();

viewer.scene.atmosphere.dynamicLighting =

Cesium.DynamicAtmosphereLightingType.SUNLIGHT;

// viewer.scene.globe.dynamicAtmosphereLighting = true;

// viewer.scene.globe.dynamicAtmosphereLightingFromSun = true;

// Optional: show a visual sun in the skybox

viewer.scene.skyBox = new Cesium.SkyBox({ show: true });

// Enable shadows for models/tilesets

viewer.shadowMap.size = 2048;

viewer.shadowMap.softShadows = true; // Enables softer shadows

viewer.shadowMap.darkness = 0.5; // Adjusts shadow darkness

// You may need to experiment with these values

viewer.scene.shadowMap.enabled = true;

viewer.scene.shadowMap.softShadows = true;

const ambientOcclusion = viewer.scene.postProcessStages.ambientOcclusion;

ambientOcclusion.enabled = true;

ambientOcclusion.intensity = 0.5;

ambientOcclusion.bias = 0.1;

// viewer.scene.highDynamicRange = true

viewer.scene.postProcessStages.tonemapper = Cesium.Tonemapper.ACES

viewer.scene.postProcessStages.fxaa.enabled = true;

25Aug25Eastfield_forCesiumFinal_CemenetStructure-v1.glb (4.4 MB)

2

Hi @Harsh_Sharma,

Shadows are pretty tricky - what you’re seeing isn’t unexpected. Cesium uses cascaded shadow maps, which splits the view up into multiple frustums and renders shadow textures per-split, to try to maximize the shadow resolution in each split.

When viewing your model close up, the fixed-resolution shadow maps can devote more texture space to what you’re seeing than when you’re far away, so the shadows are more crisp. When further away, the opposite it true - each texel of the shadow map has to cover a larger region of the globe, so shadows are less crisp. Using cascades helps, but only so much.

The best way to get better shadows is to throw more resources at is - I was able to get pretty clean and consistent shadows by using 4 cascade splits with 4096 resolution shadow maps. (Sandcastle demo - to make this work, you’d have to either replace the URL with something that serves your glb publicly, or run cesium locally and put the glb file in that directory I specified).

You could potentially get better shadows without trading off much performance by adjusting the cascade splits such that your model is in the closest split when you want it to be… but that’s part of the internal API, technically. I could see a case for a feature request there, though, to make it public.

3

Close up:

image
image1804×1226 108 KB

Far away:

image
image998×470 116 KB

4

thanks Man. did worked for me with these changes

viewer.shadowMap.numberOfCascades = 4; // Number of cascades (splits the frustum)

viewer.shadowMap.maximumDistance = 2000.0; // Max distance for shadows (in meters); adjust based

1 Like