fix(core) warn and error when WebGL1 detected

docs/api-reference/core/layer-manager.md

@@ -17,7 +17,7 @@ new LayerManager(gl, {eventManager: ...}})`
 
 Parameters:
 
-* `gl` ([WebGLRenderingContext](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext))
+* `gl` ([WebGL2RenderingContext](https://developer.mozilla.org/en-US/docs/Web/API/WebGL2RenderingContext))
 
 
 ## Methods

docs/api-reference/core/layer.md

@@ -556,7 +556,7 @@ Notes:
 
 The context object stores information that are shared by all layers.
 
-* `gl` ([WebGLRenderingContext](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext)) - WebGL context of the current canvas.
+* `gl` ([WebGL2RenderingContext](https://developer.mozilla.org/en-US/docs/Web/API/WebGL2RenderingContext)) - WebGL context of the current canvas.
 * `viewport` ([Viewport](./viewport.md)) - The current viewport
 * `deck` ([Deck](./deck.md)) - The current deck.gl instance
 
@@ -625,7 +625,7 @@ This method is called only once for each layer to set up the initial state.
 `initializeState(context)`
 
 * `context` - The layer context is supplied as a parameter
-  - `context.gl` (`WebGLRenderingContext`) - gl context
+  - `context.gl` (`WebGL2RenderingContext`) - gl context
   - ...
 
 deck.gl will already have created the `state` object at this time, and added the `gl` context and the `attributeManager` state.
@@ -684,7 +684,7 @@ Parameters:
 
 * an object that contains all the [default unforms](../../developer-guide/custom-layers/writing-shaders.md#uniforms) to be passed to the shaders.
 * `context` - The layer context is supplied as a parameter
-  - `context.gl` (`WebGLRenderingContext`) - gl context
+  - `context.gl` (`WebGL2RenderingContext`) - gl context
   - ...
 
 The default implementation looks for a variable `model` in the layer's state (which is expected to be an instance of the luma.gl `Model` class) and calls `draw` on that model with the parameters.

examples/experimental/tfjs/src/tf-utils/tf-context.ts

@@ -5,21 +5,21 @@ import GL from '@luma.gl/constants';
 
 /** Helper class for sharing WebGL context between Deck and tfjs */
 export class CustomTFContext {
-  gl: WebGLRenderingContext;
+  gl: WebGL2RenderingContext;
   ctx: tfgl.GPGPUContext;
   lastContextState: any;
 
   static lastContext: CustomTFContext = null;
-  static contexts = new Map<WebGLRenderingContext, CustomTFContext>();
+  static contexts = new Map<WebGL2RenderingContext, CustomTFContext>();
 
-  static getDefaultContext(gl: WebGLRenderingContext) {
+  static getDefaultContext(gl: WebGL2RenderingContext) {
     if (!this.contexts.has(gl)) {
       this.contexts.set(gl, new CustomTFContext(gl));
     }
     return this.contexts.get(gl);
   }
 
-  constructor(gl: WebGLRenderingContext) {
+  constructor(gl: WebGL2RenderingContext) {
     this.gl = gl;
     this.ctx = new tfgl.GPGPUContext(gl);
   }

examples/website/plot/plot-layer/utils.js

@@ -10,7 +10,7 @@ function setTextStyle(ctx, fontSize) {
 
 /*
  * renders a matrix of text labels to texture2D.
- * @param {WebGLRenderingContext} glContext
+ * @param {WebGL2RenderingContext} glContext
  * @param {[[String]]} data: text to render, in array of columns (array of strings)
  * @param {Number} fontSize: size to render with
  * @returns {object} {texture, columnWidths}

modules/core/src/lib/deck.ts

@@ -377,6 +377,9 @@ export default class Deck {
     if (props.device) {
       this.device = props.device;
     } else if (props.gl) {
+      if (props.gl instanceof WebGLRenderingContext) {
+        log.error('WebGL1 context not supported.')();
+      }
       this.device = WebGLDevice.attach(props.gl);
     }
 

modules/mapbox/src/mapbox-layer.ts

@@ -33,11 +33,7 @@ export default class MapboxLayer<LayerT extends Layer> implements CustomLayerInt
 
   /* Mapbox custom layer methods */
 
-  onAdd(map: Map, gl: WebGLRenderingContext | WebGL2RenderingContext): void {
-    if (gl instanceof WebGLRenderingContext) {
-      log.warn('Use useWebGL2:true in mapboxgl.Map()')();
-      return;
-    }
+  onAdd(map: Map, gl: WebGL2RenderingContext): void {
     this.map = map;
     this.deck = getDeckInstance({map, gl, deck: this.props.deck});
     addLayer(this.deck, this);

modules/mapbox/src/mapbox-overlay.ts

@@ -4,6 +4,7 @@ import {getViewState, getDeckInstance, removeDeckInstance, getInterleavedProps}
 import type {Map, IControl, MapMouseEvent} from 'mapbox-gl';
 import type {MjolnirGestureEvent, MjolnirPointerEvent} from 'mjolnir.js';
 import type {DeckProps} from '@deck.gl/core';
+import {log} from '@deck.gl/core';
 
 import {resolveLayers} from './resolve-layers';
 
@@ -93,14 +94,19 @@ export default class MapboxOverlay implements IControl {
   }
 
   private _onAddInterleaved(map: Map): HTMLDivElement {
+    // @ts-ignore non-public map property
+    const gl = map.painter.context.gl;
+    if (gl instanceof WebGLRenderingContext) {
+      log.warn(
+        'Incompatible basemap library. See: https://deck.gl/docs/api-reference/mapbox/overview#compatibility'
+      )();
+    }
     this._deck = getDeckInstance({
       map,
-      // @ts-ignore non-public map property
-      gl: map.painter.context.gl,
+      gl,
       deck: new Deck({
         ...this._props,
-        // @ts-ignore non-public map property
-        gl: map.painter.context.gl
+        gl
       })
     });