WebGL erkennen

Dieses Beispiel zeigt, wie ein WebGL-Rendering-Kontext erkannt wird und das Ergebnis dem Benutzer mitgeteilt wird.

WebGL-Featureerkennung

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

Den Zustand der Grafikeinheit in einer einzigen Kontextschnittstelle zu speichern, ist nicht einzigartig für WebGL. Dies wird auch in anderen Grafik-API wie dem canvas 2D rendering context gemacht. Die Eigenschaften und Variablen, die Sie anpassen 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.