@luma.gl/webgl 8.5.7 → 8.6.0-alpha.1

package/dist/classes/texture.js

@@ -0,0 +1,785 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import GL from '@luma.gl/constants';
+import { isWebGL2, assertWebGL2Context, getWebGL2Context, withParameters, log } from '@luma.gl/gltools';
+import { global } from 'probe.gl/env';
+import { getKey, getKeyValue } from '../webgl-utils';
+import { Texture, TextureProps } from '@luma.gl/api';
+import Buffer from './webgl-buffer';
+import { TEXTURE_FORMATS, DATA_FORMAT_CHANNELS, TYPE_SIZES, isFormatSupported, isLinearFilteringSupported } from './texture-formats';
+import { uid, isPowerOfTwo, assert } from '../utils';
+export { TextureProps };
+const NPOT_MIN_FILTERS = [GL.LINEAR, GL.NEAREST];
+
+const WebGLBuffer = global.WebGLBuffer || function WebGLBuffer() {};
+
+export default class WEBGLTexture extends Texture {
+  static isSupported(gl, options) {
+    const {
+      format,
+      linearFiltering
+    } = options;
+    let supported = true;
+
+    if (format) {
+      supported = supported && isFormatSupported(gl, format);
+      supported = supported && (!linearFiltering || isLinearFilteringSupported(gl, format));
+    }
+
+    return supported;
+  }
+
+  constructor(gl, props) {
+    super(gl, props);
+
+    _defineProperty(this, "MAX_ATTRIBUTES", 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", void 0);
+
+    _defineProperty(this, "height", void 0);
+
+    _defineProperty(this, "depth", void 0);
+
+    _defineProperty(this, "format", undefined);
+
+    _defineProperty(this, "type", undefined);
+
+    _defineProperty(this, "dataFormat", undefined);
+
+    _defineProperty(this, "border", undefined);
+
+    _defineProperty(this, "mipmaps", undefined);
+
+    _defineProperty(this, "target", void 0);
+
+    _defineProperty(this, "textureUnit", undefined);
+
+    _defineProperty(this, "loaded", false);
+
+    _defineProperty(this, "_video", void 0);
+
+    const {
+      id = uid('texture'),
+      handle,
+      target
+    } = props;
+    this.target = target;
+    this.textureUnit = undefined;
+    this.loaded = false;
+    this.width = undefined;
+    this.height = undefined;
+    this.depth = undefined;
+    this.format = undefined;
+    this.type = undefined;
+    this.dataFormat = undefined;
+    this.border = undefined;
+    this.textureUnit = undefined;
+    this.mipmaps = undefined;
+    this.gl = gl;
+    this.gl2 = getWebGL2Context(gl);
+    this.handle = this.props.handle || this.gl.createTexture();
+  }
+
+  destroy() {
+    if (this.handle) {
+      this.gl.deleteTexture(this.handle);
+      this.removeStats();
+      this.trackDeallocatedMemory('Texture');
+      this.handle = null;
+    }
+  }
+
+  toString() {
+    return "Texture(".concat(this.id, ",").concat(this.width, "x").concat(this.height, ")");
+  }
+
+  initialize(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;
+    }
+
+    const {
+      pixels = null,
+      format = GL.RGBA,
+      border = 0,
+      recreate = false,
+      parameters = {},
+      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,
+      type,
+      dataFormat,
+      compressed,
+      data,
+      width,
+      height
+    }));
+    this.width = width;
+    this.height = height;
+    this.depth = depth;
+    this.format = format;
+    this.type = type;
+    this.dataFormat = dataFormat;
+    this.border = border;
+    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._isNPOT()) {
+      log.warn("texture: ".concat(this, " is Non-Power-Of-Two, disabling mipmaping"))();
+      mipmaps = false;
+
+      this._updateForNPOT(parameters);
+    }
+
+    this.mipmaps = mipmaps;
+    this.setImageData({
+      data,
+      width,
+      height,
+      depth,
+      format,
+      type,
+      dataFormat,
+      border,
+      mipmaps,
+      parameters: pixelStore,
+      compressed
+    });
+
+    if (mipmaps) {
+      this.generateMipmap();
+    }
+
+    this.setParameters(parameters);
+
+    if (recreate) {
+      this.data = data;
+    }
+
+    if (isVideo) {
+      this._video = {
+        video: data,
+        parameters,
+        lastTime: data.readyState >= HTMLVideoElement.HAVE_CURRENT_DATA ? data.currentTime : -1
+      };
+    }
+
+    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;
+    }
+  }
+
+  resize({
+    height,
+    width,
+    mipmaps = false
+  }) {
+    if (width !== this.width || height !== this.height) {
+      return this.initialize({
+        width,
+        height,
+        format: this.format,
+        type: this.type,
+        dataFormat: this.dataFormat,
+        border: this.border,
+        mipmaps
+      });
+    }
+
+    return this;
+  }
+
+  generateMipmap(params = {}) {
+    if (this._isNPOT()) {
+      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) {
+    this.trackDeallocatedMemory('Texture');
+    const {
+      target = this.target,
+      pixels = null,
+      level = 0,
+      format = this.format,
+      border = this.border,
+      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,
+      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, border, dataFormat, type, data);
+          break;
+
+        case 'typed-array':
+          gl.texImage2D(target, level, format, width, height, border, dataFormat, type, data, offset);
+          break;
+
+        case 'buffer':
+          gl2 = assertWebGL2Context(gl);
+          gl2.bindBuffer(GL.PIXEL_UNPACK_BUFFER, data.handle || data);
+          gl2.texImage2D(target, level, format, width, height, border, dataFormat, type, offset);
+          gl2.bindBuffer(GL.PIXEL_UNPACK_BUFFER, null);
+          break;
+
+        case 'browser-object':
+          if (isWebGL2(gl)) {
+            gl.texImage2D(target, level, format, width, height, 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, border, levelData.data);
+          }
+
+          break;
+
+        default:
+          assert(false, 'Unknown image data type');
+      }
+    });
+
+    if (data && data.byteLength) {
+      this.trackAllocatedMemory(data.byteLength, 'Texture');
+    } else {
+      const channels = DATA_FORMAT_CHANNELS[this.dataFormat] || 4;
+      const channelSize = TYPE_SIZES[this.type] || 1;
+      this.trackAllocatedMemory(this.width * this.height * channels * channelSize, '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,
+    border = this.border,
+    parameters = {}
+  }) {
+    ({
+      type,
+      dataFormat,
+      compressed,
+      width,
+      height
+    } = this._deduceParameters({
+      format,
+      type,
+      dataFormat,
+      compressed,
+      data,
+      width,
+      height
+    }));
+    assert(this.depth === 0, '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 Buffer) {
+      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 (data instanceof WebGLBuffer) {
+        const gl2 = assertWebGL2Context(this.gl);
+        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 (isWebGL2(this.gl)) {
+        const gl2 = assertWebGL2Context(this.gl);
+        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 Buffer) {
+      return {
+        data: data.handle,
+        dataType: 'buffer'
+      };
+    }
+
+    if (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 textureFormat = TEXTURE_FORMATS[format];
+    dataFormat = dataFormat || textureFormat && textureFormat.dataFormat;
+    type = type || textureFormat && textureFormat.types[0];
+    compressed = compressed || textureFormat && textureFormat.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;
+  }
+
+  getParameter(pname, props = {}) {
+    pname = getKeyValue(this.gl, pname);
+    assert(pname);
+    const parameters = this.constructor.PARAMETERS || {};
+    const parameter = parameters[pname];
+
+    if (parameter) {
+      const isWebgl2 = isWebGL2(this.gl);
+      const parameterAvailable = (!('webgl2' in parameter) || isWebgl2) && (!('extension' in parameter) || this.gl.getExtension(parameter.extension));
+
+      if (!parameterAvailable) {
+        const webgl1Default = parameter.webgl1;
+        const webgl2Default = 'webgl2' in parameter ? parameter.webgl2 : parameter.webgl1;
+        const defaultValue = isWebgl2 ? webgl2Default : webgl1Default;
+        return defaultValue;
+      }
+    }
+
+    return this._getParameter(pname, props);
+  }
+
+  getParameters(options = {}) {
+    const {
+      parameters,
+      keys
+    } = options;
+    const PARAMETERS = this.constructor.PARAMETERS || {};
+    const isWebgl2 = isWebGL2(this.gl);
+    const values = {};
+    const parameterKeys = parameters || Object.keys(PARAMETERS);
+
+    for (const pname of parameterKeys) {
+      const parameter = PARAMETERS[pname];
+      const parameterAvailable = parameter && (!('webgl2' in parameter) || isWebgl2) && (!('extension' in parameter) || this.gl.getExtension(parameter.extension));
+
+      if (parameterAvailable) {
+        const key = keys ? getKey(this.gl, pname) : pname;
+        values[key] = this.getParameter(pname, options);
+
+        if (keys && parameter.type === 'GLenum') {
+          values[key] = getKey(this.gl, values[key]);
+        }
+      }
+    }
+
+    return values;
+  }
+
+  setParameter(pname, value) {
+    pname = getKeyValue(this.gl, pname);
+    assert(pname);
+    const parameters = this.constructor.PARAMETERS || {};
+    const parameter = parameters[pname];
+
+    if (parameter) {
+      const isWebgl2 = isWebGL2(this.gl);
+      const parameterAvailable = (!('webgl2' in parameter) || isWebgl2) && (!('extension' in parameter) || this.gl.getExtension(parameter.extension));
+
+      if (!parameterAvailable) {
+        throw new Error('Parameter not available on this platform');
+      }
+
+      if (parameter.type === 'GLenum') {
+        value = getKeyValue(value);
+      }
+    }
+
+    this._setParameter(pname, value);
+
+    return this;
+  }
+
+  setParameters(parameters) {
+    for (const pname in parameters) {
+      this.setParameter(pname, parameters[pname]);
+    }
+
+    return this;
+  }
+
+  _getParameter(pname, props) {
+    switch (pname) {
+      case GL.TEXTURE_WIDTH:
+        return this.width;
+
+      case GL.TEXTURE_HEIGHT:
+        return this.height;
+
+      default:
+        this.gl.bindTexture(this.target, this.handle);
+        const value = this.gl.getTexParameter(this.target, pname);
+        this.gl.bindTexture(this.target, null);
+        return value;
+    }
+  }
+
+  _setParameter(pname, param) {
+    this.gl.bindTexture(this.target, this.handle);
+    param = this._getNPOTParam(pname, param);
+
+    switch (pname) {
+      case GL.TEXTURE_MIN_LOD:
+      case GL.TEXTURE_MAX_LOD:
+        this.gl.texParameterf(this.target, pname, param);
+        break;
+
+      case GL.TEXTURE_WIDTH:
+      case GL.TEXTURE_HEIGHT:
+        assert(false);
+        break;
+
+      default:
+        this.gl.texParameteri(this.target, pname, param);
+        break;
+    }
+
+    this.gl.bindTexture(this.target, null);
+    return this;
+  }
+
+  _isNPOT() {
+    if (isWebGL2(this.gl)) {
+      return false;
+    }
+
+    if (!this.width || !this.height) {
+      return false;
+    }
+
+    return !isPowerOfTwo(this.width) || !isPowerOfTwo(this.height);
+  }
+
+  _updateForNPOT(parameters) {
+    if (parameters[this.gl.TEXTURE_MIN_FILTER] === undefined) {
+      parameters[this.gl.TEXTURE_MIN_FILTER] = this.gl.LINEAR;
+    }
+
+    if (parameters[this.gl.TEXTURE_WRAP_S] === undefined) {
+      parameters[this.gl.TEXTURE_WRAP_S] = this.gl.CLAMP_TO_EDGE;
+    }
+
+    if (parameters[this.gl.TEXTURE_WRAP_T] === undefined) {
+      parameters[this.gl.TEXTURE_WRAP_T] = this.gl.CLAMP_TO_EDGE;
+    }
+  }
+
+  _getNPOTParam(pname, param) {
+    if (this._isNPOT()) {
+      switch (pname) {
+        case GL.TEXTURE_MIN_FILTER:
+          if (NPOT_MIN_FILTERS.indexOf(param) === -1) {
+            param = GL.LINEAR;
+          }
+
+          break;
+
+        case GL.TEXTURE_WRAP_S:
+        case GL.TEXTURE_WRAP_T:
+          if (param !== GL.CLAMP_TO_EDGE) {
+            param = GL.CLAMP_TO_EDGE;
+          }
+
+          break;
+
+        default:
+          break;
+      }
+    }
+
+    return param;
+  }
+
+}
+//# sourceMappingURL=texture.js.map