@cesium/engine 23.0.0 → 24.0.0

package/Source/Scene/GetFeatureInfoFormat.js

@@ -5,17 +5,17 @@ import RuntimeError from "../Core/RuntimeError.js";
 import ImageryLayerFeatureInfo from "./ImageryLayerFeatureInfo.js";
 
 /**
- * Describes the format in which to request GetFeatureInfo from a Web Map Service (WMS) server.
+ * Describes the format in which to request GetFeatureInfo from a Web Map Service (WMS) or Web Map Tile Service (WMTS) server.
  *
  * @alias GetFeatureInfoFormat
  * @constructor
  *
  * @param {string} type The type of response to expect from a GetFeatureInfo request.  Valid
  *        values are 'json', 'xml', 'html', or 'text'.
- * @param {string} [format] The info format to request from the WMS server.  This is usually a
+ * @param {string} [format] The info format to request from the server.  This is usually a
  *        MIME type such as 'application/json' or text/xml'.  If this parameter is not specified, the provider will request 'json'
  *        using 'application/json', 'xml' using 'text/xml', 'html' using 'text/html', and 'text' using 'text/plain'.
- * @param {Function} [callback] A function to invoke with the GetFeatureInfo response from the WMS server
+ * @param {Function} [callback] A function to invoke with the GetFeatureInfo response from the server
  *        in order to produce an array of picked {@link ImageryLayerFeatureInfo} instances.  If this parameter is not specified,
  *        a default function for the type of response is used.
  */

package/Source/Scene/GltfLoader.js

@@ -61,7 +61,9 @@ const {
   Specular,
   Anisotropy,
   Clearcoat,
+  LineStyle,
   Material,
+  Vector,
 } = ModelComponents;
 
 /**
@@ -1756,6 +1758,34 @@ function loadClearcoat(loader, clearcoatInfo, frameState) {
   return clearcoat;
 }
 
+function loadLineStyle(lineStyleInfo) {
+  if (!defined(lineStyleInfo)) {
+    return undefined;
+  }
+
+  const lineStyle = new LineStyle();
+
+  if (defined(lineStyleInfo.width)) {
+    const width = lineStyleInfo.width;
+    if (width > 0 && Math.floor(width) === width) {
+      lineStyle.width = width;
+    }
+  }
+
+  if (defined(lineStyleInfo.pattern)) {
+    const pattern = lineStyleInfo.pattern;
+    if (pattern >= 0 && pattern <= 65535 && Math.floor(pattern) === pattern) {
+      lineStyle.pattern = pattern;
+    }
+  }
+
+  if (!defined(lineStyle.width) && !defined(lineStyle.pattern)) {
+    return undefined;
+  }
+
+  return lineStyle;
+}
+
 /**
  * Load textures and parse factors and flags for a glTF material
  *
@@ -1840,6 +1870,8 @@ function loadMaterial(loader, gltfMaterial, frameState) {
     }
   }
 
+  material.lineStyle = loadLineStyle(extensions.BENTLEY_materials_line_style);
+
   return material;
 }
 
@@ -2031,6 +2063,132 @@ function fetchSpzExtensionFrom(extensions) {
   return undefined;
 }
 
+function getEdgeVisibilityMaterialColor(loader, materialIndex) {
+  if (!defined(materialIndex)) {
+    return undefined;
+  }
+
+  const materials = loader.gltfJson.materials;
+  if (
+    !defined(materials) ||
+    materialIndex < 0 ||
+    materialIndex >= materials.length
+  ) {
+    return undefined;
+  }
+
+  const material = materials[materialIndex];
+  if (!defined(material)) {
+    return undefined;
+  }
+
+  const metallicRoughness =
+    material.pbrMetallicRoughness ?? Frozen.EMPTY_OBJECT;
+  const color = fromArray(Cartesian4, metallicRoughness.baseColorFactor);
+
+  if (defined(color)) {
+    return color;
+  }
+
+  return new Cartesian4(1.0, 1.0, 1.0, 1.0);
+}
+
+function getLineStringPrimitiveRestartValue(componentType) {
+  switch (componentType) {
+    case ComponentDatatype.UNSIGNED_BYTE:
+      return 255;
+    case ComponentDatatype.UNSIGNED_SHORT:
+      return 65535;
+    case ComponentDatatype.UNSIGNED_INT:
+      return 4294967295;
+    default:
+      throw new RuntimeError(
+        "EXT_mesh_primitive_edge_visibility line strings indices must use unsigned scalar component types.",
+      );
+  }
+}
+
+function loadEdgeVisibilityLineStrings(
+  loader,
+  lineStringDefinitions,
+  defaultMaterialIndex,
+) {
+  if (!defined(lineStringDefinitions) || lineStringDefinitions.length === 0) {
+    return undefined;
+  }
+
+  const result = new Array(lineStringDefinitions.length);
+  for (let i = 0; i < lineStringDefinitions.length; i++) {
+    const definition = lineStringDefinitions[i] ?? Frozen.EMPTY_OBJECT;
+    const accessorId = definition.indices;
+    const accessor = loader.gltfJson.accessors[accessorId];
+
+    if (!defined(accessor)) {
+      throw new RuntimeError("Edge visibility line string accessor not found!");
+    }
+
+    const indices = loadAccessor(loader, accessor);
+    const restartIndex = getLineStringPrimitiveRestartValue(
+      accessor.componentType,
+    );
+    const materialIndex = defined(definition.material)
+      ? definition.material
+      : defaultMaterialIndex;
+
+    result[i] = {
+      indices: indices,
+      restartIndex: restartIndex,
+      componentType: accessor.componentType,
+      materialColor: getEdgeVisibilityMaterialColor(loader, materialIndex),
+    };
+  }
+
+  return result;
+}
+
+function loadEdgeVisibility(loader, edgeVisibilityExtension) {
+  if (!defined(edgeVisibilityExtension)) {
+    return undefined;
+  }
+
+  const edgeVisibility = {};
+
+  const visibilityAccessorId = edgeVisibilityExtension.visibility;
+  if (defined(visibilityAccessorId)) {
+    const visibilityAccessor = loader.gltfJson.accessors[visibilityAccessorId];
+    if (!defined(visibilityAccessor)) {
+      throw new RuntimeError("Edge visibility accessor not found!");
+    }
+    edgeVisibility.visibility = loadAccessor(loader, visibilityAccessor);
+  }
+
+  edgeVisibility.materialColor = getEdgeVisibilityMaterialColor(
+    loader,
+    edgeVisibilityExtension.material,
+  );
+
+  if (defined(edgeVisibilityExtension.silhouetteNormals)) {
+    const silhouetteNormalsAccessor =
+      loader.gltfJson.accessors[edgeVisibilityExtension.silhouetteNormals];
+    if (defined(silhouetteNormalsAccessor)) {
+      edgeVisibility.silhouetteNormals = loadAccessor(
+        loader,
+        silhouetteNormalsAccessor,
+      );
+    }
+  }
+
+  if (defined(edgeVisibilityExtension.lineStrings)) {
+    edgeVisibility.lineStrings = loadEdgeVisibilityLineStrings(
+      loader,
+      edgeVisibilityExtension.lineStrings,
+      edgeVisibilityExtension.material,
+    );
+  }
+
+  return edgeVisibility;
+}
+
 /**
  * Load resources associated with a mesh primitive for a glTF node
  * @param {GltfLoader} loader
@@ -2055,6 +2213,10 @@ function loadPrimitive(loader, gltfPrimitive, hasInstances, frameState) {
   }
 
   const extensions = gltfPrimitive.extensions ?? Frozen.EMPTY_OBJECT;
+  const meshVectorExtension = extensions.CESIUM_mesh_vector;
+  if (defined(meshVectorExtension)) {
+    primitive.vector = loadMeshVectorExtension(loader, meshVectorExtension);
+  }
 
   let needsPostProcessing = false;
   const outlineExtension = extensions.CESIUM_primitive_outline;
@@ -2068,40 +2230,10 @@ function loadPrimitive(loader, gltfPrimitive, hasInstances, frameState) {
     );
   }
 
-  // Edge Visibility
-  const edgeVisibilityExtension = extensions.EXT_mesh_primitive_edge_visibility;
-  const hasEdgeVisibility = defined(edgeVisibilityExtension);
-  if (hasEdgeVisibility) {
-    const visibilityAccessor =
-      loader.gltfJson.accessors[edgeVisibilityExtension.visibility];
-    if (!defined(visibilityAccessor)) {
-      throw new RuntimeError("Edge visibility accessor not found!");
-    }
-    const visibilityValues = loadAccessor(loader, visibilityAccessor);
-    primitive.edgeVisibility = {
-      visibility: visibilityValues,
-      material: edgeVisibilityExtension.material,
-    };
-
-    // Load silhouette normals
-    if (defined(edgeVisibilityExtension.silhouetteNormals)) {
-      const silhouetteNormalsAccessor =
-        loader.gltfJson.accessors[edgeVisibilityExtension.silhouetteNormals];
-      if (defined(silhouetteNormalsAccessor)) {
-        const silhouetteNormalsValues = loadAccessor(
-          loader,
-          silhouetteNormalsAccessor,
-        );
-        primitive.edgeVisibility.silhouetteNormals = silhouetteNormalsValues;
-      }
-    }
-
-    // Load line strings
-    if (defined(edgeVisibilityExtension.lineStrings)) {
-      primitivePlan.edgeVisibility.lineStrings =
-        edgeVisibilityExtension.lineStrings;
-    }
-  }
+  primitive.edgeVisibility = loadEdgeVisibility(
+    loader,
+    extensions.EXT_mesh_primitive_edge_visibility,
+  );
 
   //support the latest glTF spec and the legacy extension
   const spzExtension = fetchSpzExtensionFrom(extensions);
@@ -2195,6 +2327,7 @@ function loadPrimitive(loader, gltfPrimitive, hasInstances, frameState) {
   const meshFeatures = extensions.EXT_mesh_features;
   const featureMetadataLegacy = extensions.EXT_feature_metadata;
   const hasFeatureMetadataLegacy = defined(featureMetadataLegacy);
+  const gpmLocal = extensions.NGA_gpm_local;
 
   // Load feature Ids
   if (defined(meshFeatures)) {
@@ -2215,6 +2348,10 @@ function loadPrimitive(loader, gltfPrimitive, hasInstances, frameState) {
     loadPrimitiveMetadataLegacy(loader, primitive, featureMetadataLegacy);
   }
 
+  if (defined(gpmLocal)) {
+    loadGpmExtension(primitive, gpmLocal);
+  }
+
   const primitiveType = gltfPrimitive.mode;
   if (loadForClassification && primitiveType !== PrimitiveType.TRIANGLES) {
     throw new RuntimeError(
@@ -2233,6 +2370,50 @@ function loadPrimitiveOutline(loader, outlineExtension) {
   return loadAccessor(loader, accessor, useQuaternion);
 }
 
+/**
+ * Load CESIUM_mesh_vector.
+ * @param {GltfLoader} loader
+ * @param {*} meshVectorExtension
+ * @returns {ModelComponents.Vector}
+ * @ignore
+ */
+function loadMeshVectorExtension(loader, meshVectorExtension) {
+  if (!defined(meshVectorExtension)) {
+    return undefined;
+  }
+
+  const result = new Vector();
+  result.vector = meshVectorExtension.vector;
+  result.count = meshVectorExtension.count;
+
+  const accessors = loader.gltfJson.accessors;
+  function loadVectorAccessor(accessorId, name) {
+    if (!defined(accessorId)) {
+      return undefined;
+    }
+    return loadAccessor(loader, accessors[accessorId]);
+  }
+
+  result.polygonAttributeOffsets = loadVectorAccessor(
+    meshVectorExtension.polygonAttributeOffsets,
+    "polygonAttributeOffsets",
+  );
+  result.polygonHoleCounts = loadVectorAccessor(
+    meshVectorExtension.polygonHoleCounts,
+    "polygonHoleCounts",
+  );
+  result.polygonHoleOffsets = loadVectorAccessor(
+    meshVectorExtension.polygonHoleOffsets,
+    "polygonHoleOffsets",
+  );
+  result.polygonIndicesOffsets = loadVectorAccessor(
+    meshVectorExtension.polygonIndicesOffsets,
+    "polygonIndicesOffsets",
+  );
+
+  return result;
+}
+
 // For EXT_mesh_features
 function loadPrimitiveFeatures(
   loader,
@@ -2375,6 +2556,13 @@ function loadPrimitiveMetadataLegacy(loader, primitive, metadataExtension) {
   }
 }
 
+function loadGpmExtension(primitive, gpmLocal) {
+  const ppeTextures = gpmLocal.ppeTextures ?? [];
+  for (let i = 0; i < ppeTextures.length; i++) {
+    primitive.propertyTextureIds.push(i);
+  }
+}
+
 function loadInstances(loader, nodeExtensions, frameState) {
   const instancingExtension = nodeExtensions.EXT_mesh_gpu_instancing;
 
@@ -2500,6 +2688,7 @@ function loadNode(loader, gltfNode, frameState) {
   const nodeExtensions = gltfNode.extensions ?? Frozen.EMPTY_OBJECT;
   const instancingExtension = nodeExtensions.EXT_mesh_gpu_instancing;
   const articulationsExtension = nodeExtensions.AGI_articulations;
+  const meshVectorExtension = nodeExtensions.CESIUM_mesh_vector;
 
   if (defined(instancingExtension)) {
     if (loader._loadForClassification) {
@@ -2514,6 +2703,10 @@ function loadNode(loader, gltfNode, frameState) {
     node.articulationName = articulationsExtension.articulationName;
   }
 
+  if (defined(meshVectorExtension)) {
+    node.meshVector = meshVectorExtension;
+  }
+
   const meshId = gltfNode.mesh;
   if (defined(meshId)) {
     const mesh = loader.gltfJson.meshes[meshId];

package/Source/Scene/GltfSpzLoader.js

@@ -1,10 +1,88 @@
 import Check from "../Core/Check.js";
 import Frozen from "../Core/Frozen.js";
 import defined from "../Core/defined.js";
+import RuntimeError from "../Core/RuntimeError.js";
 import ResourceLoader from "./ResourceLoader.js";
 import ResourceLoaderState from "./ResourceLoaderState.js";
 import { loadSpz } from "@spz-loader/core";
 
+// Cumulative number of SH coefficient floats per splat per channel for each
+// degree. Degree 0 has no extra SH data (base color is stored separately in
+// the "colors" attribute). Degrees 1-3 follow the standard SH basis count:
+// l=1 adds 3 bands × 3 channels = 9; l=2 adds 5 × 3 = 15 (total 24);
+// l=3 adds 7 × 3 = 21 (total 45).
+const SH_FLOATS_PER_SPLAT_BY_DEGREE = [0, 9, 24, 45];
+
+// Non-SH attribute floats per splat: position(3) + scale(3) + rotation(4)
+// + opacity(1) + color(3) = 14.
+const BASE_FLOATS_PER_SPLAT = 14;
+
+// The spz-loader WASM module is compiled with a signed 32-bit address space,
+// giving a hard ceiling of 2 GB. An additional factor of ~2× is required
+// because spz-loader copies every decoded C++ vector into a JavaScript
+// TypedArray. 1.6 GB is used as a conservative pre-flight threshold.
+const WASM_MEMORY_LIMIT_BYTES = 1.6 * 1024 * 1024 * 1024;
+
+/**
+ * Derives the point count and maximum spherical harmonics degree for an SPZ
+ * primitive from the glTF JSON, without touching the compressed binary data.
+ * <p>
+ * The SPZ payload is gzip-compressed and therefore cannot be inspected
+ * directly. Instead, <code>numPoints</code> is read from the POSITION
+ * accessor's <code>count</code> field and <code>shDegree</code> is inferred
+ * from the highest-numbered <code>SH_DEGREE_n</code> attribute present in
+ * the primitive. Returns <code>undefined</code> if the required information
+ * is unavailable.
+ * </p>
+ * @param {object} gltf The glTF JSON object.
+ * @param {object} primitive The glTF primitive object.
+ * @returns {{ numPoints: number, shDegree: number }|undefined}
+ * @private
+ */
+function getSpzInfoFromGltf(gltf, primitive) {
+  const attributes = primitive?.attributes;
+  if (!defined(attributes)) {
+    return undefined;
+  }
+
+  const positionAccessorId = attributes["POSITION"];
+  if (!defined(positionAccessorId)) {
+    return undefined;
+  }
+  const accessor = gltf?.accessors?.[positionAccessorId];
+  if (!defined(accessor) || accessor.count <= 0) {
+    return undefined;
+  }
+
+  let shDegree = 0;
+  for (const semantic in attributes) {
+    if (Object.prototype.hasOwnProperty.call(attributes, semantic)) {
+      const match = /SH_DEGREE_(\d+)_COEF_/.exec(semantic);
+      if (match) {
+        shDegree = Math.max(shDegree, parseInt(match[1], 10));
+      }
+    }
+  }
+
+  return { numPoints: accessor.count, shDegree };
+}
+
+/**
+ * Estimates the peak memory consumption (in bytes) of decoding an SPZ file
+ * with the given parameters. The estimate accounts for both the WASM heap
+ * allocations and the JavaScript TypedArray copies produced by spz-loader.
+ * @param {number} numPoints Number of Gaussian splats.
+ * @param {number} shDegree Spherical harmonics degree (0–3).
+ * @returns {number} Estimated byte count.
+ * @private
+ */
+function estimateSpzMemoryBytes(numPoints, shDegree) {
+  const floatsPerPoint =
+    BASE_FLOATS_PER_SPLAT + (SH_FLOATS_PER_SPLAT_BY_DEGREE[shDegree] ?? 0);
+  // ×2 accounts for WASM heap + JS TypedArray mirror.
+  return numPoints * floatsPerPoint * Float32Array.BYTES_PER_ELEMENT * 2;
+}
+
 /**
  * Load a SPZ buffer from a glTF.
  * <p>
@@ -128,6 +206,36 @@ class GltfSpzLoader extends ResourceLoader {
       return false;
     }
 
+    // Reject oversized SPZ payloads before invoking the WASM decoder.
+    // The spz-loader WASM module has a hard 2 GB memory ceiling; exceeding
+    // it causes an unrecoverable Aborted() call with no useful diagnostic.
+    // See: https://github.com/CesiumGS/cesium/issues/13283
+    //
+    // The SPZ binary is gzip-compressed, so its header cannot be read
+    // directly. Point count and SH degree are therefore derived from the
+    // glTF JSON, which is available at this stage.
+    const spzInfo = getSpzInfoFromGltf(this._gltf, this._primitive);
+    if (defined(spzInfo)) {
+      const estimatedBytes = estimateSpzMemoryBytes(
+        spzInfo.numPoints,
+        spzInfo.shDegree,
+      );
+      if (estimatedBytes > WASM_MEMORY_LIMIT_BYTES) {
+        const estimatedMB = Math.round(estimatedBytes / (1024 * 1024));
+        handleError(
+          this,
+          new RuntimeError(
+            `SPZ data too large to decode: ${spzInfo.numPoints.toLocaleString()} splats ` +
+              `with spherical harmonics degree ${spzInfo.shDegree} would require ` +
+              `approximately ${estimatedMB} MB, which exceeds the WASM memory limit. ` +
+              `Consider using a lower spherical harmonics degree or splitting the ` +
+              `dataset into smaller tiles.`,
+          ),
+        );
+        return false;
+      }
+    }
+
     const decodePromise = loadSpz(this._bufferViewTypedArray, {
       unpackOptions: { coordinateSystem: "UNSPECIFIED" },
     });
@@ -214,4 +322,5 @@ async function processDecode(loader, decodePromise) {
   }
 }
 
+export { estimateSpzMemoryBytes, getSpzInfoFromGltf };
 export default GltfSpzLoader;

package/Source/Scene/ITwinData.js

@@ -138,6 +138,7 @@ ITwinData.createTilesetForRealityDataId = async function ({
     ITwinPlatform.RealityDataType.PNTS,
     ITwinPlatform.RealityDataType.RealityMesh3DTiles,
     ITwinPlatform.RealityDataType.Terrain3DTiles,
+    ITwinPlatform.RealityDataType.GaussianSplat3DTiles,
   ];
 
   if (!supportedRealityDataTypes.includes(type)) {

package/Source/Scene/Label.js

@@ -1186,6 +1186,38 @@ Object.defineProperties(Label.prototype, {
       }
     },
   },
+
+  /**
+   * When <code>true</code>, this label is ready to render, i.e., the glyphs have been mapped and the WebGL resources are created. This property is exposed for testing purposes.
+   * @memberof Label.prototype
+   * @type {boolean}
+   * @readonly
+   * @private
+   */
+  ready: {
+    get: function () {
+      if (this._rebindAllGlyphs || this._repositionAllGlyphs) {
+        return false;
+      }
+
+      if (
+        defined(this._backgroundBillboard) &&
+        !this._backgroundBillboard.ready
+      ) {
+        return false;
+      }
+
+      const glyphs = this._glyphs;
+      for (let i = 0, len = glyphs.length; i < len; i++) {
+        const glyph = glyphs[i];
+        if (defined(glyph.billboard) && !glyph.billboard.ready) {
+          return false;
+        }
+      }
+
+      return true;
+    },
+  },
 });
 
 Label.prototype._updateClamping = function () {

package/Source/Scene/LabelCollection.js

@@ -85,6 +85,8 @@ function getWhitePixelBillboard(billboardCollection, labelCollection) {
   });
 
   billboard.setImageTexture(billboardTexture);
+  billboard._positionFromParent = true;
+  billboard._labelTranslate = new Cartesian2();
 
   return billboard;
 }
@@ -288,6 +290,9 @@ function rebindAllGlyphs(labelCollection, label) {
     billboard.horizontalOrigin = HorizontalOrigin.LEFT;
     billboard.verticalOrigin = label._verticalOrigin;
     billboard.heightReference = label._heightReference;
+    if (defined(label._clampedPosition)) {
+      billboard._clampedPosition = label._clampedPosition;
+    }
     billboard.scale = label.totalScale;
     billboard.pickPrimitive = label;
     billboard.id = label._id;
@@ -342,6 +347,9 @@ function updateBackgroundBillboard(
   backgroundBillboard.horizontalOrigin = HorizontalOrigin.LEFT;
   backgroundBillboard.verticalOrigin = label._verticalOrigin;
   backgroundBillboard.heightReference = label._heightReference;
+  if (defined(label._clampedPosition)) {
+    backgroundBillboard._clampedPosition = label._clampedPosition;
+  }
   backgroundBillboard.scale = label.totalScale;
   backgroundBillboard.pickPrimitive = label;
   backgroundBillboard.id = label._id;
@@ -493,6 +501,12 @@ function repositionAllGlyphs(label) {
         glyph.billboard._labelDimensions.x = totalLineWidth;
         glyph.billboard._labelDimensions.y = totalLineHeight;
         glyph.billboard._labelHorizontalOrigin = horizontalOrigin;
+        if (isHeightReferenceClamp(label.heightReference)) {
+          glyph.billboard._labelTranslate = Cartesian2.clone(
+            glyphPixelOffset,
+            glyph.billboard._labelTranslate,
+          );
+        }
       }
 
       //Compute the next x offset taking into account the kerning performed
@@ -536,19 +550,6 @@ function repositionAllGlyphs(label) {
       backgroundBillboard._labelTranslate,
     );
   }
-
-  if (isHeightReferenceClamp(label.heightReference)) {
-    for (let glyphIndex = 0; glyphIndex < glyphLength; ++glyphIndex) {
-      const glyph = glyphs[glyphIndex];
-      const billboard = glyph.billboard;
-      if (defined(billboard)) {
-        billboard._labelTranslate = Cartesian2.clone(
-          glyphPixelOffset,
-          billboard._labelTranslate,
-        );
-      }
-    }
-  }
 }
 
 function destroyLabel(labelCollection, label) {

package/Source/Scene/Material.js

@@ -354,6 +354,7 @@ function Material(options) {
 
     /**
      * The {@link TextureMinificationFilter} to apply to this material's textures.
+     * @memberof Material.prototype
      * @type {TextureMinificationFilter}
      * @default TextureMinificationFilter.LINEAR
      */
@@ -368,6 +369,7 @@ function Material(options) {
 
     /**
      * The {@link TextureMagnificationFilter} to apply to this material's textures.
+     * @memberof Material.prototype
      * @type {TextureMagnificationFilter}
      * @default TextureMagnificationFilter.LINEAR
      */

package/Source/Scene/Megatexture.js

@@ -158,6 +158,7 @@ function Megatexture(
 Object.defineProperties(Megatexture.prototype, {
   /**
    * Gets or sets the nearest sampling flag.
+   * @memberof Megatexture.prototype
    * @type {boolean}
    */
   nearestSampling: {

package/Source/Scene/MetadataClassProperty.js

@@ -1191,21 +1191,36 @@ MetadataClassProperty.valueTransformInPlace = function (
 };
 
 /**
- * Determines the byte size of a single property element.
+ * Determines the byte size of a single property element, stored on the CPU.
  * For example, if the metadata type is VEC3 and the component type is FLOAT32, this would return 12 bytes.
  *
  * @returns {number} The byte size of a single property element.
  *
  * @private
  */
-MetadataClassProperty.prototype.bytesPerElement = function () {
-  const type = this.type;
-  const valueType = this.valueType;
+MetadataClassProperty.prototype.cpuBytesPerElement = function () {
+  return bytesPerElement(this, this.valueType);
+};
+
+/**
+ * Determines the byte size of a single property element, stored on the GPU.
+ * This differs from the CPU byte size if the element type is a 64-bit type that can be
+ * downcast to a 32-bit type for texture packing (only relevant for textures created from property tables).
+ *
+ * @returns {number} The byte size of a single property element on the GPU.
+ */
+MetadataClassProperty.prototype.gpuBytesPerElement = function () {
+  const packedType = MetadataComponentType.gpuComponentType(this.valueType);
+  return bytesPerElement(this, packedType);
+};
+
+function bytesPerElement(classProperty, valueType) {
+  const type = classProperty.type;
   const componentCount = MetadataType.getComponentCount(type);
-  const arrayLength = this.isArray ? this.arrayLength : 1;
+  const arrayLength = classProperty.isArray ? classProperty.arrayLength : 1;
   const bytesPerComponent = MetadataComponentType.getSizeInBytes(valueType);
   return componentCount * arrayLength * bytesPerComponent;
-};
+}
 
 /**
  * Determines whether this property can be stored in a texture, given the property's datatype and the number of
@@ -1240,9 +1255,8 @@ MetadataClassProperty.prototype.isGpuCompatible = function (channelsLength) {
   }
 
   // For all other properties, make sure the components fit in the sampled channels.
-  // (Note that it's possible to treat 64-bit types as two 32-bit components, but for now that's not supported)
-  const elementSizeInBytes = this.bytesPerElement();
-  if (elementSizeInBytes > channelsLength) {
+  // (64-bit types can be downcast to 32-bit types for texture packing. In the future, support for full 64-bit types may be added)
+  if (this.gpuBytesPerElement() > channelsLength) {
     return false;
   }
 
@@ -1317,7 +1331,7 @@ MetadataClassProperty.prototype.unpackTextureInShader = function (
   shaderLines,
 ) {
   const glslType = this.getGlslType();
-  const valueType = this.valueType;
+  const valueType = MetadataComponentType.gpuComponentType(this.valueType);
   const numChannels = channelsString.length;
   const type = this.type;