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

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';