@luma.gl/webgl 9.0.0-alpha.3 → 9.0.0-alpha.30

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

@@ -1,97 +1,79 @@
 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 {
+import { isObjectEmpty } from '@luma.gl/core';
+import { Texture, cast, log, assert, isPowerOfTwo, loadImage } from '@luma.gl/core';
+import { GL } from '@luma.gl/constants';
+import { withParameters } from "../../context/state-tracker/with-parameters.js";
+import { convertTextureFormatToGL, 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";
+export const DEFAULT_WEBGL_TEXTURE_PROPS = {
+  parameters: {},
+  pixelStore: {},
+  pixels: null,
+  border: 0,
+  dataFormat: undefined,
+  textureUnit: undefined,
+  target: undefined
+};
+export class WEBGLTexture extends Texture {
   constructor(device, props) {
     var _this$props;
-
     super(device, {
-      format: GL.RGBA,
+      ...DEFAULT_WEBGL_TEXTURE_PROPS,
+      format: 'rgba8unorm',
       ...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, "sampler", undefined);
+    _defineProperty(this, "glFormat", 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,
+    this.device.setSpectorMetadata(this.handle, {
+      ...this.props,
       data: typeof this.props.data
-    };
+    });
+    this.glFormat = GL.RGBA;
     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.handle = null;
+      this.destroyed = true;
     }
   }
-
   toString() {
     return "Texture(".concat(this.id, ",").concat(this.width, "x").concat(this.height, ")");
   }
-
-  initialize(props = {}) {
+  initialize() {
+    let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     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,
@@ -99,29 +81,23 @@ export default class WEBGLTexture extends Texture {
       })));
       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 {
+    const {
       parameters = {}
     } = props;
     const {
       pixels = null,
-      recreate = false,
       pixelStore = {},
       textureUnit = undefined
     } = props;
-
     if (!data) {
       data = pixels;
     }
-
     let {
       width,
       height,
@@ -133,6 +109,7 @@ export default class WEBGLTexture extends Texture {
     const {
       depth = 0
     } = props;
+    const glFormat = convertTextureFormatToGL(props.format, this.device.isWebGL2);
     ({
       width,
       height,
@@ -148,49 +125,37 @@ export default class WEBGLTexture extends Texture {
       width,
       height
     }));
-    const format = getWebGLTextureFormat(this.gl, props.format);
     this.width = width;
     this.height = height;
-    this.depth = depth;
-    this.format = format;
+    this.glFormat = glFormat;
     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,
+      format: glFormat,
       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,
@@ -198,10 +163,8 @@ export default class WEBGLTexture extends Texture {
         lastTime: data.readyState >= HTMLVideoElement.HAVE_CURRENT_DATA ? data.currentTime : -1
       };
     }
-
     return this;
   }
-
   initializeCube(props) {
     const {
       mipmaps = true,
@@ -209,21 +172,17 @@ export default class WEBGLTexture extends Texture {
     } = props;
     this.setCubeMapImageData(props).then(() => {
       this.loaded = true;
-
       if (mipmaps) {
         this.generateMipmap(props);
       }
-
       this.setSampler(props.sampler);
-
       this._setSamplerParameters(parameters);
     });
     return this;
   }
-
-  setSampler(sampler = {}) {
+  setSampler() {
+    let sampler = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     let samplerProps;
-
     if (sampler instanceof WEBGLSampler) {
       this.sampler = sampler;
       samplerProps = sampler.props;
@@ -231,19 +190,16 @@ export default class WEBGLTexture extends Texture {
       this.sampler = new WEBGLSampler(this.device, sampler);
       samplerProps = sampler;
     }
-
     const parameters = convertSamplerParametersToWebGL(samplerProps);
-
     this._setSamplerParameters(parameters);
-
     return this;
   }
-
-  resize({
-    height,
-    width,
-    mipmaps = false
-  }) {
+  resize(options) {
+    const {
+      height,
+      width,
+      mipmaps = false
+    } = options;
     if (width !== this.width || height !== this.height) {
       return this.initialize({
         width,
@@ -254,10 +210,8 @@ export default class WEBGLTexture extends Texture {
         mipmaps
       });
     }
-
     return this;
   }
-
   update() {
     if (this._video) {
       const {
@@ -265,30 +219,25 @@ export default class WEBGLTexture extends Texture {
         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 = {}) {
+  generateMipmap() {
+    let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     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, () => {
@@ -297,18 +246,16 @@ export default class WEBGLTexture extends Texture {
     this.gl.bindTexture(this.target, null);
     return this;
   }
-
   setImageData(options) {
-    if (this.props.dimension === '3d') {
+    if (this.props.dimension === '3d' || this.props.dimension === '2d-array') {
       return this.setImageData3D(options);
     }
-
     this.trackDeallocatedMemory('Texture');
     const {
       target = this.target,
       pixels = null,
       level = 0,
-      format = this.format,
+      glFormat = this.glFormat,
       offset = 0,
       parameters = {}
     } = options;
@@ -320,11 +267,9 @@ export default class WEBGLTexture extends Texture {
       dataFormat = this.dataFormat,
       compressed = false
     } = options;
-
     if (!data) {
       data = pixels;
     }
-
     ({
       type,
       dataFormat,
@@ -356,68 +301,59 @@ export default class WEBGLTexture extends Texture {
     withParameters(this.gl, parameters, () => {
       switch (dataType) {
         case 'null':
-          gl.texImage2D(target, level, format, width, height, 0, dataFormat, type, data);
+          gl.texImage2D(target, level, glFormat, width, height, 0, dataFormat, type, data);
           break;
-
         case 'typed-array':
-          gl.texImage2D(target, level, format, width, height, 0, dataFormat, type, data, offset);
+          gl.texImage2D(target, level, glFormat, 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.texImage2D(target, level, glFormat, 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);
+            gl.texImage2D(target, level, glFormat, width, height, 0, dataFormat, type, data);
           } else {
-            gl.texImage2D(target, level, format, dataFormat, type, data);
+            gl.texImage2D(target, level, glFormat, 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);
+      const bytesPerPixel = getTextureFormatBytesPerPixel(this.props.format, this.device.isWebGL2);
       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 = {}
-  }) {
+  setSubImageData(_ref) {
+    let {
+      target = this.target,
+      pixels = null,
+      data = null,
+      x = 0,
+      y = 0,
+      width = this.width,
+      height = this.height,
+      level = 0,
+      glFormat = this.glFormat,
+      type = this.type,
+      dataFormat = this.dataFormat,
+      compressed = false,
+      offset = 0,
+      parameters = {}
+    } = _ref;
     ({
       type,
       dataFormat,
@@ -434,26 +370,22 @@ export default class WEBGLTexture extends Texture {
       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);
+        this.gl.compressedTexSubImage2D(target, level, x, y, width, height, glFormat, data);
       } else if (data === null) {
         this.gl.texSubImage2D(target, level, x, y, width, height, dataFormat, type, null);
       } else if (ArrayBuffer.isView(data)) {
@@ -472,89 +404,78 @@ export default class WEBGLTexture extends Texture {
     });
     this.gl.bindTexture(this.target, null);
   }
-
-  copyFramebuffer(opts = {}) {
+  copyFramebuffer() {
+    let opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     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) {
+  bind() {
+    let textureUnit = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 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) {
+  unbind() {
+    let textureUnit = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 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
-  }) {
+  _getDataType(_ref2) {
+    let {
+      data,
+      compressed = false
+    } = _ref2;
     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,
@@ -567,7 +488,7 @@ export default class WEBGLTexture extends Texture {
       type,
       compressed
     } = opts;
-    const parameters = getWebGLTextureParameters(this.gl, format);
+    const parameters = getWebGLTextureParameters(format, this.device.isWebGL2);
     dataFormat = dataFormat || parameters.dataFormat;
     type = type || parameters.type;
     compressed = compressed || parameters.compressed;
@@ -585,10 +506,8 @@ export default class WEBGLTexture extends Texture {
       data
     };
   }
-
   _deduceImageSize(data, width, height) {
     let size;
-
     if (typeof ImageData !== 'undefined' && data instanceof ImageData) {
       size = {
         width: data.width,
@@ -625,13 +544,11 @@ export default class WEBGLTexture extends Texture {
         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
@@ -654,7 +571,6 @@ export default class WEBGLTexture extends Texture {
       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);
@@ -665,7 +581,6 @@ export default class WEBGLTexture extends Texture {
     });
     this.unbind();
   }
-
   setImageDataForFace(options) {
     const {
       face,
@@ -681,7 +596,6 @@ export default class WEBGLTexture extends Texture {
     } = this;
     const imageData = pixels || data;
     this.bind();
-
     if (imageData instanceof Promise) {
       imageData.then(resolvedImageData => this.setImageDataForFace(Object.assign({}, options, {
         face,
@@ -693,139 +607,110 @@ export default class WEBGLTexture extends Texture {
     } else {
       gl.texImage2D(face, 0, format, format, type, imageData);
     }
-
     return this;
   }
-
-  setImageData3D({
-    level = 0,
-    dataFormat,
-    format,
-    type,
-    width,
-    height,
-    depth = 1,
-    offset = 0,
-    data,
-    parameters = {}
-  }) {
+  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);
+    const webglTextureFormat = getWebGLTextureParameters(format, this.device.isWebGL2);
     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);
+      const bytesPerPixel = getTextureFormatBytesPerPixel(this.props.format, this.device.isWebGL2);
       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;
-
+      const 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;
+    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;
       }
     }
-
     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