@luma.gl/webgl 9.2.5 → 9.3.0-alpha.2

package/src/adapter/webgl-device.ts

@@ -57,6 +57,7 @@ import {WEBGLCommandBuffer} from './resources/webgl-command-buffer';
 import {WEBGLVertexArray} from './resources/webgl-vertex-array';
 import {WEBGLTransformFeedback} from './resources/webgl-transform-feedback';
 import {WEBGLQuerySet} from './resources/webgl-query-set';
+import {WEBGLFence} from './resources/webgl-fence';
 
 import {readPixelsToArray, readPixelsToBuffer} from './helpers/webgl-texture-utils';
 import {
@@ -160,6 +161,9 @@ export class WebGLDevice extends Device {
     if (props.powerPreference !== undefined) {
       webglContextAttributes.powerPreference = props.powerPreference;
     }
+    if (props.failIfMajorPerformanceCaveat !== undefined) {
+      webglContextAttributes.failIfMajorPerformanceCaveat = props.failIfMajorPerformanceCaveat;
+    }
 
     // Check if we should attach to an externally created context or create a new context
     const externalGLContext = this.props._handle as WebGL2RenderingContext | null;
@@ -211,8 +215,6 @@ export class WebGLDevice extends Device {
 
     // Instrument context
     (this.gl as any).device = this; // Update GL context: Link webgl context back to device
-    // TODO - remove, this is only used to detect debug contexts.
-    (this.gl as any)._version = 2; // Update GL context: Store WebGL version field on gl context (HACK to identify debug contexts)
 
     // initialize luma Device fields
     this.info = getDeviceInfo(this.gl, this._extensions);
@@ -232,15 +234,14 @@ export class WebGLDevice extends Device {
     });
     glState.trackState(this.gl, {copyState: false});
 
-    // DEBUG contexts: Add luma debug instrumentation to the context, force log level to at least 1
-    const debugWebGL = props.debugWebGL || props.debug;
-    const traceWebGL = props.debugWebGL;
-    if (debugWebGL) {
-      this.gl = makeDebugContext(this.gl, {debugWebGL, traceWebGL});
+    // props.debug - instrument the WebGL context with Khronos debug tools
+    // props.debugWebGL - activate WebGL context tracing, force log level to at least 1
+    if (props.debug || props.debugWebGL) {
+      this.gl = makeDebugContext(this.gl, {debugWebGL: true, traceWebGL: props.debugWebGL});
       log.warn('WebGL debug mode activated. Performance reduced.')();
-      if (props.debugWebGL) {
-        log.level = Math.max(log.level, 1);
-      }
+    }
+    if (props.debugWebGL) {
+      log.level = Math.max(log.level, 1);
     }
 
     this.commandEncoder = new WEBGLCommandEncoder(this, {id: `${this}-command-encoder`});
@@ -274,10 +275,6 @@ export class WebGLDevice extends Device {
 
   // IMPLEMENTATION OF ABSTRACT DEVICE
 
-  getTextureByteAlignment(): number {
-    return 4;
-  }
-
   createCanvasContext(props?: CanvasContextProps): CanvasContext {
     throw new Error('WebGL only supports a single canvas');
   }
@@ -319,6 +316,10 @@ export class WebGLDevice extends Device {
     return new WEBGLQuerySet(this, props);
   }
 
+  override createFence(): WEBGLFence {
+    return new WEBGLFence(this);
+  }
+
   createRenderPipeline(props: RenderPipelineProps): WEBGLRenderPipeline {
     return new WEBGLRenderPipeline(this, props);
   }

package/src/context/debug/webgl-developer-tools.ts

@@ -132,9 +132,13 @@ function onGLError(
   const functionArgs = globalThis.WebGLDebugUtils.glFunctionArgsToString(functionName, args);
   const message = `${errorMessage} in gl.${functionName}(${functionArgs})`;
   // TODO - call device.reportError
-  log.error(message)();
+  log.error(
+    '%cWebGL',
+    'color: white; background: red; padding: 2px 6px; border-radius: 3px;',
+    message
+  )();
   debugger; // eslint-disable-line
-  // throw new Error(message);
+  throw new Error(message);
 }
 
 // Don't generate function string until it is needed
@@ -144,11 +148,14 @@ function onValidateGLFunc(
   functionArgs: unknown[]
 ): void {
   let functionString: string = '';
-  if (log.level >= 1) {
+  if (props.traceWebGL && log.level >= 1) {
     functionString = getFunctionString(functionName, functionArgs);
-    if (props.traceWebGL) {
-      log.log(1, functionString)();
-    }
+    log.info(
+      1,
+      '%cWebGL',
+      'color: white; background: blue; padding: 2px 6px; border-radius: 3px;',
+      functionString
+    )();
   }
 
   for (const arg of functionArgs) {

package/src/context/helpers/create-browser-context.ts

@@ -26,63 +26,74 @@ export function createBrowserContext(
 ): WebGL2RenderingContext {
   // Try to extract any extra information about why context creation failed
   let errorMessage = '';
-  // const onCreateError = error => (errorMessage = error.statusMessage || errorMessage);
+  const onCreateError = (event: Event) => {
+    const statusMessage = (event as WebGLContextEvent).statusMessage;
+    if (statusMessage) {
+      errorMessage ||= statusMessage;
+    }
+  };
+  canvas.addEventListener('webglcontextcreationerror', onCreateError, false);
 
-  // Avoid multiple listeners?
-  // canvas.removeEventListener('webglcontextcreationerror', onCreateError, false);
-  // canvas.addEventListener('webglcontextcreationerror', onCreateError, false);
+  const allowSoftwareRenderer = webglContextAttributes.failIfMajorPerformanceCaveat !== true;
 
   const webglProps: WebGLContextAttributes = {
     preserveDrawingBuffer: true,
-    // failIfMajorPerformanceCaveat: true,
-    ...webglContextAttributes
+    ...webglContextAttributes,
+    // Always start by requesting a high-performance context.
+    failIfMajorPerformanceCaveat: true
   };
 
   // Create the desired context
   let gl: WebGL2RenderingContext | null = null;
 
-  // Create a webgl2 context
-  gl ||= canvas.getContext('webgl2', webglProps);
-  if (webglProps.failIfMajorPerformanceCaveat) {
-    errorMessage ||=
-      'Only software GPU is available. Set `failIfMajorPerformanceCaveat: false` to allow.';
-  }
+  try {
+    // Create a webgl2 context
+    gl ||= canvas.getContext('webgl2', webglProps);
+    if (!gl && webglProps.failIfMajorPerformanceCaveat) {
+      errorMessage ||=
+        'Only software GPU is available. Set `failIfMajorPerformanceCaveat: false` to allow.';
+    }
 
-  // Creation failed with failIfMajorPerformanceCaveat - Try a Software GPU
-  if (!gl && !webglContextAttributes.failIfMajorPerformanceCaveat) {
-    webglProps.failIfMajorPerformanceCaveat = false;
-    gl = canvas.getContext('webgl2', webglProps);
-    // @ts-expect-error
-    gl.luma ||= {};
-    // @ts-expect-error
-    gl.luma.softwareRenderer = true;
-  }
+    // Creation failed with failIfMajorPerformanceCaveat - Try a Software GPU
+    if (!gl && allowSoftwareRenderer) {
+      webglProps.failIfMajorPerformanceCaveat = false;
+      gl = canvas.getContext('webgl2', webglProps);
+      if (gl) {
+        // @ts-expect-error
+        gl.luma ||= {};
+        // @ts-expect-error
+        gl.luma.softwareRenderer = true;
+      }
+    }
 
-  if (!gl) {
-    gl = canvas.getContext('webgl', {}) as WebGL2RenderingContext;
-    if (gl) {
-      gl = null;
-      errorMessage ||= 'Your browser only supports WebGL1';
+    if (!gl) {
+      gl = canvas.getContext('webgl', {}) as WebGL2RenderingContext;
+      if (gl) {
+        gl = null;
+        errorMessage ||= 'Your browser only supports WebGL1';
+      }
     }
-  }
 
-  if (!gl) {
-    errorMessage ||= 'Your browser does not support WebGL';
-    throw new Error(`Failed to create WebGL context: ${errorMessage}`);
-  }
+    if (!gl) {
+      errorMessage ||= 'Your browser does not support WebGL';
+      throw new Error(`Failed to create WebGL context: ${errorMessage}`);
+    }
 
-  // Carefully extract and wrap callbacks to prevent addEventListener from rebinding them.
-  const {onContextLost, onContextRestored} = props;
-  canvas.addEventListener('webglcontextlost', (event: Event) => onContextLost(event), false);
-  canvas.addEventListener(
-    'webglcontextrestored',
-    (event: Event) => onContextRestored(event),
-    false
-  );
-
-  // @ts-expect-error
-  gl.luma ||= {};
-  return gl;
+    // Carefully extract and wrap callbacks to prevent addEventListener from rebinding them.
+    const {onContextLost, onContextRestored} = props;
+    canvas.addEventListener('webglcontextlost', (event: Event) => onContextLost(event), false);
+    canvas.addEventListener(
+      'webglcontextrestored',
+      (event: Event) => onContextRestored(event),
+      false
+    );
+
+    // @ts-expect-error
+    gl.luma ||= {};
+    return gl;
+  } finally {
+    canvas.removeEventListener('webglcontextcreationerror', onCreateError, false);
+  }
 }
 
 /* TODO - can we call this asynchronously to catch the error events?

package/src/index.ts

@@ -26,6 +26,7 @@ export {WEBGLTexture} from './adapter/resources/webgl-texture';
 export {WEBGLShader} from './adapter/resources/webgl-shader';
 export {WEBGLSampler} from './adapter/resources/webgl-sampler';
 export {WEBGLFramebuffer} from './adapter/resources/webgl-framebuffer';
+export {WEBGLFence} from './adapter/resources/webgl-fence';
 
 export {WEBGLRenderPipeline} from './adapter/resources/webgl-render-pipeline';
 // export {WEBGLComputePipeline} from './adapter/resources/webgl-compute-pipeline';