@cesium/engine 10.0.0 → 11.0.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,11 +48,17 @@ 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)) {
     if (!defined(width)) {
       width = defaultValue(source.videoWidth, source.width);
@@ -38,11 +68,13 @@ function Texture(options) {
     }
   }
 
-  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,
@@ -177,225 +209,278 @@ function Texture(options) {
   }
   //>>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);
+}
 
-      gl.copyTexImage2D(
+/**
+ * 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
+  );
+
+  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;
+
+  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
+  );
 
-      // Source: ImageData, HTMLImageElement, HTMLCanvasElement, or HTMLVideoElement
+  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 +534,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)) {
@@ -469,7 +555,7 @@ Texture.fromFramebuffer = function (options) {
       "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,
@@ -538,60 +624,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 +678,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,11 +770,15 @@ 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."
@@ -696,18 +793,16 @@ Texture.prototype.copyFrom = function (options) {
   Check.typeOf.number.greaterThanOrEquals("yOffset", yOffset, 0);
   Check.typeOf.number.lessThanOrEquals(
     "xOffset + options.source.width",
-    xOffset + options.source.width,
+    xOffset + source.width,
     this._width
   );
   Check.typeOf.number.lessThanOrEquals(
     "yOffset + options.source.height",
-    yOffset + options.source.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 +810,7 @@ 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;
+  const { width, height, arrayBufferView } = source;
 
   const textureWidth = this._width;
   const textureHeight = this._height;
@@ -727,10 +820,6 @@ 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)) {
@@ -740,7 +829,6 @@ Texture.prototype.copyFrom = function (options) {
       width
     );
   }
-
   gl.pixelStorei(gl.UNPACK_ALIGNMENT, unpackAlignment);
 
   if (skipColorSpaceConversion) {
@@ -754,6 +842,7 @@ Texture.prototype.copyFrom = function (options) {
 
   let uploaded = false;
   if (!this._initialized) {
+    let pixels;
     if (
       xOffset === 0 &&
       yOffset === 0 &&
@@ -764,108 +853,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
           );
+        } 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
         );
+      } 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);