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

package/{dist/esm/classes/accessor.ts.disabled → src/classic/accessor.ts}

@@ -1,23 +1,6 @@
+import {assert, checkProps, Buffer, AccessorObject} from '@luma.gl/api';
 import GL from '@luma.gl/constants';
-import {getTypedArrayFromGLType} from '../webgl-utils';
-import {checkProps, assert} from '../utils/index';
-import {Buffer} from '@luma.gl/core/';
-
-export interface AccessorObject {
-  buffer?: Buffer;
-  offset?: number;
-  stride?: number;
-  type?: number;
-  size?: number;
-  divisor?: number;
-  normalized?: boolean;
-  integer?: boolean;
-  index?: number;
-  /** @deprecated Use .divisor */
-  instanced?: boolean;
-  /** @deprecated Use .divisor */
-  isInstanced?: boolean;
-}
+import {getTypedArrayFromGLType} from './typed-array-utils';
 
 const DEFAULT_ACCESSOR_VALUES = {
   offset: 0,
@@ -36,28 +19,26 @@ const PROP_CHECKS = {
   }
 };
 
+export default class Accessor implements AccessorObject {
+  offset?: number;
+  stride?: number;
+  type?: number;
+  size?: number;
+  divisor?: number;
+  normalized?: boolean;
+  integer?: boolean;
 
-// @ts-nocheck members are added dynamically
-export default class Accessor {
-  // buffer: Buffer | undefined = undefined;
-  // index: number;
-
-  // offset: number;
-  // stride: number;
-  // type: number;
-  // size: number;
-  // divisor: number;
-  // normalized: boolean;
-  // integer: boolean;
+  buffer?: Buffer;
+  index?: number;
 
-  static getBytesPerElement(accessor): number {
+  static getBytesPerElement(accessor: Accessor | AccessorObject): number {
     // TODO: using `FLOAT` when type is not specified,
     // ensure this assumption is valid or force API to specify type.
     const ArrayType = getTypedArrayFromGLType(accessor.type || GL.FLOAT);
     return ArrayType.BYTES_PER_ELEMENT;
   }
 
-  static getBytesPerVertex(accessor): number {
+  static getBytesPerVertex(accessor: AccessorObject): number {
     assert(accessor.size);
     // TODO: using `FLOAT` when type is not specified,
     // ensure this assumption is valid or force API to specify type.
@@ -69,11 +50,11 @@ export default class Accessor {
   // Usually [programAccessor, bufferAccessor, appAccessor]
   // All props will be set in the returned object.
   // TODO check for conflicts between values in the supplied accessors
-  static resolve(...accessors): Accessor {
+  static resolve(...accessors: AccessorObject[]): Accessor {
     return new Accessor(...[DEFAULT_ACCESSOR_VALUES, ...accessors]); // Default values
   }
 
-  constructor(...accessors: any[]) {
+  constructor(...accessors: AccessorObject[]) {
     accessors.forEach((accessor) => this._assign(accessor)); // Merge in sequence
     Object.freeze(this);
   }
@@ -96,7 +77,7 @@ export default class Accessor {
   // PRIVATE
 
   // eslint-disable-next-line complexity, max-statements
-  _assign(props: AccessorObject = {}) {
+  _assign(props: AccessorObject = {}): this {
     props = checkProps('Accessor', props, PROP_CHECKS);
 
     if (props.type !== undefined) {
@@ -104,7 +85,7 @@ export default class Accessor {
 
       // Auto-deduce integer type?
       if (props.type === GL.INT || props.type === GL.UNSIGNED_INT) {
-        this.integer = true;
+      this.integer = true;
       }
     }
     if (props.size !== undefined) {
@@ -116,6 +97,11 @@ export default class Accessor {
     if (props.stride !== undefined) {
       this.stride = props.stride;
     }
+    // @ts-expect-error
+    if (props.normalize !== undefined) {
+      // @ts-expect-error
+      this.normalized = props.normalize;
+    }
     if (props.normalized !== undefined) {
       this.normalized = props.normalized;
     }
@@ -144,13 +130,28 @@ export default class Accessor {
     }
 
     // DEPRECATED
+    // @ts-expect-error
     if (props.instanced !== undefined) {
+      // @ts-expect-error
       this.divisor = props.instanced ? 1 : 0;
     }
+    // @ts-expect-error
     if (props.isInstanced !== undefined) {
+      // @ts-expect-error
       this.divisor = props.isInstanced ? 1 : 0;
     }
 
+    if (this.offset === undefined) delete this.offset;
+    if (this.stride === undefined) delete this.stride;
+    if (this.type === undefined) delete this.type;
+    if (this.size === undefined) delete this.size;
+    if (this.divisor === undefined) delete this.divisor;
+    if (this.normalized === undefined) delete this.normalized;
+    if (this.integer === undefined) delete this.integer;
+  
+    if (this.buffer === undefined) delete this.buffer;
+    if (this.index === undefined) delete this.index;
+  
     return this;
   }
 }

package/src/{classes/webgl-buffer.ts → classic/buffer.ts}

@@ -1,11 +1,13 @@
-import {log, assert, checkProps} from '@luma.gl/api';
-import {Buffer, BufferProps} from '@luma.gl/api';
+import type {Device, BufferProps, TypedArray} from '@luma.gl/api';
+import {Buffer, log, assert, checkProps} from '@luma.gl/api';
 import GL from '@luma.gl/constants';
-import {getWebGL2Context, assertWebGL2Context} from '../context/context/webgl-checks';
+import {assertWebGL2Context} from '../context/context/webgl-checks';
 import {AccessorObject} from '../types';
 import Accessor from './accessor';
-import {getGLTypeFromTypedArray, getTypedArrayFromGLType} from '../webgl-utils/typed-array-utils';
+import {getGLTypeFromTypedArray, getTypedArrayFromGLType} from './typed-array-utils';
+
 import WebGLDevice from '../adapter/webgl-device';
+import WEBGLBuffer from '../adapter/resources/webgl-buffer';
 
 const DEBUG_DATA_LENGTH = 10;
 
@@ -38,13 +40,32 @@ const PROP_CHECKS_SET_PROPS = {
   removedProps: DEPRECATED_PROPS
 };
 
+function getWEBGLBufferProps(props: ClassicBufferProps | ArrayBufferView | number): BufferProps {
+  // Signature `new Buffer(gl, new Float32Array(...)`
+  if (ArrayBuffer.isView(props)) {
+    return {data: props};
+  }
+
+  // Signature: `new Buffer(gl, 100)`
+  else if (typeof props === 'number') {
+    return {byteLength: props as number};
+  }
+
+  props = checkProps('Buffer', props, PROP_CHECKS_INITIALIZE);
+  const bufferProps = {...props as ClassicBufferProps};
+  if (bufferProps.offset) {
+    bufferProps.byteOffset = bufferProps.offset;
+  }
+  return bufferProps;
+}
+
 /** WebGL Buffer interface */
-export type WebGLBufferProps = BufferProps & {
+export type ClassicBufferProps = BufferProps & {
   handle?: WebGLBuffer;
-  data?: any; // ArrayBufferView;
-  byteLength?: number;
+
   target?: number;
-  usage?: number;
+  webglUsage?: number;
+
   accessor?: AccessorObject;
 
   /** @deprecated */
@@ -58,41 +79,29 @@ export type WebGLBufferProps = BufferProps & {
 }
 
 /** WebGL Buffer interface */
-export default class WEBGLBuffer extends Buffer {
-  readonly device: WebGLDevice;
-  readonly gl: WebGLRenderingContext;
-  readonly gl2: WebGL2RenderingContext | null;
-  readonly handle: WebGLBuffer;
-
-  target: number;
+export default class ClassicBuffer extends WEBGLBuffer {
   usage: number;
-
-  byteLength: number;
-  bytesUsed: number;
-
   accessor: Accessor;
 
-  debugData;
-
-  constructor(gl: WebGLRenderingContext, props?: BufferProps);
-  constructor(gl: WebGLRenderingContext, data: ArrayBufferView | number[]);
-  constructor(gl: WebGLRenderingContext, byteLength: number);
+  constructor(device: Device | WebGLRenderingContext, props?: ClassicBufferProps);
+  constructor(device: Device | WebGLRenderingContext, data: ArrayBufferView | number[]);
+  constructor(device: Device | WebGLRenderingContext, byteLength: number);
 
-  constructor(gl: WebGLRenderingContext, props = {}) {
-    super(WebGLDevice.attach(gl), props);
+  constructor(device: Device | WebGLRenderingContext, props = {}) {
+    super(WebGLDevice.attach(device), getWEBGLBufferProps(props));
 
-    this.gl = gl;
-    this.gl2 = getWebGL2Context(gl);
-    const handle = typeof props === 'object' ? (props as BufferProps).handle : undefined;
-    this.handle = handle || this.gl.createBuffer();
+    // Base class initializes
+    // this.initialize(props);
 
-    // In WebGL1, need to make sure we use GL.ELEMENT_ARRAY_BUFFER when initializing element buffers
-    // otherwise buffer type will lock to generic (non-element) buffer
-    // In WebGL2, we can use GL.COPY_READ_BUFFER which avoids locking the type here
-    // @ts-expect-error
-    this.target = props.target || (this.gl.webgl2 ? GL.COPY_READ_BUFFER : GL.ARRAY_BUFFER);
+    // Deprecated: Merge main props and accessor
+    this.setAccessor(Object.assign({}, props, (props as ClassicBufferProps).accessor));
 
-    this.initialize(props);
+    // infer GL type from supplied typed array
+    if (this.props.data) {
+      const type = getGLTypeFromTypedArray(this.props.data as TypedArray);
+      assert(type);
+      this.setAccessor(new Accessor(this.accessor, {type}));
+    }
 
     Object.seal(this);
   }
@@ -102,18 +111,21 @@ export default class WEBGLBuffer extends Buffer {
       this.removeStats();
       this.trackDeallocatedMemory();
       this.gl.deleteBuffer(this.handle);
-      // @ts-expect-error
-      this.handle = null;
+      // this.handle = null;
+      this.destroyed = true;
     }
   }
 
+  write(data: TypedArray, byteOffset?: number): void {
+    this.subData({data, offset: byteOffset});
+  }
   // returns number of elements in the buffer (assuming that the full buffer is used)
-  getElementCount(accessor = this.accessor): number {
+  getElementCount(accessor: AccessorObject = this.accessor): number {
     return Math.round(this.byteLength / Accessor.getBytesPerElement(accessor));
   }
 
   // returns number of vertices in the buffer (assuming that the full buffer is used)
-  getVertexCount(accessor = this.accessor): number {
+  getVertexCount(accessor: AccessorObject = this.accessor): number {
     return Math.round(this.byteLength / Accessor.getBytesPerVertex(accessor));
   }
 
@@ -121,7 +133,7 @@ export default class WEBGLBuffer extends Buffer {
   // Signature: `new Buffer(gl, {data: new Float32Array(...)})`
   // Signature: `new Buffer(gl, new Float32Array(...))`
   // Signature: `new Buffer(gl, 100)`
-  initialize(props: BufferProps = {}): this {
+  initialize(props: ClassicBufferProps = {}): this {
     // Signature `new Buffer(gl, new Float32Array(...)`
     if (ArrayBuffer.isView(props)) {
       props = {data: props};
@@ -136,7 +148,7 @@ export default class WEBGLBuffer extends Buffer {
     props = checkProps('Buffer', props, PROP_CHECKS_INITIALIZE);
 
     // Initialize member fields
-    this.usage = props.usage || GL.STATIC_DRAW;
+    this.webglUsage = props.webglUsage || GL.STATIC_DRAW;
     this.debugData = null;
 
     // Deprecated: Merge main props and accessor
@@ -152,7 +164,7 @@ export default class WEBGLBuffer extends Buffer {
     return this;
   }
 
-  setProps(props: BufferProps): this {
+  setProps(props: ClassicBufferProps): this {
     props = checkProps('Buffer', props, PROP_CHECKS_SET_PROPS);
 
     if ('accessor' in props) {
@@ -164,11 +176,12 @@ export default class WEBGLBuffer extends Buffer {
 
   // Optionally stores an accessor with the buffer, makes it easier to use it as an attribute later
   // {type, size = 1, offset = 0, stride = 0, normalized = false, integer = false, divisor = 0}
-  setAccessor(accessor): this {
+  setAccessor(accessor: AccessorObject | Accessor): this {
     // NOTE: From luma.gl v7.0, Accessors have an optional `buffer `field
     // (mainly to support "interleaving")
     // To avoid confusion, ensure `buffer.accessor` does not have a `buffer.accessor.buffer` field:
     accessor = Object.assign({}, accessor);
+    // @ts-expect-error
     delete accessor.buffer;
 
     // This new statement ensures that an "accessor object" is re-packaged as an Accessor instance
@@ -181,7 +194,7 @@ export default class WEBGLBuffer extends Buffer {
   // Returns:
   //  `true`: buffer was reallocated, data was cleared
   //  `false`: buffer was big enough, data is intact
-  reallocate(byteLength) {
+  reallocate(byteLength: number): boolean {
     if (byteLength > this.byteLength) {
       this._setByteLength(byteLength);
       return true;
@@ -191,7 +204,7 @@ export default class WEBGLBuffer extends Buffer {
   }
 
   // Update with new data. Reinitializes the buffer
-  setData(props) {
+  setData(props: ClassicBufferProps) {
     return this.initialize(props);
   }
 
@@ -200,14 +213,14 @@ export default class WEBGLBuffer extends Buffer {
   // Offset into buffer
   // WebGL2 only: Offset into srcData
   // WebGL2 only: Number of bytes to be copied
-  subData(props) {
+  subData(options: TypedArray | {data: TypedArray, offset?: number; srcOffset?: number; byteLength?: number, length?: number}) {
     // Signature: buffer.subData(new Float32Array([...]))
-    if (ArrayBuffer.isView(props)) {
-      props = {data: props};
+    if (ArrayBuffer.isView(options)) {
+      options = {data: options};
     }
 
-    const {data, offset = 0, srcOffset = 0} = props;
-    const byteLength = props.byteLength || props.length;
+    const {data, offset = 0, srcOffset = 0} = options;
+    const byteLength = options.byteLength || options.length;
 
     assert(data);
 
@@ -235,7 +248,7 @@ export default class WEBGLBuffer extends Buffer {
   }
 
   /**
-   * Copies part of the data of another buffer into this buffer 
+   * Copies part of the data of another buffer into this buffer
    * @note WEBGL2 ONLY
    */
   copyData(options: {
@@ -251,7 +264,7 @@ export default class WEBGLBuffer extends Buffer {
     // Use GL.COPY_READ_BUFFER+GL.COPY_WRITE_BUFFER avoid disturbing other targets and locking type
     gl.bindBuffer(GL.COPY_READ_BUFFER, sourceBuffer.handle);
     gl.bindBuffer(GL.COPY_WRITE_BUFFER, this.handle);
-    gl2.copyBufferSubData(GL.COPY_READ_BUFFER, GL.COPY_WRITE_BUFFER, readOffset, writeOffset, size);
+    gl2?.copyBufferSubData(GL.COPY_READ_BUFFER, GL.COPY_WRITE_BUFFER, readOffset, writeOffset, size);
     gl.bindBuffer(GL.COPY_READ_BUFFER, null);
     gl.bindBuffer(GL.COPY_WRITE_BUFFER, null);
 
@@ -301,7 +314,7 @@ export default class WEBGLBuffer extends Buffer {
 
     // Use GL.COPY_READ_BUFFER to avoid disturbing other targets and locking type
     this.gl.bindBuffer(GL.COPY_READ_BUFFER, this.handle);
-    this.gl2.getBufferSubData(GL.COPY_READ_BUFFER, srcByteOffset, dstData, dstOffset, length);
+    this.gl2?.getBufferSubData(GL.COPY_READ_BUFFER, srcByteOffset, dstData, dstOffset, length);
     this.gl.bindBuffer(GL.COPY_READ_BUFFER, null);
 
     // TODO - update local `data` if offsets are 0
@@ -318,7 +331,6 @@ export default class WEBGLBuffer extends Buffer {
   bind(options?: {target?: number; index?: any; offset?: number; size: any}): this {
     const {
       target = this.target, // target for the bind operation
-      // @ts-expect-error
       index = this.accessor && this.accessor.index, // index = index of target (indexed bind point)
       offset = 0,
       size
@@ -328,10 +340,10 @@ export default class WEBGLBuffer extends Buffer {
     // uniform buffer state. Instead indexed bindings need to be made.
     if (target === GL.UNIFORM_BUFFER || target === GL.TRANSFORM_FEEDBACK_BUFFER) {
       if (size !== undefined) {
-        this.gl2.bindBufferRange(target, index, this.handle, offset, size);
+        this.gl2?.bindBufferRange(target, index, this.handle, offset, size);
       } else {
         assert(offset === 0); // Make sure offset wasn't supplied
-        this.gl2.bindBufferBase(target, index, this.handle);
+        this.gl2?.bindBufferBase(target, index, this.handle);
       }
     } else {
       this.gl.bindBuffer(target, this.handle);
@@ -341,11 +353,10 @@ export default class WEBGLBuffer extends Buffer {
   }
 
   unbind(options?: {target?: any; index?: any}): this {
-    // @ts-expect-error
     const {target = this.target, index = this.accessor && this.accessor.index} = options || {};
     const isIndexedBuffer = target === GL.UNIFORM_BUFFER || target === GL.TRANSFORM_FEEDBACK_BUFFER;
     if (isIndexedBuffer) {
-      this.gl2.bindBufferBase(target, index, null);
+      this.gl2?.bindBufferBase(target, index, null);
     } else {
       this.gl.bindBuffer(target, null);
     }
@@ -380,7 +391,7 @@ export default class WEBGLBuffer extends Buffer {
 
     const target = this._getTarget();
     this.gl.bindBuffer(target, this.handle);
-    this.gl.bufferData(target, byteLength, this.usage);
+    this.gl.bufferData(target, byteLength, this.webglUsage);
     this.gl.bufferSubData(target, offset, data);
     this.gl.bindBuffer(target, null);
 
@@ -397,7 +408,7 @@ export default class WEBGLBuffer extends Buffer {
   }
 
   // Allocate a GPU buffer of specified size.
-  _setByteLength(byteLength: number, usage = this.usage): this {
+  _setByteLength(byteLength: number, webglUsage = this.webglUsage): this {
     assert(byteLength >= 0);
 
     this.trackDeallocatedMemory();
@@ -412,10 +423,10 @@ export default class WEBGLBuffer extends Buffer {
 
     const target = this._getTarget();
     this.gl.bindBuffer(target, this.handle);
-    this.gl.bufferData(target, data, usage);
+    this.gl.bufferData(target, data, webglUsage);
     this.gl.bindBuffer(target, null);
 
-    this.usage = usage;
+    this.webglUsage = webglUsage;
     this.debugData = null;
     this.bytesUsed = byteLength;
     this.byteLength = byteLength;
@@ -432,7 +443,7 @@ export default class WEBGLBuffer extends Buffer {
     return this.gl.webgl2 ? GL.COPY_WRITE_BUFFER : this.target;
   }
 
-  _getAvailableElementCount(srcByteOffset) {
+  _getAvailableElementCount(srcByteOffset: number) {
     const ArrayType = getTypedArrayFromGLType(this.accessor.type || GL.FLOAT, {clamped: false});
     const sourceElementOffset = srcByteOffset / ArrayType.BYTES_PER_ELEMENT;
     return this.getElementCount() - sourceElementOffset;
@@ -448,7 +459,7 @@ export default class WEBGLBuffer extends Buffer {
 
   // RESOURCE METHODS
 
-  getParameter(pname) {
+  getParameter(pname: GL): any {
     this.gl.bindBuffer(this.target, this.handle);
     const value = this.gl.getBufferParameter(this.target, pname);
     this.gl.bindBuffer(this.target, null);
@@ -460,23 +471,4 @@ export default class WEBGLBuffer extends Buffer {
   get type() {
     return this.accessor.type;
   }
-
-  get bytes() {
-    log.deprecated('Buffer.bytes', 'Buffer.byteLength')();
-    return this.byteLength;
-  }
-
-  // DEPRECATIONS - v6.0
-  // Deprecated in v6.x, but not warnings not properly implemented
-  setByteLength(byteLength) {
-    log.deprecated('setByteLength', 'reallocate')();
-    return this.reallocate(byteLength);
-  }
-
-  // Deprecated in v6.x, but not warnings not properly implemented
-  updateAccessor(opts) {
-    log.deprecated('updateAccessor(...)', 'setAccessor(new Accessor(buffer.accessor, ...)')();
-    this.accessor = new Accessor(this.accessor, opts);
-    return this;
-  }
 }

package/src/{webgl-utils → classic}/typed-array-utils.ts

@@ -1,4 +1,8 @@
+// luma.gl, MIT license
+
+import {TypedArray} from '@luma.gl/api';
 import GL from '@luma.gl/constants';
+import {GLType} from '../types/webgl'
 
 const ERR_TYPE_DEDUCTION = 'Failed to deduce GL constant from typed array';
 
@@ -18,7 +22,7 @@ type TypedArrayConstructor =
  * @param {*} arrayOrType
  * @returns
  */
-export function getGLTypeFromTypedArray(arrayOrType) {
+export function getGLTypeFromTypedArray(arrayOrType: TypedArray): GLType {
   // If typed array, look up constructor
   const type = ArrayBuffer.isView(arrayOrType) ? arrayOrType.constructor : arrayOrType;
   switch (type) {

package/src/context/context/context-state.ts

@@ -34,6 +34,8 @@ export function getContextState(gl: WebGLRenderingContext): ContextState {
     // @ts-expect-error
     gl.luma = contextState;
   }
-  // @ts-expect-error
-  return gl.luma;
+  throw new Error('context state without device');
+
+  // // @ts-expect-error
+  // return gl.luma;
 }

package/src/context/context/{create-context.ts → create-browser-context.ts}

@@ -17,8 +17,8 @@
 * @param preserveDrawingBuffer Default render target buffers will not be automatically cleared and will preserve their values until cleared or overwritten
 * @param failIfMajorPerformanceCaveat Do not create if the system performance is low.
 */
-
 type ContextProps = {
+  type?: 'webgl' | 'webgl1' | 'webgl2' | string;
   webgl1?: boolean;
   webgl2?: boolean;
   onContextLost?: (event: Event) => void;
@@ -55,14 +55,21 @@ const DEFAULT_CONTEXT_PROPS: ContextProps = {
   canvas.addEventListener('webglcontextcreationerror', onCreateError, false);
 
   // Create the desired context
-  let gl = null;
+  let gl: WebGLRenderingContext | null = null;
+
+  if (props.type === 'webgl2') {
+    props = {...props, webgl1: false};
+  }
+  if (props.type === 'webgl1') {
+    props = {...props, webgl2: false};
+  }
 
   // Prefer webgl2 over webgl1 if both are acceptable
   if (props.webgl2) {
-    gl = gl || canvas.getContext('webgl2', props);
+    gl = gl || canvas.getContext('webgl2', props) as WebGL2RenderingContext | null;
   }
   if (props.webgl1) {
-    gl = gl || canvas.getContext('webgl', props);
+    gl = gl || canvas.getContext('webgl', props) as WebGLRenderingContext | null;
   }
 
   // TODO are we removing this listener before giving it a chance to fire?
@@ -76,8 +83,36 @@ const DEFAULT_CONTEXT_PROPS: ContextProps = {
     );
   }
 
-  canvas.addEventListener('webglcontextlost', props.onContextLost, false);
-  canvas.addEventListener('webglcontextrestored', props.onContextRestored, false);
+  if (props.onContextLost) {
+    // Carefully extract and wrap callbacks to prevent addEventListener from rebinding them.
+    const {onContextLost} = props;
+    canvas.addEventListener('webglcontextlost',(event: Event) => onContextLost(event), false);
+  }
+  if (props.onContextRestored) {
+    // Carefully extract and wrap callbacks to prevent addEventListener from rebinding them.
+    const {onContextRestored} = props;
+    canvas.addEventListener('webglcontextrestored', (event: Event) => onContextRestored(event), false);
+  }
 
   return gl;
 }
+
+/* TODO - can we call this asynchronously to catch the error events?
+export async function createBrowserContextAsync(canvas: HTMLCanvasElement | OffscreenCanvas, props: ContextProps): Promise<WebGLRenderingContext> {
+  props = {...DEFAULT_CONTEXT_PROPS, ...props};
+
+ // Try to extract any extra information about why context creation failed
+ let errorMessage = null;
+ const onCreateError = (error) => (errorMessage = error.statusMessage || errorMessage);
+ canvas.addEventListener('webglcontextcreationerror', onCreateError, false);
+
+ const gl = createBrowserContext(canvas, props);
+
+ // Give the listener a chance to fire
+ await new Promise(resolve => setTimeout(resolve, 0));
+
+ canvas.removeEventListener('webglcontextcreationerror', onCreateError, false);
+
+ return gl;
+}
+*/

package/src/context/context/create-headless-context.ts

@@ -0,0 +1,48 @@
+const ERR_HEADLESSGL_FAILED =
+  'Failed to create WebGL context in Node.js, headless gl returned null';
+
+const ERR_HEADLESSGL_LOAD = `\
+  luma.gl: loaded under Node.js without headless gl installed, meaning that WebGL \
+  contexts can not be created. This may not be an error. For example, this is a \
+  typical configuration for isorender applications running on the server.`;
+
+const CONTEXT_DEFAULTS = {
+  width: 1,
+  height: 1,
+  debug: true,
+  throwOnError: false
+};
+
+/** Duck typing for the main headless gl export, a function to create contexts */
+export type HeadlessGL = (width: number, height: number, options: Record<string, unknown>) => WebGLRenderingContext;
+
+let headlessGL: HeadlessGL | null = null; 
+
+/** By importing `gl` and registering it with this function, contexts can be created under Node.js */
+export function registerHeadlessGL(headlessgl: HeadlessGL) {
+  headlessGL = headlessgl;
+}
+
+/** @returns true if headless gl is registered */
+export function isHeadlessGLRegistered(): boolean {
+  return headlessGL !== null;
+}
+
+/** Create headless gl context (for running under Node.js) */
+export function createHeadlessContext(options?: Record<string, any>): WebGLRenderingContext {
+  options = {...CONTEXT_DEFAULTS, ...options};
+
+  const {width, height, webgl1, webgl2} = options;
+
+  if (webgl2 && !webgl1) {
+    throw new Error('headless-gl does not support WebGL2');
+  }
+  if (!headlessGL) {
+    throw new Error(ERR_HEADLESSGL_LOAD);
+  }
+  const gl = headlessGL(width, height, options);
+  if (!gl) {
+    throw new Error(ERR_HEADLESSGL_FAILED);
+  }
+  return gl;
+}