@cesium/engine 2.2.0 → 2.4.0

package/Source/Scene/Model/Model.js

@@ -2384,19 +2384,21 @@ function updateShowCreditsOnScreen(model) {
 
   const showOnScreen = model._showCreditsOnScreen;
   if (defined(model._credit)) {
-    model._credit.showOnScreen = showOnScreen;
+    model._credit.showOnScreen = showOnScreen || model._credit._isDefaultToken;
   }
 
   const resourceCredits = model._resourceCredits;
   const resourceCreditsLength = resourceCredits.length;
   for (let i = 0; i < resourceCreditsLength; i++) {
-    resourceCredits[i].showOnScreen = showOnScreen;
+    resourceCredits[i].showOnScreen =
+      showOnScreen || resourceCredits[i]._isDefaultToken;
   }
 
   const gltfCredits = model._gltfCredits;
   const gltfCreditsLength = gltfCredits.length;
   for (let i = 0; i < gltfCreditsLength; i++) {
-    gltfCredits[i].showOnScreen = showOnScreen;
+    gltfCredits[i].showOnScreen =
+      showOnScreen || gltfCredits[i]._isDefaultToken;
   }
 }
 
@@ -2509,19 +2511,19 @@ function addCreditsToCreditDisplay(model, frameState) {
   // Add all credits to the credit display.
   const credit = model._credit;
   if (defined(credit)) {
-    creditDisplay.addCredit(credit);
+    creditDisplay.addCreditToNextFrame(credit);
   }
 
   const resourceCredits = model._resourceCredits;
   const resourceCreditsLength = resourceCredits.length;
   for (let c = 0; c < resourceCreditsLength; c++) {
-    creditDisplay.addCredit(resourceCredits[c]);
+    creditDisplay.addCreditToNextFrame(resourceCredits[c]);
   }
 
   const gltfCredits = model._gltfCredits;
   const gltfCreditsLength = gltfCredits.length;
   for (let c = 0; c < gltfCreditsLength; c++) {
-    creditDisplay.addCredit(gltfCredits[c]);
+    creditDisplay.addCreditToNextFrame(gltfCredits[c]);
   }
 }
 
@@ -2841,26 +2843,26 @@ Model.fromGltf = function (options) {
  * <p>
  * The model can be a traditional glTF asset with a .gltf extension or a Binary glTF using the .glb extension.
  *
- * @param {Object} options Object with the following properties:
- * @param {String|Resource} options.url The url to the .gltf or .glb file.
- * @param {String|Resource} [options.basePath=''] The base path that paths in the glTF JSON are relative to.
- * @param {Boolean} [options.show=true] Whether or not to render the model.
+ * @param {object} options Object with the following properties:
+ * @param {string|Resource} options.url The url to the .gltf or .glb file.
+ * @param {string|Resource} [options.basePath=''] The base path that paths in the glTF JSON are relative to.
+ * @param {boolean} [options.show=true] Whether or not to render the model.
  * @param {Matrix4} [options.modelMatrix=Matrix4.IDENTITY] The 4x4 transformation matrix that transforms the model from model to world coordinates.
- * @param {Number} [options.scale=1.0] A uniform scale applied to this model.
- * @param {Number} [options.minimumPixelSize=0.0] The approximate minimum pixel size of the model regardless of zoom.
- * @param {Number} [options.maximumScale] The maximum scale size of a model. An upper limit for minimumPixelSize.
- * @param {Object} [options.id] A user-defined object to return when the model is picked with {@link Scene#pick}.
- * @param {Boolean} [options.allowPicking=true] When <code>true</code>, each primitive is pickable with {@link Scene#pick}.
- * @param {Boolean} [options.incrementallyLoadTextures=true] Determine if textures may continue to stream in after the model is loaded.
- * @param {Boolean} [options.asynchronous=true] Determines if model WebGL resource creation will be spread out over several frames or block until completion once all glTF files are loaded.
- * @param {Boolean} [options.clampAnimations=true] Determines if the model's animations should hold a pose over frames where no keyframes are specified.
+ * @param {number} [options.scale=1.0] A uniform scale applied to this model.
+ * @param {number} [options.minimumPixelSize=0.0] The approximate minimum pixel size of the model regardless of zoom.
+ * @param {number} [options.maximumScale] The maximum scale size of a model. An upper limit for minimumPixelSize.
+ * @param {object} [options.id] A user-defined object to return when the model is picked with {@link Scene#pick}.
+ * @param {boolean} [options.allowPicking=true] When <code>true</code>, each primitive is pickable with {@link Scene#pick}.
+ * @param {boolean} [options.incrementallyLoadTextures=true] Determine if textures may continue to stream in after the model is loaded.
+ * @param {boolean} [options.asynchronous=true] Determines if model WebGL resource creation will be spread out over several frames or block until completion once all glTF files are loaded.
+ * @param {boolean} [options.clampAnimations=true] Determines if the model's animations should hold a pose over frames where no keyframes are specified.
  * @param {ShadowMode} [options.shadows=ShadowMode.ENABLED] Determines whether the model casts or receives shadows from light sources.
- * @param {Boolean} [options.releaseGltfJson=false] When true, the glTF JSON is released once the glTF is loaded. This is is especially useful for cases like 3D Tiles, where each .gltf model is unique and caching the glTF JSON is not effective.
- * @param {Boolean} [options.debugShowBoundingVolume=false] For debugging only. Draws the bounding sphere for each draw command in the model.
- * @param {Boolean} [options.enableDebugWireframe=false] For debugging only. This must be set to true for debugWireframe to work in WebGL1. This cannot be set after the model has loaded.
- * @param {Boolean} [options.debugWireframe=false] For debugging only. Draws the model in wireframe. Will only work for WebGL1 if enableDebugWireframe is set to true.
- * @param {Boolean} [options.cull=true]  Whether or not to cull the model using frustum/horizon culling. If the model is part of a 3D Tiles tileset, this property will always be false, since the 3D Tiles culling system is used.
- * @param {Boolean} [options.opaquePass=Pass.OPAQUE] The pass to use in the {@link DrawCommand} for the opaque portions of the model.
+ * @param {boolean} [options.releaseGltfJson=false] When true, the glTF JSON is released once the glTF is loaded. This is is especially useful for cases like 3D Tiles, where each .gltf model is unique and caching the glTF JSON is not effective.
+ * @param {boolean} [options.debugShowBoundingVolume=false] For debugging only. Draws the bounding sphere for each draw command in the model.
+ * @param {boolean} [options.enableDebugWireframe=false] For debugging only. This must be set to true for debugWireframe to work in WebGL1. This cannot be set after the model has loaded.
+ * @param {boolean} [options.debugWireframe=false] For debugging only. Draws the model in wireframe. Will only work for WebGL1 if enableDebugWireframe is set to true.
+ * @param {boolean} [options.cull=true]  Whether or not to cull the model using frustum/horizon culling. If the model is part of a 3D Tiles tileset, this property will always be false, since the 3D Tiles culling system is used.
+ * @param {boolean} [options.opaquePass=Pass.OPAQUE] The pass to use in the {@link DrawCommand} for the opaque portions of the model.
  * @param {Axis} [options.upAxis=Axis.Y] The up-axis of the glTF model.
  * @param {Axis} [options.forwardAxis=Axis.Z] The forward-axis of the glTF model.
  * @param {CustomShader} [options.customShader] A custom shader. This will add user-defined GLSL code to the vertex and fragment shaders. Using custom shaders with a {@link Cesium3DTileStyle} may lead to undefined behavior.
@@ -2870,28 +2872,31 @@ Model.fromGltf = function (options) {
  * @param {DistanceDisplayCondition} [options.distanceDisplayCondition] The condition specifying at what distance from the camera that this model will be displayed.
  * @param {Color} [options.color] A color that blends with the model's rendered color.
  * @param {ColorBlendMode} [options.colorBlendMode=ColorBlendMode.HIGHLIGHT] Defines how the color blends with the model.
- * @param {Number} [options.colorBlendAmount=0.5] Value used to determine the color strength when the <code>colorBlendMode</code> is <code>MIX</code>. A value of 0.0 results in the model's rendered color while a value of 1.0 results in a solid color, with any value in-between resulting in a mix of the two.
+ * @param {number} [options.colorBlendAmount=0.5] Value used to determine the color strength when the <code>colorBlendMode</code> is <code>MIX</code>. A value of 0.0 results in the model's rendered color while a value of 1.0 results in a solid color, with any value in-between resulting in a mix of the two.
  * @param {Color} [options.silhouetteColor=Color.RED] The silhouette color. If more than 256 models have silhouettes enabled, there is a small chance that overlapping models will have minor artifacts.
- * @param {Number} [options.silhouetteSize=0.0] The size of the silhouette in pixels.
- * @param {Boolean} [options.enableShowOutline=true] Whether to enable outlines for models using the {@link https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Vendor/CESIUM_primitive_outline|CESIUM_primitive_outline} extension. This can be set false to avoid post-processing geometry at load time. When false, the showOutlines and outlineColor options are ignored.
- * @param {Boolean} [options.showOutline=true] Whether to display the outline for models using the {@link https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Vendor/CESIUM_primitive_outline|CESIUM_primitive_outline} extension. When true, outlines are displayed. When false, outlines are not displayed.
+ * @param {number} [options.silhouetteSize=0.0] The size of the silhouette in pixels.
+ * @param {boolean} [options.enableShowOutline=true] Whether to enable outlines for models using the {@link https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Vendor/CESIUM_primitive_outline|CESIUM_primitive_outline} extension. This can be set false to avoid post-processing geometry at load time. When false, the showOutlines and outlineColor options are ignored.
+ * @param {boolean} [options.showOutline=true] Whether to display the outline for models using the {@link https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Vendor/CESIUM_primitive_outline|CESIUM_primitive_outline} extension. When true, outlines are displayed. When false, outlines are not displayed.
  * @param {Color} [options.outlineColor=Color.BLACK] The color to use when rendering outlines.
  * @param {ClippingPlaneCollection} [options.clippingPlanes] The {@link ClippingPlaneCollection} used to selectively disable rendering the model.
  * @param {Cartesian3} [options.lightColor] The light color when shading the model. When <code>undefined</code> the scene's light color is used instead.
  * @param {ImageBasedLighting} [options.imageBasedLighting] The properties for managing image-based lighting on this model.
- * @param {Boolean} [options.backFaceCulling=true] Whether to cull back-facing geometry. When true, back face culling is determined by the material's doubleSided property; when false, back face culling is disabled. Back faces are not culled if the model's color is translucent.
- * @param {Credit|String} [options.credit] A credit for the data source, which is displayed on the canvas.
- * @param {Boolean} [options.showCreditsOnScreen=false] Whether to display the credits of this model on screen.
+ * @param {boolean} [options.backFaceCulling=true] Whether to cull back-facing geometry. When true, back face culling is determined by the material's doubleSided property; when false, back face culling is disabled. Back faces are not culled if the model's color is translucent.
+ * @param {Credit|string} [options.credit] A credit for the data source, which is displayed on the canvas.
+ * @param {boolean} [options.showCreditsOnScreen=false] Whether to display the credits of this model on screen.
  * @param {SplitDirection} [options.splitDirection=SplitDirection.NONE] The {@link SplitDirection} split to apply to this model.
- * @param {Boolean} [options.projectTo2D=false] Whether to accurately project the model's positions in 2D. If this is true, the model will be projected accurately to 2D, but it will use more memory to do so. If this is false, the model will use less memory and will still render in 2D / CV mode, but its positions may be inaccurate. This disables minimumPixelSize and prevents future modification to the model matrix. This also cannot be set after the model has loaded.
- * @param {String|Number} [options.featureIdLabel="featureId_0"] Label of the feature ID set to use for picking and styling. For EXT_mesh_features, this is the feature ID's label property, or "featureId_N" (where N is the index in the featureIds array) when not specified. EXT_feature_metadata did not have a label field, so such feature ID sets are always labeled "featureId_N" where N is the index in the list of all feature Ids, where feature ID attributes are listed before feature ID textures. If featureIdLabel is an integer N, it is converted to the string "featureId_N" automatically. If both per-primitive and per-instance feature IDs are present, the instance feature IDs take priority.
- * @param {String|Number} [options.instanceFeatureIdLabel="instanceFeatureId_0"] Label of the instance feature ID set used for picking and styling. If instanceFeatureIdLabel is set to an integer N, it is converted to the string "instanceFeatureId_N" automatically. If both per-primitive and per-instance feature IDs are present, the instance feature IDs take priority.
- * @param {Object} [options.pointCloudShading] Options for constructing a {@link PointCloudShading} object to control point attenuation and lighting.
+ * @param {boolean} [options.projectTo2D=false] Whether to accurately project the model's positions in 2D. If this is true, the model will be projected accurately to 2D, but it will use more memory to do so. If this is false, the model will use less memory and will still render in 2D / CV mode, but its positions may be inaccurate. This disables minimumPixelSize and prevents future modification to the model matrix. This also cannot be set after the model has loaded.
+ * @param {string|number} [options.featureIdLabel="featureId_0"] Label of the feature ID set to use for picking and styling. For EXT_mesh_features, this is the feature ID's label property, or "featureId_N" (where N is the index in the featureIds array) when not specified. EXT_feature_metadata did not have a label field, so such feature ID sets are always labeled "featureId_N" where N is the index in the list of all feature Ids, where feature ID attributes are listed before feature ID textures. If featureIdLabel is an integer N, it is converted to the string "featureId_N" automatically. If both per-primitive and per-instance feature IDs are present, the instance feature IDs take priority.
+ * @param {string|number} [options.instanceFeatureIdLabel="instanceFeatureId_0"] Label of the instance feature ID set used for picking and styling. If instanceFeatureIdLabel is set to an integer N, it is converted to the string "instanceFeatureId_N" automatically. If both per-primitive and per-instance feature IDs are present, the instance feature IDs take priority.
+ * @param {object} [options.pointCloudShading] Options for constructing a {@link PointCloudShading} object to control point attenuation and lighting.
  * @param {ClassificationType} [options.classificationType] Determines whether terrain, 3D Tiles or both will be classified by this model. This cannot be set after the model has loaded.
+ * @param {Model.GltfCallback} [options.gltfCallback] A function that is called with the loaded gltf object once loaded.
  *
  * @returns {Promise<Model>} A promise that resolves to the created model when it is ready to render.
  *
  * @exception {RuntimeError} The model failed to load.
+ * @exception {RuntimeError} Unsupported glTF version.
+ * @exception {RuntimeError} Unsupported glTF Extension
  *
  * @example
  * // Load a model and add it to the scene
@@ -2931,6 +2936,28 @@ Model.fromGltf = function (options) {
  * } catch (error) {
  *  console.log(`Failed to load model. ${error}`);
  * }
+ *
+ * @example
+ * // Load a model and play the last animation at half speed
+ * let animations;
+ * try {
+ *  const model = await Cesium.Model.fromGltfAsync({
+ *    url: "../../SampleData/models/CesiumMan/Cesium_Man.glb",
+ *    gltfCallback: gltf => {
+ *      animations = gltf.animations
+ *    }
+ *  });
+ *  viewer.scene.primitives.add(model);
+ *  model.readyEvent.addEventListener(() => {
+ *    model.activeAnimations.add({
+ *      index: animations.length - 1,
+ *      loop: Cesium.ModelAnimationLoop.REPEAT,
+ *      multiplier: 0.5,
+ *    });
+ *  });
+ * } catch (error) {
+ *  console.log(`Failed to load model. ${error}`);
+ * }
  */
 Model.fromGltfAsync = async function (options) {
   options = defaultValue(options, defaultValue.EMPTY_OBJECT);
@@ -2988,22 +3015,31 @@ Model.fromGltfAsync = async function (options) {
     // Further resource loading is handled synchronously in loader.process(), and requires
     // hooking into model's update() as the frameState is needed
     await loader.load();
-
-    const model = new Model(modelOptions);
-
-    const resourceCredits = model._resource.credits;
-    if (defined(resourceCredits)) {
-      const length = resourceCredits.length;
-      for (let i = 0; i < length; i++) {
-        model._resourceCredits.push(resourceCredits[i]);
-      }
-    }
-
-    return model;
   } catch (error) {
     loader.destroy();
     throw ModelUtility.getError("model", resource, error);
   }
+
+  const gltfCallback = options.gltfCallback;
+  if (defined(gltfCallback)) {
+    //>>includeStart('debug', pragmas.debug);
+    Check.typeOf.func("options.gltfCallback", gltfCallback);
+    //>>includeEnd('debug');
+
+    gltfCallback(loader.gltfJson);
+  }
+
+  const model = new Model(modelOptions);
+
+  const resourceCredits = model._resource.credits;
+  if (defined(resourceCredits)) {
+    const length = resourceCredits.length;
+    for (let i = 0; i < length; i++) {
+      model._resourceCredits.push(resourceCredits[i]);
+    }
+  }
+
+  return model;
 };
 
 /*
@@ -3214,4 +3250,11 @@ function makeModelOptions(loader, modelType, options) {
   };
 }
 
+/**
+ * Interface for the function that is called with the loaded gltf object once loaded.
+ * @callback Model.GltfCallback
+ *
+ * @param {object} gltf The gltf object
+ */
+
 export default Model;

package/Source/Scene/Model/UniformType.js

@@ -104,7 +104,7 @@ const UniformType = {
    * @type {string}
    * @constant
    */
-  MAT3: "mat2",
+  MAT3: "mat3",
   /**
    * A 3x3 matrix of floating point values.
    *

package/Source/Scene/Picking.js

@@ -92,8 +92,9 @@ function getPickOrthographicCullingVolume(
 ) {
   const camera = scene.camera;
   let frustum = camera.frustum;
-  if (defined(frustum._offCenterFrustum)) {
-    frustum = frustum._offCenterFrustum;
+  const offCenterFrustum = frustum.offCenterFrustum;
+  if (defined(offCenterFrustum)) {
+    frustum = offCenterFrustum;
   }
 
   let x = (2.0 * (drawingBufferPosition.x - viewport.x)) / viewport.width - 1.0;

package/Source/Scene/QuadtreePrimitive.js

@@ -1275,8 +1275,9 @@ function screenSpaceError(primitive, frameState, tile) {
 function screenSpaceError2D(primitive, frameState, tile) {
   const camera = frameState.camera;
   let frustum = camera.frustum;
-  if (defined(frustum._offCenterFrustum)) {
-    frustum = frustum._offCenterFrustum;
+  const offCenterFrustum = frustum.offCenterFrustum;
+  if (defined(offCenterFrustum)) {
+    frustum = offCenterFrustum;
   }
 
   const context = frameState.context;

package/Source/Scene/SceneTransforms.js

@@ -432,8 +432,9 @@ SceneTransforms.drawingBufferToWgs84Coordinates = function (
   let worldCoords;
   let frustum = scene.camera.frustum;
   if (!defined(frustum.fovy)) {
-    if (defined(frustum._offCenterFrustum)) {
-      frustum = frustum._offCenterFrustum;
+    const offCenterFrustum = frustum.offCenterFrustum;
+    if (defined(offCenterFrustum)) {
+      frustum = offCenterFrustum;
     }
     worldCoords = scratchWorldCoords;
     worldCoords.x =

package/Source/Scene/ScreenSpaceCameraController.js

@@ -217,7 +217,7 @@ function ScreenSpaceCameraController(scene) {
     modifier: KeyboardEventModifier.SHIFT,
   };
   /**
-   * The minimum height the camera must be before picking the terrain instead of the ellipsoid.
+   * The minimum height the camera must be before picking the terrain or scene content instead of the ellipsoid.
    * @type {number}
    * @default 150000.0
    */
@@ -291,6 +291,8 @@ function ScreenSpaceCameraController(scene) {
   this._zoomMouseStart = new Cartesian2(-1.0, -1.0);
   this._zoomWorldPosition = new Cartesian3();
   this._useZoomWorldPosition = false;
+  this._panLastMousePosition = new Cartesian2();
+  this._panLastWorldPosition = new Cartesian3();
   this._tiltCVOffMap = false;
   this._looking = false;
   this._rotating = false;
@@ -592,7 +594,7 @@ function handleZoom(
   if (camera.frustum instanceof OrthographicFrustum) {
     if (Math.abs(distance) > 0.0) {
       camera.zoomIn(distance);
-      camera._adjustOrthographicFrustum();
+      camera._adjustOrthographicFrustum(true);
     }
     return;
   }
@@ -611,19 +613,22 @@ function handleZoom(
       object._zoomMouseStart
     );
 
-    if (defined(object._globe)) {
-      if (mode === SceneMode.SCENE2D) {
-        pickedPosition = camera.getPickRay(startPosition, scratchZoomPickRay)
-          .origin;
-        pickedPosition = Cartesian3.fromElements(
-          pickedPosition.y,
-          pickedPosition.z,
-          pickedPosition.x
-        );
-      } else {
-        pickedPosition = pickGlobe(object, startPosition, scratchPickCartesian);
-      }
+    if (defined(object._globe) && mode === SceneMode.SCENE2D) {
+      pickedPosition = camera.getPickRay(startPosition, scratchZoomPickRay)
+        .origin;
+      pickedPosition = Cartesian3.fromElements(
+        pickedPosition.y,
+        pickedPosition.z,
+        pickedPosition.x
+      );
+    } else {
+      pickedPosition = pickPosition(
+        object,
+        startPosition,
+        scratchPickCartesian
+      );
     }
+
     if (defined(pickedPosition)) {
       object._useZoomWorldPosition = true;
       object._zoomWorldPosition = Cartesian3.clone(
@@ -709,7 +714,7 @@ function handleZoom(
         const centerPixel = scratchCenterPixel;
         centerPixel.x = canvas.clientWidth / 2;
         centerPixel.y = canvas.clientHeight / 2;
-        const centerPosition = pickGlobe(
+        const centerPosition = pickPosition(
           object,
           centerPixel,
           scratchCenterPosition
@@ -1107,17 +1112,11 @@ const pickGlobeScratchRay = new Ray();
 const scratchDepthIntersection = new Cartesian3();
 const scratchRayIntersection = new Cartesian3();
 
-function pickGlobe(controller, mousePosition, result) {
+function pickPosition(controller, mousePosition, result) {
   const scene = controller._scene;
   const globe = controller._globe;
   const camera = scene.camera;
 
-  if (!defined(globe)) {
-    return undefined;
-  }
-
-  const cullBackFaces = !controller._cameraUnderground;
-
   let depthIntersection;
   if (scene.pickPositionSupported) {
     depthIntersection = scene.pickPositionWorldCoordinates(
@@ -1126,6 +1125,11 @@ function pickGlobe(controller, mousePosition, result) {
     );
   }
 
+  if (!defined(globe)) {
+    return Cartesian3.clone(depthIntersection, result);
+  }
+
+  const cullBackFaces = !controller._cameraUnderground;
   const ray = camera.getPickRay(mousePosition, pickGlobeScratchRay);
   const rayIntersection = globe.pickWorldCoordinates(
     ray,
@@ -1289,7 +1293,8 @@ function translateCV(controller, startPosition, movement) {
 
   let globePos;
   if (camera.position.z < controller._minimumPickingTerrainHeight) {
-    globePos = pickGlobe(controller, startMouse, translateCVStartPos);
+    globePos = pickPosition(controller, startMouse, translateCVStartPos);
+
     if (defined(globePos)) {
       origin.x = globePos.x;
     }
@@ -1476,7 +1481,7 @@ function rotateCVOnTerrain(controller, startPosition, movement) {
     center = Cartesian3.clone(controller._tiltCenter, rotateCVCenter);
   } else {
     if (camera.position.z < controller._minimumPickingTerrainHeight) {
-      center = pickGlobe(controller, startPosition, rotateCVCenter);
+      center = pickPosition(controller, startPosition, rotateCVCenter);
     }
 
     if (!defined(center)) {
@@ -1711,7 +1716,7 @@ function zoomCV(controller, startPosition, movement) {
 
   let intersection;
   if (height < controller._minimumPickingTerrainHeight) {
-    intersection = pickGlobe(controller, windowPosition, zoomCVIntersection);
+    intersection = pickPosition(controller, windowPosition, zoomCVIntersection);
   }
 
   let distance;
@@ -1826,7 +1831,6 @@ const scratchStrafeRay = new Ray();
 const scratchStrafePlane = new Plane(Cartesian3.UNIT_X, 0.0);
 const scratchStrafeIntersection = new Cartesian3();
 const scratchStrafeDirection = new Cartesian3();
-const scratchMousePos = new Cartesian3();
 
 function strafe(controller, movement, strafeStartPosition) {
   const scene = controller._scene;
@@ -1867,6 +1871,7 @@ const scratchRadii = new Cartesian3();
 const scratchEllipsoid = new Ellipsoid();
 const scratchLookUp = new Cartesian3();
 const scratchNormal = new Cartesian3();
+const scratchMousePosition = new Cartesian3();
 
 function spin3D(controller, startPosition, movement) {
   const scene = controller._scene;
@@ -1918,10 +1923,10 @@ function spin3D(controller, startPosition, movement) {
   const globe = controller._globe;
 
   if (defined(globe) && height < controller._minimumPickingTerrainHeight) {
-    const mousePos = pickGlobe(
+    const mousePos = pickPosition(
       controller,
       movement.startPosition,
-      scratchMousePos
+      scratchMousePosition
     );
     if (defined(mousePos)) {
       let strafing = false;
@@ -2051,6 +2056,9 @@ const pan3DTemp2 = new Cartesian3();
 const pan3DTemp3 = new Cartesian3();
 const pan3DStartMousePosition = new Cartesian2();
 const pan3DEndMousePosition = new Cartesian2();
+const pan3DDiffMousePosition = new Cartesian2();
+const pan3DPixelDimensions = new Cartesian2();
+const panRay = new Ray();
 
 function pan3D(controller, startPosition, movement, ellipsoid) {
   const scene = controller._scene;
@@ -2064,9 +2072,109 @@ function pan3D(controller, startPosition, movement, ellipsoid) {
     movement.endPosition,
     pan3DEndMousePosition
   );
+  const height = ellipsoid.cartesianToCartographic(
+    camera.positionWC,
+    scratchCartographic
+  ).height;
+
+  let p0, p1;
+
+  if (
+    !movement.inertiaEnabled &&
+    height < controller._minimumPickingTerrainHeight
+  ) {
+    p0 = Cartesian3.clone(controller._panLastWorldPosition, pan3DP0);
+
+    // Use the last picked world position unless we're starting a new drag
+    if (
+      !defined(controller._globe) &&
+      !Cartesian2.equalsEpsilon(
+        startMousePosition,
+        controller._panLastMousePosition
+      )
+    ) {
+      p0 = pickPosition(controller, startMousePosition, pan3DP0);
+    }
+
+    if (!defined(controller._globe) && defined(p0)) {
+      const toCenter = Cartesian3.subtract(p0, camera.positionWC, pan3DTemp1);
+      const toCenterProj = Cartesian3.multiplyByScalar(
+        camera.directionWC,
+        Cartesian3.dot(camera.directionWC, toCenter),
+        pan3DTemp1
+      );
+      const distanceToNearPlane = Cartesian3.magnitude(toCenterProj);
+      const pixelDimensions = camera.frustum.getPixelDimensions(
+        scene.drawingBufferWidth,
+        scene.drawingBufferHeight,
+        distanceToNearPlane,
+        scene.pixelRatio,
+        pan3DPixelDimensions
+      );
 
-  let p0 = camera.pickEllipsoid(startMousePosition, ellipsoid, pan3DP0);
-  let p1 = camera.pickEllipsoid(endMousePosition, ellipsoid, pan3DP1);
+      const dragDelta = Cartesian2.subtract(
+        endMousePosition,
+        startMousePosition,
+        pan3DDiffMousePosition
+      );
+
+      // Move the camera to the the distance the cursor moved in worldspace
+      const right = Cartesian3.multiplyByScalar(
+        camera.rightWC,
+        dragDelta.x * pixelDimensions.x,
+        pan3DTemp1
+      );
+
+      // Move the camera towards the picked position in worldspace as the camera is pointed towards a horizon view
+      const cameraPositionNormal = Cartesian3.normalize(
+        camera.positionWC,
+        scratchCameraPositionNormal
+      );
+      const endPickDirection = camera.getPickRay(endMousePosition, panRay)
+        .direction;
+      const endPickProj = Cartesian3.subtract(
+        endPickDirection,
+        Cartesian3.projectVector(endPickDirection, camera.rightWC, pan3DTemp2),
+        pan3DTemp2
+      );
+      const angle = Cartesian3.angleBetween(endPickProj, camera.directionWC);
+      let forward = 1.0;
+      if (defined(camera.frustum.fov)) {
+        forward = Math.max(Math.tan(angle), 0.1); // Clamp so we don't make the magnitude infinitely large when the angle is small
+      }
+      let dot = Math.abs(
+        Cartesian3.dot(camera.directionWC, cameraPositionNormal)
+      );
+      const magnitude =
+        ((-dragDelta.y * pixelDimensions.y * 2.0) / Math.sqrt(forward)) *
+        (1.0 - dot);
+      const direction = Cartesian3.multiplyByScalar(
+        endPickDirection,
+        magnitude,
+        pan3DTemp2
+      );
+
+      // Move the camera up the distance the cursor moved in worldspace as the camera is pointed towards the center
+      dot = Math.abs(Cartesian3.dot(camera.upWC, cameraPositionNormal));
+      const up = Cartesian3.multiplyByScalar(
+        camera.upWC,
+        -dragDelta.y * (1.0 - dot) * pixelDimensions.y,
+        pan3DTemp3
+      );
+
+      p1 = Cartesian3.add(p0, right, pan3DP1);
+      p1 = Cartesian3.add(p1, direction, p1);
+      p1 = Cartesian3.add(p1, up, p1);
+
+      Cartesian3.clone(p1, controller._panLastWorldPosition);
+      Cartesian2.clone(endMousePosition, controller._panLastMousePosition);
+    }
+  }
+
+  if (!defined(p0) || !defined(p1)) {
+    p0 = camera.pickEllipsoid(startMousePosition, ellipsoid, pan3DP0);
+    p1 = camera.pickEllipsoid(endMousePosition, ellipsoid, pan3DP1);
+  }
 
   if (!defined(p0) || !defined(p1)) {
     controller._rotating = true;
@@ -2205,7 +2313,7 @@ function zoom3D(controller, startPosition, movement) {
     ? approachingCollision
     : height < controller._minimumPickingTerrainHeight;
   if (needPickGlobe) {
-    intersection = pickGlobe(controller, windowPosition, zoomCVIntersection);
+    intersection = pickPosition(controller, windowPosition, zoomCVIntersection);
   }
 
   let distance;
@@ -2397,7 +2505,7 @@ function tilt3DOnTerrain(controller, startPosition, movement) {
   if (Cartesian2.equals(startPosition, controller._tiltCenterMousePosition)) {
     center = Cartesian3.clone(controller._tiltCenter, tilt3DCenter);
   } else {
-    center = pickGlobe(controller, startPosition, tilt3DCenter);
+    center = pickPosition(controller, startPosition, tilt3DCenter);
 
     if (!defined(center)) {
       ray = camera.getPickRay(startPosition, tilt3DRay);

package/Source/Scene/Vector3DTilePoints.js

@@ -394,11 +394,15 @@ Vector3DTilePoints.prototype.applyStyle = function (style, features) {
 
     if (defined(style.scaleByDistance)) {
       const scaleByDistanceCart4 = style.scaleByDistance.evaluate(feature);
-      scratchScaleByDistance.near = scaleByDistanceCart4.x;
-      scratchScaleByDistance.nearValue = scaleByDistanceCart4.y;
-      scratchScaleByDistance.far = scaleByDistanceCart4.z;
-      scratchScaleByDistance.farValue = scaleByDistanceCart4.w;
-      feature.scaleByDistance = scratchScaleByDistance;
+      if (defined(scaleByDistanceCart4)) {
+        scratchScaleByDistance.near = scaleByDistanceCart4.x;
+        scratchScaleByDistance.nearValue = scaleByDistanceCart4.y;
+        scratchScaleByDistance.far = scaleByDistanceCart4.z;
+        scratchScaleByDistance.farValue = scaleByDistanceCart4.w;
+        feature.scaleByDistance = scratchScaleByDistance;
+      } else {
+        feature.scaleByDistance = undefined;
+      }
     } else {
       feature.scaleByDistance = undefined;
     }
@@ -407,11 +411,15 @@ Vector3DTilePoints.prototype.applyStyle = function (style, features) {
       const translucencyByDistanceCart4 = style.translucencyByDistance.evaluate(
         feature
       );
-      scratchTranslucencyByDistance.near = translucencyByDistanceCart4.x;
-      scratchTranslucencyByDistance.nearValue = translucencyByDistanceCart4.y;
-      scratchTranslucencyByDistance.far = translucencyByDistanceCart4.z;
-      scratchTranslucencyByDistance.farValue = translucencyByDistanceCart4.w;
-      feature.translucencyByDistance = scratchTranslucencyByDistance;
+      if (defined(translucencyByDistanceCart4)) {
+        scratchTranslucencyByDistance.near = translucencyByDistanceCart4.x;
+        scratchTranslucencyByDistance.nearValue = translucencyByDistanceCart4.y;
+        scratchTranslucencyByDistance.far = translucencyByDistanceCart4.z;
+        scratchTranslucencyByDistance.farValue = translucencyByDistanceCart4.w;
+        feature.translucencyByDistance = scratchTranslucencyByDistance;
+      } else {
+        feature.translucencyByDistance = undefined;
+      }
     } else {
       feature.translucencyByDistance = undefined;
     }
@@ -420,9 +428,13 @@ Vector3DTilePoints.prototype.applyStyle = function (style, features) {
       const distanceDisplayConditionCart2 = style.distanceDisplayCondition.evaluate(
         feature
       );
-      scratchDistanceDisplayCondition.near = distanceDisplayConditionCart2.x;
-      scratchDistanceDisplayCondition.far = distanceDisplayConditionCart2.y;
-      feature.distanceDisplayCondition = scratchDistanceDisplayCondition;
+      if (defined(distanceDisplayConditionCart2)) {
+        scratchDistanceDisplayCondition.near = distanceDisplayConditionCart2.x;
+        scratchDistanceDisplayCondition.far = distanceDisplayConditionCart2.y;
+        feature.distanceDisplayCondition = scratchDistanceDisplayCondition;
+      } else {
+        feature.distanceDisplayCondition = undefined;
+      }
     } else {
       feature.distanceDisplayCondition = undefined;
     }