improve shader tests

- made gl package optional
- skip test if gl package not available

package.json

@@ -108,7 +108,6 @@
     "extra-watch-webpack-plugin": "^1.0.3",
     "file-loader": "^6.2.0",
     "fs-extra": "^10.0.0",
-    "gl": "^4.9.2",
     "graphql": "^15.6.0",
     "http-server": "^13.0.2",
     "jest": "^27.2.4",
@@ -153,5 +152,8 @@
     "tslib": "^2.3.1",
     "util.promisify": "^1.1.1",
     "xhr2": "^0.2.1"
+  },
+  "optionalDependencies": {
+    "gl": "^4.9.2"
   }
 }

src/mol-gl/_spec/cylinders.spec.ts

@@ -6,9 +6,8 @@
 
 import { createRenderObject } from '../render-object';
 import { Scene } from '../scene';
-import getGLContext from 'gl';
+import { getGLContext, tryGetGLContext } from './gl';
 import { setDebugMode } from '../../mol-util/debug';
-import { createRenderer } from './renderer.spec';
 import { ColorNames } from '../../mol-util/color/names';
 import { ParamDefinition as PD } from '../../mol-util/param-definition';
 import { Cylinders } from '../../mol-geo/geometry/cylinders/cylinders';
@@ -22,18 +21,16 @@ export function createCylinders() {
 }
 
 describe('cylinders', () => {
-    const gl = getGLContext(32, 32);
-    const { ctx } = createRenderer(gl);
+    const ctx = tryGetGLContext(32, 32, { fragDepth: true });
 
-    (ctx.extensions.fragDepth ? it : it.skip)('basic', async () => {
-        const gl = getGLContext(32, 32);
-        const { ctx } = createRenderer(gl);
+    (ctx ? it : it.skip)('basic', async () => {
+        const ctx = getGLContext(32, 32);
         const scene = Scene.create(ctx);
         const cylinders = createCylinders();
         scene.add(cylinders);
         setDebugMode(true);
         expect(() => scene.commit()).not.toThrow();
         setDebugMode(false);
-        gl.getExtension('STACKGL_destroy_context')?.destroy();
+        ctx.destroy();
     });
 });

src/mol-gl/_spec/direct-volume.spec.ts

@@ -6,9 +6,8 @@
 
 import { createRenderObject } from '../render-object';
 import { Scene } from '../scene';
-import getGLContext from 'gl';
+import { getGLContext, tryGetGLContext } from './gl';
 import { setDebugMode } from '../../mol-util/debug';
-import { createRenderer } from './renderer.spec';
 import { ColorNames } from '../../mol-util/color/names';
 import { ParamDefinition as PD } from '../../mol-util/param-definition';
 import { DirectVolume } from '../../mol-geo/geometry/direct-volume/direct-volume';
@@ -22,15 +21,16 @@ export function createDirectVolume() {
 }
 
 describe('direct-volume', () => {
-    it('basic', async () => {
-        const gl = getGLContext(32, 32);
-        const { ctx } = createRenderer(gl);
+    const ctx = tryGetGLContext(32, 32);
+
+    (ctx ? it : it.skip)('basic', async () => {
+        const ctx = getGLContext(32, 32);
         const scene = Scene.create(ctx);
         const directVolume = createDirectVolume();
         scene.add(directVolume);
         setDebugMode(true);
         expect(() => scene.commit()).not.toThrow();
         setDebugMode(false);
-        gl.getExtension('STACKGL_destroy_context')?.destroy();
+        ctx.destroy();
     });
 });

src/mol-gl/_spec/gl.ts

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import { createContext } from '../webgl/context';
+
+export function getGLContext(width: number, height: number) {
+    const gl = require('gl')(width, height, {
+        alpha: true,
+        depth: true,
+        premultipliedAlpha: true,
+        preserveDrawingBuffer: true,
+        antialias: true,
+    });
+    return createContext(gl);
+}
+
+export function tryGetGLContext(width: number, height: number, requiredExtensions?: { fragDepth?: boolean }) {
+    try {
+        const ctx = getGLContext(width, height);
+        if (requiredExtensions?.fragDepth && !ctx.extensions.fragDepth) return;
+        return ctx;
+    } catch (e) {
+        return;
+    }
+}

src/mol-gl/_spec/image.spec.ts

@@ -6,9 +6,8 @@
 
 import { createRenderObject } from '../render-object';
 import { Scene } from '../scene';
-import getGLContext from 'gl';
+import { getGLContext, tryGetGLContext } from './gl';
 import { setDebugMode } from '../../mol-util/debug';
-import { createRenderer } from './renderer.spec';
 import { ColorNames } from '../../mol-util/color/names';
 import { ParamDefinition as PD } from '../../mol-util/param-definition';
 import { Image } from '../../mol-geo/geometry/image/image';
@@ -22,15 +21,16 @@ export function createImage() {
 }
 
 describe('image', () => {
-    it('basic', async () => {
-        const gl = getGLContext(32, 32);
-        const { ctx } = createRenderer(gl);
+    const ctx = tryGetGLContext(32, 32);
+
+    (ctx ? it : it.skip)('basic', async () => {
+        const ctx = getGLContext(32, 32);
         const scene = Scene.create(ctx);
         const image = createImage();
         scene.add(image);
         setDebugMode(true);
         expect(() => scene.commit()).not.toThrow();
         setDebugMode(false);
-        gl.getExtension('STACKGL_destroy_context')?.destroy();
+        ctx.destroy();
     });
 });

src/mol-gl/_spec/lines.spec.ts

@@ -6,9 +6,8 @@
 
 import { createRenderObject } from '../render-object';
 import { Scene } from '../scene';
-import getGLContext from 'gl';
+import { getGLContext, tryGetGLContext } from './gl';
 import { setDebugMode } from '../../mol-util/debug';
-import { createRenderer } from './renderer.spec';
 import { ColorNames } from '../../mol-util/color/names';
 import { ParamDefinition as PD } from '../../mol-util/param-definition';
 import { Lines } from '../../mol-geo/geometry/lines/lines';
@@ -22,15 +21,16 @@ export function createLines() {
 }
 
 describe('lines', () => {
-    it('basic', async () => {
-        const gl = getGLContext(32, 32);
-        const { ctx } = createRenderer(gl);
+    const ctx = tryGetGLContext(32, 32);
+
+    (ctx ? it : it.skip)('basic', async () => {
+        const ctx = getGLContext(32, 32);
         const scene = Scene.create(ctx);
         const lines = createLines();
         scene.add(lines);
         setDebugMode(true);
         expect(() => scene.commit()).not.toThrow();
         setDebugMode(false);
-        gl.getExtension('STACKGL_destroy_context')?.destroy();
+        ctx.destroy();
     });
 });

src/mol-gl/_spec/mesh.spec.ts

@@ -6,9 +6,8 @@
 
 import { createRenderObject } from '../render-object';
 import { Scene } from '../scene';
-import getGLContext from 'gl';
+import { getGLContext, tryGetGLContext } from './gl';
 import { setDebugMode } from '../../mol-util/debug';
-import { createRenderer } from './renderer.spec';
 import { ColorNames } from '../../mol-util/color/names';
 import { ParamDefinition as PD } from '../../mol-util/param-definition';
 import { Mesh } from '../../mol-geo/geometry/mesh/mesh';
@@ -22,15 +21,16 @@ export function createMesh() {
 }
 
 describe('mesh', () => {
-    it('basic', async () => {
-        const gl = getGLContext(32, 32);
-        const { ctx } = createRenderer(gl);
+    const ctx = tryGetGLContext(32, 32);
+
+    (ctx ? it : it.skip)('basic', async () => {
+        const ctx = getGLContext(32, 32);
         const scene = Scene.create(ctx);
         const mesh = createMesh();
         scene.add(mesh);
         setDebugMode(true);
         expect(() => scene.commit()).not.toThrow();
         setDebugMode(false);
-        gl.getExtension('STACKGL_destroy_context')?.destroy();
+        ctx.destroy();
     });
 });

src/mol-gl/_spec/points.spec.ts

@@ -6,9 +6,8 @@
 
 import { createRenderObject } from '../render-object';
 import { Scene } from '../scene';
-import getGLContext from 'gl';
+import { getGLContext, tryGetGLContext } from './gl';
 import { setDebugMode } from '../../mol-util/debug';
-import { createRenderer } from './renderer.spec';
 import { ColorNames } from '../../mol-util/color/names';
 import { ParamDefinition as PD } from '../../mol-util/param-definition';
 import { Points } from '../../mol-geo/geometry/points/points';
@@ -22,15 +21,16 @@ export function createPoints() {
 }
 
 describe('points', () => {
-    it('basic', async () => {
-        const gl = getGLContext(32, 32);
-        const { ctx } = createRenderer(gl);
+    const ctx = tryGetGLContext(32, 32);
+
+    (ctx ? it : it.skip)('basic', async () => {
+        const ctx = getGLContext(32, 32);
         const scene = Scene.create(ctx);
         const points = createPoints();
         scene.add(points);
         setDebugMode(true);
         expect(() => scene.commit()).not.toThrow();
         setDebugMode(false);
-        gl.getExtension('STACKGL_destroy_context')?.destroy();
+        ctx.destroy();
     });
 });

src/mol-gl/_spec/spheres.spec.ts

@@ -6,9 +6,8 @@
 
 import { createRenderObject } from '../render-object';
 import { Scene } from '../scene';
-import getGLContext from 'gl';
+import { getGLContext, tryGetGLContext } from './gl';
 import { setDebugMode } from '../../mol-util/debug';
-import { createRenderer } from './renderer.spec';
 import { ColorNames } from '../../mol-util/color/names';
 import { ParamDefinition as PD } from '../../mol-util/param-definition';
 import { Spheres } from '../../mol-geo/geometry/spheres/spheres';
@@ -22,18 +21,16 @@ export function createSpheres() {
 }
 
 describe('spheres', () => {
-    const gl = getGLContext(32, 32);
-    const { ctx } = createRenderer(gl);
+    const ctx = tryGetGLContext(32, 32, { fragDepth: true });
 
-    (ctx.extensions.fragDepth ? it : it.skip)('basic', async () => {
-        const gl = getGLContext(32, 32);
-        const { ctx } = createRenderer(gl);
+    (ctx ? it : it.skip)('basic', async () => {
+        const ctx = getGLContext(32, 32);
         const scene = Scene.create(ctx);
         const spheres = createSpheres();
         scene.add(spheres);
         setDebugMode(true);
         expect(() => scene.commit()).not.toThrow();
         setDebugMode(false);
-        gl.getExtension('STACKGL_destroy_context')?.destroy();
+        ctx.destroy();
     });
 });

src/mol-gl/_spec/text.spec.ts

@@ -6,9 +6,8 @@
 
 import { createRenderObject } from '../render-object';
 import { Scene } from '../scene';
-import getGLContext from 'gl';
+import { getGLContext, tryGetGLContext } from './gl';
 import { setDebugMode } from '../../mol-util/debug';
-import { createRenderer } from './renderer.spec';
 import { ColorNames } from '../../mol-util/color/names';
 import { ParamDefinition as PD } from '../../mol-util/param-definition';
 import { Text } from '../../mol-geo/geometry/text/text';
@@ -22,15 +21,16 @@ export function createText() {
 }
 
 describe('text', () => {
-    it('basic', async () => {
-        const gl = getGLContext(32, 32);
-        const { ctx } = createRenderer(gl);
+    const ctx = tryGetGLContext(32, 32);
+
+    (ctx ? it : it.skip)('basic', async () => {
+        const ctx = getGLContext(32, 32);
         const scene = Scene.create(ctx);
         const text = createText();
         scene.add(text);
         setDebugMode(true);
         expect(() => scene.commit()).not.toThrow();
         setDebugMode(false);
-        gl.getExtension('STACKGL_destroy_context')?.destroy();
+        ctx.destroy();
     });
 });

src/mol-gl/_spec/texture-mesh.spec.ts

@@ -6,9 +6,8 @@
 
 import { createRenderObject } from '../render-object';
 import { Scene } from '../scene';
-import getGLContext from 'gl';
+import { getGLContext, tryGetGLContext } from './gl';
 import { setDebugMode } from '../../mol-util/debug';
-import { createRenderer } from './renderer.spec';
 import { ColorNames } from '../../mol-util/color/names';
 import { ParamDefinition as PD } from '../../mol-util/param-definition';
 import { TextureMesh } from '../../mol-geo/geometry/texture-mesh/texture-mesh';
@@ -22,15 +21,16 @@ export function createTextureMesh() {
 }
 
 describe('texture-mesh', () => {
-    it('basic', async () => {
-        const gl = getGLContext(32, 32);
-        const { ctx } = createRenderer(gl);
+    const ctx = tryGetGLContext(32, 32);
+
+    (ctx ? it : it.skip)('basic', async () => {
+        const ctx = getGLContext(32, 32);
         const scene = Scene.create(ctx);
         const textureMesh = createTextureMesh();
         scene.add(textureMesh);
         setDebugMode(true);
         expect(() => scene.commit()).not.toThrow();
         setDebugMode(false);
-        gl.getExtension('STACKGL_destroy_context')?.destroy();
+        ctx.destroy();
     });
 });

src/mol-gl/webgl/context.ts

@@ -358,7 +358,10 @@ export function createContext(gl: GLRenderingContext, props: Partial<{ pixelScal
             unbindResources(gl);
 
             // to aid GC
-            if (!options?.doNotForceWebGLContextLoss) gl.getExtension('WEBGL_lose_context')?.loseContext();
+            if (!options?.doNotForceWebGLContextLoss) {
+                gl.getExtension('WEBGL_lose_context')?.loseContext();
+                gl.getExtension('STACKGL_destroy_context')?.destroy();
+            }
         }
     };
 }