@luma.gl/webgl 9.0.0-alpha.9 → 9.0.0-beta.1

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

@@ -1,834 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-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;
-    }
-
-    if (isVideo) {
-      this._video = {
-        video: data,
-        parameters,
-        lastTime: data.readyState >= HTMLVideoElement.HAVE_CURRENT_DATA ? data.currentTime : -1
-      };
-    }
-
-    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;
-    }
-
-    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
-      });
-    }
-
-    return this;
-  }
-
-  update() {
-    if (this._video) {
-      const {
-        video,
-        parameters,
-        lastTime
-      } = this._video;
-
-      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;
-    }
-  }
-
-  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 this;
-  }
-
-  _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;
-      }
-    }
-
-    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]);
-
-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);
-  }
-}
-
-function isNPOT(width, height) {
-  if (!width || !height) {
-    return false;
-  }
-
-  return !isPowerOfTwo(width) || !isPowerOfTwo(height);
-}
-
-function logParameters(parameters) {
-  log.log(1, 'texture sampler parameters', parameters)();
-
-  for (const [pname, pvalue] of Object.entries(parameters)) {}
-}
-//# sourceMappingURL=webgl-texture.js.map