WebGL - Kontext: Ein freundlicher Leitfaden für Anfänger

Hallo da draußen, zukünftige WebGL-Zauberer! Ich freue mich sehr, Ihr Guide auf dieser aufregenden Reise in die Welt von WebGL zu sein. Als jemand, der seit Jahren Informatik unterrichtet, kann ich Ihnen sagen, dass WebGL wie eine magische Mal Pinsel für Ihren Webbrowser ist. Es ermöglicht Ihnen, beeindruckende 3D-Grafiken direkt in Ihren Webseiten zu erstellen! Also, rollen wir die Ärmel hoch und tauchen ein, wie wäre es?

Erstellung des HTML-5 Canvas-Elements

Zunächst einmal brauchen wir eine Leinwand, auf der wir malen können. In HTML5 haben wir dieses praktische Ding namens <canvas>-Element. Es ist wie ein leerer Blatt Papier, auf dem wir unsere WebGL-Meisterwerke zeichnen werden.

Lassen Sie uns unsere Leinwand erstellen:

<canvas id="myWebGLCanvas" width="800" height="600">
Ihr Browser unterstützt kein HTML5 Canvas.
</canvas>

Dieser Code erstellt eine Leinwand, die 800 Pixel breit und 600 Pixel hoch ist. Wir haben ihr eine ID von "myWebGLCanvas" gegeben - denken Sie daran wie einen Namensschild für unsere Leinwand. Der Text innerhalb der Tags ist eine Fallback-Nachricht für Browser, die Canvas nicht unterstützen (aber keine Sorge, die meisten modernen Browser tun das).

Canvas-ID abrufen

Nun, wo wir unsere Leinwand haben, müssen wir sie in unserem JavaScript-Code abrufen. Wir tun dies mit der getElementById-Methode. Es ist, als würden wir unsere Leinwand nach ihrem Namensschild rufen.

let canvas = document.getElementById('myWebGLCanvas');

Diese Zeile findet unser Canvas-Element und speichert es in einer Variable namens canvas. Einfach, oder?

WebGL-Zeichenkontext abrufen

Nun kommt der spannende Teil - den WebGL-Kontext zu erhalten. Der Kontext ist wie unser Satz magischer Zeichenwerkzeuge, den wir auf unserer Leinwand verwenden werden.

let gl = canvas.getContext('webgl');

if (!gl) {
console.log('WebGL wird nicht unterstützt, zurückgreifen auf experimental-webgl');
gl = canvas.getContext('experimental-webgl');
}

if (!gl) {
alert('Ihr Browser unterstützt kein WebGL');
}

Lassen Sie uns das zusammenbrechen:

1. Wir versuchen, den WebGL-Kontext mit getContext('webgl') zu erhalten.
2. Wenn das nicht funktioniert (vielleicht ist der Browser etwas älter), probieren wir experimental-webgl.
3. Wenn wir immer noch keinen Kontext erhalten, warnen wir den Benutzer, dass sein Browser kein WebGL unterstützt.

WebGLContextAttributes

Wenn wir unseren WebGL-Kontext erstellen, können wir einige Attribute angeben, um sein Verhalten anzupassen. Es ist, als würden wir die Einstellungen für unseren magischen Pinsel wählen. Hier ist eine Tabelle der verfügbaren Attribute:

Attribut	Beschreibung	Standardwert
alpha	Canvas enthält einen Alpha-Puffer	true
depth	Zeichenpuffer hat einen Tiefenpuffer von mindestens 16 Bit	true
stencil	Zeichenpuffer hat einen Stencil-Puffer von mindestens 8 Bit	false
antialias	Zeichenpuffer führt Kantenglättung durch	true
premultipliedAlpha	Page Compositor gått davon aus, dass der Zeichenpuffer Farben mit vortemperieter Alpha enthält	true
preserveDrawingBuffer	Puffer werden nicht gelöscht und bewahren ihre Werte, bis sie gelöscht oder überschrieben werden	false
failIfMajorPerformanceCaveat	Kontexterstellung wird fehlgeschlagen, wenn die Systemleistung niedrig ist	false

Um diese Attribute zu verwenden, können wir ein Objekt übergeben, wenn wir den Kontext erhalten:

let contextAttributes = {
alpha: false,
depth: true,
stencil: true,
antialias: true,
premultipliedAlpha: false,
preserveDrawingBuffer: false,
failIfMajorPerformanceCaveat: false
};

let gl = canvas.getContext('webgl', contextAttributes);

WebGLRenderingContext

Sobald wir unseren WebGL-Kontext haben, können wir seine Methoden und Eigenschaften verwenden, um beeindruckende Grafiken zu erstellen. Das WebGLRenderingContext bietet alle WebGL-Zeichenfunktionen.

Hier ist ein einfaches Beispiel, das die Leinwand mit einem schönen Himmelblau löscht:

if (gl) {
// Setzen der Löschfarbe auf Himmelblau
gl.clearColor(0.529, 0.808, 0.922, 1.0);

// Löschen des Farb buffers mit der angegebenen Löschfarbe
gl.clear(gl.COLOR_BUFFER_BIT);
}

Lassen Sie uns das zusammenbrechen:

1. gl.clearColor(0.529, 0.808, 0.922, 1.0): Dies setzt die Farbe, mit der wir die Leinwand löschen werden. Die Zahlen repräsentieren Rot, Grün, Blau und Alpha-Werte, die jeweils von 0 bis 1 reichen.
2. gl.clear(gl.COLOR_BUFFER_BIT): Dies löscht die Leinwand mit unserer angegebenen Farbe.

Und voilà! Sie haben gerade Ihr erstes WebGL Meisterwerk gemalt - eine wunderschöne himmelblaue Leinwand!

Denken Sie daran, das ist erst der Anfang. WebGL bietet eine Vielzahl von Funktionen, die es Ihnen ermöglichen, komplexe 3D-Grafiken zu erstellen. Es ist wie das Lernen zu malen - wir beginnen mit einer leeren Leinwand und einer einzigen Farbe, aber mit Übung werden Sie schnell in der Lage sein, komplexe 3D-Welten zu erstellen!

Als wir diese Einführung in den WebGL-Kontext abschlossen, erinnerte ich mich an meine erste Erfahrung, dieses Konzept zu unterrichten. Ich hatte einen Schüler, der so begeistert von der Farbe der Leinwand war, dass er einen ganzen Nachmittag damit verbrachte, ein "farbwechselndes Stimmungslicht"-Programm zu erstellen. Es zeigt nur, dass selbst die einfachsten Konzepte unglaubliche Kreativität entfachen können!

In unserer nächsten Lektion tauchen wir tiefer in WebGL ein und beginnen mit dem Zeichnen von Formen. Bis dahin, viel Spaß beim Programmieren und möge Ihre Leinwand immer bunt sein!

Credits: Image by storyset