Hi, my application used an older version of CesiumJS — 1.108, which was released in summer 2023. After two years, I wanted to upgrade to the latest version of the library, 1.135. Unfortunately, after the upgrade, some issues appeared. Both versions of the application are available online.
The application visualizes a demolished village that was destroyed due to the construction of a water reservoir.
These two pages differ ONLY in the imported version of the library:
………
1.108: Zahrádka 3D
1.135: Zahrádka 3D
-
The scene and embedded 3D model in version 1.135 appear much darker than in the older version. It doesn’t look good — there’s likely a problem with scene lighting. do you know the reason why is it so dark compared to the 1.108 version?
-
I have a custom GUI with my own checkboxes and controls. Unfortunately, in the newer version, when I disable the reservoir layer (check box v. n. Švihov), for example, nothing happens. I have to move the scene with mouse for the reservoir to disappear. The same applies to points of interest (check box Body zájmu) — clicking the checkbox does nothing until I move the scene with the mouse, and then the points disappear. In version 1.108, this worked flawlessly. some other controls and buttons have same problem. Do you know why it’s necessary to move the scene for the reservoir, points of interest, and other elements to disappear after disabling them?
Could you please help me resolve these issues?
Hiya,
What sort of framework are you using for the interaction of the UI elements? And how do you interact with Cesium to instill the changes? I know in my own app if I try to write against objects directly I need that same “jiggle” of the mouse, so I suspect all of this has to do with change detection internally with the API usage. I think one of the big changes was better change detection through the Cesium API, so if you work against Cesium in more direct ways it doesn’t follow that it triggers a rendering cycle. Do you have a code snippet of how you manipulate Cesium to, for example, turn the water on and off?
Cheers,
Alex
hi,
thanks for reply. I don’t use any frontend framework. I know this isn’t entirely correct, but I’m a beginner and I don’t know how to work with any framework. I’ll provide examples of working with checkboxes and API interaction.
Another problem with the application is that the controls (for example, sliders) don’t work at all on mobile devices (tested on Android), neither in version 1.108 nor in 1.135. I assume the cause is again poor communication with the CesiumJS API. Could you recommend a framework to me? I need something rather simple, commonly used on the web, and that works well with Cesium. By name I know jQuery, for example. What do you think?
v. n. Švihov check box:
HTML:
<input type="checkbox" id="svihovCheckbox" name="svihovCheckbox" checked="checked" value="true">
<label for="svihovCheckbox">v. n. Švihov</label>
JS:
svihovCheckbox.addEventListener("click", function (event) {
if (svihovCheckbox.checked) {
svihovDam.show = true;
} else {
svihovDam.show = false;
}
});
change dam opacity slider:
HTML:
<h3>Nastavení průhlednosti hladiny Švihova</h3>
<input class="slider" type="range" min="0" max="1" value="0.4" id="opacitySlider" step="0.05">
JS:
function changeDamOpacity(ev) {
svihovDam.show = true;
document.getElementById("svihovCheckbox").checked = true;
newColor = previousColor.withAlpha(Number(opacitySlider.value)); // create new color from old one with different alpha
svihovDam.plane.material = newColor;
previousColor = newColor;
}
Hiya,
Thanks for sharing some code. To be honest, it looks perfectly fine to me, and you also don’t need a framework per se. Even JQuery is a remnant of the past back to when browsers weren’t playing nicely together. In many ways, a modern browser has the framework you need in its APIs, so don’t worry about that bit.
As to what’s causing it, I’m not sure. Maybe Cesium has some thing awaiting DOM changes for their own change detection, although that sounds unlightly. When you create your Scene, you don’t have requestRenderMode set to true by any chance? (I think you should be able to do something like a console.log(scene.requestRenderMode) to see if it’s true or false) If you do, set it to (default) false, OR call scene.requestRender() to make sure the scene renders. The latter may feel a bit awkward, but if you’re programming for performance it’s quite useful to control your own rendering cycle (like, I’m updating a ton of things, and when I’m done I’ll call the render myself).
There could of course have been some changes to any of the underlying mechanisms for tracking API changes and the rendering cycle, you could have hit upon something, somewhere, hard to tell. Let us know.
Hezký den,
Alex
Hi, thank you for the advice. I actually had requestRenderMode enabled on the viewer. It was enough to turn it off, and now my GUI works normally with version 1.135. I’ll focus on the lighting next.
I resolved it with this:
const sunLight = new Cesium.SunLight(
{ intensity: 5.0 }
);
scene.light = sunLight;
its from sandcastle: Lighting | Sandcastle | CesiumJS
now the scenes in both web pages look very similar.