11716 visualize fog

CHANGES.md

@@ -15,6 +15,8 @@
 - Added `Cesium3DTileset.getHeight` to sample height values of the loaded tiles. If using WebGL 1, the `enablePick` option must be set to true to use this function. [#11581](https://github.com/CesiumGS/cesium/pull/11581)
 - Added `Cesium3DTileset.disableCollision` to allow the camera from to go inside or below a 3D tileset, for instance, to be used with 3D Tiles interiors. [#11581](https://github.com/CesiumGS/cesium/pull/11581)
 - The `Cesium3DTileset.dynamicScreenSpaceError` optimization is now enabled by default, as this improves performance for street-level horizon views. Furthermore, the default settings of this feature were tuned for improved performance. `Cesium3DTileset.dynamicScreenSpaceErrorDensity` was changed from 0.00278 to 0.0002. `Cesium3DTileset.dynamicScreenSpaceErrorFactor` was changed from 4 to 24. [#11718](https://github.com/CesiumGS/cesium/pull/11718)
+- Fog rendering now applies to glTF models and 3D Tiles. This can be configured using `scene.fog` and `scene.atmosphere`. [#11744](https://github.com/CesiumGS/cesium/pull/11744)
+- Added `scene.atmosphere` to store common atmosphere lighting parameters. [#11744](https://github.com/CesiumGS/cesium/pull/11744) and [#11681](https://github.com/CesiumGS/cesium/issues/11681)
 
 ##### Fixes :wrench:
 

Specs/createFrameState.js

@@ -1,4 +1,5 @@
 import {
+  Atmosphere,
   defaultValue,
   GeographicProjection,
   JulianDate,
@@ -51,6 +52,8 @@ function createFrameState(context, camera, frameNumber, time) {
 
   frameState.minimumDisableDepthTestDistance = 0.0;
 
+  frameState.atmosphere = new Atmosphere();
+
   return frameState;
 }
 export default createFrameState;

packages/engine/Source/Renderer/AutomaticUniforms.js

@@ -954,7 +954,8 @@ const AutomaticUniforms = {
 
   /**
    * An automatic GLSL uniform containing the ellipsoid radii of curvature at the camera position.
-   * The .x component is the prime vertical radius, .y is the meridional.
+   * The .x component is the prime vertical radius of curvature (east-west direction)
+   * .y is the meridional radius of curvature (north-south direction)
    * This uniform is only valid when the {@link SceneMode} is <code>SCENE3D</code>.
    */
   czm_eyeEllipsoidCurvature: new AutomaticUniform({
@@ -1591,6 +1592,125 @@ const AutomaticUniforms = {
     },
   }),
 
+  /**
+   * An automatic GLSL uniform scalar used to set a minimum brightness when dynamic lighting is applied to fog.
+   *
+   * @see czm_fog
+   */
+  czm_fogMinimumBrightness: new AutomaticUniform({
+    size: 1,
+    datatype: WebGLConstants.FLOAT,
+    getValue: function (uniformState) {
+      return uniformState.fogMinimumBrightness;
+    },
+  }),
+
+  /**
+   * An automatic uniform representing the color shift for the atmosphere in HSB color space
+   *
+   * @example
+   * uniform vec3 czm_atmosphereHsbShift;
+   */
+  czm_atmosphereHsbShift: new AutomaticUniform({
+    size: 1,
+    datatype: WebGLConstants.FLOAT_VEC3,
+    getValue: function (uniformState) {
+      return uniformState.atmosphereHsbShift;
+    },
+  }),
+  /**
+   * An automatic uniform representing the intensity of the light that is used for computing the atmosphere color
+   *
+   * @example
+   * uniform float czm_atmosphereLightIntensity;
+   */
+  czm_atmosphereLightIntensity: new AutomaticUniform({
+    size: 1,
+    datatype: WebGLConstants.FLOAT,
+    getValue: function (uniformState) {
+      return uniformState.atmosphereLightIntensity;
+    },
+  }),
+  /**
+   * An automatic uniform representing the Rayleigh scattering coefficient used when computing the atmosphere scattering
+   *
+   * @example
+   * uniform vec3 czm_atmosphereRayleighCoefficient;
+   */
+  czm_atmosphereRayleighCoefficient: new AutomaticUniform({
+    size: 1,
+    datatype: WebGLConstants.FLOAT_VEC3,
+    getValue: function (uniformState) {
+      return uniformState.atmosphereRayleighCoefficient;
+    },
+  }),
+  /**
+   * An automatic uniform representing the Rayleigh scale height in meters used for computing atmosphere scattering.
+   *
+   * @example
+   * uniform vec3 czm_atmosphereRayleighScaleHeight;
+   */
+  czm_atmosphereRayleighScaleHeight: new AutomaticUniform({
+    size: 1,
+    datatype: WebGLConstants.FLOAT,
+    getValue: function (uniformState) {
+      return uniformState.atmosphereRayleighScaleHeight;
+    },
+  }),
+  /**
+   * An automatic uniform representing the Mie scattering coefficient used when computing atmosphere scattering.
+   *
+   * @example
+   * uniform vec3 czm_atmosphereMieCoefficient;
+   */
+  czm_atmosphereMieCoefficient: new AutomaticUniform({
+    size: 1,
+    datatype: WebGLConstants.FLOAT_VEC3,
+    getValue: function (uniformState) {
+      return uniformState.atmosphereMieCoefficient;
+    },
+  }),
+  /**
+   * An automatic uniform storign the Mie scale height used when computing atmosphere scattering.
+   *
+   * @example
+   * uniform float czm_atmosphereMieScaleHeight;
+   */
+  czm_atmosphereMieScaleHeight: new AutomaticUniform({
+    size: 1,
+    datatype: WebGLConstants.FLOAT,
+    getValue: function (uniformState) {
+      return uniformState.atmosphereMieScaleHeight;
+    },
+  }),
+  /**
+   * An automatic uniform representing the anisotropy of the medium to consider for Mie scattering.
+   *
+   * @example
+   * uniform float czm_atmosphereAnisotropy;
+   */
+  czm_atmosphereMieAnisotropy: new AutomaticUniform({
+    size: 1,
+    datatype: WebGLConstants.FLOAT,
+    getValue: function (uniformState) {
+      return uniformState.atmosphereMieAnisotropy;
+    },
+  }),
+
+  /**
+   * An automatic uniform representing which light source to use for dynamic lighting
+   *
+   * @example
+   * uniform float czm_atmosphereDynamicLighting
+   */
+  czm_atmosphereDynamicLighting: new AutomaticUniform({
+    size: 1,
+    datatype: WebGLConstants.FLOAT,
+    getValue: function (uniformState) {
+      return uniformState.atmosphereDynamicLighting;
+    },
+  }),
+
   /**
    * An automatic GLSL uniform representing the splitter position to use when rendering with a splitter.
    * This will be in pixel coordinates relative to the canvas.

packages/engine/Source/Renderer/UniformState.js

@@ -161,6 +161,16 @@ function UniformState() {
   this._specularEnvironmentMapsMaximumLOD = undefined;
 
   this._fogDensity = undefined;
+  this._fogMinimumBrightness = undefined;
+
+  this._atmosphereHsbShift = undefined;
+  this._atmosphereLightIntensity = undefined;
+  this._atmosphereRayleighCoefficient = new Cartesian3();
+  this._atmosphereRayleighScaleHeight = new Cartesian3();
+  this._atmosphereMieCoefficient = new Cartesian3();
+  this._atmosphereMieScaleHeight = undefined;
+  this._atmosphereMieAnisotropy = undefined;
+  this._atmosphereDynamicLighting = undefined;
 
   this._invertClassificationColor = undefined;
 
@@ -915,6 +925,99 @@ Object.defineProperties(UniformState.prototype, {
     },
   },
 
+  /**
+   * A scalar used as a minimum value when brightening fog
+   * @memberof UniformState.prototype
+   * @type {number}
+   */
+  fogMinimumBrightness: {
+    get: function () {
+      return this._fogMinimumBrightness;
+    },
+  },
+
+  /**
+   * A color shift to apply to the atmosphere color in HSB.
+   * @memberof UniformState.prototype
+   * @type {Cartesian3}
+   */
+  atmosphereHsbShift: {
+    get: function () {
+      return this._atmosphereHsbShift;
+    },
+  },
+  /**
+   * The intensity of the light that is used for computing the atmosphere color
+   * @memberof UniformState.prototype
+   * @type {number}
+   */
+  atmosphereLightIntensity: {
+    get: function () {
+      return this._atmosphereLightIntensity;
+    },
+  },
+  /**
+   * The Rayleigh scattering coefficient used in the atmospheric scattering equations for the sky atmosphere.
+   * @memberof UniformState.prototype
+   * @type {Cartesian3}
+   */
+  atmosphereRayleighCoefficient: {
+    get: function () {
+      return this._atmosphereRayleighCoefficient;
+    },
+  },
+  /**
+   * The Rayleigh scale height used in the atmospheric scattering equations for the sky atmosphere, in meters.
+   * @memberof UniformState.prototype
+   * @type {number}
+   */
+  atmosphereRayleighScaleHeight: {
+    get: function () {
+      return this._atmosphereRayleighScaleHeight;
+    },
+  },
+  /**
+   * The Mie scattering coefficient used in the atmospheric scattering equations for the sky atmosphere.
+   * @memberof UniformState.prototype
+   * @type {Cartesian3}
+   */
+  atmosphereMieCoefficient: {
+    get: function () {
+      return this._atmosphereMieCoefficient;
+    },
+  },
+  /**
+   * The Mie scale height used in the atmospheric scattering equations for the sky atmosphere, in meters.
+   * @memberof UniformState.prototype
+   * @type {number}
+   */
+  atmosphereMieScaleHeight: {
+    get: function () {
+      return this._atmosphereMieScaleHeight;
+    },
+  },
+  /**
+   * The anisotropy of the medium to consider for Mie scattering.
+   * @memberof UniformState.prototype
+   * @type {number}
+   */
+  atmosphereMieAnisotropy: {
+    get: function () {
+      return this._atmosphereMieAnisotropy;
+    },
+  },
+  /**
+   * Which light source to use for dynamically lighting the atmosphere
+   *
+   * @memberof UniformState.prototype
+   * @type {DynamicAtmosphereLightingType}
+   */
+  atmosphereDynamicLighting: {
+    get: function () {
+      return this._atmosphereDynamicLighting;
+    },
+  },
+
   /**
    * A scalar that represents the geometric tolerance per meter
    * @memberof UniformState.prototype
@@ -1411,6 +1514,30 @@ UniformState.prototype.update = function (frameState) {
   }
 
   this._fogDensity = frameState.fog.density;
+  this._fogMinimumBrightness = frameState.fog.minimumBrightness;
+
+  const atmosphere = frameState.atmosphere;
+  if (defined(atmosphere)) {
+    this._atmosphereHsbShift = Cartesian3.fromElements(
+      atmosphere.hueShift,
+      atmosphere.saturationShift,
+      atmosphere.brightnessShift,
+      this._atmosphereHsbShift
+    );
+    this._atmosphereLightIntensity = atmosphere.lightIntensity;
+    this._atmosphereRayleighCoefficient = Cartesian3.clone(
+      atmosphere.rayleighCoefficient,
+      this._atmosphereRayleighCoefficient
+    );
+    this._atmosphereRayleighScaleHeight = atmosphere.rayleighScaleHeight;
+    this._atmosphereMieCoefficient = Cartesian3.clone(
+      atmosphere.mieCoefficient,
+      this._atmosphereMieCoefficient
+    );
+    this._atmosphereMieScaleHeight = atmosphere.mieScaleHeight;
+    this._atmosphereMieAnisotropy = atmosphere.mieAnisotropy;
+    this._atmosphereDynamicLighting = atmosphere.dynamicLighting;
+  }
 
   this._invertClassificationColor = frameState.invertClassificationColor;