Boilerplate 1

Dieses Beispiel beschreibt wiederkehrende Codeabschnitte, die von nun an ausgeblendet werden, und definiert eine JavaScript-Hilfsfunktion, um die WebGL-Initialisierung zu erleichtern.

Boilerplate-Code für das Einrichten des WebGL-Rendering-Kontexts

Mittlerweile sind Sie daran gewöhnt, dieselben HTML-, CSS- und JavaScript-Elemente immer wieder zu sehen. Wir werden sie daher von nun an ausblenden. Dies ermöglicht es uns, uns auf die interessanten Codeabschnitte zu konzentrieren, die für das Lernen von WebGL am relevantesten sind.

Konkret enthält das HTML ein <p>-Element, das einige beschreibende Texte über die Seite enthält und möglicherweise auch Fehlermeldungen; ein <canvas>-Element und optional ein <button>. Das CSS enthält Regeln für body, canvas und button. Jegliches zusätzliche nicht-triviale CSS und HTML wird auf den Seiten der spezifischen Beispiele angezeigt.

In den folgenden Beispielen werden wir eine JavaScript-Hilfsfunktion, getRenderingContext(), verwenden, um den WebGL-Renderingkontext zu initialisieren. Bis jetzt sollten Sie verstehen, was die Funktion macht. Grundsätzlich erhält sie den WebGL-Renderingkontext vom Canvas-Element, initialisiert den Zeichenpuffer, löscht ihn schwarz und gibt den initialisierten Kontext zurück. Im Fehlerfall zeigt sie eine Fehlermeldung an und gibt null zurück.

Schließlich wird der gesamte JavaScript-Code in einer direkten Funktion ausgeführt, was eine häufige JavaScript-Technik ist (siehe Funktion). Die Funktionsdeklaration und der Aufruf werden ebenfalls verborgen.

HTML

html

<p>[ Some descriptive text about the example. ]</p>
<button>[ Optional button element. ]</button>
<canvas>Your browser does not seem to support HTML canvas.</canvas>

CSS

css

body {
  text-align: center;
}
canvas {
  display: block;
  width: 280px;
  height: 210px;
  margin: auto;
  padding: 0;
  border: none;
  background-color: black;
}
button {
  display: block;
  font-size: inherit;
  margin: auto;
  padding: 0.6em;
}

JavaScript

function getRenderingContext() {
  const canvas = document.querySelector("canvas");
  canvas.width = canvas.clientWidth;
  canvas.height = canvas.clientHeight;
  const gl =
    canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
  if (!gl) {
    const paragraph = document.querySelector("p");
    paragraph.textContent =
      "Failed to get WebGL context. Your browser or device may not support WebGL.";
    return null;
  }
  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT);
  return gl;
}

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