@luma.gl/webgl 8.6.0-alpha.4 → 9.0.0-alpha.3

package/src/classes/renderbuffer.ts

@@ -1,154 +0,0 @@
-/* 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

@@ -1,129 +0,0 @@
-// 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

@@ -1,35 +0,0 @@
-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.ts

@@ -1,123 +0,0 @@
-import {Device} from '@luma.gl/api';
-import GL from '@luma.gl/constants';
-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 './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(device: Device | WebGLRenderingContext): boolean {
-    try {
-      const webglDevice = WebGLDevice.attach(device);
-      return webglDevice.isWebGL2;
-    } catch {
-      return false;
-    }
-  }
-
-  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});
-    this.initialize(props);
-    Object.seal(this);
-  }
-
-  get [Symbol.toStringTag](): string {
-    return 'Texture3D';
-  }
-
-  /** Image 3D copies from Typed Array or WebGLBuffer */
-  setImageData({
-    level = 0,
-    dataFormat = GL.RGBA,
-    width,
-    height,
-    depth = 1,
-    border = 0,
-    format,
-    type = GL.UNSIGNED_BYTE,
-    offset = 0,
-    data,
-    parameters = {}
-  }: SetImageDataOptions) {
-    this.trackDeallocatedMemory('Texture');
-
-    this.gl.bindTexture(this.target, this.handle);
-
-    withParameters(this.gl, parameters, () => {
-      if (ArrayBuffer.isView(data)) {
-        // @ts-expect-error
-        this.gl.texImage3D(
-          this.target,
-          level,
-          dataFormat,
-          width,
-          height,
-          depth,
-          border,
-          format,
-          type,
-          data
-        );
-      }
-
-      if (data instanceof Buffer) {
-        this.gl.bindBuffer(GL.PIXEL_UNPACK_BUFFER, data.handle);
-        // @ts-expect-error
-        this.gl.texImage3D(
-          this.target,
-          level,
-          dataFormat,
-          width,
-          height,
-          depth,
-          border,
-          format,
-          type,
-          offset
-        );
-      }
-    });
-
-    if (data && data.byteLength) {
-      this.trackAllocatedMemory(data.byteLength, 'Texture');
-    } else {
-      // NOTE(Tarek): Default to RGBA bytes
-      const channels = DATA_FORMAT_CHANNELS[this.dataFormat] || 4;
-      const channelSize = TYPE_SIZES[this.type] || 1;
-
-      this.trackAllocatedMemory(
-        this.width * this.height * this.depth * channels * channelSize,
-        'Texture'
-      );
-    }
-
-    this.loaded = true;
-
-    return this;
-  }
-}

package/src/classes/texture-cube.ts

@@ -1,162 +0,0 @@
-import {Device, log} from '@luma.gl/api';
-import GL from '@luma.gl/constants';
-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 {
-  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;
-
-  constructor(device: Device | WebGLRenderingContext, props?: TextureCubeProps) {
-    super(device, Object.assign({}, props, {target: GL.TEXTURE_CUBE_MAP}));
-
-    this.initialize(props);
-
-    Object.seal(this);
-  }
-
-  get [Symbol.toStringTag](): string {
-    return 'TextureCube';
-  }
-
-  initialize(props?: TextureCubeProps): this {
-    const {mipmaps = true, parameters = {}} = props;
-
-    // Store props for accessors
-    this.props = props;
-
-    // @ts-expect-error
-    this.setCubeMapImageData(props).then(() => {
-      this.loaded = true;
-
-      // TODO - should genMipmap() be called on the cubemap or on the faces?
-      // TODO - without generateMipmap() cube textures do not work at all!!! Why?
-      if (mipmaps) {
-        this.generateMipmap(props);
-      }
-
-      this.setParameters(parameters);
-    });
-    return this;
-  }
-
-  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(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.
-    // For example:
-    // {
-    // GL.TEXTURE_CUBE_MAP_POSITIVE_X : Image-or-Promise,
-    // GL.TEXTURE_CUBE_MAP_NEGATIVE_X : Image-or-Promise,
-    // ... }
-    // To provide multiple level-of-details (LODs) this can be Face to Array
-    // of Image or Promise, like this
-    // {
-    // GL.TEXTURE_CUBE_MAP_POSITIVE_X : [Image-or-Promise-LOD-0, Image-or-Promise-LOD-1],
-    // GL.TEXTURE_CUBE_MAP_NEGATIVE_X : [Image-or-Promise-LOD-0, Image-or-Promise-LOD-1],
-    // ... }
-
-    const resolvedFaces = await Promise.all(
-      TextureCube.FACES.map((face) => {
-        const facePixels = imageDataMap[face];
-        return Promise.all(Array.isArray(facePixels) ? facePixels : [facePixels]);
-      })
-    );
-
-    this.bind();
-
-    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.`)();
-      }
-      resolvedFaces[index].forEach((image, lodLevel) => {
-        // TODO: adjust width & height for LOD!
-        if (width && height) {
-          gl.texImage2D(face, lodLevel, format, width, height, border, format, type, image);
-        } else {
-          gl.texImage2D(face, lodLevel, format, format, type, image);
-        }
-      });
-    });
-
-    this.unbind();
-  }
-
-  // TODO: update this method to accept LODs
-  setImageDataForFace(options) {
-    const {
-      face,
-      width,
-      height,
-      pixels,
-      data,
-      border = 0,
-      format = GL.RGBA,
-      type = GL.UNSIGNED_BYTE
-      // generateMipmap = false // TODO
-    } = 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, border, format, type, imageData);
-    } else {
-      gl.texImage2D(face, 0, format, format, type, imageData);
-    }
-
-    return this;
-  }
-}