WebGL - Beispielanwendung: Ein 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 Informatiklehrer mit jahrelanger Erfahrung habe ich unzählige Schüler gesehen, die erleuchtet waren, als sie ihre ersten 3D-Grafiken im Web erstellt haben. Heute werden wir diese gleiche Abenteuerreise gemeinsam antreten. Also, schnallt euch an und taucht ein!

WebGL - Sample Application

Was ist WebGL?

Bevor wir mit dem Programmieren beginnen, lassen Sie uns verstehen, was WebGL ist. WebGL (Web Graphics Library) ist eine JavaScript-API, die es uns ermöglicht, interaktive 3D- und 2D-Grafiken in Webbrowsern ohne Verwendung von Plugins zu rendern. Es ist, als würde man deinen Webseiten Superkräfte verleihen, um atemberaubende Visuals zu erstellen!

Struktur einer WebGL-Anwendung

Eine WebGL-Anwendung besteht typischerweise aus mehreren Schlüsselkomponenten. Lassen Sie uns diese durcharbeiten:

1. HTML-Canvas

Das Canvas ist unsere Zeichnungstafel. Hier geschieht alle Magie!

<canvas id="myCanvas" width="640" height="480">
Ihr Browser unterstützt das HTML5 Canvas-Tag nicht.
</canvas>

Dies erstellt ein 640x480 Pixel großes Canvas auf deiner Webseite. Denk daran als dein Künstlerbrett, bereit für dein Meisterwerk!

2. JavaScript-Code

Hier schreiben wir unsere WebGL-Befehle. Es ist, als würden wir unserem virtuellen Künstler Anweisungen geben.

3. Vertex-Shader und Fragment-Shader

Diese sind spezielle Programme, die auf der GPU ausgeführt werden. Sie sind wie Pinsel und Farbkisten für unsere 3D-Grafiken.

4. Puffer

Puffer speichern die Daten für unsere 3D-Objekte. Stell dir sie als die Rohstoffe für unsere 3D-Skulpturen vor.

Jetzt, da wir die Zutaten kennen, lassen uns ein köstliches WebGL-Programm zaubern!

Beispielanwendung

Lassen uns eine einfache WebGL-Anwendung erstellen, die ein buntes Dreieck zeichnet. Wir werden jeden Schritt im Detail durchgehen.

Schritt 1: Einrichten der HTML

Zuerst müssen wir eine HTML-Datei mit einem Canvas-Element erstellen:

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="640" height="480">
Ihr Browser unterstützt das HTML5 Canvas-Tag nicht.
</canvas>
<script src="webgl-demo.js"></script>
</body>
</html>

Dies erstellt unser Canvas und verlinkt zu einer JavaScript-Datei, die wir als nächstes erstellen werden.

Schritt 2: Initialisieren von WebGL

Jetzt erstellen wir unsere webgl-demo.js Datei und richten WebGL ein:

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

if (!gl) {
alert("WebGL wird von Ihrem Browser nicht unterstützt!");
return;
}

// WebGL ist bereit zur Verwendung!
}

window.onload = main;

Diese Funktion holt unser Canvas, initialisiert WebGL und überprüft, ob es unterstützt wird. Es ist, als würden wir überprüfen, ob wir alle unsere Kunstmaterialien vor der Arbeit haben.

Schritt 3: Shaders erstellen

Jetzt erstellen wir unsere Vertex- und Fragment-Shaders:

function createShader(gl, type, source) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);

if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.error('Ein Fehler ist beim Kompilieren der Shaders aufgetreten: ' + gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}

return shader;
}

const vertexShaderSource = `
attribute vec4 a_position;
void main() {
gl_Position = a_position;
}
`;

const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1, 0, 0.5, 1);
}
`;

const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);

Diese Shaders bestimmen, wie unser Dreieck positioniert und koloriert wird. Der Vertex-Shader positioniert unser Dreieck, während der Fragment-Shader ihm eine schöne rosa Farbe gibt.

Schritt 4: Ein Programm erstellen

Jetzt verknüpfen wir unsere Shaders in ein Programm:

function createProgram(gl, vertexShader, fragmentShader) {
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
console.error('Das Shader-Programm konnte nicht initialisiert werden: ' + gl.getProgramInfoLog(program));
return null;
}

return program;
}

const program = createProgram(gl, vertexShader, fragmentShader);

Dies ist so, als würden wir unsere Kunstwerkzeuge zusammenbauen und uns bereit machen zu malen!

Schritt 5: einen Puffer erstellen

Jetzt erstellen wir einen Puffer, um die Vertices unseres Dreiecks zu speichern:

const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

const positions = [
0, 0,
0, 0.5,
0.7, 0,
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

Dies definiert die Form unseres Dreiecks. Es ist, als würden wir die Grundform vor dem Malen skizzieren.

Schritt 6: Das Dreieck rendern

Schließlich zeichnen wir unser Dreieck:

gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);

gl.useProgram(program);

const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(positionAttributeLocation);
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

gl.drawArrays(gl.TRIANGLES, 0, 3);

Hier geschieht die Magie! Wir bereinigen das Canvas, stellen unser Programm und Puffer ein und zeichnen schließlich unser Dreieck.

Fazit

Glückwunsch! Du hast gerade deine erste WebGL-Anwendung erstellt. Du hast den ersten Schritt in eine größere Welt der 3D-Grafiken im Web gewagt. Bedenke, dass das Beherrschen von WebGL, wie jede andere Kunstform, Übung und Geduld erfordert. Aber mit jeder Zeile Code malst du ein lebendigeres und interaktiveres Web. Weitersuchen, weiter-create und vor allem: Spaß haben!

Hier ist eine Tabelle, die die Hauptmethoden zusammenfasst, die wir verwendet haben:

Methode	Beschreibung
`getContext("webgl")`	Initialisiert WebGL
`createShader()`	Erstellt einen Shader
`shaderSource()`	Definiert die Shader-Quellcode
`compileShader()`	Kompiliert einen Shader
`createProgram()`	Erstellt ein Programm
`attachShader()`	Hängt einen Shader an ein Programm an
`linkProgram()`	Verknüpft ein Programm
`createBuffer()`	Erstellt einen Puffer
`bindBuffer()`	Bindet einen Puffer
`bufferData()`	Füllt einen Puffer mit Daten
`viewport()`	Setzt den Viewport
`clearColor()`	Setzt die Bereinigungsfarbe
`clear()`	Bereinigt das Canvas
`useProgram()`	Verwendet ein Programm
`getAttribLocation()`	Holt die Position eines Attributes
`enableVertexAttribArray()`	Aktiviert eine Vertex-Attribut-Array
`vertexAttribPointer()`	Bestimmt das Layout der Vertex-Daten
`drawArrays()`	Rendernt Primitive

Behalte diese Tabelle bereit, während du deine WebGL-Reise fortsetzt. Viel Spaß beim Programmieren!

Credits: Image by storyset

Vorheriges Tutorial:

WebGL - Grafik-Pipeline

Nächstes Tutorial:

WebGL - Kontext