@cesium/engine 6.2.0 → 7.0.0

package/Source/Scene/DynamicAtmosphereLightingType.js

@@ -0,0 +1,56 @@
+/**
+ * Atmosphere lighting effects (sky atmosphere, ground atmosphere, fog) can be
+ * further modified with dynamic lighting from the sun or other light source
+ * that changes over time. This enum determines which light source to use.
+ *
+ * @enum {number}
+ */
+const DynamicAtmosphereLightingType = {
+  /**
+   * Do not use dynamic atmosphere lighting. Atmosphere lighting effects will
+   * be lit from directly above rather than using the scene's light source.
+   *
+   * @type {number}
+   * @constant
+   */
+  NONE: 0,
+  /**
+   * Use the scene's current light source for dynamic atmosphere lighting.
+   *
+   * @type {number}
+   * @constant
+   */
+  SCENE_LIGHT: 1,
+  /**
+   * Force the dynamic atmosphere lighting to always use the sunlight direction,
+   * even if the scene uses a different light source.
+   *
+   * @type {number}
+   * @constant
+   */
+  SUNLIGHT: 2,
+};
+
+/**
+ * Get the lighting enum from the older globe flags
+ *
+ * @param {Globe} globe The globe
+ * @return {DynamicAtmosphereLightingType} The corresponding enum value
+ *
+ * @private
+ */
+DynamicAtmosphereLightingType.fromGlobeFlags = function (globe) {
+  const lightingOn = globe.enableLighting && globe.dynamicAtmosphereLighting;
+  if (!lightingOn) {
+    return DynamicAtmosphereLightingType.NONE;
+  }
+
+  // Force sunlight
+  if (globe.dynamicAtmosphereLightingFromSun) {
+    return DynamicAtmosphereLightingType.SUNLIGHT;
+  }
+
+  return DynamicAtmosphereLightingType.SCENE_LIGHT;
+};
+
+export default Object.freeze(DynamicAtmosphereLightingType);

package/Source/Scene/Empty3DTileContent.js

@@ -150,6 +150,10 @@ Empty3DTileContent.prototype.applyStyle = function (style) {};
 
 Empty3DTileContent.prototype.update = function (tileset, frameState) {};
 
+Empty3DTileContent.prototype.pick = function (ray, frameState, result) {
+  return undefined;
+};
+
 Empty3DTileContent.prototype.isDestroyed = function () {
   return false;
 };

package/Source/Scene/Fog.js

@@ -173,6 +173,7 @@ Fog.prototype.update = function (frameState) {
     frameState.mode !== SceneMode.SCENE3D
   ) {
     frameState.fog.enabled = false;
+    frameState.fog.density = 0;
     return;
   }
 

package/Source/Scene/FrameState.js

@@ -254,7 +254,8 @@ function FrameState(context, creditDisplay, jobScheduler) {
   /**
    * @typedef FrameState.Fog
    * @type {object}
-   * @property {boolean} enabled <code>true</code> if fog is enabled, <code>false</code> otherwise.
+   * @property {boolean} enabled <code>true</code> if fog is enabled, <code>false</code> otherwise. This affects both fog culling and rendering.
+   * @property {boolean} renderable <code>true</code> if fog should be rendered, <code>false</code> if not. This flag should be checked in combination with fog.enabled.
    * @property {number} density A positive number used to mix the color and fog color based on camera distance.
    * @property {number} sse A scalar used to modify the screen space error of geometry partially in fog.
    * @property {number} minimumBrightness The minimum brightness of terrain with fog applied.
@@ -269,11 +270,18 @@ function FrameState(context, creditDisplay, jobScheduler) {
      * @default false
      */
     enabled: false,
+    renderable: false,
     density: undefined,
     sse: undefined,
     minimumBrightness: undefined,
   };
 
+  /**
+   * The current Atmosphere
+   * @type {Atmosphere}
+   */
+  this.atmosphere = undefined;
+
   /**
    * A scalar used to vertically exaggerate the scene
    * @type {number}

package/Source/Scene/Geometry3DTileContent.js

@@ -525,6 +525,10 @@ Geometry3DTileContent.prototype.update = function (tileset, frameState) {
   }
 };
 
+Geometry3DTileContent.prototype.pick = function (ray, frameState, result) {
+  return undefined;
+};
+
 Geometry3DTileContent.prototype.isDestroyed = function () {
   return false;
 };

package/Source/Scene/Globe.js

@@ -691,8 +691,8 @@ function makeShadersDirty(globe) {
 
   const requireNormals =
     defined(globe._material) &&
-    (globe._material.shaderSource.match(/slope/) ||
-      globe._material.shaderSource.match("normalEC"));
+    (defined(globe._material.shaderSource.match(/slope/)) ||
+      defined(globe._material.shaderSource.match("normalEC")));
 
   const fragmentSources = [AtmosphereCommon, GroundAtmosphere];
   if (
@@ -1106,6 +1106,7 @@ Globe.prototype.beginFrame = function (frameState) {
     tileProvider.undergroundColor = this._undergroundColor;
     tileProvider.undergroundColorAlphaByDistance = this._undergroundColorAlphaByDistance;
     tileProvider.lambertDiffuseMultiplier = this.lambertDiffuseMultiplier;
+
     surface.beginFrame(frameState);
   }
 };

package/Source/Scene/GlobeSurfaceTileProvider.js

@@ -2502,7 +2502,9 @@ function addDrawCommandsForTile(tileProvider, tile, frameState) {
       uniformMapProperties.localizedTranslucencyRectangle
     );
 
-    // For performance, use fog in the shader only when the tile is in fog.
+    // For performance, render fog only when fog is enabled and the effect of
+    // fog would be non-negligible. This prevents the shader from running when
+    // the camera is in space, for example.
     const applyFog =
       enableFog &&
       CesiumMath.fog(tile._distance, frameState.fog.density) >

package/Source/Scene/GltfLoader.js

@@ -179,6 +179,7 @@ const GltfLoaderState = {
  * @param {Axis} [options.forwardAxis=Axis.Z] The forward-axis of the glTF model.
  * @param {boolean} [options.loadAttributesAsTypedArray=false] Load all attributes and indices as typed arrays instead of GPU buffers. If the attributes are interleaved in the glTF they will be de-interleaved in the typed array.
  * @param {boolean} [options.loadAttributesFor2D=false] If <code>true</code>, load the positions buffer and any instanced attribute buffers as typed arrays for accurately projecting models to 2D.
+ * @param {boolean} [options.enablePick=false]  If <code>true</code>, load the positions buffer, any instanced attribute buffers, and index buffer as typed arrays for CPU-enabled picking in WebGL1.
  * @param {boolean} [options.loadIndicesForWireframe=false] If <code>true</code>, load the index buffer as both a buffer and typed array. The latter is useful for creating wireframe indices in WebGL1.
  * @param {boolean} [options.loadPrimitiveOutline=true] If <code>true</code>, load outlines from 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.
  * @param {boolean} [options.loadForClassification=false] If <code>true</code> and if the model has feature IDs, load the feature IDs and indices as typed arrays. This is useful for batching features for classification.
@@ -203,6 +204,7 @@ function GltfLoader(options) {
     false
   );
   const loadAttributesFor2D = defaultValue(options.loadAttributesFor2D, false);
+  const enablePick = defaultValue(options.enablePick);
   const loadIndicesForWireframe = defaultValue(
     options.loadIndicesForWireframe,
     false
@@ -234,6 +236,7 @@ function GltfLoader(options) {
   this._forwardAxis = forwardAxis;
   this._loadAttributesAsTypedArray = loadAttributesAsTypedArray;
   this._loadAttributesFor2D = loadAttributesFor2D;
+  this._enablePick = enablePick;
   this._loadIndicesForWireframe = loadIndicesForWireframe;
   this._loadPrimitiveOutline = loadPrimitiveOutline;
   this._loadForClassification = loadForClassification;
@@ -1241,6 +1244,8 @@ function loadVertexAttribute(
     !hasInstances &&
     loader._loadAttributesFor2D &&
     !frameState.scene3DOnly;
+  const loadTypedArrayForPicking =
+    isPositionAttribute && loader._enablePick && !frameState.context.webgl2;
 
   const loadTypedArrayForClassification =
     loader._loadForClassification && isFeatureIdAttribute;
@@ -1252,6 +1257,7 @@ function loadVertexAttribute(
   const outputTypedArray =
     outputTypedArrayOnly ||
     loadTypedArrayFor2D ||
+    loadTypedArrayForPicking ||
     loadTypedArrayForClassification;
 
   // Determine what to load right now:
@@ -1319,6 +1325,8 @@ function loadInstancedAttribute(
     loader._loadAttributesAsTypedArray ||
     (hasRotation && isTransformAttribute) ||
     !frameState.context.instancedArrays;
+  const loadTypedArrayForPicking =
+    loader._enablePick && !frameState.context.webgl2;
 
   const loadBuffer = !loadAsTypedArrayOnly;
 
@@ -1328,7 +1336,8 @@ function loadInstancedAttribute(
   // - the model will be projected to 2D.
   const loadFor2D = loader._loadAttributesFor2D && !frameState.scene3DOnly;
   const loadTranslationAsTypedArray =
-    isTranslationAttribute && (!hasTranslationMinMax || loadFor2D);
+    isTranslationAttribute &&
+    (!hasTranslationMinMax || loadFor2D || loadTypedArrayForPicking);
 
   const loadTypedArray = loadAsTypedArrayOnly || loadTranslationAsTypedArray;
 
@@ -1365,9 +1374,10 @@ function loadIndices(
   indices.count = accessor.count;
 
   const loadAttributesAsTypedArray = loader._loadAttributesAsTypedArray;
-  // Load the index buffer as a typed array to generate wireframes in WebGL1.
-  const loadForWireframe =
-    loader._loadIndicesForWireframe && !frameState.context.webgl2;
+  // Load the index buffer as a typed array to generate wireframes or pick in WebGL1.
+  const loadForCpuOperations =
+    (loader._loadIndicesForWireframe || loader._enablePick) &&
+    !frameState.context.webgl2;
 
   // Load the index buffer as a typed array to batch features together for classification.
   const loadForClassification = loader._loadForClassification && hasFeatureIds;
@@ -1377,7 +1387,7 @@ function loadIndices(
   const outputTypedArrayOnly = loadAttributesAsTypedArray;
   const outputBuffer = !outputTypedArrayOnly;
   const outputTypedArray =
-    loadAttributesAsTypedArray || loadForWireframe || loadForClassification;
+    loadAttributesAsTypedArray || loadForCpuOperations || loadForClassification;
 
   // Determine what to load right now:
   //

package/Source/Scene/HeightReference.js

@@ -12,17 +12,74 @@ const HeightReference = {
   NONE: 0,
 
   /**
-   * The position is clamped to the terrain.
+   * The position is clamped to the terrain and 3D Tiles.
    * @type {number}
    * @constant
    */
   CLAMP_TO_GROUND: 1,
 
   /**
-   * The position height is the height above the terrain.
+   * The position height is the height above the terrain and 3D Tiles.
    * @type {number}
    * @constant
    */
   RELATIVE_TO_GROUND: 2,
+
+  /**
+   * The position is clamped to terain.
+   * @type {number}
+   * @constant
+   */
+  CLAMP_TO_TERRAIN: 3,
+
+  /**
+   * The position height is the height above terrain.
+   * @type {number}
+   * @constant
+   */
+  RELATIVE_TO_TERRAIN: 4,
+
+  /**
+   * The position is clamped to 3D Tiles.
+   * @type {number}
+   * @constant
+   */
+  CLAMP_TO_3D_TILE: 5,
+
+  /**
+   * The position height is the height above 3D Tiles.
+   * @type {number}
+   * @constant
+   */
+  RELATIVE_TO_3D_TILE: 6,
 };
+
 export default Object.freeze(HeightReference);
+
+/**
+ * Returns true if the height should be clamped to the surface
+ * @param {HeightReference} heightReference
+ * @returns true if the height should be clamped to the surface
+ * @private
+ */
+export function isHeightReferenceClamp(heightReference) {
+  return (
+    heightReference === HeightReference.CLAMP_TO_GROUND ||
+    heightReference === HeightReference.CLAMP_TO_3D_TILE ||
+    heightReference === HeightReference.CLAMP_TO_TERRAIN
+  );
+}
+
+/**
+ * Returns true if the height should be offset relative to the surface
+ * @param {HeightReference} heightReference
+ * @returns true if the height should be offset relative to the surface
+ * @private
+ */
+export function isHeightReferenceRelative(heightReference) {
+  return (
+    heightReference === HeightReference.RELATIVE_TO_GROUND ||
+    heightReference === HeightReference.RELATIVE_TO_3D_TILE ||
+    heightReference === HeightReference.RELATIVE_TO_TERRAIN
+  );
+}

package/Source/Scene/Implicit3DTileContent.js

@@ -1177,6 +1177,10 @@ Implicit3DTileContent.prototype.applyStyle = function (style) {};
 
 Implicit3DTileContent.prototype.update = function (tileset, frameState) {};
 
+Implicit3DTileContent.prototype.pick = function (ray, frameState, result) {
+  return undefined;
+};
+
 Implicit3DTileContent.prototype.isDestroyed = function () {
   return false;
 };

package/Source/Scene/LabelCollection.js

@@ -10,7 +10,7 @@ import writeTextToCanvas from "../Core/writeTextToCanvas.js";
 import bitmapSDF from "bitmap-sdf";
 import BillboardCollection from "./BillboardCollection.js";
 import BlendOption from "./BlendOption.js";
-import HeightReference from "./HeightReference.js";
+import { isHeightReferenceClamp } from "./HeightReference.js";
 import HorizontalOrigin from "./HorizontalOrigin.js";
 import Label from "./Label.js";
 import LabelStyle from "./LabelStyle.js";
@@ -510,7 +510,7 @@ function repositionAllGlyphs(label) {
     );
   }
 
-  if (label.heightReference === HeightReference.CLAMP_TO_GROUND) {
+  if (isHeightReferenceClamp(label.heightReference)) {
     for (glyphIndex = 0; glyphIndex < glyphLength; ++glyphIndex) {
       glyph = glyphs[glyphIndex];
       const billboard = glyph.billboard;

package/Source/Scene/Model/AtmospherePipelineStage.js

@@ -0,0 +1,59 @@
+import Cartesian3 from "../../Core/Cartesian3.js";
+import CesiumMath from "../../Core/Math.js";
+import ShaderDestination from "../../Renderer/ShaderDestination.js";
+import AtmosphereStageFS from "../../Shaders/Model/AtmosphereStageFS.js";
+import AtmosphereStageVS from "../../Shaders/Model/AtmosphereStageVS.js";
+
+/**
+ * The atmosphere pipeline stage applies all earth atmosphere effects that apply
+ * to models, including fog.
+ *
+ * @namespace AtmospherePipelineStage
+ *
+ * @private
+ */
+const AtmospherePipelineStage = {
+  name: "AtmospherePipelineStage", // Helps with debugging
+};
+
+AtmospherePipelineStage.process = function (
+  renderResources,
+  model,
+  frameState
+) {
+  const shaderBuilder = renderResources.shaderBuilder;
+
+  shaderBuilder.addDefine("HAS_ATMOSPHERE", undefined, ShaderDestination.BOTH);
+  shaderBuilder.addDefine(
+    "COMPUTE_POSITION_WC_ATMOSPHERE",
+    undefined,
+    ShaderDestination.BOTH
+  );
+
+  shaderBuilder.addVarying("vec3", "v_atmosphereRayleighColor");
+  shaderBuilder.addVarying("vec3", "v_atmosphereMieColor");
+  shaderBuilder.addVarying("float", "v_atmosphereOpacity");
+
+  shaderBuilder.addVertexLines([AtmosphereStageVS]);
+  shaderBuilder.addFragmentLines([AtmosphereStageFS]);
+
+  // Add a uniform so fog is only calculated when the efcfect would
+  // be non-negligible For example when the camera is in space, fog density decreases
+  // to 0 so fog shouldn't be rendered. Since this state may change rapidly if
+  // the camera is moving, this is implemented as a uniform, not a define.
+  shaderBuilder.addUniform("bool", "u_isInFog", ShaderDestination.FRAGMENT);
+  renderResources.uniformMap.u_isInFog = function () {
+    // We only need a rough measure of distance to the model, so measure
+    // from the camera to the bounding sphere center.
+    const distance = Cartesian3.distance(
+      frameState.camera.positionWC,
+      model.boundingSphere.center
+    );
+
+    return (
+      CesiumMath.fog(distance, frameState.fog.density) > CesiumMath.EPSILON3
+    );
+  };
+};
+
+export default AtmospherePipelineStage;

package/Source/Scene/Model/B3dmLoader.js

@@ -50,6 +50,7 @@ const FeatureIdAttribute = ModelComponents.FeatureIdAttribute;
  * @param {Axis} [options.forwardAxis=Axis.X] The forward-axis of the glTF model.
  * @param {boolean} [options.loadAttributesAsTypedArray=false] If <code>true</code>, load all attributes as typed arrays instead of GPU buffers. If the attributes are interleaved in the glTF they will be de-interleaved in the typed array.
  * @param {boolean} [options.loadAttributesFor2D=false] If <code>true</code>, load the positions buffer and any instanced attribute buffers as typed arrays for accurately projecting models to 2D.
+ * @param {boolean} [options.enablePick=false]  If <code>true</code>, load the positions buffer, any instanced attribute buffers, and index buffer as typed arrays for CPU-enabled picking in WebGL1.
  * @param {boolean} [options.loadIndicesForWireframe=false] If <code>true</code>, load the index buffer as a typed array. This is useful for creating wireframe indices in WebGL1.
  * @param {boolean} [options.loadPrimitiveOutline=true] If <code>true</code>, load outlines from 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.
  * @param {boolean} [options.loadForClassification=false] If <code>true</code> and if the model has feature IDs, load the feature IDs and indices as typed arrays. This is useful for batching features for classification.
@@ -74,6 +75,7 @@ function B3dmLoader(options) {
     false
   );
   const loadAttributesFor2D = defaultValue(options.loadAttributesFor2D, false);
+  const enablePick = defaultValue(options.enablePick, false);
   const loadIndicesForWireframe = defaultValue(
     options.loadIndicesForWireframe,
     false
@@ -102,6 +104,7 @@ function B3dmLoader(options) {
   this._forwardAxis = forwardAxis;
   this._loadAttributesAsTypedArray = loadAttributesAsTypedArray;
   this._loadAttributesFor2D = loadAttributesFor2D;
+  this._enablePick = enablePick;
   this._loadIndicesForWireframe = loadIndicesForWireframe;
   this._loadPrimitiveOutline = loadPrimitiveOutline;
   this._loadForClassification = loadForClassification;
@@ -223,6 +226,7 @@ B3dmLoader.prototype.load = function () {
     incrementallyLoadTextures: this._incrementallyLoadTextures,
     loadAttributesAsTypedArray: this._loadAttributesAsTypedArray,
     loadAttributesFor2D: this._loadAttributesFor2D,
+    enablePick: this._enablePick,
     loadIndicesForWireframe: this._loadIndicesForWireframe,
     loadPrimitiveOutline: this._loadPrimitiveOutline,
     loadForClassification: this._loadForClassification,

package/Source/Scene/Model/FeatureIdPipelineStage.js

@@ -9,6 +9,7 @@ import FeatureIdStageVS from "../../Shaders/Model/FeatureIdStageVS.js";
 import ModelComponents from "../ModelComponents.js";
 import VertexAttributeSemantic from "../VertexAttributeSemantic.js";
 import ModelUtility from "./ModelUtility.js";
+import Matrix3 from "../../Core/Matrix3.js";
 
 /**
  * The feature ID pipeline stage is responsible for processing feature IDs
@@ -387,10 +388,32 @@ function processTexture(
     ShaderDestination.FRAGMENT
   );
 
+  // Get a GLSL expression for the texture coordinates
+  const texCoord = textureReader.texCoord;
+  const texCoordVariable = `v_texCoord_${texCoord}`;
+  let texCoordVariableExpression = texCoordVariable;
+
+  // Check if the texture defines a `transform` from a `KHR_texture_transform`
+  const transform = textureReader.transform;
+  if (defined(transform) && !Matrix3.equals(transform, Matrix3.IDENTITY)) {
+    // Add a uniform for the transformation matrix
+    const transformUniformName = `${uniformName}Transform`;
+    shaderBuilder.addUniform(
+      "mat3",
+      transformUniformName,
+      ShaderDestination.FRAGMENT
+    );
+    uniformMap[transformUniformName] = function () {
+      return transform;
+    };
+    // Update the expression for the texture coordinates
+    // with one that transforms the texture coordinates
+    // with the transform matrix first
+    texCoordVariableExpression = `vec2(${transformUniformName} * vec3(${texCoordVariable}, 1.0))`;
+  }
   // Read one or more channels from the texture
   // example: texture(u_featureIdTexture_0, v_texCoord_1).rg
-  const texCoord = `v_texCoord_${textureReader.texCoord}`;
-  const textureRead = `texture(${uniformName}, ${texCoord}).${channels}`;
+  const textureRead = `texture(${uniformName}, ${texCoordVariableExpression}).${channels}`;
 
   // Finally, assign to the struct field. Example:
   // featureIds.featureId_0 = unpacked;

package/Source/Scene/Model/I3dmLoader.js

@@ -64,6 +64,7 @@ const Instances = ModelComponents.Instances;
  * @param {Axis} [options.upAxis=Axis.Y] The up-axis of the glTF model.
  * @param {Axis} [options.forwardAxis=Axis.X] The forward-axis of the glTF model.
  * @param {boolean} [options.loadAttributesAsTypedArray=false] Load all attributes as typed arrays instead of GPU buffers. If the attributes are interleaved in the glTF they will be de-interleaved in the typed array.
+ * @param {boolean} [options.enablePick=false]  If <code>true</code>, load the positions buffer, any instanced attribute buffers, and index buffer as typed arrays for CPU-enabled picking in WebGL1.
  * @param {boolean} [options.loadIndicesForWireframe=false] Load the index buffer as a typed array so wireframe indices can be created for WebGL1.
  * @param {boolean} [options.loadPrimitiveOutline=true] If true, load outlines from 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.
  */
@@ -91,6 +92,7 @@ function I3dmLoader(options) {
     false
   );
   const loadPrimitiveOutline = defaultValue(options.loadPrimitiveOutline, true);
+  const enablePick = defaultValue(options.enablePick, false);
 
   //>>includeStart('debug', pragmas.debug);
   Check.typeOf.object("options.i3dmResource", i3dmResource);
@@ -111,6 +113,7 @@ function I3dmLoader(options) {
   this._loadAttributesAsTypedArray = loadAttributesAsTypedArray;
   this._loadIndicesForWireframe = loadIndicesForWireframe;
   this._loadPrimitiveOutline = loadPrimitiveOutline;
+  this._enablePick = enablePick;
 
   this._state = I3dmLoaderState.NOT_LOADED;
   this._promise = undefined;
@@ -240,6 +243,7 @@ I3dmLoader.prototype.load = function () {
     releaseGltfJson: this._releaseGltfJson,
     incrementallyLoadTextures: this._incrementallyLoadTextures,
     loadAttributesAsTypedArray: this._loadAttributesAsTypedArray,
+    enablePick: this._enablePick,
     loadIndicesForWireframe: this._loadIndicesForWireframe,
     loadPrimitiveOutline: this._loadPrimitiveOutline,
   };

package/Source/Scene/Model/InstancingPipelineStage.js

@@ -73,6 +73,7 @@ InstancingPipelineStage.process = function (renderResources, node, frameState) {
     frameState.mode !== SceneMode.SCENE3D &&
     !frameState.scene3DOnly &&
     model._projectTo2D;
+  const keepTypedArray = model._enablePick && !frameState.context.webgl2;
 
   const instancingVertexAttributes = [];
 
@@ -81,7 +82,8 @@ InstancingPipelineStage.process = function (renderResources, node, frameState) {
     frameState,
     instances,
     instancingVertexAttributes,
-    use2D
+    use2D,
+    keepTypedArray
   );
 
   processFeatureIdAttributes(
@@ -697,7 +699,8 @@ function processTransformAttributes(
   frameState,
   instances,
   instancingVertexAttributes,
-  use2D
+  use2D,
+  keepTypedArray
 ) {
   const rotationAttribute = ModelUtility.getAttributeBySemantic(
     instances,
@@ -711,7 +714,8 @@ function processTransformAttributes(
       instances,
       instancingVertexAttributes,
       frameState,
-      use2D
+      use2D,
+      keepTypedArray
     );
   } else {
     processTransformVec3Attributes(
@@ -729,7 +733,8 @@ function processTransformMatrixAttributes(
   instances,
   instancingVertexAttributes,
   frameState,
-  use2D
+  use2D,
+  keepTypedArray
 ) {
   const shaderBuilder = renderResources.shaderBuilder;
   const count = instances.attributes[0].count;
@@ -755,6 +760,10 @@ function processTransformMatrixAttributes(
     buffer = createVertexBuffer(transformsTypedArray, frameState);
     model._modelResources.push(buffer);
 
+    if (keepTypedArray) {
+      runtimeNode.transformsTypedArray = transformsTypedArray;
+    }
+
     runtimeNode.instancingTransformsBuffer = buffer;
   }
 
@@ -812,7 +821,8 @@ function processTransformVec3Attributes(
   instances,
   instancingVertexAttributes,
   frameState,
-  use2D
+  use2D,
+  keepTypedArray
 ) {
   const shaderBuilder = renderResources.shaderBuilder;
   const runtimeNode = renderResources.runtimeNode;
@@ -872,7 +882,7 @@ function processTransformVec3Attributes(
     attributeString
   );
 
-  if (!use2D) {
+  if (!use2D && !keepTypedArray) {
     return;
   }
 
@@ -898,6 +908,10 @@ function processTransformVec3Attributes(
     );
     const projectedTypedArray = translationsToTypedArray(projectedTranslations);
 
+    if (keepTypedArray) {
+      runtimeNode.transformsTypedArray = projectedTypedArray;
+    }
+
     // This memory is counted during the statistics stage at the end
     // of the pipeline.
     buffer2D = createVertexBuffer(projectedTypedArray, frameState);
@@ -906,6 +920,10 @@ function processTransformVec3Attributes(
     runtimeNode.instancingTranslationBuffer2D = buffer2D;
   }
 
+  if (!use2D) {
+    return;
+  }
+
   const byteOffset = 0;
   const byteStride = undefined;
 

package/Source/Scene/Model/MetadataPipelineStage.js

@@ -1,3 +1,4 @@
+import Matrix3 from "../../Core/Matrix3.js";
 import defined from "../../Core/defined.js";
 import ShaderDestination from "../../Renderer/ShaderDestination.js";
 import MetadataStageFS from "../../Shaders/Model/MetadataStageFS.js";
@@ -430,7 +431,13 @@ function addPropertyTexturePropertyMetadata(renderResources, propertyInfo) {
   const { shaderBuilder, uniformMap } = renderResources;
   const { metadataVariable, glslType, property } = propertyInfo;
 
-  const { texCoord, channels, index, texture } = property.textureReader;
+  const {
+    texCoord,
+    channels,
+    index,
+    texture,
+    transform,
+  } = property.textureReader;
   const textureUniformName = `u_propertyTexture_${index}`;
 
   // Property texture properties may share the same physical texture, so only
@@ -450,9 +457,30 @@ function addPropertyTexturePropertyMetadata(renderResources, propertyInfo) {
     metadataVariable
   );
 
-  // Get a GLSL expression for the value of the property
+  // Get a GLSL expression for the texture coordinates of the property.
+  // By default, this will be taken directly from the attributes.
   const texCoordVariable = `attributes.texCoord_${texCoord}`;
-  const valueExpression = `texture(${textureUniformName}, ${texCoordVariable}).${channels}`;
+  let texCoordVariableExpression = texCoordVariable;
+
+  // Check if the texture defines a `transform` from a `KHR_texture_transform`
+  if (defined(transform) && !Matrix3.equals(transform, Matrix3.IDENTITY)) {
+    // Add a uniform for the transformation matrix
+    const transformUniformName = `${textureUniformName}Transform`;
+    shaderBuilder.addUniform(
+      "mat3",
+      transformUniformName,
+      ShaderDestination.FRAGMENT
+    );
+    uniformMap[transformUniformName] = function () {
+      return transform;
+    };
+
+    // Update the expression for the texture coordinates
+    // with one that transforms the texture coordinates
+    // with the transform matrix first
+    texCoordVariableExpression = `vec2(${transformUniformName} * vec3(${texCoordVariable}, 1.0))`;
+  }
+  const valueExpression = `texture(${textureUniformName}, ${texCoordVariableExpression}).${channels}`;
 
   // Some types need an unpacking step or two. For example, since texture reads
   // are always normalized, UINT8 (not normalized) properties need to be