WebGL - Einführung

Hallo da draußen, zukünftige WebGL-Zauberer! Willkommen auf unserer aufregenden Reise in die Welt der 3D-Grafik im Web. Ich freue mich sehr, Ihr Guide zu sein, während wir den faszinierenden Bereich von WebGL erkunden. Als jemand, der seit über einem Jahrzehnt Computergrafik lehrt, kann ich Ihnen versichern, dass although der Weg vor uns möglicherweise einschüchternd erscheinen mag, er ist auch unglaublich lohnend. Also, schnallen Sie sich an und tauchen wir ein!

Was ist OpenGL?

Bevor wir uns WebGL zuwenden, lassen Sie uns einen kurzen Umweg machen, um sein Vorgänger zu verstehen, OpenGL. Stellen Sie sich vor, Sie sind ein Künstler, der ein Meisterwerk malen will. OpenGL ist wie Ihr magisches Set an Farben und Pinseln, das es Ihnen ermöglicht, beeindruckende visuelle Kunst auf Ihrem Computerbildschirm zu schaffen.

OpenGL, was für Open Graphics Library steht, ist eine plattformübergreifende API (Application Programming Interface) zur Darstellung von 2D- und 3D-Vektorgrafik. Es gibt seit 1992 und war die Grundlage für unzählige Spiele, Simulationen und visuelle Anwendungen.

Hier ist eine einfache Analogie: Wenn Ihr Computerbildschirm eine Leinwand ist, ist OpenGL das Set von Werkzeugen, das Programmierern hilft, auf dieser Leinwand mit unglaublicher Detailschärfe und Geschwindigkeit zu malen.

Was ist WebGL?

Nun lenken wir unsere Aufmerksamkeit auf den Star unseres Programms: WebGL. Wenn OpenGL der Pinsel für Desktop-Anwendungen ist, ist WebGL der Pinsel für das Web. Es ist eine JavaScript-API, die es Ihnen ermöglicht, beeindruckende 3D-Grafik direkt in Ihrem Webbrowser zu erstellen, ohne dass Sie Plugins benötigen.

WebGL bringt die Leistung von OpenGL ES 2.0 (einer Version von OpenGL für eingebettete Systeme) ins Web und ermöglicht es Entwicklern, die GPU (Graphics Processing Unit) direkt über JavaScript zu nutzen.

Hier ist ein einfaches "Hallo, Welt!"-Beispiel in WebGL:

<canvas id="glCanvas" width="640" height="480"></canvas>
<script>
function main() {
const canvas = document.getElementById("glCanvas");
const gl = canvas.getContext("webgl");

if (gl === null) {
alert("Unable to initialize WebGL. Your browser or machine may not support it.");
return;
}

gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
}

window.onload = main;
</script>

Dieser Code erstellt eine schwarze Leinwand auf Ihrer Webseite. Es mag nicht viel erscheinen, aber es ist Ihr erster Schritt in die Welt von WebGL!

Wer hat WebGL entwickelt

WebGL wurde von der Khronos Group entwickelt, den gleichen Leuten, die hinter OpenGL stehen. Es wurde erstmals 2011 vorgestellt und hat seitdem die Art und Weise revolutioniert, wie wir über Grafik im Web denken.

Wissenswertes: Die Entwicklung von WebGL wurde durch Experimente von Vladimir Vukićević bei Mozilla inspiriert. Er erstellte ein Canvas-Element, das OpenGL ES für JavaScript暴露, was den Grundstein für das, was WebGL werden würde, legte.

Rendern

Rendern ist der Prozess der Erstellung eines Bildes aus einem 2D- oder 3D-Modell. In WebGL geschieht dies in Echtzeit, was bedeutet, dass die Bilder auf dem Flyer generiert werden, während Sie mit ihnen interagieren.

Hier ist ein einfaches Beispiel, das ein rotes Dreieck rendert:

// Vertex-Shader-Programm
const vsSource = `
attribute vec4 aVertexPosition;
void main() {
gl_Position = aVertexPosition;
}
`;

// Fragment-Shader-Programm
const fsSource = `
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;

// ... (Initialisierungscodes)

// Szene zeichnen
function drawScene(gl, programInfo, buffers) {
gl.clearColor(0.0, 0.0, 0.0, 1.0);  // Auf schwarz, vollständig deckend klar
gl.clearDepth(1.0);                 // Alles löschen
gl.enable(gl.DEPTH_TEST);           // Tiefentest aktivieren
gl.depthFunc(gl.LEQUAL);            // Nähere Dinge verbergen weiter entfernte Dinge

// Leinwand vor dem Zeichnen leeren.
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

// ... (Szene einrichten)

{
const numComponents = 2;  // 2 Werte pro Iteration abrufen
const type = gl.FLOAT;    // Die Daten im Puffer sind 32-Bit-Floats
const normalize = false;  // nicht normalisieren
const stride = 0;         // wie viele Bytes von einem Satz von Werten zum nächsten
const offset = 0;         // wie viele Bytes im Puffer, um von zu beginnen
gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
gl.vertexAttribPointer(
programInfo.attribLocations.vertexPosition,
numComponents,
type,
normalize,
stride,
offset);
gl.enableVertexAttribArray(
programInfo.attribLocations.vertexPosition);
}

// WebGL anweisen, unser Programm beim Zeichnen zu verwenden
gl.useProgram(programInfo.program);

{
const offset = 0;
const vertexCount = 3;
gl.drawArrays(gl.TRIANGLES, offset, vertexCount);
}
}

Dieser Code richtet die notwendigen Shader und Puffer ein, um ein einfaches rotes Dreieck auf dem Bildschirm zu rendern.

GPU

GPU steht für Graphics Processing Unit. Es ist ein spezialisierte Prozessor, der für die komplexe Mathematik erforderlich ist, die beim Rendern von Grafiken auftritt. Während CPUs hervorragend für allgemeine Berechnungen geeignet sind, sind GPUs beim Ausführen vieler einfacher Berechnungen parallel hervorragend, was perfekt für Grafikaufgaben ist.

Denken Sie es sich so: Wenn das Rendern einer komplexen 3D-Szene wie das Malen eines riesigen Freskos ist, ist die CPU wie ein einzelner äußerst talentierter Künstler, während die GPU wie tausende durchschnittlicher Künstler ist, die gemeinsam arbeiten.

GPU-Beschleunigte Berechnung

GPU-Beschleunigte Berechnung bezieht sich auf die Nutzung einer GPU zusammen mit einer CPU zur Beschleunigung wissenschaftlicher, analytischer, ingenieurtechnischer, konsumtiver und unternehmerischer Anwendungen. Im Kontext von WebGL bedeutet dies, dass Ihre Grafikberechnungen an die GPU ausgelagert werden, was die CPU für andere Aufgaben freimacht und zu glatteren, schnelleren Grafiken führt.

支持的浏览器

Die Schönheit von WebGL ist seine breite Unterstützung durch moderne Browser. Stand 2023 wird WebGL von folgenden Browsern unterstützt:

Browser	Version
Chrome	9+
Firefox	4+
Safari	5.1+
Opera	12+
Internet Explorer	11+
Microsoft Edge	12+

Vorteile von WebGL

WebGL bietet zahlreiche Vorteile:

1. Plattformübergreifende Kompatibilität: Einmal schreiben, überall ausführen (solange es einen Browser gibt).
2. Keine Plugins erforderlich: Es ist im Browser integriert.
3. Hardwarebeschleunigung: Nutzt die GPU für bessere Leistung.
4. Integration mit Webtechnologien: Kann mit anderen Web-APIs für reiche, interaktive Erfahrungen kombiniert werden.
5. Offener Standard: Jeder kann zu seiner Entwicklung beitragen.

Einrichtung der Umgebung

Die Einrichtung Ihrer WebGL-Umgebung ist erstaunlich einfach. Alles, was Sie benötigen, ist:

1. Ein moderner Webbrowser
2. Ein Texteditor (ich empfehle Visual Studio Code)
3. Ein lokaler Webserver (Sie können den integrierten Server von Python oder den http-server von Node.js verwenden)

Hier ist ein einfaches Einrichtungsschema:

1. Erstellen Sie ein neues Verzeichnis für Ihr Projekt
2. Erstellen Sie eine HTML-Datei (z.B. index.html) und eine JavaScript-Datei (z.B. script.js)
3. Fügen Sie in Ihrer HTML-Datei Ihre JavaScript-Datei hinzu und richten Sie ein Canvas ein:

<!DOCTYPE html>
<html>
<head>
<title>Mein erstes WebGL-Projekt</title>
</head>
<body>
<canvas id="glCanvas" width="640" height="480"></canvas>
<script src="script.js"></script>
</body>
</html>

4. Initialisieren Sie in Ihrer JavaScript-Datei WebGL:

function main() {
const canvas = document.getElementById("glCanvas");
const gl = canvas.getContext("webgl");

if (gl === null) {
alert("Unable to initialize WebGL. Your browser or machine may not support it.");
return;
}

// WebGL-Code hier
}

window.onload = main;

Und das war's! Sie sind jetzt bereit, Ihre WebGL-Reise zu beginnen. Denken Sie daran, das Lernen von WebGL ist wie das Fahrradfahren zu lernen - es mag am Anfang wackelig erscheinen, aber mit Übung werden Sie schnell in die Pedale treten können. Viel Spaß beim Coden!

Credits: Image by storyset