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

package/src/classes/{resource.js → webgl-resource.ts}

@@ -1,29 +1,40 @@
+// luma.gl, MIT license
 import {isWebGL2, assertWebGLContext} from '@luma.gl/gltools';
-import {lumaStats} from '../init';
-import {getKey, getKeyValue} from '../webgl-utils/constants-to-keys';
-import {assert} from '../utils/assert';
-import {uid} from '../utils/utils';
-import {stubRemovedMethods} from '../utils/stub-methods';
+import {Resource} from '@luma.gl/api';
+export type {ResourceProps} from '@luma.gl/api';
+import {getKey, getKeyValue} from '../webgl-utils';
+import {uid, assert, stubRemovedMethods} from '../utils';
 
 const ERR_RESOURCE_METHOD_UNDEFINED = 'Resource subclass must define virtual methods';
 
-// TODO - Handle context loss
-// function glGetContextLossCount(gl) {
-//   return (gl.luma && gl.luma.glCount) || 0;
-// }
+/**
+ * Base class for WebGL object wrappers
+ */
+ export default class WebGLResource<Props> extends Resource<Props> {
+  id: string;
+  readonly gl: WebGLRenderingContext;
+  readonly gl2: WebGL2RenderingContext;
+  userData: any;
+  private _handle: any;
+
+  private _bound = false;
+  // Only meaningful for resources that allocate GPU memory
+  byteLength = 0;
+
+  constructor(gl: WebGLRenderingContext, props: Props, defaultProps: Required<Props>) {
+    super(gl as any, props, defaultProps);
 
-export default class Resource {
-  constructor(gl, opts = {}) {
     assertWebGLContext(gl);
 
-    const {id, userData = {}} = opts;
+    // extends 
+    // @ts-expect-error
+    const {id, userData = {}} = props || {};
     this.gl = gl;
     // @ts-ignore
     this.gl2 = gl;
     // this.ext = polyfillContext(gl);
     this.id = id || uid(this.constructor.name);
     this.userData = userData;
-    this._bound = false;
 
     // Set the handle
     // If handle was provided, use it, otherwise create a new handle
@@ -32,18 +43,16 @@ export default class Resource {
     // this.glCount = glGetContextLossCount(this.gl);
 
     // Default VertexArray needs to be created with null handle, so compare against undefined
-    this._handle = opts.handle;
+    // @ts-expect-error
+    this._handle = props?.handle;
     if (this._handle === undefined) {
       this._handle = this._createHandle();
     }
 
-    // Only meaningful for resources that allocate GPU memory
     this.byteLength = 0;
-
-    this._addStats();
   }
 
-  toString() {
+  toString(): string {
     return `${this.constructor.name}(${this.id})`;
   }
 
@@ -52,10 +61,10 @@ export default class Resource {
     // Will regenerate and reinitialize the handle if necessary
     // const glCount = glGetContextLossCount(this.gl);
     // if (this.glCount !== glCount) {
-    //   this._handle = this._createHandle(this.opts);
+    //   this._handle = this._createHandle(this.props);
     //   this._glCount = glCount;
     //   // Reinitialize object
-    //   this.initialize(this.opts);
+    //   this.initialize(this.props);
     // }
     return this._handle;
   }
@@ -65,7 +74,7 @@ export default class Resource {
     // @ts-ignore
     const children = this._handle && this._deleteHandle(this._handle);
     if (this._handle) {
-      this._removeStats();
+      this.removeStats();
     }
     this._handle = null;
 
@@ -73,7 +82,7 @@ export default class Resource {
     // @ts-ignore
     if (children && deleteChildren) {
       // @ts-ignore
-      children.filter(Boolean).forEach(child => child.delete());
+      children.filter(Boolean).forEach((child) => child.delete());
     }
 
     return this;
@@ -109,10 +118,10 @@ export default class Resource {
   /**
    * Query a Resource parameter
    *
-   * @param {GLenum} pname
-   * @return {GLint|GLfloat|GLenum} param
+   * @param name
+   * @return param
    */
-  getParameter(pname, opts = {}) {
+  getParameter(pname: number, props = {}): any {
     pname = getKeyValue(this.gl, pname);
     assert(pname);
 
@@ -139,13 +148,13 @@ export default class Resource {
 
     // If unknown parameter - Could be a valid parameter not covered by PARAMS
     // Attempt to query for it and let WebGL report errors
-    return this._getParameter(pname, opts);
+    return this._getParameter(pname, props);
   }
 
   // Many resources support a getParameter call -
   // getParameters will get all parameters - slow but useful for debugging
   // eslint-disable-next-line complexity
-  getParameters(options = {}) {
+  getParameters(options: {parameters?, keys?} = {}) {
     const {parameters, keys} = options;
 
     // Get parameter definitions for this Resource
@@ -212,6 +221,7 @@ export default class Resource {
 
       // Handle string keys
       if (parameter.type === 'GLenum') {
+        // @ts-expect-error
         value = getKeyValue(value);
       }
     }
@@ -239,7 +249,7 @@ export default class Resource {
   }
 
   // PUBLIC VIRTUAL METHODS
-  initialize(opts) {}
+  initialize(props) {}
 
   // PROTECTED METHODS - These must be overridden by subclass
   _createHandle() {
@@ -259,7 +269,7 @@ export default class Resource {
   }
 
   /** @returns {number} */
-  _getParameter(pname, opts) {
+  _getParameter(pname, props) {
     throw new Error(ERR_RESOURCE_METHOD_UNDEFINED);
   }
 
@@ -269,11 +279,7 @@ export default class Resource {
 
   // PRIVATE METHODS
 
-  _context() {
-    this.gl.luma = this.gl.luma || {};
-    return this.gl.luma;
-  }
-
+  /*
   _addStats() {
     const name = this.constructor.name;
     const stats = lumaStats.get('Resource Counts');
@@ -290,7 +296,7 @@ export default class Resource {
     stats.get(`${name}s Active`).decrementCount();
   }
 
-  _trackAllocatedMemory(bytes, name = this.constructor.name) {
+  trackAllocatedMemory(bytes, name = this.constructor.name) {
     const stats = lumaStats.get('Memory Usage');
 
     stats.get('GPU Memory').addCount(bytes);
@@ -298,11 +304,12 @@ export default class Resource {
     this.byteLength = bytes;
   }
 
-  _trackDeallocatedMemory(name = this.constructor.name) {
+  trackDeallocatedMemory(name = this.constructor.name) {
     const stats = lumaStats.get('Memory Usage');
 
     stats.get('GPU Memory').subtractCount(this.byteLength);
     stats.get(`${name} Memory`).subtractCount(this.byteLength);
     this.byteLength = 0;
   }
+  */
 }

package/src/classes/webgl-shader.ts

@@ -0,0 +1,200 @@
+// luma.gl, MIT license
+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';
+
+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
+ */
+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);
+
+    // @ts-expect-error
+    super(gl, {...props, id: getShaderIdFromProps(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};
+}
+
+/** 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/context/gl-context.ts

@@ -0,0 +1,31 @@
+// 
+import type {GLContextOptions} from '@luma.gl/gltools';
+import {createGLContext, isWebGL2} from '@luma.gl/gltools';
+import {Device} from '@luma.gl/api';
+import type {BufferProps, ShaderProps} from '@luma.gl/api';
+import WEBGLBuffer from '../classes/webgl-buffer';
+import {WEBGLShader, } from '../classes/webgl-shader';
+import Texture2D, {Texture2DProps} from '../classes/texture-2d';
+
+export default class GLContext extends Device {
+  readonly gl: WebGLRenderingContext;
+  readonly gl2: WebGL2RenderingContext | null;
+
+  constructor(props: GLContextOptions) {
+    super();
+    this.gl = createGLContext(props);
+    this.gl2 = isWebGL2(this.gl) ? this.gl as WebGL2RenderingContext : null;
+  }
+
+  createBuffer(props: BufferProps): WEBGLBuffer {
+    return new WEBGLBuffer(this.gl, props);
+  }
+
+  createTexture(props: Texture2DProps): Texture2D {
+    return new Texture2D(this.gl, props);
+  }
+
+  createShader(props: ShaderProps): WEBGLShader {
+    return new WEBGLShader(this.gl, props);
+  }
+}

package/src/context/luma-context-data.ts

@@ -0,0 +1,27 @@
+import type {default as Framebuffer} from '../classes/framebuffer';
+import type {default as VertexArrayObject} from '../classes/vertex-array-object';
+
+/**
+ * Data stored by luma.gl on the context
+ */
+export type LumaContextData = {
+  defaultFramebuffer?: Framebuffer;
+  defaultVertexArray?: VertexArrayObject;
+  info: {[key: string]: any};
+  caps: {[key: string]: any};
+  limits: {[key: string]: any};
+  webgl1MinLimits: {[key: string]: any};
+  webgl2MinLimits: {[key: string]: any};
+};
+
+/**
+ * 
+ * @param gl 
+ * @returns 
+ */
+export function getLumaContextData(gl: WebGLRenderingContext): LumaContextData {
+  // @ts-ignore
+  gl.luma = gl.luma || {};
+  // @ts-ignore
+  return gl.luma as LumaContextData;
+}

package/src/debug/{debug-uniforms.js → debug-uniforms.ts}

@@ -1,14 +1,24 @@
-import {assert} from '../utils/assert';
-import {formatValue} from '../utils/format-value';
+import {formatValue, assert} from '../utils';
 
 // Prepares a table suitable for console.table
 /* eslint-disable max-statements, complexity */
-export function getDebugTableForUniforms({
-  header = 'Uniforms',
-  program,
-  uniforms,
-  undefinedOnly = false
-}) {
+export function getDebugTableForUniforms(options?: {
+  header?: string;
+  program: any;
+  uniforms: any;
+  undefinedOnly?: boolean;
+}): {
+  table: {};
+  count: number;
+  unusedTable: {};
+  unusedCount: number;
+} {
+  const {
+    header = 'Uniforms',
+    program,
+    uniforms,
+    undefinedOnly = false
+  } = options;
   assert(program);
 
   const SHADER_MODULE_UNIFORM_REGEXP = '.*_.*';

package/src/debug/{debug-vertex-array.js → debug-vertex-array.ts}

@@ -1,10 +1,12 @@
-import Buffer from '../classes/buffer';
-import {getKey} from '../webgl-utils/constants-to-keys';
+import Buffer from '../classes/webgl-buffer';
+import {getKey} from '../webgl-utils';
 import {getCompositeGLType} from '../webgl-utils/attribute-utils';
-import {formatValue} from '../utils/format-value';
+import {formatValue} from '../utils';
 
 // Creates object suitable as input for console.table
-export function getDebugTableForVertexArray({vertexArray, header = 'Attributes'}) {
+export function getDebugTableForVertexArray(options?: {vertexArray: any; header?: string}): {} {
+  const {vertexArray, header = 'Attributes'} = options;
+
   if (!vertexArray.configuration) {
     return {};
   }
@@ -14,6 +16,7 @@ export function getDebugTableForVertexArray({vertexArray, header = 'Attributes'}
   // Add index (elements) if available
   if (vertexArray.elements) {
     // const elements = Object.assign({size: 1}, vertexArray.elements);
+    // @ts-expect-error
     table.ELEMENT_ARRAY_BUFFER = getDebugTableRow(vertexArray, vertexArray.elements, null, header);
   }
 

package/src/features/{check-glsl-extension.js → check-glsl-extension.ts}

@@ -1,6 +1,6 @@
 import isOldIE from './check-old-ie';
 import WEBGL_FEATURES from './webgl-features-table';
-import {assert} from '../utils/assert';
+import {assert} from '../utils';
 
 // Enables feature detection in IE11 due to a bug where gl.getExtension may return true
 // but fail to compile when the extension is enabled in the shader. Specifically,

package/src/features/{features.js → features.ts}

@@ -5,7 +5,8 @@
 
 import WEBGL_FEATURES from './webgl-features-table';
 import {isWebGL2, log} from '@luma.gl/gltools';
-import {assert} from '../utils/assert';
+import {assert} from '../utils';
+import {getLumaContextData} from '../context/luma-context-data';
 
 const LOG_UNSUPPORTED_FEATURE = 2;
 
@@ -17,37 +18,37 @@ export function hasFeature(gl, feature) {
 // Check one or more features
 export function hasFeatures(gl, features) {
   features = Array.isArray(features) ? features : [features];
-  return features.every(feature => {
+  return features.every((feature) => {
     return isFeatureSupported(gl, feature);
   });
 }
 
 // Return a list of supported features
 export function getFeatures(gl) {
-  gl.luma = gl.luma || {};
-  gl.luma.caps = gl.luma.caps || {};
+  const lumaContextData = getLumaContextData(gl);
+  lumaContextData.caps = lumaContextData.caps || {};
   for (const cap in WEBGL_FEATURES) {
-    if (gl.luma.caps[cap] === undefined) {
-      gl.luma.caps[cap] = isFeatureSupported(gl, cap);
+    if (lumaContextData.caps[cap] === undefined) {
+      lumaContextData.caps[cap] = isFeatureSupported(gl, cap);
     }
   }
-  return gl.luma.caps;
+  return lumaContextData.caps;
 }
 
 // TODO - cache the value
 function isFeatureSupported(gl, cap) {
-  gl.luma = gl.luma || {};
-  gl.luma.caps = gl.luma.caps || {};
+  const lumaContextData = getLumaContextData(gl);
+  lumaContextData.caps = lumaContextData.caps || {};
 
-  if (gl.luma.caps[cap] === undefined) {
-    gl.luma.caps[cap] = queryFeature(gl, cap);
+  if (lumaContextData.caps[cap] === undefined) {
+    lumaContextData.caps[cap] = queryFeature(gl, cap);
   }
 
-  if (!gl.luma.caps[cap]) {
+  if (!lumaContextData.caps[cap]) {
     log.log(LOG_UNSUPPORTED_FEATURE, `Feature: ${cap} not supported`)();
   }
 
-  return gl.luma.caps[cap];
+  return lumaContextData.caps[cap];
 }
 
 function queryFeature(gl, cap) {

package/src/features/{limits.js → limits.ts}

@@ -1,15 +1,15 @@
 import GL from '@luma.gl/constants';
-
-import WEBGL_LIMITS from './webgl-limits-table';
 import {isWebGL2, getContextDebugInfo} from '@luma.gl/gltools';
+import WEBGL_LIMITS from './webgl-limits-table';
+import {getLumaContextData} from '../context/luma-context-data';
 
 export function getContextLimits(gl) {
-  gl.luma = gl.luma || {};
+  const lumaContextData = getLumaContextData(gl);
 
-  if (!gl.luma.limits) {
-    gl.luma.limits = {};
-    gl.luma.webgl1MinLimits = {};
-    gl.luma.webgl2MinLimits = {};
+  if (!lumaContextData.limits) {
+    lumaContextData.limits = {};
+    lumaContextData.webgl1MinLimits = {};
+    lumaContextData.webgl2MinLimits = {};
 
     const isWebgl2 = isWebGL2(gl);
 
@@ -28,21 +28,21 @@ export function getContextLimits(gl) {
         ('extension' in limit && !gl.getExtension(limit.extension));
 
       const value = limitNotAvailable ? minLimit : gl.getParameter(parameter);
-      gl.luma.limits[parameter] = value;
-      gl.luma.webgl1MinLimits[parameter] = webgl1MinLimit;
-      gl.luma.webgl2MinLimits[parameter] = webgl2MinLimit;
+      lumaContextData.limits[parameter] = value;
+      lumaContextData.webgl1MinLimits[parameter] = webgl1MinLimit;
+      lumaContextData.webgl2MinLimits[parameter] = webgl2MinLimit;
     }
   }
 
-  return gl.luma.limits;
+  return lumaContextData.limits;
 }
 
 export function getGLContextInfo(gl) {
-  gl.luma = gl.luma || {};
+  const lumaContextData = getLumaContextData(gl);
 
   const info = getContextDebugInfo(gl);
-  if (!gl.luma.info) {
-    gl.luma.info = {
+  if (!lumaContextData.info) {
+    lumaContextData.info = {
       [GL.UNMASKED_VENDOR_WEBGL]: info.vendor,
       [GL.UNMASKED_RENDERER_WEBGL]: info.renderer,
       [GL.VENDOR]: info.vendorMasked,
@@ -52,14 +52,15 @@ export function getGLContextInfo(gl) {
     };
   }
 
-  return gl.luma.info;
+  return lumaContextData.info;
 }
 
 export function getContextInfo(gl) {
+  const lumaContextData = getLumaContextData(gl);
   return Object.assign(getContextDebugInfo(gl), {
     limits: getContextLimits(gl),
     info: getGLContextInfo(gl),
-    webgl1MinLimits: gl.luma.webgl1MinLimits,
-    webgl2MinLimits: gl.luma.webgl2MinLimits
+    webgl1MinLimits: lumaContextData.webgl1MinLimits,
+    webgl2MinLimits: lumaContextData.webgl2MinLimits
   });
 }