Einfhrung in WebGL

Weiter

WebGL ermglicht es Webinhalten, eine auf OpenGL ES 2.0 basierende API zu verwenden, um 2D- und 3D-Rendering in einem HTML-canvas in Browsern, die es untersttzen, ohne Plug-ins durchzufhren.

WebGL-Programme bestehen aus Steuerungscode, der in JavaScript geschrieben ist, und Shadercode (GLSL), der auf der Grafikeinheit (GPU) eines Computers ausgefhrt wird. WebGL-Elemente knnen mit anderen HTML-Elementen gemischt und mit anderen Teilen der Seite oder dem Seitenhintergrund zusammengefhrt werden.

Dieser Artikel fhrt Sie in die Grundlagen der Verwendung von WebGL ein. Es wird davon ausgegangen, dass Sie bereits ber ein Verstndnis der Mathematik verfgen, die in 3D-Grafiken involviert ist, und dieser Artikel erhebt keinen Anspruch darauf, Ihnen Konzepte der 3D-Grafik selbst beizubringen.

Die Codebeispiele in diesem Tutorial finden Sie auch im WebGL-Examples-Ordner auf GitHub.

Es sei hier angemerkt, dass diese Artikelsammlung WebGL selbst einfhrt; es gibt jedoch eine Reihe von Frameworks, die die Fhigkeiten von WebGL kapseln und es erleichtern, 3D-Anwendungen und Spiele zu entwickeln, wie z. B. THREE.js und BABYLON.js.

Vorbereitung zum Rendern in 3D

Erstellen Sie zunchst zwei neue Dateien:

"index.html"
"webgl-demo.js"

Die Datei "index.html" sollte Folgendes enthalten:

html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>WebGL Demo</title>
    <script src="webgl-demo.js" type="module"></script>
  </head>

  <body>
    <canvas id="gl-canvas" width="640" height="480"></canvas>
  </body>
</html>

Beachten Sie, dass hier ein Canvas deklariert wird, in das unser Beispiel zeichnen wird.

Vorbereitung des WebGL-Kontexts

Fgen Sie der Datei "webgl-demo.js" folgenden Code hinzu:

main();

//
// start here
//
function main() {
  const canvas = document.querySelector("#gl-canvas");
  // Initialize the GL context
  const gl = canvas.getContext("webgl");

  // Only continue if WebGL is available and working
  if (gl === null) {
    alert(
      "Unable to initialize WebGL. Your browser or machine may not support it.",
    );
    return;
  }

  // Set clear color to black, fully opaque
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  // Clear the color buffer with specified clear color
  gl.clear(gl.COLOR_BUFFER_BIT);
}

Die Funktion main() wird aufgerufen, wenn unser Skript geladen wird. Ihr Zweck besteht darin, den WebGL-Kontext einzurichten und mit der Darstellung von Inhalten zu beginnen.

Das Erste, was wir hier tun, ist, eine Referenz zum Canvas zu erhalten und diese einer Variablen namens canvas zuzuweisen.

Sobald wir das Canvas haben, versuchen wir, einen WebGLRenderingContext dafr zu erhalten, indem wir getContext() aufrufen und den String "webgl" bergeben. Wenn der Browser WebGL nicht untersttzt, gibt getContext() null zurck, in diesem Fall zeigen wir dem Benutzer eine Nachricht an und beenden das Programm.

Wenn der Kontext erfolgreich initialisiert wird, ist die Variable gl unsere Referenz darauf. In diesem Fall setzen wir die Clear-Farbe auf Schwarz und lschen den Kontext in dieser Farbe (indem wir das Canvas mit der Hintergrundfarbe neu zeichnen).

An diesem Punkt haben Sie gengend Code, sodass der WebGL-Kontext erfolgreich initialisiert werden sollte, und Sie sollten mit einem groen schwarzen, leeren Kasten enden, der bereit ist, Inhalte zu empfangen.

Vollstndigen Code anzeigen | Dieses Demo auf einer neuen Seite ffnen

Siehe auch

WebGL Grundlagen
Eine Einfhrung in modernes OpenGL: Eine Reihe schner Artikel ber OpenGL, geschrieben von Joe Groff, die eine klare Einfhrung in OpenGL von seiner Geschichte bis zum wichtigen Konzept der Grafikpipeline bieten und einige Beispiele enthalten, um zu demonstrieren, wie OpenGL funktioniert. Wenn Sie keine Vorstellung davon haben, was OpenGL ist, ist dies ein guter Ausgangspunkt.

Weiter

Help improve MDN

War diese bersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen knnen Diese Seite wurde automatisch aus dem Englischen bersetzt.

bersetzung auf GitHub anzeigen Fehler mit dieser bersetzung melden