fix: webgl interface was still an object collection, create context f…

…or detection only once, free it as well
Mercury21th000 · Dec 21, 2021 · 4dbfe78 · 4dbfe78
1 parent bfbd8c9
commit 4dbfe78
Showing 1 changed file with 61 additions and 55 deletions.
diff --git a/src/misc/WebGL.ts b/src/misc/WebGL.ts
@@ -1,66 +1,72 @@
-export const WEBGL = {
-  isWebGLAvailable: function (): boolean {
-    try {
-      const canvas = document.createElement('canvas')
-      return !!(window.WebGLRenderingContext && (canvas.getContext('webgl') || canvas.getContext('experimental-webgl')))
-    } catch (e) {
-      return false
-    }
-  },
+let webGLAvailable: boolean, webGL2Available: boolean
 
-  isWebGL2Available: function (): boolean {
-    try {
-      const canvas = document.createElement('canvas')
-      return !!(window.WebGL2RenderingContext && canvas.getContext('webgl2'))
-    } catch (e) {
-      return false
-    }
-  },
-
-  getWebGLErrorMessage: function (): HTMLDivElement {
-    return this.getErrorMessage(1)
-  },
+export function isWebGLAvailable(): boolean {
+  if (webGLAvailable !== undefined) return webGLAvailable
+  try {
+    let gl
+    const canvas = document.createElement('canvas')
+    webGLAvailable = !!(window.WebGLRenderingContext && (gl = canvas.getContext('webgl')))
+    if (gl) gl.getExtension('WEBGL_lose_context')?.loseContext()
+    return webGLAvailable
+  } catch (e) {
+    return (webGLAvailable = false)
+  }
+}
 
-  getWebGL2ErrorMessage: function (): HTMLDivElement {
-    return this.getErrorMessage(2)
-  },
+export function isWebGL2Available(): boolean {
+  if (webGL2Available !== undefined) return webGL2Available
+  try {
+    let gl
+    const canvas = document.createElement('canvas')
+    webGL2Available = !!(window.WebGL2RenderingContext && (gl = canvas.getContext('webgl2')))
+    if (gl) gl.getExtension('WEBGL_lose_context')?.loseContext()
+    return webGL2Available
+  } catch (e) {
+    return (webGL2Available = false)
+  }
+}
 
-  getErrorMessage: function (version: 1 | 2): HTMLDivElement {
-    const names = {
-      1: 'WebGL',
-      2: 'WebGL 2',
-    }
+export function getWebGLErrorMessage(): HTMLDivElement {
+  return this.getErrorMessage(1)
+}
 
-    const contexts = {
-      1: window.WebGLRenderingContext,
-      2: window.WebGL2RenderingContext,
-    }
+export function getWebGL2ErrorMessage(): HTMLDivElement {
+  return this.getErrorMessage(2)
+}
 
-    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'
+export function getErrorMessage(version: 1 | 2): HTMLDivElement {
+  const names = {
+    1: 'WebGL',
+    2: 'WebGL 2',
+  }
 
-    let message =
-      'Your $0 does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:#000">$1</a>'
+  const contexts = {
+    1: window.WebGLRenderingContext,
+    2: window.WebGL2RenderingContext,
+  }
 
-    if (contexts[version]) {
-      message = message.replace('$0', 'graphics card')
-    } else {
-      message = message.replace('$0', 'browser')
-    }
+  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'
 
-    message = message.replace('$1', names[version])
+  let message =
+    'Your $0 does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:#000">$1</a>'
 
-    element.innerHTML = message
+  if (contexts[version]) {
+    message = message.replace('$0', 'graphics card')
+  } else {
+    message = message.replace('$0', 'browser')
+  }
 
-    return element
-  },
+  message = message.replace('$1', names[version])
+  element.innerHTML = message
+  return element
 }