WebGL - Drehung: Leben in Ihre Grafiken bringen

Hallo, ambitionierte WebGL-Entwickler! Heute tauchen wir in eines der aufregendsten Aspekte der Computergrafik ein: Drehung. Als dein freundlicher Nachbarschaftsinformatiklehrer bin ich hier, um dich durch die magische Welt der drehenden Dreiecke und sich drehenden Formen zu führen. Also hol dir deine imaginären 3D-Brille und los geht's!

Verständnis der Drehung in WebGL

Bevor wir uns dem Code widmen, lassen wir uns einen Moment Zeit, um zu verstehen, was Drehung im Kontext von WebGL bedeutet. Stell dir vor, du hältst ein Papierflugzeug in der Hand. Wenn du es drehst, änderst du seine Orientierung im Raum. In WebGL machen wir dasselbe, aber mit mathematischer Präzision!

Drehung in WebGL beinhaltet das Ändern der Position der Vertex (die Punkte, die unsere Formen bilden) um eine zentrale Achse. Dies kann die X-, Y- oder Z-Achse sein, oder sogar eine Kombination aus ihnen.

Die Magie der Matrizen

Jetzt weiß ich, was du denkst: "Matrizen? Ist das nicht etwas aus den 'Matrix'-Filmen?" Na ja, nicht ganz, aber sie sind genauso cool! In WebGL verwenden wir Matrizen, um Drehungen effizient durchzuführen. Mach dir keine Sorgen, wenn das kompliziert klingt - wir werden es Schritt für Schritt durchgehen.

Beispiel – Ein Dreieck drehen

Lassen wir mit einem einfachen Beispiel beginnen: ein Dreieck drehen. Wir beginnen mit einem grundlegenden Dreieck und lassen es dann wie eine geometrische Ballerina tanzen!

Schritt 1: Einrichten unserer WebGL-Umgebung

Zuerst müssen wir unseren WebGL-Kontext einrichten. Hier ist eine grundlegende HTML-Struktur:

<canvas id="glCanvas" width="640" height="480"></canvas>
<script>
// Unser WebGL-Code kommt hier hin
</script>

Schritt 2: Initialisieren von WebGL

Nun initialisieren wir WebGL:

const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');

if (!gl) {
console.error('WebGL wird nicht unterstützt');
return;
}

Dieser Code holt unser Canvas-Element und versucht, einen WebGL-Kontext zu erhalten. Wenn WebGL nicht unterstützt wird, sehen wir eine Fehlermeldung.

Schritt 3: Erstellen unserer Shaders

Shaders sind spezielle Programme, die auf der GPU ausgeführt werden. Wir brauchen zwei Arten: Vertex-Shaders und Fragment-Shaders. Hier ist ein einfaches Set:

const vertexShaderSource = `
attribute vec2 a_position;
uniform mat3 u_matrix;
void main() {
gl_Position = vec4((u_matrix * vec3(a_position, 1)).xy, 0, 1);
}
`;

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

Der Vertex-Shader wendet unsere Rotationmatrix an, während der Fragment-Shader unser Dreieck rot einfärbt.

Schritt 4: Kompilieren und Verknüpfen der Shaders

Als nächstes müssen wir unsere Shaders kompilieren und verknüpfen:

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

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

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

Dieser Code erstellt unser Shader-Programm, das wir zur Darstellung unseres drehenden Dreiecks verwenden werden.

Schritt 5: Erstellen unseres Dreiecks

Nun definieren wir unser Dreieck:

const positions = [
0, 0.5,
-0.5, -0.5,
0.5, -0.5
];

const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

Dies erstellt ein einfaches Dreieck, das um den Ursprung zentriert ist.

Schritt 6: Die Rotation zaubern

Hier passiert dieechte Magie. Wir erstellen eine Funktion, um unsere Rotationmatrix zu generieren:

function createRotationMatrix(angleInRadians) {
const c = Math.cos(angleInRadians);
const s = Math.sin(angleInRadians);
return [
c, -s, 0,
s, c, 0,
0, 0, 1
];
}

Diese Funktion nimmt einen Winkel in Radiant und gibt eine 3x3-Rotationmatrix zurück.

Schritt 7:Unser drehendes Dreieck rendern

Schließlich setzen wir alles zusammen und lassen unser Dreieck drehen:

let angleInRadians = 0;

function render() {
angleInRadians += 0.01;

gl.clearColor(0, 0, 0, 1);
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);

const matrixLocation = gl.getUniformLocation(program, "u_matrix");
const matrix = createRotationMatrix(angleInRadians);
gl.uniformMatrix3fv(matrixLocation, false, matrix);

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

requestAnimationFrame(render);
}

render();

Diese Funktion doet mehrere Dinge:

1. Erhöht unseren Rotationswinkel
2. Bereinigt das Canvas
3. Rüstet unser Shader-Programm und Attribute
4. Erstellt und applies unsere Rotationmatrix
5. Zeichnet das Dreieck
6. Fordert den nächsten Animation Frame an

Und voilà! Wir haben ein drehendes Dreieck!

Schlussfolgerung

Herzlichen Glückwunsch! Du hast dein erstes drehendes Objekt in WebGL erstellt. Denke daran, das ist erst der Anfang. Mit diesen grundlegenden Prinzipien kannst du komplexe 3D-Szenen mit mehreren drehenden Objekten erstellen.

Als wir aufhören, erinnere ich mich an eine Schülerin, die einmal sagte: "Ich dachte, Computergrafik wäre alles sobre coole Software, aber jetzt sehe ich, dass es mehr wie das Steuern eines digitalen Puppenspiels ist!" Und sie hatte recht – mit WebGL bist du der Puppenspieler deiner eigenen digitalen Puppenbühne.

Weiter üben, weiter experimentieren und vor allem: Spaß haben mit WebGL. Bereitwillig wirst du atemberaubende 3D-Visualisierungen erstellen, die selbst erfahrene Entwickler beeindrucken werden!

Methode	Beschreibung
createShader(gl, type, source)	Erstellt und komiliert einen Shader
createRotationMatrix(angleInRadians)	Generiert eine 2D-Rotationmatrix
render()	Render das drehende Dreieck
gl.clearColor(r, g, b, a)	Setzt die Farbe, um das Canvas zu bereinigen
gl.clear(gl.COLOR_BUFFER_BIT)	Bereinigt das Canvas
gl.useProgram(program)	Setzt das aktuelle Shader-Programm
gl.getAttribLocation(program, name)	Holt die Position einer Eigenschaft
gl.enableVertexAttribArray(location)	Aktiviert eine Vertex-Attribut-Array
gl.bindBuffer(gl.ARRAY_BUFFER, buffer)	Binde einen Puffer
gl.vertexAttribPointer(location, size, type, normalized, stride, offset)	Bestimmt die Anordnung der Vertex-Daten
gl.getUniformLocation(program, name)	Holt die Position einer uniformen Variablen
gl.uniformMatrix3fv(location, transpose, value)	Setzt einen Matrix-uniform-Wert
gl.drawArrays(mode, first, count)	Render Primitive aus Array-Daten
requestAnimationFrame(callback)	Fordert den nächsten Animation Frame an

Frohes Coden und möge deine Dreiecke immer in die richtige Richtung drehen!

Credits: Image by storyset