WebGL erkennen

Dieses Beispiel zeigt, wie ein WebGL-Rendering-Kontext erkannt wird und meldet das Ergebnis an den Benutzer.

WebGL-Feature-Erkennung

In diesem ersten Beispiel überprüfen wir, ob der Browser WebGL unterstützt. Dazu versuchen wir, den WebGL-Rendering-Kontext von einem canvas-Element zu erhalten. Der WebGL-Rendering-Kontext ist eine Schnittstelle, über die Sie den Zustand der Grafikeinheit einstellen und abfragen, Daten an das WebGL senden und Zeichenbefehle ausführen können.

Das Speichern des Zustands der Grafikeinheit innerhalb einer einzigen Kontextschnittstelle ist nicht einzigartig für WebGL. Dies wird auch in anderen Grafik-API gemacht, wie z.B. dem canvas 2D-Rendering-Kontext. Die Eigenschaften und Variablen, die Sie ändern können, sind jedoch für jede API unterschiedlich.

html

<p>[ Here would go the result of WebGL feature detection ]</p>
<button>Press here to detect WebGLRenderingContext</button>

css

body {
  text-align: center;
}
button {
  display: block;
  font-size: inherit;
  margin: auto;
  padding: 0.6em;
}

// Run everything inside window load event handler, to make sure
// DOM is fully loaded and styled before trying to manipulate it.
window.addEventListener(
  "load",
  () => {
    const paragraph = document.querySelector("p");
    const button = document.querySelector("button");

    // Adding click event handler to button.
    button.addEventListener("click", detectWebGLContext, false);
    function detectWebGLContext() {
      // Create canvas element. The canvas is not added to the
      // document itself, so it is never displayed in the
      // browser window.
      const canvas = document.createElement("canvas");

      // Get WebGLRenderingContext from canvas element.
      const gl =
        canvas.getContext("webgl") || canvas.getContext("experimental-webgl");

      // Report the result.
      paragraph.textContent =
        gl instanceof WebGLRenderingContext
          ? "Congratulations! Your browser supports WebGL."
          : "Failed. Your browser or device may not support WebGL.";
    }
  },
  false,
);

Der Quellcode dieses Beispiels ist auch auf GitHub verfügbar.