@cesium/engine 10.1.0 → 11.1.0

package/Source/Renderer/Texture.js

@@ -15,6 +15,30 @@ import TextureMagnificationFilter from "./TextureMagnificationFilter.js";
 import TextureMinificationFilter from "./TextureMinificationFilter.js";
 
 /**
+ * @typedef {object} Texture.ConstructorOptions
+ *
+ * @property {Context} context
+ * @property {object} [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.
+ * @property {number} [height] The pixel height of the texture. If not supplied, must be available from the source.
+ * @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}
+ * to abstract away the verbose GL calls associated with setting up a texture.
+ *
+ * @alias Texture
+ * @constructor
+ *
+ * @param {Texture.ConstructorOptions} options
  * @private
  */
 function Texture(options) {
@@ -24,29 +48,38 @@ function Texture(options) {
   Check.defined("options.context", options.context);
   //>>includeEnd('debug');
 
-  const context = options.context;
-  let width = options.width;
-  let height = options.height;
-  const source = options.source;
-
+  const {
+    context,
+    source,
+    pixelFormat = PixelFormat.RGBA,
+    pixelDatatype = PixelDatatype.UNSIGNED_BYTE,
+    flipY = true,
+    skipColorSpaceConversion = false,
+    sampler = new Sampler(),
+  } = options;
+
+  let { width, height } = options;
   if (defined(source)) {
+    // Make sure we are using the element's intrinsic width and height where available
     if (!defined(width)) {
-      width = defaultValue(source.videoWidth, source.width);
+      width = source.videoWidth ?? source.naturalWidth ?? source.width;
     }
     if (!defined(height)) {
-      height = defaultValue(source.videoHeight, source.height);
+      height = source.videoHeight ?? source.naturalHeight ?? source.height;
     }
   }
 
-  const pixelFormat = defaultValue(options.pixelFormat, PixelFormat.RGBA);
-  const pixelDatatype = defaultValue(
-    options.pixelDatatype,
-    PixelDatatype.UNSIGNED_BYTE
-  );
+  // 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 internalFormat = PixelFormat.toInternalFormat(
     pixelFormat,
     pixelDatatype,
-    context
+    context,
   );
 
   const isCompressed = PixelFormat.isCompressedFormat(internalFormat);
@@ -54,7 +87,7 @@ function Texture(options) {
   //>>includeStart('debug', pragmas.debug);
   if (!defined(width) || !defined(height)) {
     throw new DeveloperError(
-      "options requires a source field to create an initialized texture or width and height fields to create a blank texture."
+      "options requires a source field to create an initialized texture or width and height fields to create a blank texture.",
     );
   }
 
@@ -62,7 +95,7 @@ function Texture(options) {
 
   if (width > ContextLimits.maximumTextureSize) {
     throw new DeveloperError(
-      `Width must be less than or equal to the maximum texture size (${ContextLimits.maximumTextureSize}).  Check maximumTextureSize.`
+      `Width must be less than or equal to the maximum texture size (${ContextLimits.maximumTextureSize}).  Check maximumTextureSize.`,
     );
   }
 
@@ -70,7 +103,7 @@ function Texture(options) {
 
   if (height > ContextLimits.maximumTextureSize) {
     throw new DeveloperError(
-      `Height must be less than or equal to the maximum texture size (${ContextLimits.maximumTextureSize}).  Check maximumTextureSize.`
+      `Height must be less than or equal to the maximum texture size (${ContextLimits.maximumTextureSize}).  Check maximumTextureSize.`,
     );
   }
 
@@ -88,7 +121,7 @@ function Texture(options) {
     pixelDatatype !== PixelDatatype.UNSIGNED_INT
   ) {
     throw new DeveloperError(
-      "When options.pixelFormat is DEPTH_COMPONENT, options.pixelDatatype must be UNSIGNED_SHORT or UNSIGNED_INT."
+      "When options.pixelFormat is DEPTH_COMPONENT, options.pixelDatatype must be UNSIGNED_SHORT or UNSIGNED_INT.",
     );
   }
 
@@ -97,13 +130,13 @@ function Texture(options) {
     pixelDatatype !== PixelDatatype.UNSIGNED_INT_24_8
   ) {
     throw new DeveloperError(
-      "When options.pixelFormat is DEPTH_STENCIL, options.pixelDatatype must be UNSIGNED_INT_24_8."
+      "When options.pixelFormat is DEPTH_STENCIL, options.pixelDatatype must be UNSIGNED_INT_24_8.",
     );
   }
 
   if (pixelDatatype === PixelDatatype.FLOAT && !context.floatingPointTexture) {
     throw new DeveloperError(
-      "When options.pixelDatatype is FLOAT, this WebGL implementation must support the OES_texture_float extension.  Check context.floatingPointTexture."
+      "When options.pixelDatatype is FLOAT, this WebGL implementation must support the OES_texture_float extension.  Check context.floatingPointTexture.",
     );
   }
 
@@ -112,20 +145,20 @@ function Texture(options) {
     !context.halfFloatingPointTexture
   ) {
     throw new DeveloperError(
-      "When options.pixelDatatype is HALF_FLOAT, this WebGL implementation must support the OES_texture_half_float extension. Check context.halfFloatingPointTexture."
+      "When options.pixelDatatype is HALF_FLOAT, this WebGL implementation must support the OES_texture_half_float extension. Check context.halfFloatingPointTexture.",
     );
   }
 
   if (PixelFormat.isDepthFormat(pixelFormat)) {
     if (defined(source)) {
       throw new DeveloperError(
-        "When options.pixelFormat is DEPTH_COMPONENT or DEPTH_STENCIL, source cannot be provided."
+        "When options.pixelFormat is DEPTH_COMPONENT or DEPTH_STENCIL, source cannot be provided.",
       );
     }
 
     if (!context.depthTexture) {
       throw new DeveloperError(
-        "When options.pixelFormat is DEPTH_COMPONENT or DEPTH_STENCIL, this WebGL implementation must support WEBGL_depth_texture.  Check context.depthTexture."
+        "When options.pixelFormat is DEPTH_COMPONENT or DEPTH_STENCIL, this WebGL implementation must support WEBGL_depth_texture.  Check context.depthTexture.",
       );
     }
   }
@@ -133,33 +166,33 @@ function Texture(options) {
   if (isCompressed) {
     if (!defined(source) || !defined(source.arrayBufferView)) {
       throw new DeveloperError(
-        "When options.pixelFormat is compressed, options.source.arrayBufferView must be defined."
+        "When options.pixelFormat is compressed, options.source.arrayBufferView must be defined.",
       );
     }
 
     if (PixelFormat.isDXTFormat(internalFormat) && !context.s3tc) {
       throw new DeveloperError(
-        "When options.pixelFormat is S3TC compressed, this WebGL implementation must support the WEBGL_compressed_texture_s3tc extension. Check context.s3tc."
+        "When options.pixelFormat is S3TC compressed, this WebGL implementation must support the WEBGL_compressed_texture_s3tc extension. Check context.s3tc.",
       );
     } else if (PixelFormat.isPVRTCFormat(internalFormat) && !context.pvrtc) {
       throw new DeveloperError(
-        "When options.pixelFormat is PVRTC compressed, this WebGL implementation must support the WEBGL_compressed_texture_pvrtc extension. Check context.pvrtc."
+        "When options.pixelFormat is PVRTC compressed, this WebGL implementation must support the WEBGL_compressed_texture_pvrtc extension. Check context.pvrtc.",
       );
     } else if (PixelFormat.isASTCFormat(internalFormat) && !context.astc) {
       throw new DeveloperError(
-        "When options.pixelFormat is ASTC compressed, this WebGL implementation must support the WEBGL_compressed_texture_astc extension. Check context.astc."
+        "When options.pixelFormat is ASTC compressed, this WebGL implementation must support the WEBGL_compressed_texture_astc extension. Check context.astc.",
       );
     } else if (PixelFormat.isETC2Format(internalFormat) && !context.etc) {
       throw new DeveloperError(
-        "When options.pixelFormat is ETC2 compressed, this WebGL implementation must support the WEBGL_compressed_texture_etc extension. Check context.etc."
+        "When options.pixelFormat is ETC2 compressed, this WebGL implementation must support the WEBGL_compressed_texture_etc extension. Check context.etc.",
       );
     } else if (PixelFormat.isETC1Format(internalFormat) && !context.etc1) {
       throw new DeveloperError(
-        "When options.pixelFormat is ETC1 compressed, this WebGL implementation must support the WEBGL_compressed_texture_etc1 extension. Check context.etc1."
+        "When options.pixelFormat is ETC1 compressed, this WebGL implementation must support the WEBGL_compressed_texture_etc1 extension. Check context.etc1.",
       );
     } else if (PixelFormat.isBC7Format(internalFormat) && !context.bc7) {
       throw new DeveloperError(
-        "When options.pixelFormat is BC7 compressed, this WebGL implementation must support the EXT_texture_compression_bptc extension. Check context.bc7."
+        "When options.pixelFormat is BC7 compressed, this WebGL implementation must support the EXT_texture_compression_bptc extension. Check context.bc7.",
       );
     }
 
@@ -167,235 +200,288 @@ function Texture(options) {
       PixelFormat.compressedTextureSizeInBytes(
         internalFormat,
         width,
-        height
+        height,
       ) !== source.arrayBufferView.byteLength
     ) {
       throw new DeveloperError(
-        "The byte length of the array buffer is invalid for the compressed texture with the given width and height."
+        "The byte length of the array buffer is invalid for the compressed texture with the given width and height.",
       );
     }
   }
   //>>includeEnd('debug');
 
-  // 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
-  );
-
-  let initialized = true;
-
   const gl = context._gl;
-  const textureTarget = gl.TEXTURE_2D;
-  const texture = gl.createTexture();
 
-  gl.activeTexture(gl.TEXTURE0);
-  gl.bindTexture(textureTarget, texture);
+  const sizeInBytes = isCompressed
+    ? PixelFormat.compressedTextureSizeInBytes(pixelFormat, width, height)
+    : PixelFormat.textureSizeInBytes(pixelFormat, pixelDatatype, width, height);
 
-  let unpackAlignment = 4;
-  if (defined(source) && defined(source.arrayBufferView) && !isCompressed) {
-    unpackAlignment = PixelFormat.alignmentInBytes(
-      pixelFormat,
-      pixelDatatype,
-      width
-    );
-  }
+  this._id = createGuid();
+  this._context = context;
+  this._textureFilterAnisotropic = context._textureFilterAnisotropic;
+  this._textureTarget = gl.TEXTURE_2D;
+  this._texture = gl.createTexture();
+  this._internalFormat = internalFormat;
+  this._pixelFormat = pixelFormat;
+  this._pixelDatatype = pixelDatatype;
+  this._width = width;
+  this._height = height;
+  this._dimensions = new Cartesian2(width, height);
+  this._hasMipmap = false;
+  this._sizeInBytes = sizeInBytes;
+  this._preMultiplyAlpha = preMultiplyAlpha;
+  this._flipY = flipY;
+  this._initialized = false;
+  this._sampler = undefined;
 
-  gl.pixelStorei(gl.UNPACK_ALIGNMENT, unpackAlignment);
+  this._sampler = sampler;
+  setupSampler(this, sampler);
 
-  if (skipColorSpaceConversion) {
-    gl.pixelStorei(gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, gl.NONE);
-  } else {
-    gl.pixelStorei(
-      gl.UNPACK_COLORSPACE_CONVERSION_WEBGL,
-      gl.BROWSER_DEFAULT_WEBGL
-    );
-  }
+  gl.activeTexture(gl.TEXTURE0);
+  gl.bindTexture(this._textureTarget, this._texture);
 
   if (defined(source)) {
+    if (skipColorSpaceConversion) {
+      gl.pixelStorei(gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, gl.NONE);
+    } else {
+      gl.pixelStorei(
+        gl.UNPACK_COLORSPACE_CONVERSION_WEBGL,
+        gl.BROWSER_DEFAULT_WEBGL,
+      );
+    }
     if (defined(source.arrayBufferView)) {
-      gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
-      gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
-
-      // Source: typed array
-      let arrayBufferView = source.arrayBufferView;
-      let i, mipWidth, mipHeight;
+      const isCompressed = PixelFormat.isCompressedFormat(internalFormat);
       if (isCompressed) {
-        gl.compressedTexImage2D(
-          textureTarget,
-          0,
-          internalFormat,
-          width,
-          height,
-          0,
-          arrayBufferView
-        );
-        if (defined(source.mipLevels)) {
-          mipWidth = width;
-          mipHeight = height;
-          for (i = 0; i < source.mipLevels.length; ++i) {
-            mipWidth = Math.floor(mipWidth / 2) | 0;
-            if (mipWidth < 1) {
-              mipWidth = 1;
-            }
-            mipHeight = Math.floor(mipHeight / 2) | 0;
-            if (mipHeight < 1) {
-              mipHeight = 1;
-            }
-            gl.compressedTexImage2D(
-              textureTarget,
-              i + 1,
-              internalFormat,
-              mipWidth,
-              mipHeight,
-              0,
-              source.mipLevels[i]
-            );
-          }
-        }
+        loadCompressedBufferSource(this, source);
       } else {
-        if (flipY) {
-          arrayBufferView = PixelFormat.flipY(
-            arrayBufferView,
-            pixelFormat,
-            pixelDatatype,
-            width,
-            height
-          );
-        }
-        gl.texImage2D(
-          textureTarget,
-          0,
-          internalFormat,
-          width,
-          height,
-          0,
-          pixelFormat,
-          PixelDatatype.toWebGLConstant(pixelDatatype, context),
-          arrayBufferView
-        );
-
-        if (defined(source.mipLevels)) {
-          mipWidth = width;
-          mipHeight = height;
-          for (i = 0; i < source.mipLevels.length; ++i) {
-            mipWidth = Math.floor(mipWidth / 2) | 0;
-            if (mipWidth < 1) {
-              mipWidth = 1;
-            }
-            mipHeight = Math.floor(mipHeight / 2) | 0;
-            if (mipHeight < 1) {
-              mipHeight = 1;
-            }
-            gl.texImage2D(
-              textureTarget,
-              i + 1,
-              internalFormat,
-              mipWidth,
-              mipHeight,
-              0,
-              pixelFormat,
-              PixelDatatype.toWebGLConstant(pixelDatatype, context),
-              source.mipLevels[i]
-            );
-          }
-        }
+        loadBufferSource(this, source);
       }
     } else if (defined(source.framebuffer)) {
-      gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
-      gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+      loadFramebufferSource(this, source);
+    } else {
+      loadImageSource(this, source);
+    }
+    this._initialized = true;
+  } else {
+    loadNull(this);
+  }
 
-      // Source: framebuffer
-      if (source.framebuffer !== context.defaultFramebuffer) {
-        source.framebuffer._bind();
-      }
+  gl.bindTexture(this._textureTarget, null);
+}
+
+/**
+ * Load compressed texel data from a buffer into a texture.
+ *
+ * @param {Texture} texture The texture to which texel values will be loaded.
+ * @param {object} source The source for texel values to be loaded into the texture.
+ *
+ * @private
+ */
+function loadCompressedBufferSource(texture, source) {
+  const context = texture._context;
+  const gl = context._gl;
+  const textureTarget = texture._textureTarget;
+  const internalFormat = texture._internalFormat;
+
+  const { width, height } = texture;
+
+  gl.pixelStorei(gl.UNPACK_ALIGNMENT, 4);
+  gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
+  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+
+  gl.compressedTexImage2D(
+    textureTarget,
+    0,
+    internalFormat,
+    width,
+    height,
+    0,
+    source.arrayBufferView,
+  );
 
-      gl.copyTexImage2D(
+  if (defined(source.mipLevels)) {
+    let mipWidth = width;
+    let mipHeight = height;
+    for (let i = 0; i < source.mipLevels.length; ++i) {
+      mipWidth = nextMipSize(mipWidth);
+      mipHeight = nextMipSize(mipHeight);
+      gl.compressedTexImage2D(
         textureTarget,
-        0,
+        i + 1,
         internalFormat,
-        source.xOffset,
-        source.yOffset,
-        width,
-        height,
-        0
+        mipWidth,
+        mipHeight,
+        0,
+        source.mipLevels[i],
       );
+    }
+  }
+}
 
-      if (source.framebuffer !== context.defaultFramebuffer) {
-        source.framebuffer._unBind();
-      }
-    } else {
-      // Only valid for DOM-Element uploads
-      gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, preMultiplyAlpha);
-      gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipY);
+/**
+ * Load texel data from a buffer into a texture.
+ *
+ * @param {Texture} texture The texture to which texel values will be loaded.
+ * @param {object} source The source for texel values to be loaded into the texture.
+ *
+ * @private
+ */
+function loadBufferSource(texture, source) {
+  const context = texture._context;
+  const gl = context._gl;
+  const textureTarget = texture._textureTarget;
+  const internalFormat = texture._internalFormat;
+
+  const { width, height, pixelFormat, pixelDatatype, flipY } = texture;
 
-      // Source: ImageData, HTMLImageElement, HTMLCanvasElement, or HTMLVideoElement
+  const unpackAlignment = PixelFormat.alignmentInBytes(
+    pixelFormat,
+    pixelDatatype,
+    width,
+  );
+  gl.pixelStorei(gl.UNPACK_ALIGNMENT, unpackAlignment);
+  gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
+  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+
+  let arrayBufferView = source.arrayBufferView;
+  if (flipY) {
+    arrayBufferView = PixelFormat.flipY(
+      arrayBufferView,
+      pixelFormat,
+      pixelDatatype,
+      width,
+      height,
+    );
+  }
+  gl.texImage2D(
+    textureTarget,
+    0,
+    internalFormat,
+    width,
+    height,
+    0,
+    pixelFormat,
+    PixelDatatype.toWebGLConstant(pixelDatatype, context),
+    arrayBufferView,
+  );
+
+  if (defined(source.mipLevels)) {
+    let mipWidth = width;
+    let mipHeight = height;
+    for (let i = 0; i < source.mipLevels.length; ++i) {
+      mipWidth = nextMipSize(mipWidth);
+      mipHeight = nextMipSize(mipHeight);
       gl.texImage2D(
         textureTarget,
-        0,
+        i + 1,
         internalFormat,
+        mipWidth,
+        mipHeight,
+        0,
         pixelFormat,
         PixelDatatype.toWebGLConstant(pixelDatatype, context),
-        source
+        source.mipLevels[i],
       );
     }
-  } else {
-    gl.texImage2D(
-      textureTarget,
-      0,
-      internalFormat,
-      width,
-      height,
-      0,
-      pixelFormat,
-      PixelDatatype.toWebGLConstant(pixelDatatype, context),
-      null
-    );
-    initialized = false;
   }
-  gl.bindTexture(textureTarget, null);
+}
 
-  let sizeInBytes;
-  if (isCompressed) {
-    sizeInBytes = PixelFormat.compressedTextureSizeInBytes(
-      pixelFormat,
-      width,
-      height
-    );
-  } else {
-    sizeInBytes = PixelFormat.textureSizeInBytes(
-      pixelFormat,
-      pixelDatatype,
-      width,
-      height
-    );
+/**
+ * Load texel data from a framebuffer into a texture.
+ *
+ * @param {Texture} texture The texture to which texel values will be loaded.
+ * @param {object} source The source for texel values to be loaded into the texture.
+ *
+ * @private
+ */
+function loadFramebufferSource(texture, source) {
+  const context = texture._context;
+  const gl = context._gl;
+
+  gl.pixelStorei(gl.UNPACK_ALIGNMENT, 4);
+  gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
+  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+
+  if (source.framebuffer !== context.defaultFramebuffer) {
+    source.framebuffer._bind();
   }
 
-  this._id = createGuid();
-  this._context = context;
-  this._textureFilterAnisotropic = context._textureFilterAnisotropic;
-  this._textureTarget = textureTarget;
-  this._texture = texture;
-  this._internalFormat = internalFormat;
-  this._pixelFormat = pixelFormat;
-  this._pixelDatatype = pixelDatatype;
-  this._width = width;
-  this._height = height;
-  this._dimensions = new Cartesian2(width, height);
-  this._hasMipmap = false;
-  this._sizeInBytes = sizeInBytes;
-  this._preMultiplyAlpha = preMultiplyAlpha;
-  this._flipY = flipY;
-  this._initialized = initialized;
-  this._sampler = undefined;
+  gl.copyTexImage2D(
+    texture._textureTarget,
+    0,
+    texture._internalFormat,
+    source.xOffset,
+    source.yOffset,
+    texture.width,
+    texture.height,
+    0,
+  );
+
+  if (source.framebuffer !== context.defaultFramebuffer) {
+    source.framebuffer._unBind();
+  }
+}
+
+/**
+ * Load texel data from an Image into a texture.
+ *
+ * @param {Texture} texture The texture to which texel values will be loaded.
+ * @param {ImageData|HTMLImageElement|HTMLCanvasElement|HTMLVideoElement} source The source for texel values to be loaded into the texture.
+ *
+ * @private
+ */
+function loadImageSource(texture, source) {
+  const context = texture._context;
+  const gl = context._gl;
+
+  gl.pixelStorei(gl.UNPACK_ALIGNMENT, 4);
+  gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, texture.preMultiplyAlpha);
+  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, texture.flipY);
+
+  gl.texImage2D(
+    texture._textureTarget,
+    0,
+    texture._internalFormat,
+    texture.pixelFormat,
+    PixelDatatype.toWebGLConstant(texture.pixelDatatype, context),
+    source,
+  );
+}
+
+/**
+ * Compute a dimension of the image for the next mip level.
+ *
+ * @param {number} currentSize The size of the current mip level.
+ * @returns {number} The size of the next mip level.
+ *
+ * @private
+ */
+function nextMipSize(currentSize) {
+  const nextSize = Math.floor(currentSize / 2) | 0;
+  return Math.max(nextSize, 1);
+}
+
+/**
+ * Allocate a texture in GPU memory, without providing any image data.
+ *
+ * @param {Texture} texture The texture to be initialized with null values.
+ *
+ * @private
+ */
+function loadNull(texture) {
+  const context = texture._context;
 
-  this.sampler = defined(options.sampler) ? options.sampler : new Sampler();
+  context._gl.texImage2D(
+    texture._textureTarget,
+    0,
+    texture._internalFormat,
+    texture._width,
+    texture._height,
+    0,
+    texture._pixelFormat,
+    PixelDatatype.toWebGLConstant(texture._pixelDatatype, context),
+    null,
+  );
 }
 
 /**
@@ -449,13 +535,14 @@ Texture.fromFramebuffer = function (options) {
 
   const context = options.context;
   const gl = context._gl;
-
-  const pixelFormat = defaultValue(options.pixelFormat, PixelFormat.RGB);
-  const framebufferXOffset = defaultValue(options.framebufferXOffset, 0);
-  const framebufferYOffset = defaultValue(options.framebufferYOffset, 0);
-  const width = defaultValue(options.width, gl.drawingBufferWidth);
-  const height = defaultValue(options.height, gl.drawingBufferHeight);
-  const framebuffer = options.framebuffer;
+  const {
+    pixelFormat = PixelFormat.RGB,
+    framebufferXOffset = 0,
+    framebufferYOffset = 0,
+    width = gl.drawingBufferWidth,
+    height = gl.drawingBufferHeight,
+    framebuffer,
+  } = options;
 
   //>>includeStart('debug', pragmas.debug);
   if (!PixelFormat.validate(pixelFormat)) {
@@ -466,28 +553,28 @@ Texture.fromFramebuffer = function (options) {
     PixelFormat.isCompressedFormat(pixelFormat)
   ) {
     throw new DeveloperError(
-      "pixelFormat cannot be DEPTH_COMPONENT, DEPTH_STENCIL or a compressed format."
+      "pixelFormat cannot be DEPTH_COMPONENT, DEPTH_STENCIL or a compressed format.",
     );
   }
-  Check.defined("options.context", options.context);
+  Check.defined("options.context", context);
   Check.typeOf.number.greaterThanOrEquals(
     "framebufferXOffset",
     framebufferXOffset,
-    0
+    0,
   );
   Check.typeOf.number.greaterThanOrEquals(
     "framebufferYOffset",
     framebufferYOffset,
-    0
+    0,
   );
   if (framebufferXOffset + width > gl.drawingBufferWidth) {
     throw new DeveloperError(
-      "framebufferXOffset + width must be less than or equal to drawingBufferWidth"
+      "framebufferXOffset + width must be less than or equal to drawingBufferWidth",
     );
   }
   if (framebufferYOffset + height > gl.drawingBufferHeight) {
     throw new DeveloperError(
-      "framebufferYOffset + height must be less than or equal to drawingBufferHeight."
+      "framebufferYOffset + height must be less than or equal to drawingBufferHeight.",
     );
   }
   //>>includeEnd('debug');
@@ -538,60 +625,7 @@ Object.defineProperties(Texture.prototype, {
       return this._sampler;
     },
     set: function (sampler) {
-      let minificationFilter = sampler.minificationFilter;
-      let magnificationFilter = sampler.magnificationFilter;
-      const context = this._context;
-      const pixelFormat = this._pixelFormat;
-      const pixelDatatype = this._pixelDatatype;
-
-      const mipmap =
-        minificationFilter ===
-          TextureMinificationFilter.NEAREST_MIPMAP_NEAREST ||
-        minificationFilter ===
-          TextureMinificationFilter.NEAREST_MIPMAP_LINEAR ||
-        minificationFilter ===
-          TextureMinificationFilter.LINEAR_MIPMAP_NEAREST ||
-        minificationFilter === TextureMinificationFilter.LINEAR_MIPMAP_LINEAR;
-
-      // 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;
-      }
-
-      // WebGL 2 depth texture only support nearest filtering. See section 3.8.13 OpenGL ES 3 spec
-      if (context.webgl2) {
-        if (PixelFormat.isDepthFormat(pixelFormat)) {
-          minificationFilter = 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;
     },
   },
@@ -645,6 +679,66 @@ Object.defineProperties(Texture.prototype, {
   },
 });
 
+/**
+ * Set up a sampler for use with a texture
+ * @param {Texture} texture The texture to be sampled by this sampler
+ * @param {Sampler} sampler Information about how to sample the texture
+ * @private
+ */
+function setupSampler(texture, 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 = texture._context;
+  const pixelFormat = texture._pixelFormat;
+  const pixelDatatype = texture._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;
+  }
+
+  // WebGL 2 depth texture only support nearest filtering. See section 3.8.13 OpenGL ES 3 spec
+  if (context.webgl2) {
+    if (PixelFormat.isDepthFormat(pixelFormat)) {
+      minificationFilter = TextureMinificationFilter.NEAREST;
+      magnificationFilter = TextureMagnificationFilter.NEAREST;
+    }
+  }
+
+  const gl = context._gl;
+  const target = texture._textureTarget;
+
+  gl.activeTexture(gl.TEXTURE0);
+  gl.bindTexture(target, texture._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(texture._textureFilterAnisotropic)) {
+    gl.texParameteri(
+      target,
+      texture._textureFilterAnisotropic.TEXTURE_MAX_ANISOTROPY_EXT,
+      sampler.maximumAnisotropy,
+    );
+  }
+  gl.bindTexture(target, null);
+}
+
 /**
  * Copy new image data into this texture, from a source {@link ImageData}, {@link HTMLImageElement}, {@link HTMLCanvasElement}, or {@link HTMLVideoElement}.
  * or an object with width, height, and arrayBufferView properties.
@@ -677,37 +771,39 @@ Texture.prototype.copyFrom = function (options) {
   Check.defined("options", options);
   //>>includeEnd('debug');
 
-  const xOffset = defaultValue(options.xOffset, 0);
-  const yOffset = defaultValue(options.yOffset, 0);
+  const {
+    xOffset = 0,
+    yOffset = 0,
+    source,
+    skipColorSpaceConversion = false,
+  } = options;
 
   //>>includeStart('debug', pragmas.debug);
-  Check.defined("options.source", options.source);
+  Check.defined("options.source", source);
   if (PixelFormat.isDepthFormat(this._pixelFormat)) {
     throw new DeveloperError(
-      "Cannot call copyFrom when the texture pixel format is DEPTH_COMPONENT or DEPTH_STENCIL."
+      "Cannot call copyFrom when the texture pixel format is DEPTH_COMPONENT or DEPTH_STENCIL.",
     );
   }
   if (PixelFormat.isCompressedFormat(this._pixelFormat)) {
     throw new DeveloperError(
-      "Cannot call copyFrom with a compressed texture pixel format."
+      "Cannot call copyFrom with a compressed texture pixel format.",
     );
   }
   Check.typeOf.number.greaterThanOrEquals("xOffset", xOffset, 0);
   Check.typeOf.number.greaterThanOrEquals("yOffset", yOffset, 0);
   Check.typeOf.number.lessThanOrEquals(
     "xOffset + options.source.width",
-    xOffset + options.source.width,
-    this._width
+    xOffset + source.width,
+    this._width,
   );
   Check.typeOf.number.lessThanOrEquals(
     "yOffset + options.source.height",
-    yOffset + options.source.height,
-    this._height
+    yOffset + source.height,
+    this._height,
   );
   //>>includeEnd('debug');
 
-  const source = options.source;
-
   const context = this._context;
   const gl = context._gl;
   const target = this._textureTarget;
@@ -715,9 +811,17 @@ Texture.prototype.copyFrom = function (options) {
   gl.activeTexture(gl.TEXTURE0);
   gl.bindTexture(target, this._texture);
 
-  const width = source.width;
-  const height = source.height;
-  let arrayBufferView = source.arrayBufferView;
+  let { width, height } = source;
+  const arrayBufferView = source.arrayBufferView;
+
+  // Make sure we are using the element's intrinsic width and height where available
+  if (defined(source.videoWidth) && defined(source.videoHeight)) {
+    width = source.videoWidth;
+    height = source.videoHeight;
+  } else if (defined(source.naturalWidth) && defined(source.naturalHeight)) {
+    width = source.naturalWidth;
+    height = source.naturalHeight;
+  }
 
   const textureWidth = this._width;
   const textureHeight = this._height;
@@ -727,20 +831,15 @@ Texture.prototype.copyFrom = function (options) {
 
   const preMultiplyAlpha = this._preMultiplyAlpha;
   const flipY = this._flipY;
-  const skipColorSpaceConversion = defaultValue(
-    options.skipColorSpaceConversion,
-    false
-  );
 
   let unpackAlignment = 4;
   if (defined(arrayBufferView)) {
     unpackAlignment = PixelFormat.alignmentInBytes(
       pixelFormat,
       pixelDatatype,
-      width
+      width,
     );
   }
-
   gl.pixelStorei(gl.UNPACK_ALIGNMENT, unpackAlignment);
 
   if (skipColorSpaceConversion) {
@@ -748,12 +847,13 @@ Texture.prototype.copyFrom = function (options) {
   } else {
     gl.pixelStorei(
       gl.UNPACK_COLORSPACE_CONVERSION_WEBGL,
-      gl.BROWSER_DEFAULT_WEBGL
+      gl.BROWSER_DEFAULT_WEBGL,
     );
   }
 
   let uploaded = false;
   if (!this._initialized) {
+    let pixels;
     if (
       xOffset === 0 &&
       yOffset === 0 &&
@@ -764,108 +864,83 @@ Texture.prototype.copyFrom = function (options) {
       if (defined(arrayBufferView)) {
         gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
         gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
-
         if (flipY) {
-          arrayBufferView = PixelFormat.flipY(
+          pixels = PixelFormat.flipY(
             arrayBufferView,
             pixelFormat,
             pixelDatatype,
             textureWidth,
-            textureHeight
+            textureHeight,
           );
+        } else {
+          pixels = arrayBufferView;
         }
-        gl.texImage2D(
-          target,
-          0,
-          internalFormat,
-          textureWidth,
-          textureHeight,
-          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);
-
-        gl.texImage2D(
-          target,
-          0,
-          internalFormat,
-          pixelFormat,
-          PixelDatatype.toWebGLConstant(pixelDatatype, context),
-          source
-        );
+        pixels = source;
       }
       uploaded = true;
     } else {
       gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
       gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
-
       // initialize the entire texture to zero
-      const bufferView = PixelFormat.createTypedArray(
+      pixels = PixelFormat.createTypedArray(
         pixelFormat,
         pixelDatatype,
         textureWidth,
-        textureHeight
-      );
-      gl.texImage2D(
-        target,
-        0,
-        internalFormat,
-        textureWidth,
         textureHeight,
-        0,
-        pixelFormat,
-        PixelDatatype.toWebGLConstant(pixelDatatype, context),
-        bufferView
       );
     }
+    gl.texImage2D(
+      target,
+      0,
+      internalFormat,
+      textureWidth,
+      textureHeight,
+      0,
+      pixelFormat,
+      PixelDatatype.toWebGLConstant(pixelDatatype, context),
+      pixels,
+    );
     this._initialized = true;
   }
 
   if (!uploaded) {
+    let pixels;
     if (defined(arrayBufferView)) {
       gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
       gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
 
       if (flipY) {
-        arrayBufferView = PixelFormat.flipY(
+        pixels = PixelFormat.flipY(
           arrayBufferView,
           pixelFormat,
           pixelDatatype,
           width,
-          height
+          height,
         );
+      } else {
+        pixels = arrayBufferView;
       }
-      gl.texSubImage2D(
-        target,
-        0,
-        xOffset,
-        yOffset,
-        width,
-        height,
-        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);
-
-      gl.texSubImage2D(
-        target,
-        0,
-        xOffset,
-        yOffset,
-        pixelFormat,
-        PixelDatatype.toWebGLConstant(pixelDatatype, context),
-        source
-      );
+      pixels = source;
     }
+    gl.texSubImage2D(
+      target,
+      0,
+      xOffset,
+      yOffset,
+      width,
+      height,
+      pixelFormat,
+      PixelDatatype.toWebGLConstant(pixelDatatype, context),
+      pixels,
+    );
   }
 
   gl.bindTexture(target, null);
@@ -897,7 +972,7 @@ Texture.prototype.copyFromFramebuffer = function (
   framebufferXOffset,
   framebufferYOffset,
   width,
-  height
+  height,
 ) {
   xOffset = defaultValue(xOffset, 0);
   yOffset = defaultValue(yOffset, 0);
@@ -909,22 +984,22 @@ Texture.prototype.copyFromFramebuffer = function (
   //>>includeStart('debug', pragmas.debug);
   if (PixelFormat.isDepthFormat(this._pixelFormat)) {
     throw new DeveloperError(
-      "Cannot call copyFromFramebuffer when the texture pixel format is DEPTH_COMPONENT or DEPTH_STENCIL."
+      "Cannot call copyFromFramebuffer when the texture pixel format is DEPTH_COMPONENT or DEPTH_STENCIL.",
     );
   }
   if (this._pixelDatatype === PixelDatatype.FLOAT) {
     throw new DeveloperError(
-      "Cannot call copyFromFramebuffer when the texture pixel data type is FLOAT."
+      "Cannot call copyFromFramebuffer when the texture pixel data type is FLOAT.",
     );
   }
   if (this._pixelDatatype === PixelDatatype.HALF_FLOAT) {
     throw new DeveloperError(
-      "Cannot call copyFromFramebuffer when the texture pixel data type is HALF_FLOAT."
+      "Cannot call copyFromFramebuffer when the texture pixel data type is HALF_FLOAT.",
     );
   }
   if (PixelFormat.isCompressedFormat(this._pixelFormat)) {
     throw new DeveloperError(
-      "Cannot call copyFrom with a compressed texture pixel format."
+      "Cannot call copyFrom with a compressed texture pixel format.",
     );
   }
 
@@ -933,22 +1008,22 @@ Texture.prototype.copyFromFramebuffer = function (
   Check.typeOf.number.greaterThanOrEquals(
     "framebufferXOffset",
     framebufferXOffset,
-    0
+    0,
   );
   Check.typeOf.number.greaterThanOrEquals(
     "framebufferYOffset",
     framebufferYOffset,
-    0
+    0,
   );
   Check.typeOf.number.lessThanOrEquals(
     "xOffset + width",
     xOffset + width,
-    this._width
+    this._width,
   );
   Check.typeOf.number.lessThanOrEquals(
     "yOffset + height",
     yOffset + height,
-    this._height
+    this._height,
   );
   //>>includeEnd('debug');
 
@@ -965,7 +1040,7 @@ Texture.prototype.copyFromFramebuffer = function (
     framebufferXOffset,
     framebufferYOffset,
     width,
-    height
+    height,
   );
   gl.bindTexture(target, null);
   this._initialized = true;
@@ -987,23 +1062,23 @@ Texture.prototype.generateMipmap = function (hint) {
   //>>includeStart('debug', pragmas.debug);
   if (PixelFormat.isDepthFormat(this._pixelFormat)) {
     throw new DeveloperError(
-      "Cannot call generateMipmap when the texture pixel format is DEPTH_COMPONENT or DEPTH_STENCIL."
+      "Cannot call generateMipmap when the texture pixel format is DEPTH_COMPONENT or DEPTH_STENCIL.",
     );
   }
   if (PixelFormat.isCompressedFormat(this._pixelFormat)) {
     throw new DeveloperError(
-      "Cannot call generateMipmap with a compressed pixel format."
+      "Cannot call generateMipmap with a compressed pixel format.",
     );
   }
   if (!this._context.webgl2) {
     if (this._width > 1 && !CesiumMath.isPowerOfTwo(this._width)) {
       throw new DeveloperError(
-        "width must be a power of two to call generateMipmap() in a WebGL1 context."
+        "width must be a power of two to call generateMipmap() in a WebGL1 context.",
       );
     }
     if (this._height > 1 && !CesiumMath.isPowerOfTwo(this._height)) {
       throw new DeveloperError(
-        "height must be a power of two to call generateMipmap() in a WebGL1 context."
+        "height must be a power of two to call generateMipmap() in a WebGL1 context.",
       );
     }
   }