From be2bf1ca2d4990cf7ffd32483ae2a0551413b45d Mon Sep 17 00:00:00 2001 From: Juan Campa Date: Wed, 23 Jan 2019 15:58:55 -0500 Subject: [PATCH 1/3] Verify that webgl2 is supported before using it --- lib/components/term.js | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/lib/components/term.js b/lib/components/term.js index 869224e0922d..8f6184a0877c 100644 --- a/lib/components/term.js +++ b/lib/components/term.js @@ -20,11 +20,27 @@ const CURSOR_STYLES = { BLOCK: 'block' }; +const isWebgl2Supported = (() => { + let isSupported; + return () => { + if (isSupported === undefined) { + const canvas = document.createElement('canvas'); + const gl = canvas.getContext('webgl2', {depth: false, antialias: false}); + isSupported = gl instanceof window.WebGL2RenderingContext; + if (!isSupported) { + // eslint-disable-next-line no-console + console.warn(`WebGL2 is not supported on your machine. Falling back to canvas-based rendering.`); + } + } + 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; + const useWebGL = props.webGLRenderer && !needTransparency && isWebgl2Supported(); return { macOptionIsMeta: props.modifierKeys.altIsMeta, scrollback: props.scrollback, From b6d9de8f2895f5963f2c2a1d18fc72f43a42b9c0 Mon Sep 17 00:00:00 2001 From: Juan Campa Date: Wed, 23 Jan 2019 16:22:42 -0500 Subject: [PATCH 2/3] First check if WebGLRenderingContext exists at all --- lib/components/term.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/components/term.js b/lib/components/term.js index 8f6184a0877c..7800fd9e23ea 100644 --- a/lib/components/term.js +++ b/lib/components/term.js @@ -21,7 +21,7 @@ const CURSOR_STYLES = { }; const isWebgl2Supported = (() => { - let isSupported; + let isSupported = window.WebGL2RenderingContext ? undefined : false; return () => { if (isSupported === undefined) { const canvas = document.createElement('canvas'); From 5de783780de066ed8a3d7f3e973f6452c34e7c23 Mon Sep 17 00:00:00 2001 From: Juan Campa Date: Wed, 23 Jan 2019 17:44:00 -0500 Subject: [PATCH 3/3] Move webgl warnings to getTermOptions --- lib/components/term.js | 21 ++++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/lib/components/term.js b/lib/components/term.js index 7800fd9e23ea..19692f4f9995 100644 --- a/lib/components/term.js +++ b/lib/components/term.js @@ -27,10 +27,6 @@ const isWebgl2Supported = (() => { const canvas = document.createElement('canvas'); const gl = canvas.getContext('webgl2', {depth: false, antialias: false}); isSupported = gl instanceof window.WebGL2RenderingContext; - if (!isSupported) { - // eslint-disable-next-line no-console - console.warn(`WebGL2 is not supported on your machine. Falling back to canvas-based rendering.`); - } } return isSupported; }; @@ -40,7 +36,22 @@ 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 && isWebgl2Supported(); + + 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,