class WebGL { static isWebGLAvailable() { try { const canvas = document.createElement( 'canvas' ); return !! ( window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) ) ); } catch ( e ) { return false; } } static isWebGL2Available() { try { const canvas = document.createElement( 'canvas' ); return !! ( window.WebGL2RenderingContext && canvas.getContext( 'webgl2' ) ); } catch ( e ) { return false; } } static getWebGLErrorMessage() { return this.getErrorMessage( 1 ); } static getWebGL2ErrorMessage() { return this.getErrorMessage( 2 ); } static getErrorMessage( version ) { const names = { 1: 'WebGL', 2: 'WebGL 2' }; const contexts = { 1: window.WebGLRenderingContext, 2: window.WebGL2RenderingContext }; let message = 'Your $0 does not seem to support $1'; const element = document.createElement( 'div' ); element.id = 'webglmessage'; element.style.fontFamily = 'monospace'; element.style.fontSize = '13px'; element.style.fontWeight = 'normal'; element.style.textAlign = 'center'; element.style.background = '#fff'; element.style.color = '#000'; element.style.padding = '1.5em'; element.style.width = '400px'; element.style.margin = '5em auto 0'; if ( contexts[ version ] ) { message = message.replace( '$0', 'graphics card' ); } else { message = message.replace( '$0', 'browser' ); } message = message.replace( '$1', names[ version ] ); element.innerHTML = message; return element; } } export default WebGL;