Procedural IBL Enhancement in CesiumJS

Apps/Sandcastle/gallery/Image-Based Lighting.html

@@ -24,25 +24,7 @@
     </style>
     <div id="cesiumContainer" class="fullSize"></div>
     <div id="loadingOverlay"><h1>Loading...</h1></div>
-    <div id="toolbar">
-      <table>
-        <tbody>
-          <tr>
-            <td>Luminance at Zenith</td>
-            <td>
-              <input
-                type="range"
-                min="0.0"
-                max="2.0"
-                step="0.01"
-                data-bind="value: luminanceAtZenith, valueUpdate: 'input'"
-              />
-              <input type="text" size="4" data-bind="value: luminanceAtZenith" />
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
+    <div id="toolbar"></div>
     <script id="cesium_sandcastle_script">
       window.startup = async function (Cesium) {
         "use strict";
@@ -145,26 +127,8 @@
             ibl.sphericalHarmonicCoefficients = coefficients;
             ibl.specularEnvironmentMaps = environmentMapURL;
 
-            // The viewModel tracks the state of our mini application.
-            const viewModel = {
-              luminanceAtZenith: ibl.luminanceAtZenith,
-            };
-            // Convert the viewModel members into knockout observables.
-            Cesium.knockout.track(viewModel);
-
-            // Bind the viewModel to the DOM elements of the UI that call for it.
-            const toolbar = document.getElementById("toolbar");
-            Cesium.knockout.applyBindings(viewModel, toolbar);
-
-            function subscribeParameter(name) {
-              Cesium.knockout
-                .getObservable(viewModel, name)
-                .subscribe(function (newValue) {
-                  ibl[name] = newValue;
-                });
-            }
-
-            subscribeParameter("luminanceAtZenith");
+            model.environmentMapManager.groundColor =
+              Cesium.Color.fromCssColorString("#292817");
 
             Sandcastle.addToggleButton(
               "Use procedural environment lighting",

Apps/Sandcastle/gallery/Japan Buildings.html

@@ -242,6 +242,7 @@
         // Set up a light to come from the camera to always highlight the buildings
         const cameraLight = new Cesium.DirectionalLight({
           direction: scene.camera.directionWC, // Updated every frame
+          intensity: 2.0,
         });
         scene.globe.enableLighting = true;
         scene.globe.dynamicAtmosphereLightingFromSun = false;

Apps/Sandcastle/gallery/Lighting.html

@@ -70,10 +70,12 @@
             0.8842635425193919,
             0.39729481195458805,
           ),
+          intensity: 2.0,
         });
 
         const flashlight = new Cesium.DirectionalLight({
           direction: scene.camera.directionWC, // Updated every frame
+          intensity: 3.0,
         });
 
         const moonLight = new Cesium.DirectionalLight({
@@ -159,6 +161,7 @@
           scene.light = sunLight;
           scene.globe.dynamicAtmosphereLighting = true;
           scene.globe.dynamicAtmosphereLightingFromSun = false;
+          scene.atmosphere.dynamicLighting = Cesium.DynamicAtmosphereLightingType.NONE;
           setTime("2020-01-09T23:00:39.018261982600961346Z");
         }
 
@@ -198,13 +201,17 @@
               reset();
               scene.light = moonLight;
               scene.globe.dynamicAtmosphereLightingFromSun = true;
+              scene.atmosphere.dynamicLighting =
+                Cesium.DynamicAtmosphereLightingType.SCENE_LIGHT;
               setTime("2020-01-10T05:29:41.17946898164518643Z");
             },
           },
           {
             text: "Sunlight",
             onselect: function () {
               reset();
+              scene.atmosphere.dynamicLighting =
+                Cesium.DynamicAtmosphereLightingType.SUNLIGHT;
             },
           },
           {

Apps/Sandcastle/gallery/Physically-Based Materials.html

@@ -54,6 +54,8 @@
 
         viewer.scene.globe.enableLighting = true;
         viewer.scene.globe.depthTestAgainstTerrain = true;
+        viewer.scene.atmosphere.dynamicLighting =
+          Cesium.DynamicAtmosphereLightingType.SUNLIGHT;
 
         const position = new Cesium.Cartesian3(
           -1371108.6511167218,