Atmosphere and 3D Photorealistic do not work together?
So it turned out: No they dont! Why? here
But here is the workaround:
A CesiumJS template including Spaceatmosphere, Groundatmosphere AND 3D tileset, for the Community
I was highly motivated and coded this, leading to a surprising discovery: You can force the globe to fully load in just 1 second! (
It’s a trick.) Looks awesome! https://cloudatlas.club
It seems that for the animation, the first frame is fetched without CSS, in original size, and then transformed from small to large. (the first frame seems to be the atmosphere) I set the animation delay to 1 second and the transition to 3 seconds. As a result, the globe has 4 seconds to load before it becomes interactive. However, you don’t notice this, so it feels like Cesium, along with the atmosphere and 3D tileset, is fully loaded in 1 second. The 3D tileset is already ready when you zoom in.
(all made in simple css, no js)
I tested it on different screen resolutions and made sure it looks like from one mold on desktop, tablet and mobile
Cheers and a big thank you to @javagl for pushing me into the right direction!
*I’m still not able to glamp the points, but your Sandcastle (clampToHeightMostDetailed) was working well 
CSS
main {
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
opacity: 0; /* Initial state */
animation: fade-in-scale-up 3s ease-in-out forwards; /* Apply the fade-in animation */
animation-delay: 1s;
overflow: visible
}
:global(.cesium-button.cesium-vrButton) {
display: block;
width: 100%;
height: 100%;
margin: 0;
border-radius: 0;
opacity: 0;
animation: fade-in 3s ease-in-out forwards; /* Apply the fade-in animation */
animation-delay: 4s;
}
:global(.cesium-widget-credits){
opacity: 0;
animation: fade-in 3s ease-in-out forwards; /* Apply the fade-in animation */
animation-delay: 4s;
}
/* Keyframes for fade-in-scale down effect */
@keyframes fade-in-scale-down {
from {
opacity: 0;
transform: scale(1.1); /* Optional: add a slight zoom-in effect */
}
to {
opacity: 1;
transform: scale(1); /* Reset to normal scale */
}
}
/* Keyframes for fade-in-scale-up effect */
@keyframes fade-in-scale-up {
from {
opacity: 0;
transform: scale(0.01); /* Optional: add a slight zoom-in effect */
}
to {
opacity: 1;
transform: scale(1); /* Reset to normal scale */
}
}
/* Keyframes for fade-in effect */
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
MARKUP
<div style="width: 100%; display: flex; justify-content: center; align-items: center;">
<main id="cesiumContainer"></main>
</div>
JAVASCRIPT
// Initialize Cesium viewer with specified configuration options
viewer = new Viewer('cesiumContainer', {
animation: false,
fullscreenButton: false,
vrButton: true,
geocoder: false,
homeButton: false,
infoBox: true,
selectionIndicator: false,
timeline: false,
navigationHelpButton: false,
shouldAnimate: true,
skyBox: true,
contextOptions: {
webgl: {
alpha: true
},
},
// This is a global 3D Tiles tileset so disable the
// globe to prevent it from interfering with the data
// globe: false,
// Disabling the globe means we need to manually
// re-enable the atmosphere
// skyAtmosphere: false, // new Cesium.SkyAtmosphere(),
// 2D and Columbus View are not currently supported
// for global 3D Tiles tilesets
sceneModePicker: false,
// Imagery layers are not currently supported for
// global 3D Tiles tilesets
baseLayerPicker: false,
});
// Load Cesium 3D Tileset from Cesium Ion using the specified asset ID (2275207=Google Photorealistic Earth)
try {const tileset = await Cesium3DTileset.fromIonAssetId(2275207);viewer.scene.primitives.add(tileset);
// Initially hide the 3D tileset
tileset.show = true;
// Set up a camera move end event listener
viewer.camera.moveEnd.addEventListener(function () {
const height = viewer.camera.positionCartographic.height; console.log(`Distance to ground ${Math.floor(height / 1000)} km`);
if (height > 6000000) {
// Show the base layer and hide the 3D tileset
globe.show = true;
tileset.show = false;
} else {
// Hide the base layer and show the 3D tileset
globe.show = false;
tileset.show = true;
}
});
} catch (error) {console.log(error);}
6
// Get the current camera position in Cartographic coordinates (longitude, latitude, height)
var cameraPosition = viewer.scene.camera.positionCartographic;
// Update the camera's position with the new height
viewer.scene.camera.setView({
destination: Cesium.Cartesian3.fromRadians(
cameraPosition.longitude,
cameraPosition.latitude,
20000000
),
orientation: {
heading: viewer.scene.camera.heading,
pitch: viewer.scene.camera.pitch,
roll: viewer.scene.camera.roll
}
});
// Atmosphere
const scene = viewer.scene;
const globe = scene.globe;
const skyAtmosphere = scene.skyAtmosphere;
scene.highDynamicRange = true;
globe.enableLighting = true;
globe.atmosphereLightIntensity = 20.0;
// Function to get the current time in ISO 8601 format
function getCurrentTimeIso8601() {
const now = new Date();
return now.toISOString();
}
// Get the current time in ISO 8601 format and update the viewer's clock
const currentTime = getCurrentTimeIso8601();
viewer.clock.currentTime = JulianDate.fromIso8601(currentTime);
const canvas = viewer.canvas;
canvas.setAttribute("tabindex", "0"); // needed to put focus on the canvas
canvas.onclick = function () {
canvas.focus();
};
const defaultGroundAtmosphereLightIntensity =
globe.atmosphereLightIntensity;
const defaultGroundAtmosphereRayleighCoefficient =
globe.atmosphereRayleighCoefficient;
const defaultGroundAtmosphereMieCoefficient =
globe.atmosphereMieCoefficient;
const defaultGroundAtmosphereMieAnisotropy =
globe.atmosphereMieAnisotropy;
const defaultGroundAtmosphereRayleighScaleHeight =
globe.atmosphereRayleighScaleHeight;
const defaultGroundAtmosphereMieScaleHeight =
globe.atmosphereMieScaleHeight;
const defaultGroundAtmosphereHueShift = globe.atmosphereHueShift;
const defaultGroundAtmosphereSaturationShift =
globe.atmosphereSaturationShift;
const defaultGroundAtmosphereBrightnessShift =
globe.atmosphereBrightnessShift;
const defaultLightFadeOut = globe.lightingFadeOutDistance;
const defaultLightFadeIn = globe.lightingFadeInDistance;
const defaultNightFadeOut = globe.nightFadeOutDistance;
const defaultNightFadeIn = globe.nightFadeInDistance;
const defaultSkyAtmosphereLightIntensity =
skyAtmosphere.atmosphereLightIntensity;
const defaultSkyAtmosphereRayleighCoefficient =
skyAtmosphere.atmosphereRayleighCoefficient;
const defaultSkyAtmosphereMieCoefficient =
skyAtmosphere.atmosphereMieCoefficient;
const defaultSkyAtmosphereMieAnisotropy =
skyAtmosphere.atmosphereMieAnisotropy;
const defaultSkyAtmosphereRayleighScaleHeight =
skyAtmosphere.atmosphereRayleighScaleHeight;
const defaultSkyAtmosphereMieScaleHeight =
skyAtmosphere.atmosphereMieScaleHeight;
const defaultSkyAtmosphereHueShift = skyAtmosphere.hueShift;
const defaultSkyAtmosphereSaturationShift =
skyAtmosphere.saturationShift;
const defaultSkyAtmosphereBrightnessShift =
skyAtmosphere.brightnessShift;
const viewModel = {
// Globe settings
enableTerrain: false,
enableLighting: true,
groundTranslucency: false,
// Ground atmosphere settings
showGroundAtmosphere: true,
groundAtmosphereLightIntensity: defaultGroundAtmosphereLightIntensity,
groundAtmosphereRayleighCoefficientR:
defaultGroundAtmosphereRayleighCoefficient.x / 1e-6,
groundAtmosphereRayleighCoefficientG:
defaultGroundAtmosphereRayleighCoefficient.y / 1e-6,
groundAtmosphereRayleighCoefficientB:
defaultGroundAtmosphereRayleighCoefficient.z / 1e-6,
groundAtmosphereMieCoefficient:
defaultGroundAtmosphereMieCoefficient.x / 1e-6,
groundAtmosphereRayleighScaleHeight: defaultGroundAtmosphereRayleighScaleHeight,
groundAtmosphereMieScaleHeight: defaultGroundAtmosphereMieScaleHeight,
groundAtmosphereMieAnisotropy: defaultGroundAtmosphereMieAnisotropy,
groundHueShift: defaultGroundAtmosphereHueShift,
groundSaturationShift: defaultGroundAtmosphereSaturationShift,
groundBrightnessShift: defaultGroundAtmosphereBrightnessShift,
lightingFadeOutDistance: defaultLightFadeOut,
lightingFadeInDistance: defaultLightFadeIn,
nightFadeOutDistance: defaultNightFadeOut,
nightFadeInDistance: defaultNightFadeIn,
// Sky atmosphere settings
showSkyAtmosphere: true,
skyAtmosphereLightIntensity: defaultSkyAtmosphereLightIntensity,
skyAtmosphereRayleighCoefficientR:
defaultSkyAtmosphereRayleighCoefficient.x / 1e-6,
skyAtmosphereRayleighCoefficientG:
defaultSkyAtmosphereRayleighCoefficient.y / 1e-6,
skyAtmosphereRayleighCoefficientB:
defaultSkyAtmosphereRayleighCoefficient.z / 1e-6,
skyAtmosphereMieCoefficient:
defaultSkyAtmosphereMieCoefficient.x / 1e-6,
skyAtmosphereRayleighScaleHeight: defaultSkyAtmosphereRayleighScaleHeight,
skyAtmosphereMieScaleHeight: defaultSkyAtmosphereMieScaleHeight,
skyAtmosphereMieAnisotropy: defaultSkyAtmosphereMieAnisotropy,
skyHueShift: defaultSkyAtmosphereHueShift,
skySaturationShift: defaultSkyAtmosphereSaturationShift,
skyBrightnessShift: defaultSkyAtmosphereBrightnessShift,
perFragmentAtmosphere: false,
dynamicLighting: true,
dynamicLightingFromSun: false,
// Fog settings
showFog: true,
density: 1.0,
minimumBrightness: 0.03,
// Scene settings
hdr: true,
};
