Verify that webgl2 is supported before using it (#3435)

* Verify that webgl2 is supported before using it

* First check if WebGLRenderingContext exists at all

* Move webgl warnings to getTermOptions

lib/components/term.js

@@ -20,11 +20,38 @@ const CURSOR_STYLES = {
   BLOCK: 'block'
 };
 
+const isWebgl2Supported = (() => {
+  let isSupported = window.WebGL2RenderingContext ? undefined : false;
+  return () => {
+    if (isSupported === undefined) {
+      const canvas = document.createElement('canvas');
+      const gl = canvas.getContext('webgl2', {depth: false, antialias: false});
+      isSupported = gl instanceof window.WebGL2RenderingContext;
+    }
+    return isSupported;
+  };
+})();
+
 const getTermOptions = props => {
   // Set a background color only if it is opaque
   const needTransparency = Color(props.backgroundColor).alpha() < 1;
   const backgroundColor = needTransparency ? 'transparent' : props.backgroundColor;
-  const useWebGL = props.webGLRenderer && !needTransparency;
+
+  let useWebGL = false;
+  if (props.webGLRenderer) {
+    if (needTransparency) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        'WebGL Renderer has been disabled since it does not support transparent backgrounds yet. ' +
+          'Falling back to canvas-based rendering.'
+      );
+    } else if (!isWebgl2Supported()) {
+      // eslint-disable-next-line no-console
+      console.warn('WebGL2 is not supported on your machine. Falling back to canvas-based rendering.');
+    } else {
+      useWebGL = true;
+    }
+  }
   return {
     macOptionIsMeta: props.modifierKeys.altIsMeta,
     scrollback: props.scrollback,