@luma.gl/webgl 8.5.9 → 8.6.0-alpha.3

package/src/classes/renderbuffer.ts

@@ -0,0 +1,154 @@
+/* eslint-disable no-inline-comments */
+import {assert} from '@luma.gl/api';
+import GL from '@luma.gl/constants';
+import WebGLDevice from '../adapter/webgl-device';
+import WebGLResource, {ResourceProps} from './webgl-resource';
+import {isRenderbufferFormatSupported, getRenderbufferFormatBytesPerPixel} from './renderbuffer-formats';
+import {isWebGL2} from '../context/context/webgl-checks';
+
+export type RenderbufferProps = ResourceProps & {
+  format: number;
+  width?: number;
+  height?: number;
+  samples?: number;
+};
+
+const DEFAULT_RENDERBUFFER_PROPS: Required<RenderbufferProps> = {
+  id: undefined,
+  handle: undefined,
+  userData: undefined,
+  format: 0,
+  width: 1, 
+  height: 1, 
+  samples: 0
+};
+
+/**
+ * Renderbuffers are GPU objects that contain images.
+ * In contrast to Textures they are optimized for use as render targets, with Framebuffers.
+ * while Textures may not be, and are the logical choice when
+ * you do not need to sample (i.e. in a post-pass shader)
+ * from the produced image. If you need to resample
+ * (such as when reading depth back in a second shader pass),
+ * use Textures instead.
+ * Renderbuffer objects also natively accommodate Multisampling (MSAA).
+ */
+export class ImmutableRenderbuffer extends WebGLResource<RenderbufferProps> {
+  static isSupported(gl: WebGLRenderingContext, options?: {format?: number}): boolean {
+    return !options.format || isRenderbufferFormatSupported(gl, options.format);
+  }
+
+  constructor(gl: WebGLRenderingContext, props: RenderbufferProps) {
+    super(WebGLDevice.attach(gl), props, DEFAULT_RENDERBUFFER_PROPS);
+    this._initialize(this.props);
+  }
+
+  // PRIVATE METHODS
+
+  /** Creates and initializes a renderbuffer object's data store */
+  protected _initialize(props: Required<RenderbufferProps>) {
+    const {format, width, height, samples} = props;
+    assert(format, 'Needs format');
+
+    this.trackDeallocatedMemory();
+
+    this.gl.bindRenderbuffer(GL.RENDERBUFFER, this.handle);
+
+    if (samples !== 0 && isWebGL2(this.gl)) {
+      // @ts-expect-error
+      this.gl.renderbufferStorageMultisample(GL.RENDERBUFFER, samples, format, width, height);
+    } else {
+      this.gl.renderbufferStorage(GL.RENDERBUFFER, format, width, height);
+    }
+
+    this.gl.bindRenderbuffer(GL.RENDERBUFFER, null);
+
+    this.trackAllocatedMemory(
+      width * height * (samples || 1) * getRenderbufferFormatBytesPerPixel(format)
+    );
+
+    return this;
+  }
+
+  // RESOURECE IMPLEMENTATION
+
+  _createHandle() {
+    return this.gl.createRenderbuffer();
+  }
+
+  _deleteHandle(): void {
+    this.gl.deleteRenderbuffer(this.handle);
+    this.trackDeallocatedMemory();
+  }
+
+  _bindHandle(handle): void {
+    this.gl.bindRenderbuffer(GL.RENDERBUFFER, handle);
+  }
+}
+
+
+/**
+ * Renderbuffers are GPU objects that contain images.
+ * In contrast to Textures they are optimized for use as render targets, with Framebuffers.
+ * while Textures may not be, and are the logical choice when
+ * you do not need to sample (i.e. in a post-pass shader)
+ * from the produced image. If you need to resample
+ * (such as when reading depth back in a second shader pass),
+ * use Textures instead.
+ * Renderbuffer objects also natively accommodate Multisampling (MSAA).
+ */
+export default class Renderbuffer extends ImmutableRenderbuffer {
+  get width(): number { return this.props.width; }
+  get height(): number { return this.props.height; }
+  get format(): number  { return this.props.format; }
+  get samples(): number { return this.props.samples; }
+
+  static isSupported(gl: WebGLRenderingContext, options?: {format?: number}): boolean {
+    return ImmutableRenderbuffer.isSupported(gl, options);
+  }
+
+  static getSamplesForFormat(gl: WebGL2RenderingContext, options: {format: number}): number{
+    // Polyfilled to return [0] under WebGL1
+    return gl.getInternalformatParameter(GL.RENDERBUFFER, options.format, GL.SAMPLES);
+  }
+
+  constructor(gl: WebGLRenderingContext, props?: RenderbufferProps) {
+    super(gl, props);
+  }
+
+  resize(size: {width: number, height: number}): this {
+    // Don't resize if width/height haven't changed
+    if (size.width !== this.width || size.height !== this.height) {
+      return this.initialize({...size, format: this.format, samples: this.samples});
+    }
+    return this;
+  }
+
+  /** Creates and initializes a renderbuffer object's data store */
+  initialize(props: RenderbufferProps): this {
+    Object.assign(this.props, props);
+    this._initialize(this.props);
+    return this;
+  }
+
+  // PRIVATE
+
+  _syncHandle(handle) {
+    this.gl.bindRenderbuffer(GL.RENDERBUFFER, this.handle);
+    Object.assign(this.props, {
+      format: this.gl.getRenderbufferParameter(GL.RENDERBUFFER, GL.RENDERBUFFER_INTERNAL_FORMAT),
+      width: this.gl.getRenderbufferParameter(GL.RENDERBUFFER, GL.RENDERBUFFER_WIDTH),
+      height: this.gl.getRenderbufferParameter(GL.RENDERBUFFER, GL.RENDERBUFFER_HEIGHT),
+      samples: this.gl.getRenderbufferParameter(GL.RENDERBUFFER, GL.RENDERBUFFER_SAMPLES)
+    });
+  }
+
+  // @param {Boolean} opt.autobind=true - method call will bind/unbind object
+  // @returns {GLenum|GLint} - depends on pname
+  _getParameter(pname) {
+    this.gl.bindRenderbuffer(GL.RENDERBUFFER, this.handle);
+    const value = this.gl.getRenderbufferParameter(GL.RENDERBUFFER, pname);
+    // this.gl.bindRenderbuffer(GL.RENDERBUFFER, null);
+    return value;
+  }
+}

package/src/classes/shader.ts

@@ -0,0 +1,129 @@
+// luma.gl, MIT license
+import {assert, uid, ShaderProps} from '@luma.gl/api';
+import GL from '@luma.gl/constants';
+import {getShaderInfo} from '@luma.gl/shadertools';
+import {assertWebGLContext} from '../context/context/webgl-checks';
+import {WEBGLShader} from '../adapter/webgl-shader'
+import WebGLDevice from '../adapter/webgl-device'
+
+const ERR_SOURCE = 'Shader: GLSL source code must be a JavaScript string';
+
+export type {ShaderProps};
+
+/**
+ * Encapsulates the compiled or linked Shaders that execute portions of the WebGL Pipeline
+ * This is an internal class, use FragmentShader or VertexShader
+ */
+export class Shader extends WEBGLShader {
+  shaderType: GL.FRAGMENT_SHADER | GL.VERTEX_SHADER;
+  source: string;
+
+  static getTypeName(shaderType: any): 'vertex-shader' | 'fragment-shader' | 'unknown' {
+    switch (shaderType) {
+      case GL.VERTEX_SHADER:
+        return 'vertex-shader';
+      case GL.FRAGMENT_SHADER:
+        return 'fragment-shader';
+      default:
+        assert(false);
+        return 'unknown';
+    }
+  }
+
+  constructor(gl: WebGLRenderingContext, props: Omit<ShaderProps, 'stage'>) {
+    assertWebGLContext(gl);
+    assert(typeof props.source === 'string', ERR_SOURCE);
+    super(WebGLDevice.attach(gl), {...props, stage: props.shaderType === GL.VERTEX_SHADER ? 'vertex' : 'fragment'});
+
+    this.shaderType = props.shaderType;
+    this.source = props.source;
+
+    const shaderName = getShaderInfo(props.source).name;
+    if (shaderName) {
+      this.id = uid(shaderName);
+    }
+  }
+
+  initialize(props: ShaderProps): this {
+    this._compile(props.source);
+    const shaderName = getShaderInfo(props.source).name;
+    if (shaderName) {
+      this.id = uid(shaderName);
+    }
+    return this;
+  }
+
+  // Accessors
+
+  getParameter(pname: number): any {
+    return this.gl.getShaderParameter(this.handle, pname);
+  }
+
+  toString(): string {
+    return `${Shader.getTypeName(this.shaderType)}:${this.id}`;
+  }
+
+  getName(): string {
+    return getShaderInfo(this.source).name || 'unnamed-shader';
+  }
+
+  getSource(): string {
+    return this.gl.getShaderSource(this.handle);
+  }
+
+  /** Debug method - Returns translated source if available */
+  getTranslatedSource(): string {
+    const extension = this.gl.getExtension('WEBGL_debug_shaders');
+    return extension
+      ? extension.getTranslatedShaderSource(this.handle)
+      : 'No translated source available. WEBGL_debug_shaders not implemented';
+  }
+
+  // PRIVATE METHODS
+
+  _getOptsFromHandle() {
+    return {
+      type: this.getParameter(GL.SHADER_TYPE),
+      source: this.getSource()
+    };
+  }
+}
+
+/**
+ * Encapsulates the compiled or linked Shaders that execute portions of the WebGL Pipeline
+ * @deprecated Use `device.createShader({stage: 'vertex', ...})`
+ */
+ export class VertexShader extends Shader {
+  constructor(gl: WebGLRenderingContext, props: Omit<ShaderProps, 'stage'> | string) {
+    super(gl, getShaderProps(props, GL.VERTEX_SHADER));
+  }
+
+  // PRIVATE METHODS
+  _createHandle() {
+    return this.gl.createShader(GL.VERTEX_SHADER);
+  }
+}
+
+/**
+ * Encapsulates the compiled or linked Shaders that execute portions of the WebGL Pipeline
+ * @deprecated Use `device.createShader({stage: 'fragment', ...})`
+ */
+ export class FragmentShader extends Shader {
+  constructor(gl: WebGLRenderingContext, props: Omit<ShaderProps, 'stage'> | string) {
+    super(gl, getShaderProps(props, GL.FRAGMENT_SHADER));
+  }
+
+  // PRIVATE METHODS
+  _createHandle() {
+    return this.gl.createShader(GL.FRAGMENT_SHADER);
+  }
+}
+
+// HELPERS
+
+function getShaderProps(props: Omit<ShaderProps, 'stage'> | string, shaderType: GL.VERTEX_SHADER | GL.FRAGMENT_SHADER): Omit<ShaderProps, 'stage'> {
+  if (typeof props === 'string') {
+    return {source: props, shaderType};
+  }
+  return {...props, shaderType};
+}

package/src/classes/texture-2d.ts

@@ -0,0 +1,35 @@
+import {Device, loadImage} from '@luma.gl/api';
+import GL from '@luma.gl/constants';
+import Texture, {TextureProps, TextureSupportOptions} from './texture';
+
+
+export type Texture2DProps = TextureProps & {
+};
+
+export default class Texture2D extends Texture {
+  static isSupported(device: Device | WebGLRenderingContext, opts?: TextureSupportOptions): boolean {
+    return Texture.isSupported(device, opts);
+  }
+
+  constructor(device: Device | WebGLRenderingContext, props?: Texture2DProps | Promise<Texture2DProps>) {
+    // Signature: new Texture2D(gl, url | Promise)
+    if (props instanceof Promise || typeof props === 'string') {
+      props = {data: props};
+    }
+
+    // Signature: new Texture2D(gl, {data: url})
+    if (typeof props?.data === 'string') {
+      props = Object.assign({}, props, {data: loadImage(props.data)});
+    }
+
+    super(device, Object.assign({}, props, {target: GL.TEXTURE_2D}));
+
+    this.initialize(props);
+
+    Object.seal(this);
+  }
+
+  get [Symbol.toStringTag](): string {
+    return 'Texture2D';
+  }
+}

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 '../adapter/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 '../adapter/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