fix(webgl): Fix webglAdapter.attach() (#2299)

visgl · Dec 10, 2024 · b84bfbc · b84bfbc
1 parent cde11a2
commit b84bfbc
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 16 deletions.
diff --git a/modules/webgl/src/adapter/webgl-adapter.ts b/modules/webgl/src/adapter/webgl-adapter.ts
@@ -45,7 +45,8 @@ export class WebGLAdapter extends Adapter {
 
   /**
    * Get a device instance from a GL context
-   * Creates and instruments the device if not already created
+   * Creates a WebGLCanvasContext against the contexts canvas
+   * @note autoResize will be disabled, assuming that whoever created the external context will be handling resizes.
    * @param gl
    * @returns
    */
@@ -62,7 +63,13 @@ export class WebGLAdapter extends Adapter {
     if (!isWebGL(gl)) {
       throw new Error('Invalid WebGL2RenderingContext');
     }
-    return new WebGLDevice({_handle: gl as WebGL2RenderingContext});
+
+    // We create a new device using the provided WebGL context and its canvas
+    // Assume that whoever created the external context will be handling resizes.
+    return new WebGLDevice({
+      _handle: gl,
+      createCanvasContext: {canvas: gl.canvas, autoResize: false}
+    });
   }
 
   async create(props: DeviceProps = {}): Promise<WebGLDevice> {
@@ -106,7 +113,7 @@ ${device.info.vendor}, ${device.info.renderer} for canvas: ${device.canvasContex
 }
 
 /** Check if supplied parameter is a WebGL2RenderingContext */
-function isWebGL(gl: any): boolean {
+function isWebGL(gl: any): gl is WebGL2RenderingContext {
   if (typeof WebGL2RenderingContext !== 'undefined' && gl instanceof WebGL2RenderingContext) {
     return true;
   }

diff --git a/modules/webgl/src/adapter/webgl-device.ts b/modules/webgl/src/adapter/webgl-device.ts
@@ -144,19 +144,24 @@ export class WebGLDevice extends Device {
       webglContextAttributes.powerPreference = props.powerPreference;
     }
 
-    const gl = createBrowserContext(
-      this.canvasContext.canvas,
-      {
-        onContextLost: (event: Event) =>
-          this._resolveContextLost?.({
-            reason: 'destroyed',
-            message: 'Entered sleep mode, or too many apps or browser tabs are using the GPU.'
-          }),
-        // eslint-disable-next-line no-console
-        onContextRestored: (event: Event) => console.log('WebGL context restored')
-      },
-      webglContextAttributes
-    );
+    // Check if we should attach to an externally created context or create a new context
+    const externalGLContext = this.props._handle as WebGL2RenderingContext | null;
+
+    const gl =
+      externalGLContext ||
+      createBrowserContext(
+        this.canvasContext.canvas,
+        {
+          onContextLost: (event: Event) =>
+            this._resolveContextLost?.({
+              reason: 'destroyed',
+              message: 'Entered sleep mode, or too many apps or browser tabs are using the GPU.'
+            }),
+          // eslint-disable-next-line no-console
+          onContextRestored: (event: Event) => console.log('WebGL context restored')
+        },
+        webglContextAttributes
+      );
 
     if (!gl) {
       throw new Error('WebGL context creation failed');