@luma.gl/webgl 9.0.0-alpha.14 → 9.0.0-alpha.16

package/dist/adapter/resources/webgl-texture.js

@@ -1,832 +1,678 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+// luma.gl, MIT license
+// Texture class.
+// @todo
+// - [ ] cube texture init params
+// - [ ] video (external) textures
 import { isObjectEmpty } from '@luma.gl/api';
 import { Texture, cast, log, assert, isPowerOfTwo, loadImage } from '@luma.gl/api';
 import GL from '@luma.gl/constants';
-import { withParameters } from '../../context/state-tracker/with-parameters';
-import { getWebGLTextureFormat, getWebGLTextureParameters, getTextureFormatBytesPerPixel } from '../converters/texture-formats';
-import { convertSamplerParametersToWebGL, updateSamplerParametersForNPOT } from '../converters/sampler-parameters';
-import WEBGLBuffer from './webgl-buffer';
-import WEBGLSampler from './webgl-sampler';
-export default class WEBGLTexture extends Texture {
-  constructor(device, props) {
-    var _this$props;
-
-    super(device, {
-      format: GL.RGBA,
-      ...props
-    });
-
-    _defineProperty(this, "MAX_ATTRIBUTES", void 0);
-
-    _defineProperty(this, "device", void 0);
-
-    _defineProperty(this, "gl", void 0);
-
-    _defineProperty(this, "gl2", void 0);
-
-    _defineProperty(this, "handle", void 0);
-
-    _defineProperty(this, "data", void 0);
-
-    _defineProperty(this, "width", undefined);
-
-    _defineProperty(this, "height", undefined);
-
-    _defineProperty(this, "depth", undefined);
-
-    _defineProperty(this, "format", undefined);
-
-    _defineProperty(this, "type", undefined);
-
-    _defineProperty(this, "dataFormat", undefined);
-
-    _defineProperty(this, "mipmaps", undefined);
-
-    _defineProperty(this, "target", void 0);
-
-    _defineProperty(this, "textureUnit", undefined);
-
-    _defineProperty(this, "sampler", undefined);
-
-    _defineProperty(this, "loaded", false);
-
-    _defineProperty(this, "_video", void 0);
-
-    this.device = cast(device);
-    this.gl = this.device.gl;
-    this.gl2 = this.device.gl2;
-    this.handle = this.props.handle || this.gl.createTexture();
-    this.handle.__SPECTOR_Metadata = { ...this.props,
-      data: typeof this.props.data
-    };
-    this.target = getWebGLTextureTarget(this.props);
-    this.loaded = false;
-
-    if (typeof ((_this$props = this.props) === null || _this$props === void 0 ? void 0 : _this$props.data) === 'string') {
-      Object.assign(this.props, {
-        data: loadImage(this.props.data)
-      });
-    }
-
-    this.initialize(this.props);
-    Object.seal(this);
-  }
-
-  destroy() {
-    if (this.handle) {
-      this.gl.deleteTexture(this.handle);
-      this.removeStats();
-      this.trackDeallocatedMemory('Texture');
-      this.destroyed = true;
-    }
-  }
-
-  toString() {
-    return "Texture(".concat(this.id, ",").concat(this.width, "x").concat(this.height, ")");
-  }
-
-  initialize(props = {}) {
-    if (this.props.dimension === 'cube') {
-      return this.initializeCube(props);
-    }
-
-    let data = props.data;
-
-    if (data instanceof Promise) {
-      data.then(resolvedImageData => this.initialize(Object.assign({}, props, {
-        pixels: resolvedImageData,
-        data: resolvedImageData
-      })));
-      return this;
-    }
-
-    const isVideo = typeof HTMLVideoElement !== 'undefined' && data instanceof HTMLVideoElement;
-
-    if (isVideo && data.readyState < HTMLVideoElement.HAVE_METADATA) {
-      this._video = null;
-      data.addEventListener('loadeddata', () => this.initialize(props));
-      return this;
-    }
-
-    let {
-      parameters = {}
-    } = props;
-    const {
-      pixels = null,
-      recreate = false,
-      pixelStore = {},
-      textureUnit = undefined
-    } = props;
-
-    if (!data) {
-      data = pixels;
-    }
-
-    let {
-      width,
-      height,
-      dataFormat,
-      type,
-      compressed = false,
-      mipmaps = true
-    } = props;
-    const {
-      depth = 0
-    } = props;
-    ({
-      width,
-      height,
-      compressed,
-      dataFormat,
-      type
-    } = this._deduceParameters({
-      format: props.format,
-      type,
-      dataFormat,
-      compressed,
-      data,
-      width,
-      height
-    }));
-    const format = getWebGLTextureFormat(this.gl, props.format);
-    this.width = width;
-    this.height = height;
-    this.depth = depth;
-    this.format = format;
-    this.type = type;
-    this.dataFormat = dataFormat;
-    this.textureUnit = textureUnit;
-
-    if (Number.isFinite(this.textureUnit)) {
-      this.gl.activeTexture(GL.TEXTURE0 + this.textureUnit);
-      this.gl.bindTexture(this.target, this.handle);
-    }
-
-    if (mipmaps && this.device.isWebGL1 && isNPOT(this.width, this.height)) {
-      log.warn("texture: ".concat(this, " is Non-Power-Of-Two, disabling mipmaps"))();
-      mipmaps = false;
-    }
-
-    this.mipmaps = mipmaps;
-    this.setImageData({
-      data,
-      width,
-      height,
-      depth,
-      format,
-      type,
-      dataFormat,
-      parameters: pixelStore,
-      compressed
-    });
-    this.setSampler(props.sampler);
-
-    this._setSamplerParameters(parameters);
-
-    if (mipmaps) {
-      this.generateMipmap();
-    }
-
-    if (recreate) {
-      this.data = data;
+import { withParameters } from '../../context/state-tracker/with-parameters.js';
+import { getWebGLTextureFormat, getWebGLTextureParameters, getTextureFormatBytesPerPixel } from '../converters/texture-formats.js';
+import { convertSamplerParametersToWebGL, updateSamplerParametersForNPOT } from '../converters/sampler-parameters.js';
+import WEBGLBuffer from './webgl-buffer.js';
+import WEBGLSampler from './webgl-sampler.js';
+// Polyfill
+class WEBGLTexture extends Texture {
+    constructor(device, props) {
+        super(device, { format: GL.RGBA, ...props });
+        this.width = undefined;
+        this.height = undefined;
+        this.depth = undefined;
+        this.format = undefined;
+        this.type = undefined;
+        this.dataFormat = undefined;
+        this.mipmaps = undefined;
+        this.textureUnit = undefined;
+        /** Sampler object (currently unused) */
+        this.sampler = undefined;
+        /**
+         * Program.draw() checks the loaded flag of all textures to avoid
+         * Textures that are still loading from promises
+         * Set to true as soon as texture has been initialized with valid data
+         */
+        this.loaded = false;
+        this.device = cast(device);
+        this.gl = this.device.gl;
+        this.gl2 = this.device.gl2;
+        this.handle = this.props.handle || this.gl.createTexture();
+        // @ts-expect-error Per SPECTOR docs
+        this.handle.__SPECTOR_Metadata = { ...this.props, data: typeof this.props.data }; // {name: this.props.id};
+        this.target = getWebGLTextureTarget(this.props);
+        // Program.draw() checks the loaded flag of all textures
+        this.loaded = false;
+        // Signature: new Texture2D(gl, {data: url})
+        if (typeof this.props?.data === 'string') {
+            Object.assign(this.props, { data: loadImage(this.props.data) });
+        }
+        this.initialize(this.props);
+        Object.seal(this);
+    }
+    destroy() {
+        if (this.handle) {
+            this.gl.deleteTexture(this.handle);
+            this.removeStats();
+            this.trackDeallocatedMemory('Texture');
+            // this.handle = null;
+            this.destroyed = true;
+        }
     }
-
-    if (isVideo) {
-      this._video = {
-        video: data,
-        parameters,
-        lastTime: data.readyState >= HTMLVideoElement.HAVE_CURRENT_DATA ? data.currentTime : -1
-      };
+    toString() {
+        return `Texture(${this.id},${this.width}x${this.height})`;
     }
-
-    return this;
-  }
-
-  initializeCube(props) {
-    const {
-      mipmaps = true,
-      parameters = {}
-    } = props;
-    this.setCubeMapImageData(props).then(() => {
-      this.loaded = true;
-
-      if (mipmaps) {
-        this.generateMipmap(props);
-      }
-
-      this.setSampler(props.sampler);
-
-      this._setSamplerParameters(parameters);
-    });
-    return this;
-  }
-
-  setSampler(sampler = {}) {
-    let samplerProps;
-
-    if (sampler instanceof WEBGLSampler) {
-      this.sampler = sampler;
-      samplerProps = sampler.props;
-    } else {
-      this.sampler = new WEBGLSampler(this.device, sampler);
-      samplerProps = sampler;
+    // eslint-disable-next-line max-statements
+    initialize(props = {}) {
+        // Cube textures
+        if (this.props.dimension === 'cube') {
+            return this.initializeCube(props);
+        }
+        let data = props.data;
+        if (data instanceof Promise) {
+            data.then((resolvedImageData) => this.initialize(Object.assign({}, props, {
+                pixels: resolvedImageData,
+                data: resolvedImageData
+            })));
+            return this;
+        }
+        const isVideo = typeof HTMLVideoElement !== 'undefined' && data instanceof HTMLVideoElement;
+        // @ts-expect-error
+        if (isVideo && data.readyState < HTMLVideoElement.HAVE_METADATA) {
+            this._video = null; // Declare member before the object is sealed
+            // @ts-expect-error
+            data.addEventListener('loadeddata', () => this.initialize(props));
+            return this;
+        }
+        let { parameters = {} } = props;
+        const { pixels = null, recreate = false, pixelStore = {}, textureUnit = undefined } = props;
+        // pixels variable is for API compatibility purpose
+        if (!data) {
+            // TODO - This looks backwards? Commenting out for now until we decide
+            // which prop to use
+            // log.deprecated('data', 'pixels')();
+            data = pixels;
+        }
+        let { width, height, dataFormat, type, compressed = false, mipmaps = true } = props;
+        const { depth = 0 } = props;
+        // Deduce width and height
+        ({ width, height, compressed, dataFormat, type } = this._deduceParameters({
+            format: props.format,
+            type,
+            dataFormat,
+            compressed,
+            data,
+            width,
+            height
+        }));
+        const format = getWebGLTextureFormat(this.gl, props.format);
+        // Store opts for accessors
+        this.width = width;
+        this.height = height;
+        this.depth = depth;
+        this.format = format;
+        this.type = type;
+        this.dataFormat = dataFormat;
+        this.textureUnit = textureUnit;
+        if (Number.isFinite(this.textureUnit)) {
+            this.gl.activeTexture(GL.TEXTURE0 + this.textureUnit);
+            this.gl.bindTexture(this.target, this.handle);
+        }
+        if (mipmaps && this.device.isWebGL1 && isNPOT(this.width, this.height)) {
+            log.warn(`texture: ${this} is Non-Power-Of-Two, disabling mipmaps`)();
+            mipmaps = false;
+        }
+        this.mipmaps = mipmaps;
+        this.setImageData({
+            data,
+            width,
+            height,
+            depth,
+            format,
+            type,
+            dataFormat,
+            // @ts-expect-error 
+            parameters: pixelStore,
+            compressed
+        });
+        // Set texture sampler parameters
+        this.setSampler(props.sampler);
+        this._setSamplerParameters(parameters);
+        if (mipmaps) {
+            this.generateMipmap();
+        }
+        // TODO - Store data to enable auto recreate on context loss
+        if (recreate) {
+            this.data = data;
+        }
+        if (isVideo) {
+            this._video = {
+                video: data,
+                parameters,
+                // @ts-expect-error
+                lastTime: data.readyState >= HTMLVideoElement.HAVE_CURRENT_DATA ? data.currentTime : -1
+            };
+        }
+        return this;
+    }
+    initializeCube(props) {
+        const { mipmaps = true, parameters = {} } = props;
+        // Store props for accessors
+        // this.props = props;
+        // @ts-expect-error
+        this.setCubeMapImageData(props).then(() => {
+            this.loaded = true;
+            // TODO - should genMipmap() be called on the cubemap or on the faces?
+            // TODO - without generateMipmap() cube textures do not work at all!!! Why?
+            if (mipmaps) {
+                this.generateMipmap(props);
+            }
+            this.setSampler(props.sampler);
+            this._setSamplerParameters(parameters);
+        });
+        return this;
+    }
+    setSampler(sampler = {}) {
+        let samplerProps;
+        if (sampler instanceof WEBGLSampler) {
+            this.sampler = sampler;
+            samplerProps = sampler.props;
+        }
+        else {
+            this.sampler = new WEBGLSampler(this.device, sampler);
+            samplerProps = sampler;
+        }
+        // TODO - technically, this is only needed in WebGL1. In WebGL2 we could always use the sampler.
+        const parameters = convertSamplerParametersToWebGL(samplerProps);
+        this._setSamplerParameters(parameters);
+        return this;
+    }
+    /**
+     * If size has changed, reinitializes with current format
+     * @note note clears image and mipmaps
+     */
+    resize(options) {
+        const { height, width, mipmaps = false } = options;
+        if (width !== this.width || height !== this.height) {
+            return this.initialize({
+                width,
+                height,
+                format: this.format,
+                type: this.type,
+                dataFormat: this.dataFormat,
+                mipmaps
+            });
+        }
+        return this;
+    }
+    /** Update external texture (video frame) */
+    update() {
+        if (this._video) {
+            const { video, parameters, lastTime } = this._video;
+            // @ts-expect-error
+            if (lastTime === video.currentTime || video.readyState < HTMLVideoElement.HAVE_CURRENT_DATA) {
+                return;
+            }
+            this.setSubImageData({
+                data: video,
+                parameters
+            });
+            if (this.mipmaps) {
+                this.generateMipmap();
+            }
+            this._video.lastTime = video.currentTime;
+        }
     }
-
-    const parameters = convertSamplerParametersToWebGL(samplerProps);
-
-    this._setSamplerParameters(parameters);
-
-    return this;
-  }
-
-  resize(options) {
-    const {
-      height,
-      width,
-      mipmaps = false
-    } = options;
-
-    if (width !== this.width || height !== this.height) {
-      return this.initialize({
-        width,
-        height,
-        format: this.format,
-        type: this.type,
-        dataFormat: this.dataFormat,
-        mipmaps
-      });
+    // Call to regenerate mipmaps after modifying texture(s)
+    generateMipmap(params = {}) {
+        if (this.device.isWebGL1 && isNPOT(this.width, this.height)) {
+            log.warn(`texture: ${this} is Non-Power-Of-Two, disabling mipmaping`)();
+            return this;
+        }
+        this.mipmaps = true;
+        this.gl.bindTexture(this.target, this.handle);
+        withParameters(this.gl, params, () => {
+            this.gl.generateMipmap(this.target);
+        });
+        this.gl.bindTexture(this.target, null);
+        return this;
+    }
+    /*
+     * Allocates storage
+     * @param {*} pixels -
+     *  null - create empty texture of specified format
+     *  Typed array - init from image data in typed array
+     *  Buffer|WebGLBuffer - (WEBGL2) init from image data in WebGLBuffer
+     *  HTMLImageElement|Image - Inits with content of image. Auto width/height
+     *  HTMLCanvasElement - Inits with contents of canvas. Auto width/height
+     *  HTMLVideoElement - Creates video texture. Auto width/height
+     *
+     * @param  width -
+     * @param  height -
+     * @param  mipMapLevel -
+     * @param {GLenum} format - format of image data.
+     * @param {GLenum} type
+     *  - format of array (autodetect from type) or
+     *  - (WEBGL2) format of buffer
+     * @param {Number} offset - (WEBGL2) offset from start of buffer
+     * @parameters - temporary settings to be applied, can be used to supply pixel store settings.
+     */
+    // eslint-disable-next-line max-statements, complexity
+    setImageData(options) {
+        if (this.props.dimension === '3d') {
+            return this.setImageData3D(options);
+        }
+        this.trackDeallocatedMemory('Texture');
+        const { target = this.target, pixels = null, level = 0, format = this.format, offset = 0, parameters = {} } = options;
+        let { data = null, type = this.type, width = this.width, height = this.height, dataFormat = this.dataFormat, compressed = false } = options;
+        // pixels variable is  for API compatibility purpose
+        if (!data) {
+            data = pixels;
+        }
+        ({ type, dataFormat, compressed, width, height } = this._deduceParameters({
+            format: this.props.format,
+            type,
+            dataFormat,
+            compressed,
+            data,
+            width,
+            height
+        }));
+        const { gl } = this;
+        gl.bindTexture(this.target, this.handle);
+        let dataType = null;
+        ({ data, dataType } = this._getDataType({ data, compressed }));
+        let gl2;
+        withParameters(this.gl, parameters, () => {
+            switch (dataType) {
+                case 'null':
+                    gl.texImage2D(target, level, format, width, height, 0 /*border*/, dataFormat, type, data);
+                    break;
+                case 'typed-array':
+                    // Looks like this assert is not necessary, as offset is ignored under WebGL1
+                    // assert((offset === 0 || this.device.isWebGL2), 'offset supported in WebGL2 only');
+                    gl.texImage2D(target, level, format, width, height, 0, // border (must be 0)
+                    dataFormat, type, data, 
+                    // @ts-expect-error
+                    offset);
+                    break;
+                case 'buffer':
+                    // WebGL2 enables creating textures directly from a WebGL buffer
+                    gl2 = this.device.assertWebGL2();
+                    gl2.bindBuffer(GL.PIXEL_UNPACK_BUFFER, data.handle || data);
+                    gl2.texImage2D(target, level, format, width, height, 0 /*border*/, dataFormat, type, offset);
+                    gl2.bindBuffer(GL.PIXEL_UNPACK_BUFFER, null);
+                    break;
+                case 'browser-object':
+                    if (this.device.isWebGL2) {
+                        gl.texImage2D(target, level, format, width, height, 0 /*border*/, dataFormat, type, data);
+                    }
+                    else {
+                        gl.texImage2D(target, level, format, dataFormat, type, data);
+                    }
+                    break;
+                case 'compressed':
+                    for (const [levelIndex, levelData] of data.entries()) {
+                        gl.compressedTexImage2D(target, levelIndex, levelData.format, levelData.width, levelData.height, 0 /* border, must be 0 */, levelData.data);
+                    }
+                    break;
+                default:
+                    assert(false, 'Unknown image data type');
+            }
+        });
+        if (data && data.byteLength) {
+            this.trackAllocatedMemory(data.byteLength, 'Texture');
+        }
+        else {
+            const bytesPerPixel = getTextureFormatBytesPerPixel(this.gl, this.props.format);
+            this.trackAllocatedMemory(this.width * this.height * bytesPerPixel, 'Texture');
+        }
+        this.loaded = true;
+        return this;
+    }
+    /**
+     * Redefines an area of an existing texture
+     * Note: does not allocate storage
+     * Redefines an area of an existing texture
+     */
+    setSubImageData({ target = this.target, pixels = null, data = null, x = 0, y = 0, width = this.width, height = this.height, level = 0, format = this.format, type = this.type, dataFormat = this.dataFormat, compressed = false, offset = 0, parameters = {} }) {
+        ({ type, dataFormat, compressed, width, height } = this._deduceParameters({
+            format: this.props.format,
+            type,
+            dataFormat,
+            compressed,
+            data,
+            width,
+            height
+        }));
+        assert(this.depth === 1, 'texSubImage not supported for 3D textures');
+        // pixels variable is  for API compatibility purpose
+        if (!data) {
+            data = pixels;
+        }
+        // Support ndarrays
+        if (data && data.data) {
+            const ndarray = data;
+            data = ndarray.data;
+            width = ndarray.shape[0];
+            height = ndarray.shape[1];
+        }
+        // Support buffers
+        if (data instanceof WEBGLBuffer) {
+            data = data.handle;
+        }
+        this.gl.bindTexture(this.target, this.handle);
+        withParameters(this.gl, parameters, () => {
+            // TODO - x,y parameters
+            if (compressed) {
+                this.gl.compressedTexSubImage2D(target, level, x, y, width, height, format, data);
+            }
+            else if (data === null) {
+                this.gl.texSubImage2D(target, level, x, y, width, height, dataFormat, type, null);
+            }
+            else if (ArrayBuffer.isView(data)) {
+                // const gl2 = this.device.assertWebGL2();
+                // @ts-expect-error last offset parameter is ignored under WebGL1
+                this.gl.texSubImage2D(target, level, x, y, width, height, dataFormat, type, data, offset);
+            }
+            else if (typeof WebGLBuffer !== 'undefined' && data instanceof WebGLBuffer) {
+                // WebGL2 allows us to create texture directly from a WebGL buffer
+                const gl2 = this.device.assertWebGL2();
+                // This texImage2D signature uses currently bound GL.PIXEL_UNPACK_BUFFER
+                gl2.bindBuffer(GL.PIXEL_UNPACK_BUFFER, data);
+                gl2.texSubImage2D(target, level, x, y, width, height, dataFormat, type, offset);
+                gl2.bindBuffer(GL.PIXEL_UNPACK_BUFFER, null);
+            }
+            else if (this.device.isWebGL2) {
+                // Assume data is a browser supported object (ImageData, Canvas, ...)
+                const gl2 = this.device.assertWebGL2();
+                gl2.texSubImage2D(target, level, x, y, width, height, dataFormat, type, data);
+            }
+            else {
+                this.gl.texSubImage2D(target, level, x, y, dataFormat, type, data);
+            }
+        });
+        this.gl.bindTexture(this.target, null);
+    }
+    /**
+     * Defines a two-dimensional texture image or cube-map texture image with
+     * pixels from the current framebuffer (rather than from client memory).
+     * (gl.copyTexImage2D wrapper)
+     *
+     * Note that binding a texture into a Framebuffer's color buffer and
+     * rendering can be faster.
+     */
+    copyFramebuffer(opts = {}) {
+        log.error('Texture.copyFramebuffer({...}) is no logner supported, use copyToTexture(source, target, opts})')();
+        return null;
+    }
+    getActiveUnit() {
+        return this.gl.getParameter(GL.ACTIVE_TEXTURE) - GL.TEXTURE0;
+    }
+    bind(textureUnit = this.textureUnit) {
+        const { gl } = this;
+        if (textureUnit !== undefined) {
+            this.textureUnit = textureUnit;
+            gl.activeTexture(gl.TEXTURE0 + textureUnit);
+        }
+        gl.bindTexture(this.target, this.handle);
+        return textureUnit;
+    }
+    unbind(textureUnit = this.textureUnit) {
+        const { gl } = this;
+        if (textureUnit !== undefined) {
+            this.textureUnit = textureUnit;
+            gl.activeTexture(gl.TEXTURE0 + textureUnit);
+        }
+        gl.bindTexture(this.target, null);
+        return textureUnit;
     }
-
-    return this;
-  }
-
-  update() {
-    if (this._video) {
-      const {
-        video,
-        parameters,
-        lastTime
-      } = this._video;
-
-      if (lastTime === video.currentTime || video.readyState < HTMLVideoElement.HAVE_CURRENT_DATA) {
+    // PRIVATE METHODS
+    _getDataType({ data, compressed = false }) {
+        if (compressed) {
+            return { data, dataType: 'compressed' };
+        }
+        if (data === null) {
+            return { data, dataType: 'null' };
+        }
+        if (ArrayBuffer.isView(data)) {
+            return { data, dataType: 'typed-array' };
+        }
+        if (data instanceof WEBGLBuffer) {
+            return { data: data.handle, dataType: 'buffer' };
+        }
+        // Raw WebGL handle (not a luma wrapper)
+        if (typeof WebGLBuffer !== 'undefined' && data instanceof WebGLBuffer) {
+            return { data, dataType: 'buffer' };
+        }
+        // Assume data is a browser supported object (ImageData, Canvas, ...)
+        return { data, dataType: 'browser-object' };
+    }
+    // HELPER METHODS
+    _deduceParameters(opts) {
+        const { format, data } = opts;
+        let { width, height, dataFormat, type, compressed } = opts;
+        // Deduce format and type from format
+        const parameters = getWebGLTextureParameters(this.gl, format);
+        dataFormat = dataFormat || parameters.dataFormat;
+        type = type || parameters.type;
+        compressed = compressed || parameters.compressed;
+        ({ width, height } = this._deduceImageSize(data, width, height));
+        return { dataFormat, type, compressed, width, height, format, data };
+    }
+    // eslint-disable-next-line complexity
+    _deduceImageSize(data, width, height) {
+        let size;
+        if (typeof ImageData !== 'undefined' && data instanceof ImageData) {
+            size = { width: data.width, height: data.height };
+        }
+        else if (typeof HTMLImageElement !== 'undefined' && data instanceof HTMLImageElement) {
+            size = { width: data.naturalWidth, height: data.naturalHeight };
+        }
+        else if (typeof HTMLCanvasElement !== 'undefined' && data instanceof HTMLCanvasElement) {
+            size = { width: data.width, height: data.height };
+        }
+        else if (typeof ImageBitmap !== 'undefined' && data instanceof ImageBitmap) {
+            size = { width: data.width, height: data.height };
+        }
+        else if (typeof HTMLVideoElement !== 'undefined' && data instanceof HTMLVideoElement) {
+            size = { width: data.videoWidth, height: data.videoHeight };
+        }
+        else if (!data) {
+            size = { width: width >= 0 ? width : 1, height: height >= 0 ? height : 1 };
+        }
+        else {
+            size = { width, height };
+        }
+        assert(size, 'Could not deduced texture size');
+        assert(width === undefined || size.width === width, 'Deduced texture width does not match supplied width');
+        assert(height === undefined || size.height === height, 'Deduced texture height does not match supplied height');
+        return size;
+    }
+    // CUBE MAP METHODS
+    /* eslint-disable max-statements, max-len */
+    async setCubeMapImageData(options) {
+        const { gl } = this;
+        const { width, height, pixels, data, format = GL.RGBA, type = GL.UNSIGNED_BYTE } = options;
+        const imageDataMap = pixels || data;
+        // pixel data (imageDataMap) is an Object from Face to Image or Promise.
+        // For example:
+        // {
+        // GL.TEXTURE_CUBE_MAP_POSITIVE_X : Image-or-Promise,
+        // GL.TEXTURE_CUBE_MAP_NEGATIVE_X : Image-or-Promise,
+        // ... }
+        // To provide multiple level-of-details (LODs) this can be Face to Array
+        // of Image or Promise, like this
+        // {
+        // GL.TEXTURE_CUBE_MAP_POSITIVE_X : [Image-or-Promise-LOD-0, Image-or-Promise-LOD-1],
+        // GL.TEXTURE_CUBE_MAP_NEGATIVE_X : [Image-or-Promise-LOD-0, Image-or-Promise-LOD-1],
+        // ... }
+        const resolvedFaces = await Promise.all(WEBGLTexture.FACES.map((face) => {
+            const facePixels = imageDataMap[face];
+            return Promise.all(Array.isArray(facePixels) ? facePixels : [facePixels]);
+        }));
+        this.bind();
+        WEBGLTexture.FACES.forEach((face, index) => {
+            if (resolvedFaces[index].length > 1 && this.props.mipmaps !== false) {
+                // If the user provides multiple LODs, then automatic mipmap
+                // generation generateMipmap() should be disabled to avoid overwritting them.
+                log.warn(`${this.id} has mipmap and multiple LODs.`)();
+            }
+            resolvedFaces[index].forEach((image, lodLevel) => {
+                // TODO: adjust width & height for LOD!
+                if (width && height) {
+                    gl.texImage2D(face, lodLevel, format, width, height, 0 /*border*/, format, type, image);
+                }
+                else {
+                    gl.texImage2D(face, lodLevel, format, format, type, image);
+                }
+            });
+        });
+        this.unbind();
+    }
+    /** @todo update this method to accept LODs */
+    setImageDataForFace(options) {
+        const { face, width, height, pixels, data, format = GL.RGBA, type = GL.UNSIGNED_BYTE
+        // generateMipmap = false // TODO
+         } = options;
+        const { gl } = this;
+        const imageData = pixels || data;
+        this.bind();
+        if (imageData instanceof Promise) {
+            imageData.then((resolvedImageData) => this.setImageDataForFace(Object.assign({}, options, {
+                face,
+                data: resolvedImageData,
+                pixels: resolvedImageData
+            })));
+        }
+        else if (this.width || this.height) {
+            gl.texImage2D(face, 0, format, width, height, 0 /*border*/, format, type, imageData);
+        }
+        else {
+            gl.texImage2D(face, 0, format, format, type, imageData);
+        }
+        return this;
+    }
+    /** Image 3D copies from Typed Array or WebGLBuffer */
+    setImageData3D(options) {
+        const { level = 0, dataFormat, format, type, // = GL.UNSIGNED_BYTE,
+        width, height, depth = 1, offset = 0, data, parameters = {} } = options;
+        this.trackDeallocatedMemory('Texture');
+        this.gl.bindTexture(this.target, this.handle);
+        const webglTextureFormat = getWebGLTextureParameters(this.gl, format);
+        withParameters(this.gl, parameters, () => {
+            if (ArrayBuffer.isView(data)) {
+                // @ts-expect-error
+                this.gl.texImage3D(this.target, level, webglTextureFormat.format, width, height, depth, 0 /* border, must be 0 */, webglTextureFormat.dataFormat, webglTextureFormat.type, // dataType: getWebGL,
+                data);
+            }
+            if (data instanceof WEBGLBuffer) {
+                this.gl.bindBuffer(GL.PIXEL_UNPACK_BUFFER, data.handle);
+                // @ts-expect-error
+                this.gl.texImage3D(this.target, level, dataFormat, width, height, depth, 0 /* border, must be 0 */, format, type, offset);
+            }
+        });
+        if (data && data.byteLength) {
+            this.trackAllocatedMemory(data.byteLength, 'Texture');
+        }
+        else {
+            const bytesPerPixel = getTextureFormatBytesPerPixel(this.gl, this.props.format);
+            this.trackAllocatedMemory(this.width * this.height * this.depth * bytesPerPixel, 'Texture');
+        }
+        this.loaded = true;
+        return this;
+    }
+    // RESOURCE METHODS
+    /**
+     * Sets sampler parameters on texture
+     * @note: Applies NPOT workaround if appropriate
+     */
+    _setSamplerParameters(parameters) {
+        // Work around WebGL1 sampling restrictions on NPOT textures
+        if (this.device.isWebGL1 && isNPOT(this.width, this.height)) {
+            parameters = updateSamplerParametersForNPOT(parameters);
+        }
+        // NPOT parameters may populate an empty object
+        if (isObjectEmpty(parameters)) {
+            return;
+        }
+        logParameters(parameters);
+        this.gl.bindTexture(this.target, this.handle);
+        for (const [pname, pvalue] of Object.entries(parameters)) {
+            const param = Number(pname);
+            let value = pvalue;
+            // Apparently there are integer/float conversion issues requires two parameter setting functions in JavaScript.
+            // For now, pick the float version for parameters specified as GLfloat.
+            switch (param) {
+                case GL.TEXTURE_MIN_LOD:
+                case GL.TEXTURE_MAX_LOD:
+                    this.gl.texParameterf(this.target, param, value);
+                    break;
+                default:
+                    this.gl.texParameteri(this.target, param, value);
+                    break;
+            }
+        }
+        this.gl.bindTexture(this.target, null);
         return;
-      }
-
-      this.setSubImageData({
-        data: video,
-        parameters
-      });
-
-      if (this.mipmaps) {
-        this.generateMipmap();
-      }
-
-      this._video.lastTime = video.currentTime;
-    }
-  }
-
-  generateMipmap(params = {}) {
-    if (this.device.isWebGL1 && isNPOT(this.width, this.height)) {
-      log.warn("texture: ".concat(this, " is Non-Power-Of-Two, disabling mipmaping"))();
-      return this;
-    }
-
-    this.mipmaps = true;
-    this.gl.bindTexture(this.target, this.handle);
-    withParameters(this.gl, params, () => {
-      this.gl.generateMipmap(this.target);
-    });
-    this.gl.bindTexture(this.target, null);
-    return this;
-  }
-
-  setImageData(options) {
-    if (this.props.dimension === '3d') {
-      return this.setImageData3D(options);
-    }
-
-    this.trackDeallocatedMemory('Texture');
-    const {
-      target = this.target,
-      pixels = null,
-      level = 0,
-      format = this.format,
-      offset = 0,
-      parameters = {}
-    } = options;
-    let {
-      data = null,
-      type = this.type,
-      width = this.width,
-      height = this.height,
-      dataFormat = this.dataFormat,
-      compressed = false
-    } = options;
-
-    if (!data) {
-      data = pixels;
-    }
-
-    ({
-      type,
-      dataFormat,
-      compressed,
-      width,
-      height
-    } = this._deduceParameters({
-      format: this.props.format,
-      type,
-      dataFormat,
-      compressed,
-      data,
-      width,
-      height
-    }));
-    const {
-      gl
-    } = this;
-    gl.bindTexture(this.target, this.handle);
-    let dataType = null;
-    ({
-      data,
-      dataType
-    } = this._getDataType({
-      data,
-      compressed
-    }));
-    let gl2;
-    withParameters(this.gl, parameters, () => {
-      switch (dataType) {
-        case 'null':
-          gl.texImage2D(target, level, format, width, height, 0, dataFormat, type, data);
-          break;
-
-        case 'typed-array':
-          gl.texImage2D(target, level, format, width, height, 0, dataFormat, type, data, offset);
-          break;
-
-        case 'buffer':
-          gl2 = this.device.assertWebGL2();
-          gl2.bindBuffer(GL.PIXEL_UNPACK_BUFFER, data.handle || data);
-          gl2.texImage2D(target, level, format, width, height, 0, dataFormat, type, offset);
-          gl2.bindBuffer(GL.PIXEL_UNPACK_BUFFER, null);
-          break;
-
-        case 'browser-object':
-          if (this.device.isWebGL2) {
-            gl.texImage2D(target, level, format, width, height, 0, dataFormat, type, data);
-          } else {
-            gl.texImage2D(target, level, format, dataFormat, type, data);
-          }
-
-          break;
-
-        case 'compressed':
-          for (const [levelIndex, levelData] of data.entries()) {
-            gl.compressedTexImage2D(target, levelIndex, levelData.format, levelData.width, levelData.height, 0, levelData.data);
-          }
-
-          break;
-
-        default:
-          assert(false, 'Unknown image data type');
-      }
-    });
-
-    if (data && data.byteLength) {
-      this.trackAllocatedMemory(data.byteLength, 'Texture');
-    } else {
-      const bytesPerPixel = getTextureFormatBytesPerPixel(this.gl, this.props.format);
-      this.trackAllocatedMemory(this.width * this.height * bytesPerPixel, 'Texture');
-    }
-
-    this.loaded = true;
-    return this;
-  }
-
-  setSubImageData({
-    target = this.target,
-    pixels = null,
-    data = null,
-    x = 0,
-    y = 0,
-    width = this.width,
-    height = this.height,
-    level = 0,
-    format = this.format,
-    type = this.type,
-    dataFormat = this.dataFormat,
-    compressed = false,
-    offset = 0,
-    parameters = {}
-  }) {
-    ({
-      type,
-      dataFormat,
-      compressed,
-      width,
-      height
-    } = this._deduceParameters({
-      format: this.props.format,
-      type,
-      dataFormat,
-      compressed,
-      data,
-      width,
-      height
-    }));
-    assert(this.depth === 1, 'texSubImage not supported for 3D textures');
-
-    if (!data) {
-      data = pixels;
-    }
-
-    if (data && data.data) {
-      const ndarray = data;
-      data = ndarray.data;
-      width = ndarray.shape[0];
-      height = ndarray.shape[1];
     }
-
-    if (data instanceof WEBGLBuffer) {
-      data = data.handle;
-    }
-
-    this.gl.bindTexture(this.target, this.handle);
-    withParameters(this.gl, parameters, () => {
-      if (compressed) {
-        this.gl.compressedTexSubImage2D(target, level, x, y, width, height, format, data);
-      } else if (data === null) {
-        this.gl.texSubImage2D(target, level, x, y, width, height, dataFormat, type, null);
-      } else if (ArrayBuffer.isView(data)) {
-        this.gl.texSubImage2D(target, level, x, y, width, height, dataFormat, type, data, offset);
-      } else if (typeof WebGLBuffer !== 'undefined' && data instanceof WebGLBuffer) {
-        const gl2 = this.device.assertWebGL2();
-        gl2.bindBuffer(GL.PIXEL_UNPACK_BUFFER, data);
-        gl2.texSubImage2D(target, level, x, y, width, height, dataFormat, type, offset);
-        gl2.bindBuffer(GL.PIXEL_UNPACK_BUFFER, null);
-      } else if (this.device.isWebGL2) {
-        const gl2 = this.device.assertWebGL2();
-        gl2.texSubImage2D(target, level, x, y, width, height, dataFormat, type, data);
-      } else {
-        this.gl.texSubImage2D(target, level, x, y, dataFormat, type, data);
-      }
-    });
-    this.gl.bindTexture(this.target, null);
-  }
-
-  copyFramebuffer(opts = {}) {
-    log.error('Texture.copyFramebuffer({...}) is no logner supported, use copyToTexture(source, target, opts})')();
-    return null;
-  }
-
-  getActiveUnit() {
-    return this.gl.getParameter(GL.ACTIVE_TEXTURE) - GL.TEXTURE0;
-  }
-
-  bind(textureUnit = this.textureUnit) {
-    const {
-      gl
-    } = this;
-
-    if (textureUnit !== undefined) {
-      this.textureUnit = textureUnit;
-      gl.activeTexture(gl.TEXTURE0 + textureUnit);
-    }
-
-    gl.bindTexture(this.target, this.handle);
-    return textureUnit;
-  }
-
-  unbind(textureUnit = this.textureUnit) {
-    const {
-      gl
-    } = this;
-
-    if (textureUnit !== undefined) {
-      this.textureUnit = textureUnit;
-      gl.activeTexture(gl.TEXTURE0 + textureUnit);
-    }
-
-    gl.bindTexture(this.target, null);
-    return textureUnit;
-  }
-
-  _getDataType({
-    data,
-    compressed = false
-  }) {
-    if (compressed) {
-      return {
-        data,
-        dataType: 'compressed'
-      };
-    }
-
-    if (data === null) {
-      return {
-        data,
-        dataType: 'null'
-      };
-    }
-
-    if (ArrayBuffer.isView(data)) {
-      return {
-        data,
-        dataType: 'typed-array'
-      };
-    }
-
-    if (data instanceof WEBGLBuffer) {
-      return {
-        data: data.handle,
-        dataType: 'buffer'
-      };
-    }
-
-    if (typeof WebGLBuffer !== 'undefined' && data instanceof WebGLBuffer) {
-      return {
-        data,
-        dataType: 'buffer'
-      };
-    }
-
-    return {
-      data,
-      dataType: 'browser-object'
-    };
-  }
-
-  _deduceParameters(opts) {
-    const {
-      format,
-      data
-    } = opts;
-    let {
-      width,
-      height,
-      dataFormat,
-      type,
-      compressed
-    } = opts;
-    const parameters = getWebGLTextureParameters(this.gl, format);
-    dataFormat = dataFormat || parameters.dataFormat;
-    type = type || parameters.type;
-    compressed = compressed || parameters.compressed;
-    ({
-      width,
-      height
-    } = this._deduceImageSize(data, width, height));
-    return {
-      dataFormat,
-      type,
-      compressed,
-      width,
-      height,
-      format,
-      data
-    };
-  }
-
-  _deduceImageSize(data, width, height) {
-    let size;
-
-    if (typeof ImageData !== 'undefined' && data instanceof ImageData) {
-      size = {
-        width: data.width,
-        height: data.height
-      };
-    } else if (typeof HTMLImageElement !== 'undefined' && data instanceof HTMLImageElement) {
-      size = {
-        width: data.naturalWidth,
-        height: data.naturalHeight
-      };
-    } else if (typeof HTMLCanvasElement !== 'undefined' && data instanceof HTMLCanvasElement) {
-      size = {
-        width: data.width,
-        height: data.height
-      };
-    } else if (typeof ImageBitmap !== 'undefined' && data instanceof ImageBitmap) {
-      size = {
-        width: data.width,
-        height: data.height
-      };
-    } else if (typeof HTMLVideoElement !== 'undefined' && data instanceof HTMLVideoElement) {
-      size = {
-        width: data.videoWidth,
-        height: data.videoHeight
-      };
-    } else if (!data) {
-      size = {
-        width: width >= 0 ? width : 1,
-        height: height >= 0 ? height : 1
-      };
-    } else {
-      size = {
-        width,
-        height
-      };
-    }
-
-    assert(size, 'Could not deduced texture size');
-    assert(width === undefined || size.width === width, 'Deduced texture width does not match supplied width');
-    assert(height === undefined || size.height === height, 'Deduced texture height does not match supplied height');
-    return size;
-  }
-
-  async setCubeMapImageData(options) {
-    const {
-      gl
-    } = this;
-    const {
-      width,
-      height,
-      pixels,
-      data,
-      format = GL.RGBA,
-      type = GL.UNSIGNED_BYTE
-    } = options;
-    const imageDataMap = pixels || data;
-    const resolvedFaces = await Promise.all(WEBGLTexture.FACES.map(face => {
-      const facePixels = imageDataMap[face];
-      return Promise.all(Array.isArray(facePixels) ? facePixels : [facePixels]);
-    }));
-    this.bind();
-    WEBGLTexture.FACES.forEach((face, index) => {
-      if (resolvedFaces[index].length > 1 && this.props.mipmaps !== false) {
-        log.warn("".concat(this.id, " has mipmap and multiple LODs."))();
-      }
-
-      resolvedFaces[index].forEach((image, lodLevel) => {
-        if (width && height) {
-          gl.texImage2D(face, lodLevel, format, width, height, 0, format, type, image);
-        } else {
-          gl.texImage2D(face, lodLevel, format, format, type, image);
-        }
-      });
-    });
-    this.unbind();
-  }
-
-  setImageDataForFace(options) {
-    const {
-      face,
-      width,
-      height,
-      pixels,
-      data,
-      format = GL.RGBA,
-      type = GL.UNSIGNED_BYTE
-    } = options;
-    const {
-      gl
-    } = this;
-    const imageData = pixels || data;
-    this.bind();
-
-    if (imageData instanceof Promise) {
-      imageData.then(resolvedImageData => this.setImageDataForFace(Object.assign({}, options, {
-        face,
-        data: resolvedImageData,
-        pixels: resolvedImageData
-      })));
-    } else if (this.width || this.height) {
-      gl.texImage2D(face, 0, format, width, height, 0, format, type, imageData);
-    } else {
-      gl.texImage2D(face, 0, format, format, type, imageData);
-    }
-
-    return this;
-  }
-
-  setImageData3D(options) {
-    const {
-      level = 0,
-      dataFormat,
-      format,
-      type,
-      width,
-      height,
-      depth = 1,
-      offset = 0,
-      data,
-      parameters = {}
-    } = options;
-    this.trackDeallocatedMemory('Texture');
-    this.gl.bindTexture(this.target, this.handle);
-    const webglTextureFormat = getWebGLTextureParameters(this.gl, format);
-    withParameters(this.gl, parameters, () => {
-      if (ArrayBuffer.isView(data)) {
-        this.gl.texImage3D(this.target, level, webglTextureFormat.format, width, height, depth, 0, webglTextureFormat.dataFormat, webglTextureFormat.type, data);
-      }
-
-      if (data instanceof WEBGLBuffer) {
-        this.gl.bindBuffer(GL.PIXEL_UNPACK_BUFFER, data.handle);
-        this.gl.texImage3D(this.target, level, dataFormat, width, height, depth, 0, format, type, offset);
-      }
-    });
-
-    if (data && data.byteLength) {
-      this.trackAllocatedMemory(data.byteLength, 'Texture');
-    } else {
-      const bytesPerPixel = getTextureFormatBytesPerPixel(this.gl, this.props.format);
-      this.trackAllocatedMemory(this.width * this.height * this.depth * bytesPerPixel, 'Texture');
-    }
-
-    this.loaded = true;
-    return this;
-  }
-
-  _setSamplerParameters(parameters) {
-    if (this.device.isWebGL1 && isNPOT(this.width, this.height)) {
-      parameters = updateSamplerParametersForNPOT(parameters);
-    }
-
-    if (isObjectEmpty(parameters)) {
-      return;
-    }
-
-    logParameters(parameters);
-    this.gl.bindTexture(this.target, this.handle);
-
-    for (const [pname, pvalue] of Object.entries(parameters)) {
-      const param = Number(pname);
-      let value = pvalue;
-
-      switch (param) {
-        case GL.TEXTURE_MIN_LOD:
-        case GL.TEXTURE_MAX_LOD:
-          this.gl.texParameterf(this.target, param, value);
-          break;
-
-        default:
-          this.gl.texParameteri(this.target, param, value);
-          break;
-      }
-    }
-
-    this.gl.bindTexture(this.target, null);
-    return;
-  }
-
-  _getWebGL1NPOTParameterOverride(pname, value) {
-    const npot = this.device.isWebGL1 && isNPOT(this.width, this.height);
-
-    if (npot) {
-      switch (pname) {
-        case GL.TEXTURE_MIN_FILTER:
-          if (value !== GL.LINEAR && value !== GL.NEAREST) {
-            return GL.LINEAR;
-          }
-
-          break;
-
-        case GL.TEXTURE_WRAP_S:
-        case GL.TEXTURE_WRAP_T:
-          return GL.CLAMP_TO_EDGE;
-
-        default:
-          break;
-      }
+    /** @deprecated For LegacyTexture subclass */
+    _getWebGL1NPOTParameterOverride(pname, value) {
+        // NOTE: Apply NPOT workaround
+        const npot = this.device.isWebGL1 && isNPOT(this.width, this.height);
+        if (npot) {
+            switch (pname) {
+                case GL.TEXTURE_MIN_FILTER:
+                    if (value !== GL.LINEAR && value !== GL.NEAREST) {
+                        // log.warn(`texture: ${this} is Non-Power-Of-Two, forcing TEXTURE_MIN_FILTER to LINEAR`)();
+                        return GL.LINEAR;
+                    }
+                    break;
+                case GL.TEXTURE_WRAP_S:
+                case GL.TEXTURE_WRAP_T:
+                    // if (value !== GL.CLAMP_TO_EDGE) { log.warn(`texture: ${this} is Non-Power-Of-Two, ${getKey(this.gl, pname)} to CLAMP_TO_EDGE`)(); }
+                    return GL.CLAMP_TO_EDGE;
+                default:
+                    break;
+            }
+        }
+        return value;
     }
-
-    return value;
-  }
-
 }
-
-_defineProperty(WEBGLTexture, "FACES", [GL.TEXTURE_CUBE_MAP_POSITIVE_X, GL.TEXTURE_CUBE_MAP_NEGATIVE_X, GL.TEXTURE_CUBE_MAP_POSITIVE_Y, GL.TEXTURE_CUBE_MAP_NEGATIVE_Y, GL.TEXTURE_CUBE_MAP_POSITIVE_Z, GL.TEXTURE_CUBE_MAP_NEGATIVE_Z]);
-
+// TODO - remove?
+WEBGLTexture.FACES = [
+    GL.TEXTURE_CUBE_MAP_POSITIVE_X,
+    GL.TEXTURE_CUBE_MAP_NEGATIVE_X,
+    GL.TEXTURE_CUBE_MAP_POSITIVE_Y,
+    GL.TEXTURE_CUBE_MAP_NEGATIVE_Y,
+    GL.TEXTURE_CUBE_MAP_POSITIVE_Z,
+    GL.TEXTURE_CUBE_MAP_NEGATIVE_Z
+];
+export default WEBGLTexture;
+// HELPERS
 function getWebGLTextureTarget(props) {
-  switch (props.dimension) {
-    case '2d':
-      return GL.TEXTURE_2D;
-
-    case 'cube':
-      return GL.TEXTURE_CUBE_MAP;
-
-    case '2d-array':
-      return GL.TEXTURE_2D_ARRAY;
-
-    case '3d':
-      return GL.TEXTURE_3D;
-
-    case '1d':
-    case 'cube-array':
-    default:
-      throw new Error(props.dimension);
-  }
+    switch (props.dimension) {
+        // supported in WebGL
+        case '2d':
+            return GL.TEXTURE_2D;
+        case 'cube':
+            return GL.TEXTURE_CUBE_MAP;
+        // supported in WebGL2
+        case '2d-array':
+            return GL.TEXTURE_2D_ARRAY;
+        case '3d':
+            return GL.TEXTURE_3D;
+        // not supported in any WebGL version
+        case '1d':
+        case 'cube-array':
+        default:
+            throw new Error(props.dimension);
+    }
 }
-
 function isNPOT(width, height) {
-  if (!width || !height) {
-    return false;
-  }
-
-  return !isPowerOfTwo(width) || !isPowerOfTwo(height);
+    // Width and height not available, avoid classifying as NPOT texture
+    if (!width || !height) {
+        return false;
+    }
+    return !isPowerOfTwo(width) || !isPowerOfTwo(height);
 }
-
 function logParameters(parameters) {
-  log.log(1, 'texture sampler parameters', parameters)();
+    log.log(1, 'texture sampler parameters', parameters)();
 }
-//# sourceMappingURL=webgl-texture.js.map