@luma.gl/webgl 8.5.8 → 8.6.0-alpha.2

package/src/classes/{texture-3d.js → texture-3d.ts}

@@ -1,24 +1,56 @@
+import {Device} from '@luma.gl/api';
 import GL from '@luma.gl/constants';
-import {isWebGL2, assertWebGL2Context, withParameters} from '@luma.gl/gltools';
-import Texture from './texture';
+import WebGLDevice from '../device/webgl-device';
+import {assertWebGL2Context} from '../context/context/webgl-checks';
+import {withParameters} from '../context/state-tracker/with-parameters';
+import Texture, {TextureProps} from './texture';
 import {DATA_FORMAT_CHANNELS, TYPE_SIZES} from './texture-formats';
-import Buffer from './buffer';
+import Buffer from './webgl-buffer';
 
+export type Texture3DProps = TextureProps & {
+};
+
+type SetImageDataOptions = {
+  level?: number;
+  dataFormat?: any;
+  width: any;
+  height: any;
+  depth?: number;
+  border?: number;
+  format: any;
+  type?: any;
+  offset?: number;
+  data: any;
+  parameters?: {};
+};
+
+/**
+ * Textures that have 3 dimensions: width, height, and depth.
+ * They are accessed by 3-dimensional texture coordinates.
+ */
 export default class Texture3D extends Texture {
-  static isSupported(gl) {
-    return isWebGL2(gl);
+  static isSupported(device: Device | WebGLRenderingContext): boolean {
+    try {
+      const webglDevice = WebGLDevice.attach(device);
+      return webglDevice.isWebGL2;
+    } catch {
+      return false;
+    }
   }
 
-  constructor(gl, props = {}) {
-    assertWebGL2Context(gl);
+  constructor(device: Device | WebGL2RenderingContext, props: Texture3DProps = {}) {
+    super(device, {...props, target: GL.TEXTURE_3D});
+    assertWebGL2Context(this.gl2);
     props = Object.assign({depth: 1}, props, {target: GL.TEXTURE_3D, unpackFlipY: false});
-    super(gl, props);
     this.initialize(props);
-
     Object.seal(this);
   }
 
-  // Image 3D copies from Typed Array or WebGLBuffer
+  get [Symbol.toStringTag](): string {
+    return 'Texture3D';
+  }
+
+  /** Image 3D copies from Typed Array or WebGLBuffer */
   setImageData({
     level = 0,
     dataFormat = GL.RGBA,
@@ -31,14 +63,14 @@ export default class Texture3D extends Texture {
     offset = 0,
     data,
     parameters = {}
-  }) {
-    this._trackDeallocatedMemory('Texture');
+  }: SetImageDataOptions) {
+    this.trackDeallocatedMemory('Texture');
 
     this.gl.bindTexture(this.target, this.handle);
 
     withParameters(this.gl, parameters, () => {
       if (ArrayBuffer.isView(data)) {
-        // @ts-ignore
+        // @ts-expect-error
         this.gl.texImage3D(
           this.target,
           level,
@@ -55,7 +87,7 @@ export default class Texture3D extends Texture {
 
       if (data instanceof Buffer) {
         this.gl.bindBuffer(GL.PIXEL_UNPACK_BUFFER, data.handle);
-        // @ts-ignore
+        // @ts-expect-error
         this.gl.texImage3D(
           this.target,
           level,
@@ -72,15 +104,13 @@ export default class Texture3D extends Texture {
     });
 
     if (data && data.byteLength) {
-      this._trackAllocatedMemory(data.byteLength, 'Texture');
+      this.trackAllocatedMemory(data.byteLength, 'Texture');
     } else {
       // NOTE(Tarek): Default to RGBA bytes
-      // @ts-ignore
       const channels = DATA_FORMAT_CHANNELS[this.dataFormat] || 4;
-      // @ts-ignore
       const channelSize = TYPE_SIZES[this.type] || 1;
 
-      this._trackAllocatedMemory(
+      this.trackAllocatedMemory(
         this.width * this.height * this.depth * channels * channelSize,
         'Texture'
       );

package/src/classes/{texture-cube.js → texture-cube.ts}

@@ -1,34 +1,43 @@
+import {Device, log} from '@luma.gl/api';
 import GL from '@luma.gl/constants';
-import {log, assertWebGLContext} from '@luma.gl/gltools';
-import Texture from './texture';
-
-const 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
-];
+import WebGLDevice from '../device/webgl-device';
+import {assertWebGLContext} from '../context/context/webgl-checks';
+import Texture, {TextureProps} from './texture';
+
+export type TextureCubeProps = TextureProps & {
+};
 
 export default class TextureCube extends Texture {
-  constructor(gl, props = {}) {
-    assertWebGLContext(gl);
+  static FACES: number[] = [
+    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
+  ];
+
+  props;
 
-    super(gl, Object.assign({}, props, {target: GL.TEXTURE_CUBE_MAP}));
+  constructor(device: Device | WebGLRenderingContext, props?: TextureCubeProps) {
+    super(device, Object.assign({}, props, {target: GL.TEXTURE_CUBE_MAP}));
 
     this.initialize(props);
 
     Object.seal(this);
   }
 
-  initialize(props = {}) {
+  get [Symbol.toStringTag](): string {
+    return 'TextureCube';
+  }
+
+  initialize(props?: TextureCubeProps): this {
     const {mipmaps = true, parameters = {}} = props;
 
     // Store props for accessors
-    this.opts = props;
+    this.props = props;
 
-    // @ts-ignore
+    // @ts-expect-error
     this.setCubeMapImageData(props).then(() => {
       this.loaded = true;
 
@@ -43,22 +52,33 @@ export default class TextureCube extends Texture {
     return this;
   }
 
-  subImage({face, data, x = 0, y = 0, mipmapLevel = 0}) {
-    // @ts-ignore TODO - is this a bug?
+  subImage(options: {face: any; data: any; x?: number; y?: number; mipmapLevel?: number}): any {
+    const {face, data, x = 0, y = 0, mipmapLevel = 0} = options;
+    // @ts-expect-error TODO - is this a bug?
     return this._subImage({target: face, data, x, y, mipmapLevel});
   }
 
   /* eslint-disable max-statements, max-len */
-  async setCubeMapImageData({
-    width,
-    height,
-    pixels,
-    data,
-    border = 0,
-    format = GL.RGBA,
-    type = GL.UNSIGNED_BYTE
-  }) {
+  async setCubeMapImageData(options: {
+    width: any;
+    height: any;
+    pixels: any;
+    data: any;
+    border?: number;
+    format?: any;
+    type?: any;
+  }): Promise<void>{
     const {gl} = this;
+
+    const {
+      width,
+      height,
+      pixels,
+      data,
+      border = 0,
+      format = GL.RGBA,
+      type = GL.UNSIGNED_BYTE
+    } = options;
     const imageDataMap = pixels || data;
 
     // pixel data (imageDataMap) is an Object from Face to Image or Promise.
@@ -75,7 +95,7 @@ export default class TextureCube extends Texture {
     // ... }
 
     const resolvedFaces = await Promise.all(
-      FACES.map(face => {
+      TextureCube.FACES.map((face) => {
         const facePixels = imageDataMap[face];
         return Promise.all(Array.isArray(facePixels) ? facePixels : [facePixels]);
       })
@@ -83,8 +103,8 @@ export default class TextureCube extends Texture {
 
     this.bind();
 
-    FACES.forEach((face, index) => {
-      if (resolvedFaces[index].length > 1 && this.opts.mipmaps !== false) {
+    TextureCube.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.`)();
@@ -122,7 +142,7 @@ export default class TextureCube extends Texture {
 
     this.bind();
     if (imageData instanceof Promise) {
-      imageData.then(resolvedImageData =>
+      imageData.then((resolvedImageData) =>
         this.setImageDataForFace(
           Object.assign({}, options, {
             face,
@@ -140,5 +160,3 @@ export default class TextureCube extends Texture {
     return this;
   }
 }
-
-TextureCube.FACES = FACES;

package/src/classes/{texture-formats.js → texture-formats.ts}

@@ -1,5 +1,5 @@
 import GL from '@luma.gl/constants';
-import {isWebGL2} from '@luma.gl/gltools';
+import {isWebGL2} from '../context/context/webgl-checks';
 
 // const S3TC = 'WEBGL_compressed_texture_s3tc';
 // const PVRTC = 'WEBGL_compressed_texture_pvrtc';
@@ -8,8 +8,16 @@ import {isWebGL2} from '@luma.gl/gltools';
 // const SRGB = 'EXT_sRGB';
 // const DEPTH = 'WEBGL_depth_texture';
 
+type TextureFormat = {
+  dataFormat: number;
+  types: number[];
+  gl2?: boolean;
+  gl1?: boolean;
+  compressed?: boolean;
+}
+
 // Legal combinations for internalFormat, format and type
-export const TEXTURE_FORMATS = {
+export const TEXTURE_FORMATS: Record<string, TextureFormat> = {
   // Unsized texture format - more performance
   [GL.RGB]: {dataFormat: GL.RGB, types: [GL.UNSIGNED_BYTE, GL.UNSIGNED_SHORT_5_6_5]},
   // TODO: format: GL.RGBA type: GL.FLOAT is supported in WebGL1 when 'OES_texure_float' is suported