WebGL Erkennung
Dieses Beispiel demonstriert, wie ein WebGL Rendering-Kontext erkannt wird und berichtet das Ergebnis an den Benutzer.
WebGL Feature-Erkennung
In diesem ersten Beispiel werden wir überprüfen, ob der Browser WebGL unterstützt. Dazu werden wir versuchen, den WebGL Rendering-Kontext aus einem canvas-Element zu erhalten. Der WebGL Rendering-Kontext ist eine Schnittstelle, durch die Sie den Zustand der Grafikmaschine einstellen und abfragen, Daten an WebGL senden und Zeichenbefehle ausführen können.
Das Speichern des Zustands der Grafikmaschine innerhalb einer einzelnen Kontextschnittstelle ist nicht einzigartig für WebGL. Dies wird auch bei anderen Grafik-API gemacht, wie beim Canvas 2D Rendering-Kontext. Die Eigenschaften und Variablen, die Sie anpassen können, sind jedoch für jede API unterschiedlich.
<p>[ Here would go the result of WebGL feature detection ]</p>
<button>Press here to detect WebGLRenderingContext</button>
body {
text-align: center;
}
button {
display: block;
font-size: inherit;
margin: auto;
padding: 0.6em;
}
const paragraph = document.querySelector("p");
const button = document.querySelector("button");
// Adding click event handler to button.
button.addEventListener("click", detectWebGLContext);
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");
// Report the result.
paragraph.textContent =
gl instanceof WebGLRenderingContext
? "Congratulations! Your browser supports WebGL."
: "Failed. Your browser or device may not support WebGL.";
}
Der Quellcode dieses Beispiels ist auch auf GitHub verfügbar.