@cesium/engine 10.1.0 → 11.1.0

package/Source/Renderer/CubeMap.js

@@ -14,6 +14,51 @@ import TextureMagnificationFilter from "./TextureMagnificationFilter.js";
 import TextureMinificationFilter from "./TextureMinificationFilter.js";
 
 /**
+ * @typedef CubeMap.BufferSource
+ *
+ * @property {TypedArray} arrayBufferView A view of a binary data buffer containing pixel values.
+ * @property {number} width The width of one face of the cube map, in pixels. Must be equal to height.
+ * @property {number} height The height of one face of the cube map, in pixels. Must be equal to width.
+ *
+ * @private
+ */
+
+/**
+ * @typedef CubeMap.Source
+ *
+ * @property {ImageData|HTMLImageElement|HTMLCanvasElement|HTMLVideoElement|CubeMap.BufferSource} positiveX
+ * @property {ImageData|HTMLImageElement|HTMLCanvasElement|HTMLVideoElement|CubeMap.BufferSource} negativeX
+ * @property {ImageData|HTMLImageElement|HTMLCanvasElement|HTMLVideoElement|CubeMap.BufferSource} positiveY
+ * @property {ImageData|HTMLImageElement|HTMLCanvasElement|HTMLVideoElement|CubeMap.BufferSource} negativeY
+ * @property {ImageData|HTMLImageElement|HTMLCanvasElement|HTMLVideoElement|CubeMap.BufferSource} positiveZ
+ * @property {ImageData|HTMLImageElement|HTMLCanvasElement|HTMLVideoElement|CubeMap.BufferSource} negativeZ
+ */
+
+/**
+ * @typedef CubeMap.ConstructorOptions
+ *
+ * @property {Context} context
+ * @property {CubeMap.Source} [source] The source for texel values to be loaded into the texture.
+ * @property {PixelFormat} [pixelFormat=PixelFormat.RGBA] The format of each pixel, i.e., the number of components it has and what they represent.
+ * @property {PixelDatatype} [pixelDatatype=PixelDatatype.UNSIGNED_BYTE] The data type of each pixel.
+ * @property {boolean} [flipY=true] If true, the source values will be read as if the y-axis is inverted (y=0 at the top).
+ * @property {boolean} [skipColorSpaceConversion=false] If true, color space conversions will be skipped when reading the texel values.
+ * @property {Sampler} [sampler] Information about how to sample the cubemap texture.
+ * @property {number} [width] The pixel width of the texture. If not supplied, must be available from the source. Must be equal to height.
+ * @property {number} [height] The pixel height of the texture. If not supplied, must be available from the source. Must be equal to width.
+ * @property {boolean} [preMultiplyAlpha] If true, the alpha channel will be multiplied into the other channels.
+ *
+ * @private
+ */
+
+/**
+ * A wrapper for a {@link https://developer.mozilla.org/en-US/docs/Web/API/WebGLTexture|WebGLTexture}
+ * used as a cube map, to abstract away the verbose GL calls associated with setting up a texture.
+ *
+ * @alias CubeMap
+ * @constructor
+ *
+ * @param {CubeMap.ConstructorOptions} options An object describing initialization options.
  * @private
  */
 function CubeMap(options) {
@@ -23,72 +68,60 @@ function CubeMap(options) {
   Check.defined("options.context", options.context);
   //>>includeEnd('debug');
 
-  const context = options.context;
-  const source = options.source;
-  let width;
-  let height;
+  const {
+    context,
+    source,
+    pixelFormat = PixelFormat.RGBA,
+    pixelDatatype = PixelDatatype.UNSIGNED_BYTE,
+    flipY = true,
+    skipColorSpaceConversion = false,
+    sampler = new Sampler(),
+  } = options;
 
-  if (defined(source)) {
-    const faces = [
-      source.positiveX,
-      source.negativeX,
-      source.positiveY,
-      source.negativeY,
-      source.positiveZ,
-      source.negativeZ,
-    ];
+  // Use premultiplied alpha for opaque textures should perform better on Chrome:
+  // http://media.tojicode.com/webglCamp4/#20
+  const preMultiplyAlpha =
+    options.preMultiplyAlpha ||
+    pixelFormat === PixelFormat.RGB ||
+    pixelFormat === PixelFormat.LUMINANCE;
+
+  let { width, height } = options;
 
+  if (defined(source)) {
     //>>includeStart('debug', pragmas.debug);
     if (
-      !faces[0] ||
-      !faces[1] ||
-      !faces[2] ||
-      !faces[3] ||
-      !faces[4] ||
-      !faces[5]
+      !Object.values(CubeMap.FaceName).every((faceName) =>
+        defined(source[faceName]),
+      )
     ) {
       throw new DeveloperError(
-        "options.source requires positiveX, negativeX, positiveY, negativeY, positiveZ, and negativeZ faces."
+        `options.source requires faces ${Object.values(CubeMap.FaceName).join(
+          ", ",
+        )}.`,
       );
     }
     //>>includeEnd('debug');
 
-    width = faces[0].width;
-    height = faces[0].height;
+    ({ width, height } = source.positiveX);
 
     //>>includeStart('debug', pragmas.debug);
-    for (let i = 1; i < 6; ++i) {
-      if (
-        Number(faces[i].width) !== width ||
-        Number(faces[i].height) !== height
-      ) {
+    for (const faceName of CubeMap.getFaceNames()) {
+      const face = source[faceName];
+      if (Number(face.width) !== width || Number(face.height) !== height) {
         throw new DeveloperError(
-          "Each face in options.source must have the same width and height."
+          "Each face in options.source must have the same width and height.",
         );
       }
     }
     //>>includeEnd('debug');
-  } else {
-    width = options.width;
-    height = options.height;
   }
 
   const size = width;
-  const pixelDatatype = defaultValue(
-    options.pixelDatatype,
-    PixelDatatype.UNSIGNED_BYTE
-  );
-  const pixelFormat = defaultValue(options.pixelFormat, PixelFormat.RGBA);
-  const internalFormat = PixelFormat.toInternalFormat(
-    pixelFormat,
-    pixelDatatype,
-    context
-  );
 
   //>>includeStart('debug', pragmas.debug);
   if (!defined(width) || !defined(height)) {
     throw new DeveloperError(
-      "options requires a source field to create an initialized cube map or width and height fields to create a blank cube map."
+      "options requires a source field to create an initialized cube map or width and height fields to create a blank cube map.",
     );
   }
 
@@ -102,7 +135,7 @@ function CubeMap(options) {
 
   if (size > ContextLimits.maximumCubeMapSize) {
     throw new DeveloperError(
-      `Width and height must be less than or equal to the maximum cube map size (${ContextLimits.maximumCubeMapSize}).  Check maximumCubeMapSize.`
+      `Width and height must be less than or equal to the maximum cube map size (${ContextLimits.maximumCubeMapSize}). Check maximumCubeMapSize.`,
     );
   }
 
@@ -112,7 +145,7 @@ function CubeMap(options) {
 
   if (PixelFormat.isDepthFormat(pixelFormat)) {
     throw new DeveloperError(
-      "options.pixelFormat cannot be DEPTH_COMPONENT or DEPTH_STENCIL."
+      "options.pixelFormat cannot be DEPTH_COMPONENT or DEPTH_STENCIL.",
     );
   }
 
@@ -122,7 +155,7 @@ function CubeMap(options) {
 
   if (pixelDatatype === PixelDatatype.FLOAT && !context.floatingPointTexture) {
     throw new DeveloperError(
-      "When options.pixelDatatype is FLOAT, this WebGL implementation must support the OES_texture_float extension."
+      "When options.pixelDatatype is FLOAT, this WebGL implementation must support the OES_texture_float extension.",
     );
   }
 
@@ -131,313 +164,201 @@ function CubeMap(options) {
     !context.halfFloatingPointTexture
   ) {
     throw new DeveloperError(
-      "When options.pixelDatatype is HALF_FLOAT, this WebGL implementation must support the OES_texture_half_float extension."
+      "When options.pixelDatatype is HALF_FLOAT, this WebGL implementation must support the OES_texture_half_float extension.",
     );
   }
   //>>includeEnd('debug');
 
   const sizeInBytes =
     PixelFormat.textureSizeInBytes(pixelFormat, pixelDatatype, size, size) * 6;
-
-  // Use premultiplied alpha for opaque textures should perform better on Chrome:
-  // http://media.tojicode.com/webglCamp4/#20
-  const preMultiplyAlpha =
-    options.preMultiplyAlpha ||
-    pixelFormat === PixelFormat.RGB ||
-    pixelFormat === PixelFormat.LUMINANCE;
-  const flipY = defaultValue(options.flipY, true);
-  const skipColorSpaceConversion = defaultValue(
-    options.skipColorSpaceConversion,
-    false
+  const internalFormat = PixelFormat.toInternalFormat(
+    pixelFormat,
+    pixelDatatype,
+    context,
   );
 
   const gl = context._gl;
   const textureTarget = gl.TEXTURE_CUBE_MAP;
   const texture = gl.createTexture();
 
+  this._context = context;
+  this._textureFilterAnisotropic = context._textureFilterAnisotropic;
+  this._textureTarget = textureTarget;
+  this._texture = texture;
+  this._pixelFormat = pixelFormat;
+  this._pixelDatatype = pixelDatatype;
+  this._size = size;
+  this._hasMipmap = false;
+  this._sizeInBytes = sizeInBytes;
+  this._preMultiplyAlpha = preMultiplyAlpha;
+  this._flipY = flipY;
+
+  const initialized = defined(source);
+  function constructFace(targetFace) {
+    return new CubeMapFace(
+      context,
+      texture,
+      textureTarget,
+      targetFace,
+      internalFormat,
+      pixelFormat,
+      pixelDatatype,
+      size,
+      preMultiplyAlpha,
+      flipY,
+      initialized,
+    );
+  }
+  this._positiveX = constructFace(gl.TEXTURE_CUBE_MAP_POSITIVE_X);
+  this._negativeX = constructFace(gl.TEXTURE_CUBE_MAP_NEGATIVE_X);
+  this._positiveY = constructFace(gl.TEXTURE_CUBE_MAP_POSITIVE_Y);
+  this._negativeY = constructFace(gl.TEXTURE_CUBE_MAP_NEGATIVE_Y);
+  this._positiveZ = constructFace(gl.TEXTURE_CUBE_MAP_POSITIVE_Z);
+  this._negativeZ = constructFace(gl.TEXTURE_CUBE_MAP_NEGATIVE_Z);
+
+  this._sampler = sampler;
+  setupSampler(this, sampler);
+
   gl.activeTexture(gl.TEXTURE0);
   gl.bindTexture(textureTarget, texture);
 
-  function createFace(
-    target,
-    sourceFace,
-    preMultiplyAlpha,
-    flipY,
-    skipColorSpaceConversion
-  ) {
-    let arrayBufferView = sourceFace.arrayBufferView;
-    if (!defined(arrayBufferView)) {
-      arrayBufferView = sourceFace.bufferView;
-    }
+  if (skipColorSpaceConversion) {
+    gl.pixelStorei(gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, gl.NONE);
+  } else {
+    gl.pixelStorei(
+      gl.UNPACK_COLORSPACE_CONVERSION_WEBGL,
+      gl.BROWSER_DEFAULT_WEBGL,
+    );
+  }
 
-    let unpackAlignment = 4;
-    if (defined(arrayBufferView)) {
-      unpackAlignment = PixelFormat.alignmentInBytes(
-        pixelFormat,
-        pixelDatatype,
-        width
-      );
-    }
+  for (const faceName of CubeMap.getFaceNames()) {
+    loadFace(this[faceName], source?.[faceName], 0);
+  }
 
-    gl.pixelStorei(gl.UNPACK_ALIGNMENT, unpackAlignment);
+  gl.bindTexture(textureTarget, null);
+}
 
-    if (skipColorSpaceConversion) {
-      gl.pixelStorei(gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, gl.NONE);
-    } else {
-      gl.pixelStorei(
-        gl.UNPACK_COLORSPACE_CONVERSION_WEBGL,
-        gl.BROWSER_DEFAULT_WEBGL
-      );
-    }
+/**
+ * An enum defining the names of the faces of a cube map.
+ *
+ * @alias {CubeMap.FaceName}
+ * @enum {string}
+ *
+ * @private
+ */
+CubeMap.FaceName = Object.freeze({
+  POSITIVEX: "positiveX",
+  NEGATIVEX: "negativeX",
+  POSITIVEY: "positiveY",
+  NEGATIVEY: "negativeY",
+  POSITIVEZ: "positiveZ",
+  NEGATIVEZ: "negativeZ",
+});
 
-    if (defined(arrayBufferView)) {
-      gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
-      gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
-
-      if (flipY) {
-        arrayBufferView = PixelFormat.flipY(
-          arrayBufferView,
-          pixelFormat,
-          pixelDatatype,
-          size,
-          size
-        );
-      }
-      gl.texImage2D(
-        target,
-        0,
-        internalFormat,
-        size,
-        size,
-        0,
-        pixelFormat,
-        PixelDatatype.toWebGLConstant(pixelDatatype, context),
-        arrayBufferView
-      );
-    } else {
-      // Only valid for DOM-Element uploads
-      gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, preMultiplyAlpha);
-      gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipY);
-
-      // Source: ImageData, HTMLImageElement, HTMLCanvasElement, or HTMLVideoElement
-      gl.texImage2D(
-        target,
-        0,
-        internalFormat,
-        pixelFormat,
-        PixelDatatype.toWebGLConstant(pixelDatatype, context),
-        sourceFace
-      );
-    }
-  }
+function* makeFacesIterator() {
+  yield CubeMap.FaceName.POSITIVEX;
+  yield CubeMap.FaceName.NEGATIVEX;
+  yield CubeMap.FaceName.POSITIVEY;
+  yield CubeMap.FaceName.NEGATIVEY;
+  yield CubeMap.FaceName.POSITIVEZ;
+  yield CubeMap.FaceName.NEGATIVEZ;
+}
 
-  if (defined(source)) {
-    createFace(
-      gl.TEXTURE_CUBE_MAP_POSITIVE_X,
-      source.positiveX,
-      preMultiplyAlpha,
-      flipY,
-      skipColorSpaceConversion
-    );
-    createFace(
-      gl.TEXTURE_CUBE_MAP_NEGATIVE_X,
-      source.negativeX,
-      preMultiplyAlpha,
-      flipY,
-      skipColorSpaceConversion
-    );
-    createFace(
-      gl.TEXTURE_CUBE_MAP_POSITIVE_Y,
-      source.positiveY,
-      preMultiplyAlpha,
-      flipY,
-      skipColorSpaceConversion
-    );
-    createFace(
-      gl.TEXTURE_CUBE_MAP_NEGATIVE_Y,
-      source.negativeY,
-      preMultiplyAlpha,
-      flipY,
-      skipColorSpaceConversion
-    );
-    createFace(
-      gl.TEXTURE_CUBE_MAP_POSITIVE_Z,
-      source.positiveZ,
-      preMultiplyAlpha,
-      flipY,
-      skipColorSpaceConversion
-    );
-    createFace(
-      gl.TEXTURE_CUBE_MAP_NEGATIVE_Z,
-      source.negativeZ,
-      preMultiplyAlpha,
-      flipY,
-      skipColorSpaceConversion
-    );
-  } else {
-    gl.texImage2D(
-      gl.TEXTURE_CUBE_MAP_POSITIVE_X,
-      0,
-      internalFormat,
-      size,
-      size,
-      0,
-      pixelFormat,
-      PixelDatatype.toWebGLConstant(pixelDatatype, context),
-      null
-    );
+/**
+ * Creates an iterator for looping over the cubemap faces.
+ *
+ * @type {Iterable<CubeMap.FaceName>}
+ *
+ * @private
+ */
+CubeMap.getFaceNames = function () {
+  return makeFacesIterator();
+};
+
+/**
+ * Load texel data into one face of a cube map.
+ *
+ * @param {CubeMapFace} cubeMapFace The face to which texel values will be loaded.
+ * @param {ImageData|HTMLImageElement|HTMLCanvasElement|HTMLVideoElement|CubeMap.BufferSource} [source] The source for texel values to be loaded into the texture.
+ * @param {number} [mipLevel=0] The mip level to which the texel values will be loaded.
+ *
+ * @private
+ */
+function loadFace(cubeMapFace, source, mipLevel) {
+  mipLevel = defaultValue(mipLevel, 0);
+  const targetFace = cubeMapFace._targetFace;
+  const size = Math.max(Math.floor(cubeMapFace._size / 2 ** mipLevel), 1);
+  const pixelFormat = cubeMapFace._pixelFormat;
+  const pixelDatatype = cubeMapFace._pixelDatatype;
+  const internalFormat = cubeMapFace._internalFormat;
+  const flipY = cubeMapFace._flipY;
+  const preMultiplyAlpha = cubeMapFace._preMultiplyAlpha;
+  const context = cubeMapFace._context;
+  const gl = context._gl;
+
+  if (!defined(source)) {
     gl.texImage2D(
-      gl.TEXTURE_CUBE_MAP_NEGATIVE_X,
-      0,
+      targetFace,
+      mipLevel,
       internalFormat,
       size,
       size,
       0,
       pixelFormat,
       PixelDatatype.toWebGLConstant(pixelDatatype, context),
-      null
+      null,
     );
-    gl.texImage2D(
-      gl.TEXTURE_CUBE_MAP_POSITIVE_Y,
-      0,
-      internalFormat,
-      size,
-      size,
-      0,
+    return;
+  }
+
+  let { arrayBufferView } = source;
+
+  let unpackAlignment = 4;
+  if (defined(arrayBufferView)) {
+    unpackAlignment = PixelFormat.alignmentInBytes(
       pixelFormat,
-      PixelDatatype.toWebGLConstant(pixelDatatype, context),
-      null
-    );
-    gl.texImage2D(
-      gl.TEXTURE_CUBE_MAP_NEGATIVE_Y,
-      0,
-      internalFormat,
-      size,
+      pixelDatatype,
       size,
-      0,
-      pixelFormat,
-      PixelDatatype.toWebGLConstant(pixelDatatype, context),
-      null
     );
+  }
+  gl.pixelStorei(gl.UNPACK_ALIGNMENT, unpackAlignment);
+
+  if (defined(arrayBufferView)) {
+    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
+    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+    if (flipY) {
+      arrayBufferView = PixelFormat.flipY(
+        arrayBufferView,
+        pixelFormat,
+        pixelDatatype,
+        size,
+        size,
+      );
+    }
     gl.texImage2D(
-      gl.TEXTURE_CUBE_MAP_POSITIVE_Z,
-      0,
+      targetFace,
+      mipLevel,
       internalFormat,
       size,
       size,
       0,
       pixelFormat,
       PixelDatatype.toWebGLConstant(pixelDatatype, context),
-      null
+      arrayBufferView,
     );
+  } else {
+    // Only valid for DOM-Element uploads
+    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, preMultiplyAlpha);
+    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipY);
     gl.texImage2D(
-      gl.TEXTURE_CUBE_MAP_NEGATIVE_Z,
-      0,
+      targetFace,
+      mipLevel,
       internalFormat,
-      size,
-      size,
-      0,
       pixelFormat,
       PixelDatatype.toWebGLConstant(pixelDatatype, context),
-      null
+      source,
     );
   }
-  gl.bindTexture(textureTarget, null);
-
-  this._context = context;
-  this._textureFilterAnisotropic = context._textureFilterAnisotropic;
-  this._textureTarget = textureTarget;
-  this._texture = texture;
-  this._pixelFormat = pixelFormat;
-  this._pixelDatatype = pixelDatatype;
-  this._size = size;
-  this._hasMipmap = false;
-  this._sizeInBytes = sizeInBytes;
-  this._preMultiplyAlpha = preMultiplyAlpha;
-  this._flipY = flipY;
-  this._sampler = undefined;
-
-  const initialized = defined(source);
-  this._positiveX = new CubeMapFace(
-    context,
-    texture,
-    textureTarget,
-    gl.TEXTURE_CUBE_MAP_POSITIVE_X,
-    internalFormat,
-    pixelFormat,
-    pixelDatatype,
-    size,
-    preMultiplyAlpha,
-    flipY,
-    initialized
-  );
-  this._negativeX = new CubeMapFace(
-    context,
-    texture,
-    textureTarget,
-    gl.TEXTURE_CUBE_MAP_NEGATIVE_X,
-    internalFormat,
-    pixelFormat,
-    pixelDatatype,
-    size,
-    preMultiplyAlpha,
-    flipY,
-    initialized
-  );
-  this._positiveY = new CubeMapFace(
-    context,
-    texture,
-    textureTarget,
-    gl.TEXTURE_CUBE_MAP_POSITIVE_Y,
-    internalFormat,
-    pixelFormat,
-    pixelDatatype,
-    size,
-    preMultiplyAlpha,
-    flipY,
-    initialized
-  );
-  this._negativeY = new CubeMapFace(
-    context,
-    texture,
-    textureTarget,
-    gl.TEXTURE_CUBE_MAP_NEGATIVE_Y,
-    internalFormat,
-    pixelFormat,
-    pixelDatatype,
-    size,
-    preMultiplyAlpha,
-    flipY,
-    initialized
-  );
-  this._positiveZ = new CubeMapFace(
-    context,
-    texture,
-    textureTarget,
-    gl.TEXTURE_CUBE_MAP_POSITIVE_Z,
-    internalFormat,
-    pixelFormat,
-    pixelDatatype,
-    size,
-    preMultiplyAlpha,
-    flipY,
-    initialized
-  );
-  this._negativeZ = new CubeMapFace(
-    context,
-    texture,
-    textureTarget,
-    gl.TEXTURE_CUBE_MAP_NEGATIVE_Z,
-    internalFormat,
-    pixelFormat,
-    pixelDatatype,
-    size,
-    preMultiplyAlpha,
-    flipY,
-    initialized
-  );
-
-  this.sampler = defined(options.sampler) ? options.sampler : new Sampler();
 }
 
 Object.defineProperties(CubeMap.prototype, {
@@ -476,52 +397,7 @@ Object.defineProperties(CubeMap.prototype, {
       return this._sampler;
     },
     set: function (sampler) {
-      let minificationFilter = sampler.minificationFilter;
-      let magnificationFilter = sampler.magnificationFilter;
-
-      const mipmap =
-        minificationFilter ===
-          TextureMinificationFilter.NEAREST_MIPMAP_NEAREST ||
-        minificationFilter ===
-          TextureMinificationFilter.NEAREST_MIPMAP_LINEAR ||
-        minificationFilter ===
-          TextureMinificationFilter.LINEAR_MIPMAP_NEAREST ||
-        minificationFilter === TextureMinificationFilter.LINEAR_MIPMAP_LINEAR;
-
-      const context = this._context;
-      const pixelDatatype = this._pixelDatatype;
-
-      // float textures only support nearest filtering unless the linear extensions are supported, so override the sampler's settings
-      if (
-        (pixelDatatype === PixelDatatype.FLOAT &&
-          !context.textureFloatLinear) ||
-        (pixelDatatype === PixelDatatype.HALF_FLOAT &&
-          !context.textureHalfFloatLinear)
-      ) {
-        minificationFilter = mipmap
-          ? TextureMinificationFilter.NEAREST_MIPMAP_NEAREST
-          : TextureMinificationFilter.NEAREST;
-        magnificationFilter = TextureMagnificationFilter.NEAREST;
-      }
-
-      const gl = context._gl;
-      const target = this._textureTarget;
-
-      gl.activeTexture(gl.TEXTURE0);
-      gl.bindTexture(target, this._texture);
-      gl.texParameteri(target, gl.TEXTURE_MIN_FILTER, minificationFilter);
-      gl.texParameteri(target, gl.TEXTURE_MAG_FILTER, magnificationFilter);
-      gl.texParameteri(target, gl.TEXTURE_WRAP_S, sampler.wrapS);
-      gl.texParameteri(target, gl.TEXTURE_WRAP_T, sampler.wrapT);
-      if (defined(this._textureFilterAnisotropic)) {
-        gl.texParameteri(
-          target,
-          this._textureFilterAnisotropic.TEXTURE_MAX_ANISOTROPY_EXT,
-          sampler.maximumAnisotropy
-        );
-      }
-      gl.bindTexture(target, null);
-
+      setupSampler(this, sampler);
       this._sampler = sampler;
     },
   },
@@ -571,6 +447,108 @@ Object.defineProperties(CubeMap.prototype, {
   },
 });
 
+/**
+ * Set up a sampler for use with a cube map.
+ * @param {CubeMap} cubeMap The cube map containing the texture to be sampled by this sampler.
+ * @param {Sampler} sampler Information about how to sample the cubemap texture.
+ * @private
+ */
+function setupSampler(cubeMap, sampler) {
+  let { minificationFilter, magnificationFilter } = sampler;
+
+  const mipmap = [
+    TextureMinificationFilter.NEAREST_MIPMAP_NEAREST,
+    TextureMinificationFilter.NEAREST_MIPMAP_LINEAR,
+    TextureMinificationFilter.LINEAR_MIPMAP_NEAREST,
+    TextureMinificationFilter.LINEAR_MIPMAP_LINEAR,
+  ].includes(minificationFilter);
+
+  const context = cubeMap._context;
+  const pixelDatatype = cubeMap._pixelDatatype;
+
+  // float textures only support nearest filtering unless the linear extensions are supported
+  if (
+    (pixelDatatype === PixelDatatype.FLOAT && !context.textureFloatLinear) ||
+    (pixelDatatype === PixelDatatype.HALF_FLOAT &&
+      !context.textureHalfFloatLinear)
+  ) {
+    // override the sampler's settings
+    minificationFilter = mipmap
+      ? TextureMinificationFilter.NEAREST_MIPMAP_NEAREST
+      : TextureMinificationFilter.NEAREST;
+    magnificationFilter = TextureMagnificationFilter.NEAREST;
+  }
+
+  const gl = context._gl;
+  const target = cubeMap._textureTarget;
+
+  gl.activeTexture(gl.TEXTURE0);
+  gl.bindTexture(target, cubeMap._texture);
+  gl.texParameteri(target, gl.TEXTURE_MIN_FILTER, minificationFilter);
+  gl.texParameteri(target, gl.TEXTURE_MAG_FILTER, magnificationFilter);
+  gl.texParameteri(target, gl.TEXTURE_WRAP_S, sampler.wrapS);
+  gl.texParameteri(target, gl.TEXTURE_WRAP_T, sampler.wrapT);
+  if (defined(cubeMap._textureFilterAnisotropic)) {
+    gl.texParameteri(
+      target,
+      cubeMap._textureFilterAnisotropic.TEXTURE_MAX_ANISOTROPY_EXT,
+      sampler.maximumAnisotropy,
+    );
+  }
+  gl.bindTexture(target, null);
+}
+
+/**
+ * Load a complete mipmap chain for each cubemap face.
+ *
+ * @param {CubeMap.Source[]} source The source data for each mip level, beginning at level 1.
+ * @param {boolean} [skipColorSpaceConversion=false] If true, color space conversions will be skipped when reading the texel values.
+ *
+ * @private
+ */
+CubeMap.prototype.loadMipmaps = function (source, skipColorSpaceConversion) {
+  //>>includeStart('debug', pragmas.debug);
+  Check.defined("source", source);
+  if (!Array.isArray(source)) {
+    throw new DeveloperError(`source must be an array`);
+  }
+  const mipCount = Math.log2(this._size);
+  if (source.length !== mipCount) {
+    throw new DeveloperError(`all mip levels must be defined`);
+  }
+  //>>includeEnd('debug');
+
+  skipColorSpaceConversion = defaultValue(skipColorSpaceConversion, false);
+  const gl = this._context._gl;
+  const texture = this._texture;
+  const textureTarget = this._textureTarget;
+
+  gl.activeTexture(gl.TEXTURE0);
+  gl.bindTexture(textureTarget, texture);
+
+  if (skipColorSpaceConversion) {
+    gl.pixelStorei(gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, gl.NONE);
+  } else {
+    gl.pixelStorei(
+      gl.UNPACK_COLORSPACE_CONVERSION_WEBGL,
+      gl.BROWSER_DEFAULT_WEBGL,
+    );
+  }
+
+  for (let i = 0; i < source.length; i++) {
+    const mipSource = source[i];
+    // mipLevel 0 was the base layer, already loaded when the CubeMap was constructed.
+    const mipLevel = i + 1;
+    for (const faceName of CubeMap.getFaceNames()) {
+      loadFace(this[faceName], mipSource[faceName], mipLevel);
+    }
+  }
+
+  gl.bindTexture(textureTarget, null);
+
+  this._hasMipmap = true;
+};
+
 /**
  * Generates a complete mipmap chain for each cubemap face.
  *
@@ -595,7 +573,7 @@ CubeMap.prototype.generateMipmap = function (hint) {
   //>>includeStart('debug', pragmas.debug);
   if (this._size > 1 && !CesiumMath.isPowerOfTwo(this._size)) {
     throw new DeveloperError(
-      "width and height must be a power of two to call generateMipmap()."
+      "width and height must be a power of two to call generateMipmap().",
     );
   }
   if (!MipmapHint.validate(hint)) {