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

package/src/classes/program.ts

@@ -1,74 +1,87 @@
+import {log, assert, uid, cast, Shader} from '@luma.gl/api';
 import GL from '@luma.gl/constants';
-
+import WebGLDevice from '../adapter/webgl-device';
 import WebGLResource, {ResourceProps} from './webgl-resource';
 import Texture from './texture';
 import Framebuffer from './framebuffer';
 import {parseUniformName, getUniformSetter} from './uniforms';
-import {VertexShader, FragmentShader} from './webgl-shader';
+import {WEBGLShader} from '../adapter/webgl-shader';
 import ProgramConfiguration from './program-configuration';
 import {copyUniform, checkUniformValues} from './uniforms';
 
-import {isWebGL2, assertWebGL2Context, withParameters, log} from '@luma.gl/gltools';
-import {getKey} from '../webgl-utils';
+import {isWebGL2, assertWebGL2Context} from '../context/context/webgl-checks';
+import {withParameters} from '../context/state-tracker/with-parameters';
+import {getKey} from '../webgl-utils/constants-to-keys';
 import {getPrimitiveDrawMode} from '../webgl-utils/attribute-utils';
-import {uid, assert} from '../utils';
 
 const LOG_PROGRAM_PERF_PRIORITY = 4;
 
 const GL_SEPARATE_ATTRIBS = 0x8c8d;
 
 export type ProgramProps = ResourceProps & {
-  hash?;
-  vs?; 
-  fs?;
-  varyings?; 
+  hash?: string;
+  vs?: string | Shader;
+  fs?: string | Shader;
+  varyings?: string[];
   bufferMode?: number;
-}
+};
 
 export type ProgramDrawOptions = {
-  logPriority?: any;
-  drawMode?: any;
+  logPriority?: number;
+  drawMode?: number;
   vertexCount: any;
   offset?: number;
-  start?: any;
-  end?: any;
+  start?: number;
+  end?: number;
   isIndexed?: boolean;
   indexType?: any;
   instanceCount?: number;
   isInstanced?: boolean;
   vertexArray?: any;
-  transformFeedback?: any;
-  framebuffer?: any;
+  transformFeedback?: any; // TransformFeedback;
+  framebuffer?: Framebuffer;
   parameters?: {};
-  uniforms?: any;
+  uniforms?: Record<string, any>;
   samplers?: any;
 };
 
 export default class Program extends WebGLResource<ProgramProps> {
   configuration: ProgramConfiguration;
   // Experimental flag to avoid deleting Program object while it is cached
-  _isCached = false;
-  _textureIndexCounter = 0;
-  hash: string;; // Used by ProgramManager
-  vs;
-  fs;
-  uniforms: {};
-  _textureUniforms: {};
-  varyings: {};
-  _uniformCount = 0;
-  _uniformSetters: {};
-  
-  constructor(gl: WebGLRenderingContext, props: ProgramProps = {}) {
-    super(gl, props, {} as any);
-
-
+  hash: string; // Used by ProgramManager
+  vs: WEBGLShader;
+  fs: WEBGLShader;
+  uniforms: Record<string, any>;
+  varyings: Record<string, any>;
+  _textureUniforms: Record<string, any>;
+  _isCached: boolean = false;
+  _textureIndexCounter: number = 0;
+  _uniformCount: number = 0;
+  _uniformSetters: Record<string, Function>;
+
+  constructor(device: WebGLDevice | WebGLRenderingContext, props: ProgramProps = {}) {
+    super(WebGLDevice.attach(device), props, {} as any);
     this.initialize(props);
-
     Object.seal(this);
-
     this._setId(props.id);
   }
 
+  destroy(options = {}) {
+    if (this._isCached) {
+      // This object is cached, do not delete
+      return this;
+    }
+    return super.delete(options);
+  }
+
+  delete(options = {}) {
+    if (this._isCached) {
+      // This object is cached, do not delete
+      return this;
+    }
+    return super.delete(options);
+  }
+
   initialize(props: ProgramProps = {}) {
     const {hash, vs, fs, varyings, bufferMode = GL_SEPARATE_ATTRIBS} = props;
 
@@ -76,15 +89,18 @@ export default class Program extends WebGLResource<ProgramProps> {
 
     // Create shaders if needed
     this.vs =
-      typeof vs === 'string' ? new VertexShader(this.gl, {id: `${props.id}-vs`, source: vs}) : vs;
+      typeof vs === 'string'
+        ? this.device.createShader({id: `${props.id}-vs`, source: vs, stage: 'vertex'})
+        : cast<WEBGLShader>(vs);
     this.fs =
-      typeof fs === 'string' ? new FragmentShader(this.gl, {id: `${props.id}-fs`, source: fs}) : fs;
-    assert(this.vs instanceof VertexShader);
-    assert(this.fs instanceof FragmentShader);
+      typeof fs === 'string'
+        ? this.device.createShader({id: `${props.id}-fs`, source: fs, stage: 'fragment'})
+        : cast<WEBGLShader>(fs);
+    assert(this.vs.stage === 'vertex');
+    assert(this.fs.stage === 'fragment');
 
     // uniforms
     this.uniforms = {};
-
     this._textureUniforms = {};
 
     // Setup varyings if supplied
@@ -101,14 +117,6 @@ export default class Program extends WebGLResource<ProgramProps> {
     return this.setProps(props);
   }
 
-  delete(options = {}) {
-    if (this._isCached) {
-      // This object is cached, do not delete
-      return this;
-    }
-    return super.delete(options);
-  }
-
   setProps(props) {
     if ('uniforms' in props) {
       this.setUniforms(props.uniforms);
@@ -120,30 +128,30 @@ export default class Program extends WebGLResource<ProgramProps> {
   // This function unifies those ways into a single call using common parameters with sane defaults
   draw(options: ProgramDrawOptions): boolean {
     const {
-    logPriority, // Probe log priority, enables Model to do more integrated logging
-
-    drawMode = GL.TRIANGLES,
-    vertexCount,
-    offset = 0,
-    start,
-    end,
-    isIndexed = false,
-    indexType = GL.UNSIGNED_SHORT,
-    instanceCount = 0,
-    isInstanced = instanceCount > 0,
-
-    vertexArray = null,
-    transformFeedback,
-    framebuffer,
-
-    // Deprecated
-    uniforms,
-    samplers
-  } = options;
-
-  let {parameters = {}} = options;
-
-  if (uniforms || samplers) {
+      logPriority, // Probe log priority, enables Model to do more integrated logging
+
+      drawMode = GL.TRIANGLES,
+      vertexCount,
+      offset = 0,
+      start,
+      end,
+      isIndexed = false,
+      indexType = GL.UNSIGNED_SHORT,
+      instanceCount = 0,
+      isInstanced = instanceCount > 0,
+
+      vertexArray = null,
+      transformFeedback,
+      framebuffer,
+
+      // Deprecated
+      uniforms,
+      samplers
+    } = options;
+
+    let {parameters = {}} = options;
+
+    if (uniforms || samplers) {
       // DEPRECATED: v7.0 (deprecated earlier but warning not properly implemented)
       log.deprecated('Program.draw({uniforms})', 'Program.setUniforms(uniforms)')();
       this.setUniforms(uniforms || {});
@@ -234,12 +242,15 @@ export default class Program extends WebGLResource<ProgramProps> {
 
           if (textureUpdate) {
             // eslint-disable-next-line max-depth
+            // @ts-expect-error
             if (uniformSetter.textureIndex === undefined) {
+              // @ts-expect-error
               uniformSetter.textureIndex = this._textureIndexCounter++;
             }
 
             // Bind texture to index
             const texture = value;
+            // @ts-expect-error
             const {textureIndex} = uniformSetter;
 
             texture.bind(textureIndex);
@@ -247,6 +258,7 @@ export default class Program extends WebGLResource<ProgramProps> {
 
             this._textureUniforms[uniformName] = texture;
           } else {
+            // @ts-expect-error
             value = uniformSetter.textureIndex;
           }
         } else if (this._textureUniforms[uniformName]) {
@@ -285,6 +297,7 @@ export default class Program extends WebGLResource<ProgramProps> {
   // Note: This is currently done before every draw call
   _bindTextures() {
     for (const uniformName in this._textureUniforms) {
+      // @ts-expect-error
       const textureIndex = this._uniformSetters[uniformName].textureIndex;
       this._textureUniforms[uniformName].bind(textureIndex);
     }
@@ -308,11 +321,11 @@ export default class Program extends WebGLResource<ProgramProps> {
       const type = this.gl.getShaderParameter(this.handle, GL.SHADER_TYPE);
       switch (type) {
         case GL.VERTEX_SHADER:
-          // @ts-ignore
+          // @ts-expect-error
           opts.vs = new VertexShader({handle: shaderHandle});
           break;
         case GL.FRAGMENT_SHADER:
-          // @ts-ignore
+          // @ts-expect-error
           opts.fs = new FragmentShader({handle: shaderHandle});
           break;
         default:
@@ -336,7 +349,8 @@ export default class Program extends WebGLResource<ProgramProps> {
 
   // Generate a default name for the program based on names of the shaders
   _getName() {
-    let programName = this.vs.getName() || this.fs.getName();
+    // let programName = this.vs.getName() || this.fs.getName();
+    let programName = this.vs.id || this.fs.id;
     programName = programName.replace(/shader/i, '');
     programName = programName ? `${programName}-program` : 'program';
     return programName;
@@ -351,7 +365,7 @@ export default class Program extends WebGLResource<ProgramProps> {
     log.timeEnd(LOG_PROGRAM_PERF_PRIORITY, `linkProgram for ${this._getName()}`)();
 
     // Avoid checking program linking error in production
-    // @ts-ignore
+    // @ts-expect-error
     if (gl.debug || log.level > 0) {
       const linked = gl.getProgramParameter(this.handle, gl.LINK_STATUS);
       if (!linked) {

package/src/classes/query.ts

@@ -1,8 +1,8 @@
 // WebGL2 Query (also handles disjoint timer extensions)
-import {isWebGL2} from '@luma.gl/gltools';
+import {assert} from '@luma.gl/api';
+import WebGLDevice from '../adapter/webgl-device';
+import {isWebGL2} from '../context/context/webgl-checks';
 import WebGLResource, {ResourceProps} from './webgl-resource';
-import {FEATURES, hasFeatures} from '../features';
-import {assert} from '../utils';
 
 const GL_QUERY_RESULT = 0x8866; // Returns a GLuint containing the query result.
 const GL_QUERY_RESULT_AVAILABLE = 0x8867; // whether query result is available.
@@ -27,7 +27,8 @@ export default class Query extends WebGLResource<QueryProps> {
     const webgl2 = isWebGL2(gl);
 
     // Initial value
-    const hasTimerQuery = hasFeatures(gl, FEATURES.TIMER_QUERY);
+    const webglDevice = WebGLDevice.fromContext(gl);
+    const hasTimerQuery = webglDevice.features.has('webgl-timer-query');
     let supported = webgl2 || hasTimerQuery;
 
     for (const key of options) {
@@ -52,8 +53,7 @@ export default class Query extends WebGLResource<QueryProps> {
 
   // Create a query class
   constructor(gl: WebGLRenderingContext, opts: QueryProps = {}) {
-    super(gl, opts, {} as any);
-
+    super(WebGLDevice.attach(gl), opts, {} as any);
     Object.seal(this);
   }
 

package/src/classes/renderbuffer-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';
 
 export function isRenderbufferFormatSupported(gl: WebGLRenderingContext, format: GL): boolean {
   const info = RENDERBUFFER_FORMATS[format];

package/src/classes/renderbuffer.ts

@@ -1,9 +1,10 @@
 /* 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 '@luma.gl/gltools';
-import {assert} from '../utils';
+import {isWebGL2} from '../context/context/webgl-checks';
 
 export type RenderbufferProps = ResourceProps & {
   format: number;
@@ -38,7 +39,7 @@ export class ImmutableRenderbuffer extends WebGLResource<RenderbufferProps> {
   }
 
   constructor(gl: WebGLRenderingContext, props: RenderbufferProps) {
-    super(gl, props, DEFAULT_RENDERBUFFER_PROPS);
+    super(WebGLDevice.attach(gl), props, DEFAULT_RENDERBUFFER_PROPS);
     this._initialize(this.props);
   }
 
@@ -54,7 +55,7 @@ export class ImmutableRenderbuffer extends WebGLResource<RenderbufferProps> {
     this.gl.bindRenderbuffer(GL.RENDERBUFFER, this.handle);
 
     if (samples !== 0 && isWebGL2(this.gl)) {
-      // @ts-ignore
+      // @ts-expect-error
       this.gl.renderbufferStorageMultisample(GL.RENDERBUFFER, samples, format, width, height);
     } else {
       this.gl.renderbufferStorage(GL.RENDERBUFFER, format, width, height);

package/src/classes/{webgl-shader.ts → shader.ts}

@@ -1,80 +1,18 @@
 // luma.gl, MIT license
+import {assert, uid, ShaderProps} from '@luma.gl/api';
 import GL from '@luma.gl/constants';
-import {assertWebGLContext, log} from '@luma.gl/gltools';
-import {getShaderInfo, CompilerMessage, formatCompilerLog} from '@luma.gl/shadertools';
-import {Shader as ShaderAPI, ShaderProps} from '@luma.gl/api';
-import {parseShaderCompilerLog} from '../webgl-utils/parse-shader-compiler-log';
-import {uid, assert} from '../utils';
+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};
 
-export class WEBGLShader extends ShaderAPI {
-  readonly gl: WebGLRenderingContext;
-  readonly handle: WebGLShader;
-
-  readonly stage: 'vertex' | 'fragment';
-
-  constructor(gl: WebGLRenderingContext, props: ShaderProps) {
-    super(gl as any, {id: getShaderIdFromProps(props), ...props});
-    this.gl = gl;
-    switch (this.props.stage) {
-      case 'vertex':
-        this.handle = this.props.handle || this.gl.createShader(GL.VERTEX_SHADER);
-        break;
-      case 'fragment':
-        this.handle = this.props.handle || this.gl.createShader(GL.FRAGMENT_SHADER);
-        break;
-      default:
-        throw new Error(this.props.stage);
-    }
-    this.stage = this.props.stage;
-    this._compile(props.source);
-  }
-
-  destroy(): void {
-    if (this.handle) {
-      this.removeStats();
-      this.gl.deleteShader(this.handle);
-      // @ts-expect-error
-      this.handle = null;
-    }
-  }  
-  
-  async compilationInfo(): Promise<readonly CompilerMessage[]> {
-    const log = this.gl.getShaderInfoLog(this.handle);
-    return parseShaderCompilerLog(log);
-  }
-
-  // PRIVATE METHODS
-  _compile(source) {
-    if (!source.startsWith('#version ')) {
-      source = `#version 100\n${source}`;
-    }
-    this.gl.shaderSource(this.handle, source);
-    this.gl.compileShader(this.handle);
-
-    // TODO - For performance reasons, avoid checking shader compilation errors on production?
-    // TODO - Load log even when no error reported, to catch warnings?
-    // https://gamedev.stackexchange.com/questions/30429/how-to-detect-glsl-warnings
-    const compileStatus = this.gl.getShaderParameter(this.handle, GL.COMPILE_STATUS);
-    if (!compileStatus) {
-      const shaderLog = this.gl.getShaderInfoLog(this.handle);
-      const messages = parseShaderCompilerLog(shaderLog).filter(message => message.type === 'error');
-      const formattedLog = formatCompilerLog(messages, source);
-      const shaderName: string = getShaderInfo(source).name;
-      const shaderDescription = `${this.stage} shader ${shaderName}`;
-      log.error(`GLSL compilation errors in ${shaderName}\n${formattedLog}`)();
-      throw new Error(`GLSL compilation errors in ${shaderName}`);
-    }
-  }
-}
- 
 /**
  * Encapsulates the compiled or linked Shaders that execute portions of the WebGL Pipeline
- * For now this is an internal class
+ * This is an internal class, use FragmentShader or VertexShader
  */
 export class Shader extends WEBGLShader {
   shaderType: GL.FRAGMENT_SHADER | GL.VERTEX_SHADER;
@@ -95,9 +33,7 @@ export class Shader extends WEBGLShader {
   constructor(gl: WebGLRenderingContext, props: Omit<ShaderProps, 'stage'>) {
     assertWebGLContext(gl);
     assert(typeof props.source === 'string', ERR_SOURCE);
-
-    // @ts-expect-error
-    super(gl, {...props, id: getShaderIdFromProps(props), stage: props.shaderType === GL.VERTEX_SHADER ? 'vertex' : 'fragment'});
+    super(WebGLDevice.attach(gl), {...props, stage: props.shaderType === GL.VERTEX_SHADER ? 'vertex' : 'fragment'});
 
     this.shaderType = props.shaderType;
     this.source = props.source;
@@ -191,10 +127,3 @@ function getShaderProps(props: Omit<ShaderProps, 'stage'> | string, shaderType:
   }
   return {...props, shaderType};
 }
-
-/** Deduce an id, from shader source, or supplied id, or shader type */
-function getShaderIdFromProps(props: ShaderProps): string {
-  return getShaderInfo(props.source).name ||
-    props.id ||
-    uid(`unnamed ${props.stage || Shader.getTypeName(props.shaderType)}`);
-}

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

@@ -1,21 +1,17 @@
+import {Device, loadImage} from '@luma.gl/api';
 import GL from '@luma.gl/constants';
-import {assertWebGLContext} from '@luma.gl/gltools';
-import Texture, {TextureProps} from './texture';
-import {loadImage} from '../utils/load-file';
+import Texture, {TextureProps, TextureSupportOptions} from './texture';
 
 
 export type Texture2DProps = TextureProps & {
 };
 
 export default class Texture2D extends Texture {
-  static isSupported(gl: WebGLRenderingContext, opts?: object): boolean {
-    // @ts-expect-error
-    return Texture.isSupported(gl, opts);
+  static isSupported(device: Device | WebGLRenderingContext, opts?: TextureSupportOptions): boolean {
+    return Texture.isSupported(device, opts);
   }
 
-  constructor(gl: WebGLRenderingContext, props?: Texture2DProps | Promise<Texture2DProps>) {
-      assertWebGLContext(gl);
-
+  constructor(device: Device | WebGLRenderingContext, props?: Texture2DProps | Promise<Texture2DProps>) {
     // Signature: new Texture2D(gl, url | Promise)
     if (props instanceof Promise || typeof props === 'string') {
       props = {data: props};
@@ -23,11 +19,10 @@ export default class Texture2D extends Texture {
 
     // Signature: new Texture2D(gl, {data: url})
     if (typeof props?.data === 'string') {
-      // @ts-expect-error
       props = Object.assign({}, props, {data: loadImage(props.data)});
     }
 
-    super(gl, Object.assign({}, props, {target: GL.TEXTURE_2D}));
+    super(device, Object.assign({}, props, {target: GL.TEXTURE_2D}));
 
     this.initialize(props);
 

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

@@ -1,5 +1,8 @@
+import {Device} from '@luma.gl/api';
 import GL from '@luma.gl/constants';
-import {isWebGL2, assertWebGL2Context, withParameters} from '@luma.gl/gltools';
+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';
@@ -26,16 +29,20 @@ type SetImageDataOptions = {
  * They are accessed by 3-dimensional texture coordinates.
  */
 export default class Texture3D extends Texture {
-  static isSupported(gl: WebGLRenderingContext): boolean {
-    return isWebGL2(gl);
+  static isSupported(device: Device | WebGLRenderingContext): boolean {
+    try {
+      const webglDevice = WebGLDevice.attach(device);
+      return webglDevice.isWebGL2;
+    } catch {
+      return false;
+    }
   }
 
-  constructor(gl: WebGL2RenderingContext, props: Texture3DProps = {}) {
-    super(gl as WebGLRenderingContext, 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});
     this.initialize(props);
-
     Object.seal(this);
   }
 
@@ -63,7 +70,7 @@ export default class Texture3D extends Texture {
 
     withParameters(this.gl, parameters, () => {
       if (ArrayBuffer.isView(data)) {
-        // @ts-ignore
+        // @ts-expect-error
         this.gl.texImage3D(
           this.target,
           level,
@@ -80,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,
@@ -100,9 +107,7 @@ export default class Texture3D extends 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(

package/src/classes/texture-cube.ts

@@ -1,5 +1,7 @@
+import {Device, log} from '@luma.gl/api';
 import GL from '@luma.gl/constants';
-import {log, assertWebGLContext} from '@luma.gl/gltools';
+import WebGLDevice from '../adapter/webgl-device';
+import {assertWebGLContext} from '../context/context/webgl-checks';
 import Texture, {TextureProps} from './texture';
 
 export type TextureCubeProps = TextureProps & {
@@ -17,10 +19,8 @@ export default class TextureCube extends Texture {
 
   props;
 
-  constructor(gl: WebGLRenderingContext, props?: TextureCubeProps) {
-    assertWebGLContext(gl);
-
-    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);
 
@@ -37,7 +37,7 @@ export default class TextureCube extends Texture {
     // Store props for accessors
     this.props = props;
 
-    // @ts-ignore
+    // @ts-expect-error
     this.setCubeMapImageData(props).then(() => {
       this.loaded = true;
 
@@ -54,7 +54,7 @@ export default class TextureCube extends Texture {
 
   subImage(options: {face: any; data: any; x?: number; y?: number; mipmapLevel?: number}): any {
     const {face, data, x = 0, y = 0, mipmapLevel = 0} = options;
-    // @ts-ignore TODO - is this a bug?
+    // @ts-expect-error TODO - is this a bug?
     return this._subImage({target: face, data, x, y, mipmapLevel});
   }
 

package/src/classes/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';