@cesium/engine 10.1.0 → 11.1.0

package/Source/Scene/PostProcessStage.js

@@ -93,9 +93,11 @@ import PostProcessStageSampleMode from "./PostProcessStageSampleMode.js";
  */
 function PostProcessStage(options) {
   options = defaultValue(options, defaultValue.EMPTY_OBJECT);
-  const fragmentShader = options.fragmentShader;
-  const textureScale = defaultValue(options.textureScale, 1.0);
-  const pixelFormat = defaultValue(options.pixelFormat, PixelFormat.RGBA);
+  const {
+    fragmentShader,
+    textureScale = 1.0,
+    pixelFormat = PixelFormat.RGBA,
+  } = options;
 
   //>>includeStart('debug', pragmas.debug);
   Check.typeOf.string("options.fragmentShader", fragmentShader);
@@ -103,7 +105,7 @@ function PostProcessStage(options) {
   Check.typeOf.number.lessThanOrEquals(
     "options.textureScale",
     textureScale,
-    1.0
+    1.0,
   );
   if (!PixelFormat.isColorFormat(pixelFormat)) {
     throw new DeveloperError("options.pixelFormat must be a color format.");
@@ -116,12 +118,12 @@ function PostProcessStage(options) {
   this._forcePowerOfTwo = defaultValue(options.forcePowerOfTwo, false);
   this._sampleMode = defaultValue(
     options.sampleMode,
-    PostProcessStageSampleMode.NEAREST
+    PostProcessStageSampleMode.NEAREST,
   );
   this._pixelFormat = pixelFormat;
   this._pixelDatatype = defaultValue(
     options.pixelDatatype,
-    PixelDatatype.UNSIGNED_BYTE
+    PixelDatatype.UNSIGNED_BYTE,
   );
   this._clearColor = defaultValue(options.clearColor, Color.BLACK);
 
@@ -484,34 +486,31 @@ function createUniformMap(stage) {
   const uniforms = stage._uniforms;
   const actualUniforms = stage._actualUniforms;
   for (const name in uniforms) {
-    if (uniforms.hasOwnProperty(name)) {
-      if (typeof uniforms[name] !== "function") {
-        uniformMap[name] = getUniformMapFunction(stage, name);
-        newUniforms[name] = getUniformValueGetterAndSetter(
-          stage,
-          uniforms,
-          name
-        );
-      } else {
-        uniformMap[name] = uniforms[name];
-        newUniforms[name] = uniforms[name];
-      }
+    if (!uniforms.hasOwnProperty(name)) {
+      continue;
+    }
+    if (typeof uniforms[name] !== "function") {
+      uniformMap[name] = getUniformMapFunction(stage, name);
+      newUniforms[name] = getUniformValueGetterAndSetter(stage, uniforms, name);
+    } else {
+      uniformMap[name] = uniforms[name];
+      newUniforms[name] = uniforms[name];
+    }
 
-      actualUniforms[name] = uniforms[name];
+    actualUniforms[name] = uniforms[name];
 
-      const value = uniformMap[name]();
-      if (
-        typeof value === "string" ||
-        value instanceof Texture ||
-        value instanceof HTMLImageElement ||
-        value instanceof HTMLCanvasElement ||
-        value instanceof HTMLVideoElement
-      ) {
-        uniformMap[`${name}Dimensions`] = getUniformMapDimensionsFunction(
-          uniformMap,
-          name
-        );
-      }
+    const value = uniformMap[name]();
+    if (
+      typeof value === "string" ||
+      value instanceof Texture ||
+      value instanceof HTMLImageElement ||
+      value instanceof HTMLCanvasElement ||
+      value instanceof HTMLVideoElement
+    ) {
+      uniformMap[`${name}Dimensions`] = getUniformMapDimensionsFunction(
+        uniformMap,
+        name,
+      );
     }
   }
 
@@ -543,6 +542,35 @@ function createUniformMap(stage) {
   });
 }
 
+function addSelectedIdToShader(shaderSource, idTextureWidth) {
+  shaderSource = shaderSource.replace(/in\s+vec2\s+v_textureCoordinates;/g, "");
+  return `#define CZM_SELECTED_FEATURE
+uniform sampler2D czm_idTexture;
+uniform sampler2D czm_selectedIdTexture;
+uniform float czm_selectedIdTextureStep;
+in vec2 v_textureCoordinates;
+bool czm_selected(vec2 offset)
+{
+    bool selected = false;
+    vec4 id = texture(czm_idTexture, v_textureCoordinates + offset);
+    for (int i = 0; i < ${idTextureWidth}; ++i)
+    {
+        vec4 selectedId = texture(czm_selectedIdTexture, vec2((float(i) + 0.5) * czm_selectedIdTextureStep, 0.5));
+        if (all(equal(id, selectedId)))
+        {
+            return true;
+        }
+    }
+    return false;
+}
+bool czm_selected()
+{
+    return czm_selected(vec2(0.0));
+}
+
+${shaderSource}`;
+}
+
 function createDrawCommand(stage, context) {
   if (
     defined(stage._command) &&
@@ -552,42 +580,15 @@ function createDrawCommand(stage, context) {
     return;
   }
 
-  let fs = stage._fragmentShader;
+  let fragmentShaderSource = stage._fragmentShader;
   if (defined(stage._selectedIdTexture)) {
     const width = stage._selectedIdTexture.width;
-
-    fs = fs.replace(/in\s+vec2\s+v_textureCoordinates;/g, "");
-    fs =
-      `${
-        "#define CZM_SELECTED_FEATURE \n" +
-        "uniform sampler2D czm_idTexture; \n" +
-        "uniform sampler2D czm_selectedIdTexture; \n" +
-        "uniform float czm_selectedIdTextureStep; \n" +
-        "in vec2 v_textureCoordinates; \n" +
-        "bool czm_selected(vec2 offset) \n" +
-        "{ \n" +
-        "    bool selected = false;\n" +
-        "    vec4 id = texture(czm_idTexture, v_textureCoordinates + offset); \n" +
-        "    for (int i = 0; i < "
-      }${width}; ++i) \n` +
-      `    { \n` +
-      `        vec4 selectedId = texture(czm_selectedIdTexture, vec2((float(i) + 0.5) * czm_selectedIdTextureStep, 0.5)); \n` +
-      `        if (all(equal(id, selectedId))) \n` +
-      `        { \n` +
-      `            return true; \n` +
-      `        } \n` +
-      `    } \n` +
-      `    return false; \n` +
-      `} \n\n` +
-      `bool czm_selected() \n` +
-      `{ \n` +
-      `    return czm_selected(vec2(0.0)); \n` +
-      `} \n\n${fs}`;
+    fragmentShaderSource = addSelectedIdToShader(fragmentShaderSource, width);
   }
 
   const fragmentShader = new ShaderSource({
     defines: [stage._useLogDepth ? "LOG_DEPTH" : ""],
-    sources: [fs],
+    sources: [fragmentShaderSource],
   });
   stage._command = context.createViewportQuadCommand(fragmentShader, {
     uniformMap: stage._uniformMap,
@@ -640,24 +641,16 @@ function createStageOutputTextureFunction(stage, name) {
 }
 
 function updateUniformTextures(stage, context) {
-  let i;
-  let texture;
-  let name;
-
   const texturesToRelease = stage._texturesToRelease;
-  let length = texturesToRelease.length;
-  for (i = 0; i < length; ++i) {
-    texture = texturesToRelease[i];
+  for (let i = 0; i < texturesToRelease.length; ++i) {
+    let texture = texturesToRelease[i];
     texture = texture && texture.destroy();
   }
   texturesToRelease.length = 0;
 
   const texturesToCreate = stage._texturesToCreate;
-  length = texturesToCreate.length;
-  for (i = 0; i < length; ++i) {
-    const textureToCreate = texturesToCreate[i];
-    name = textureToCreate.name;
-    const source = textureToCreate.source;
+  for (let i = 0; i < texturesToCreate.length; ++i) {
+    const { name, source } = texturesToCreate[i];
     stage._actualUniforms[name] = new Texture({
       context: context,
       source: source,
@@ -675,19 +668,17 @@ function updateUniformTextures(stage, context) {
     return;
   }
 
-  length = dirtyUniforms.length;
   const uniforms = stage._uniforms;
   const promises = [];
-  for (i = 0; i < length; ++i) {
-    name = dirtyUniforms[i];
+  for (let i = 0; i < dirtyUniforms.length; ++i) {
+    const name = dirtyUniforms[i];
     const stageNameUrlOrImage = uniforms[name];
-    const stageWithName = stage._textureCache.getStageByName(
-      stageNameUrlOrImage
-    );
+    const stageWithName =
+      stage._textureCache.getStageByName(stageNameUrlOrImage);
     if (defined(stageWithName)) {
       stage._actualUniforms[name] = createStageOutputTextureFunction(
         stage,
-        stageNameUrlOrImage
+        stageNameUrlOrImage,
       );
     } else if (typeof stageNameUrlOrImage === "string") {
       const resource = new Resource({
@@ -695,7 +686,7 @@ function updateUniformTextures(stage, context) {
       });
 
       promises.push(
-        resource.fetchImage().then(createLoadImageFunction(stage, name))
+        resource.fetchImage().then(createLoadImageFunction(stage, name)),
       );
     } else {
       stage._texturesToCreate.push({
@@ -736,27 +727,27 @@ function releaseResources(stage) {
   const uniforms = stage._uniforms;
   const actualUniforms = stage._actualUniforms;
   for (const name in actualUniforms) {
-    if (actualUniforms.hasOwnProperty(name)) {
-      if (actualUniforms[name] instanceof Texture) {
-        if (!defined(textureCache.getStageByName(uniforms[name]))) {
-          actualUniforms[name].destroy();
-        }
-        stage._dirtyUniforms.push(name);
+    if (!actualUniforms.hasOwnProperty(name)) {
+      continue;
+    }
+    const actualUniform = actualUniforms[name];
+    if (actualUniform instanceof Texture) {
+      if (!defined(textureCache.getStageByName(uniforms[name]))) {
+        actualUniform.destroy();
       }
+      stage._dirtyUniforms.push(name);
     }
   }
 }
 
 function isSelectedTextureDirty(stage) {
-  let length = defined(stage._selected) ? stage._selected.length : 0;
+  const length = defined(stage._selected) ? stage._selected.length : 0;
   const parentLength = defined(stage._parentSelected)
     ? stage._parentSelected
     : 0;
-  let dirty =
+  const dirty =
     stage._selected !== stage._selectedShadow ||
-    length !== stage._selectedLength;
-  dirty =
-    dirty ||
+    length !== stage._selectedLength ||
     stage._parentSelected !== stage._parentSelectedShadow ||
     parentLength !== stage._parentSelectedLength;
 
@@ -773,8 +764,7 @@ function isSelectedTextureDirty(stage) {
       return true;
     }
 
-    length = stage._combinedSelected.length;
-    for (let i = 0; i < length; ++i) {
+    for (let i = 0; i < stage._combinedSelected.length; ++i) {
       if (stage._combinedSelected[i] !== stage._combinedSelectedShadow[i]) {
         return true;
       }
@@ -797,13 +787,9 @@ function createSelectedTexture(stage, context) {
     return;
   }
 
-  let i;
-  let feature;
-
   let textureLength = 0;
-  const length = features.length;
-  for (i = 0; i < length; ++i) {
-    feature = features[i];
+  for (let i = 0; i < features.length; ++i) {
+    const feature = features[i];
     if (defined(feature.pickIds)) {
       textureLength += feature.pickIds.length;
     } else if (defined(feature.pickId)) {
@@ -811,14 +797,9 @@ function createSelectedTexture(stage, context) {
     }
   }
 
-  if (length === 0 || textureLength === 0) {
+  if (features.length === 0 || textureLength === 0) {
     // max pick id is reserved
-    const empty = new Uint8Array(4);
-    empty[0] = 255;
-    empty[1] = 255;
-    empty[2] = 255;
-    empty[3] = 255;
-
+    const empty = new Uint8Array([255, 255, 255, 255]);
     stage._selectedIdTexture = new Texture({
       context: context,
       pixelFormat: PixelFormat.RGBA,
@@ -833,16 +814,15 @@ function createSelectedTexture(stage, context) {
     return;
   }
 
-  let pickColor;
   let offset = 0;
   const ids = new Uint8Array(textureLength * 4);
-  for (i = 0; i < length; ++i) {
-    feature = features[i];
+  for (let i = 0; i < features.length; ++i) {
+    const feature = features[i];
     if (defined(feature.pickIds)) {
       const pickIds = feature.pickIds;
       const pickIdsLength = pickIds.length;
       for (let j = 0; j < pickIdsLength; ++j) {
-        pickColor = pickIds[j].color;
+        const pickColor = pickIds[j].color;
         ids[offset] = Color.floatToByte(pickColor.red);
         ids[offset + 1] = Color.floatToByte(pickColor.green);
         ids[offset + 2] = Color.floatToByte(pickColor.blue);
@@ -850,7 +830,7 @@ function createSelectedTexture(stage, context) {
         offset += 4;
       }
     } else if (defined(feature.pickId)) {
-      pickColor = feature.pickId.color;
+      const pickColor = feature.pickId.color;
       ids[offset] = Color.floatToByte(pickColor.red);
       ids[offset + 1] = Color.floatToByte(pickColor.green);
       ids[offset + 2] = Color.floatToByte(pickColor.blue);
@@ -937,7 +917,7 @@ PostProcessStage.prototype.update = function (context, useLogDepth) {
           0,
           0,
           colorTexture.width,
-          colorTexture.height
+          colorTexture.height,
         ),
       });
     }
@@ -958,7 +938,7 @@ PostProcessStage.prototype.execute = function (
   context,
   colorTexture,
   depthTexture,
-  idTexture
+  idTexture,
 ) {
   if (
     !defined(this._command) ||

package/Source/Scene/PostProcessStageCollection.js

@@ -12,7 +12,7 @@ import TextureWrap from "../Renderer/TextureWrap.js";
 import PassThrough from "../Shaders/PostProcessStages/PassThrough.js";
 import PostProcessStageLibrary from "./PostProcessStageLibrary.js";
 import PostProcessStageTextureCache from "./PostProcessStageTextureCache.js";
-import Tonemapper from "./Tonemapper.js";
+import Tonemapper, { validateTonemapper } from "./Tonemapper.js";
 
 const stackScratch = [];
 
@@ -41,11 +41,12 @@ function PostProcessStageCollection() {
   // Some shaders, such as the atmosphere and ground atmosphere, output values slightly over 1.0.
   this._autoExposureEnabled = false;
   this._autoExposure = PostProcessStageLibrary.createAutoExposureStage();
+  this._exposure = 1.0;
   this._tonemapping = undefined;
   this._tonemapper = undefined;
 
-  // set tonemapper and tonemapping
-  this.tonemapper = Tonemapper.ACES;
+  // set tonemapper and tonemapping using the setter
+  this.tonemapper = Tonemapper.PBR_NEUTRAL;
 
   const tonemapping = this._tonemapping;
 
@@ -313,11 +314,14 @@ Object.defineProperties(PostProcessStageCollection.prototype, {
   },
 
   /**
-   * Gets and sets the tonemapping algorithm used when rendering with high dynamic range.
+   * Specifies the tonemapping algorithm used when rendering with high dynamic range.
+   * {@link https://sandcastle.cesium.com/?src=High%20Dynamic%20Range.html|Sandcastle Demo}
    *
+   * @example viewer.scene.postProcessStages.tonemapper = Cesium.Tonemapper.ACES;
+   *
+   * @default Tonemapper.PBR_NEUTRAL
    * @memberof PostProcessStageCollection.prototype
    * @type {Tonemapper}
-   * @private
    */
   tonemapper: {
     get: function () {
@@ -328,7 +332,7 @@ Object.defineProperties(PostProcessStageCollection.prototype, {
         return;
       }
       //>>includeStart('debug', pragmas.debug);
-      if (!Tonemapper.validate(value)) {
+      if (!validateTonemapper(value)) {
         throw new DeveloperError("tonemapper was set to an invalid value.");
       }
       //>>includeEnd('debug');
@@ -339,49 +343,78 @@ Object.defineProperties(PostProcessStageCollection.prototype, {
       }
 
       const useAutoExposure = this._autoExposureEnabled;
-      let tonemapper;
+      let tonemapping;
 
       switch (value) {
         case Tonemapper.REINHARD:
-          tonemapper = PostProcessStageLibrary.createReinhardTonemappingStage(
-            useAutoExposure
-          );
+          tonemapping =
+            PostProcessStageLibrary.createReinhardTonemappingStage(
+              useAutoExposure,
+            );
           break;
         case Tonemapper.MODIFIED_REINHARD:
-          tonemapper = PostProcessStageLibrary.createModifiedReinhardTonemappingStage(
-            useAutoExposure
-          );
+          tonemapping =
+            PostProcessStageLibrary.createModifiedReinhardTonemappingStage(
+              useAutoExposure,
+            );
           break;
         case Tonemapper.FILMIC:
-          tonemapper = PostProcessStageLibrary.createFilmicTonemappingStage(
-            useAutoExposure
-          );
+          tonemapping =
+            PostProcessStageLibrary.createFilmicTonemappingStage(
+              useAutoExposure,
+            );
+          break;
+        case Tonemapper.PBR_NEUTRAL:
+          tonemapping =
+            PostProcessStageLibrary.createPbrNeutralTonemappingStage(
+              useAutoExposure,
+            );
           break;
         default:
-          tonemapper = PostProcessStageLibrary.createAcesTonemappingStage(
-            useAutoExposure
-          );
+          tonemapping =
+            PostProcessStageLibrary.createAcesTonemappingStage(useAutoExposure);
           break;
       }
 
       if (useAutoExposure) {
         const autoexposure = this._autoExposure;
-        tonemapper.uniforms.autoExposure = function () {
+        tonemapping.uniforms.autoExposure = function () {
           return autoexposure.outputTexture;
         };
+      } else {
+        tonemapping.uniforms.exposure = this._exposure;
       }
 
       this._tonemapper = value;
-      this._tonemapping = tonemapper;
+      this._tonemapping = tonemapping;
 
       if (defined(this._stageNames)) {
-        this._stageNames[tonemapper.name] = tonemapper;
-        tonemapper._textureCache = this._textureCache;
+        this._stageNames[tonemapping.name] = tonemapping;
+        tonemapping._textureCache = this._textureCache;
       }
 
       this._textureCacheDirty = true;
     },
   },
+
+  /**
+   * Control the exposure when HDR is on. Less than 1.0 makes the tonemapping darker while greater than 1.0 makes it brighter.
+   *
+   * @example viewer.scene.postProcessStages.exposure = 1.0;
+   *
+   * @default 1.0
+   * @memberof PostProcessStageCollection.prototype
+   * @type {number}
+   */
+  exposure: {
+    get: function () {
+      return this._exposure;
+    },
+    set: function (value) {
+      this._tonemapping.uniforms.exposure = value;
+      this._exposure = value;
+    },
+  },
 });
 
 function removeStages(collection) {
@@ -393,8 +426,7 @@ function removeStages(collection) {
 
   const newStages = [];
   const stages = collection._stages;
-  const length = stages.length;
-  for (let i = 0, j = 0; i < length; ++i) {
+  for (let i = 0, j = 0; i < stages.length; ++i) {
     const stage = stages[i];
     if (stage) {
       stage._index = j++;
@@ -427,7 +459,7 @@ PostProcessStageCollection.prototype.add = function (stage) {
     //>>includeStart('debug', pragmas.debug);
     if (defined(stageNames[currentStage.name])) {
       throw new DeveloperError(
-        `${currentStage.name} has already been added to the collection or does not have a unique name.`
+        `${currentStage.name} has already been added to the collection or does not have a unique name.`,
       );
     }
     //>>includeEnd('debug');
@@ -552,7 +584,7 @@ PostProcessStageCollection.prototype.getStageByName = function (name) {
 PostProcessStageCollection.prototype.update = function (
   context,
   useLogDepth,
-  useHdr
+  useHdr,
 ) {
   removeStages(this);
 
@@ -561,23 +593,20 @@ PostProcessStageCollection.prototype.update = function (
   this._previousActiveStages = previousActiveStages;
 
   const stages = this._stages;
-  let length = (activeStages.length = stages.length);
+  activeStages.length = stages.length;
 
-  let i;
-  let stage;
   let count = 0;
-  for (i = 0; i < length; ++i) {
-    stage = stages[i];
+  for (let i = 0; i < stages.length; ++i) {
+    const stage = stages[i];
     if (stage.ready && stage.enabled && stage._isSupported(context)) {
       activeStages[count++] = stage;
     }
   }
-
   activeStages.length = count;
 
   let activeStagesChanged = count !== previousActiveStages.length;
   if (!activeStagesChanged) {
-    for (i = 0; i < count; ++i) {
+    for (let i = 0; i < count; ++i) {
       if (activeStages[i] !== previousActiveStages[i]) {
         activeStagesChanged = true;
         break;
@@ -624,9 +653,9 @@ PostProcessStageCollection.prototype.update = function (
   }
 
   if (!defined(this._randomTexture) && aoEnabled) {
-    length = 256 * 256 * 3;
+    const length = 256 * 256 * 3;
     const random = new Uint8Array(length);
-    for (i = 0; i < length; i += 3) {
+    for (let i = 0; i < length; i += 3) {
       random[i] = Math.floor(Math.random() * 255.0);
     }
 
@@ -659,19 +688,17 @@ PostProcessStageCollection.prototype.update = function (
     autoexposure.update(context, useLogDepth);
   }
 
-  length = stages.length;
-  for (i = 0; i < length; ++i) {
+  for (let i = 0; i < stages.length; ++i) {
     stages[i].update(context, useLogDepth);
   }
 
   count = 0;
-  for (i = 0; i < length; ++i) {
-    stage = stages[i];
+  for (let i = 0; i < stages.length; ++i) {
+    const stage = stages[i];
     if (stage.ready && stage.enabled && stage._isSupported(context)) {
       count++;
     }
   }
-
   activeStagesChanged = count !== activeStages.length;
   if (activeStagesChanged) {
     this.update(context, useLogDepth, useHdr);
@@ -722,22 +749,19 @@ function execute(stage, context, colorTexture, depthTexture, idTexture) {
     return;
   }
 
-  const length = stage.length;
-  let i;
-
   if (stage.inputPreviousStageTexture) {
     execute(stage.get(0), context, colorTexture, depthTexture, idTexture);
-    for (i = 1; i < length; ++i) {
+    for (let i = 1; i < stage.length; ++i) {
       execute(
         stage.get(i),
         context,
         getOutputTexture(stage.get(i - 1)),
         depthTexture,
-        idTexture
+        idTexture,
       );
     }
   } else {
-    for (i = 0; i < length; ++i) {
+    for (let i = 0; i < stage.length; ++i) {
       execute(stage.get(i), context, colorTexture, depthTexture, idTexture);
     }
   }
@@ -757,7 +781,7 @@ PostProcessStageCollection.prototype.execute = function (
   context,
   colorTexture,
   depthTexture,
-  idTexture
+  idTexture,
 ) {
   const activeStages = this._activeStages;
   const length = activeStages.length;
@@ -811,7 +835,7 @@ PostProcessStageCollection.prototype.execute = function (
         context,
         getOutputTexture(activeStages[i - 1]),
         depthTexture,
-        idTexture
+        idTexture,
       );
     }
     lastTexture = getOutputTexture(activeStages[length - 1]);

package/Source/Scene/PostProcessStageComposite.js

@@ -81,14 +81,14 @@ function PostProcessStageComposite(options) {
   Check.typeOf.number.greaterThan(
     "options.stages.length",
     options.stages.length,
-    0
+    0,
   );
   //>>includeEnd('debug');
 
   this._stages = options.stages;
   this._inputPreviousStageTexture = defaultValue(
     options.inputPreviousStageTexture,
-    true
+    true,
   );
 
   let name = options.name;