WebGL - Skalierung: Ein Anfängerleitfaden

Hallo, angehende WebGL-Entwickler! Heute tauchen wir ein in die faszinierende Welt der Skalierung in WebGL. Keine Sorge, wenn du neu im Programmieren bist – ich werde dich bei jedem Schritt mit der gleichen Sorgfalt und Geduld führen, die ich in meinen Kursen seit Jahren verwende. Lasst uns gemeinsam auf diese aufregende Reise gehen!

WebGL - Scaling

Was ist Skalierung in WebGL?

Bevor wir uns dem Code zuwenden, lassen Sie uns verstehen, was Skalierung im Kontext der Computergrafik bedeutet. Stell dir vor, du hast eine Lieblings-Toyfigur. Skalierung ist wie eine magische Zauberstab, der diese Figur größer oder kleiner machen kann, während ihre Form erhalten bleibt. In WebGL können wir diese Magie mit unseren 3D-Objekten vollbringen!

Bedeutung der Skalierung

Skalierung ist entscheidend für die Erstellung realistischer und dynamischer 3D-Szenen. Es ermöglicht uns:

Die Größen der Objekte an unsere Szene anzupassen
Animationen zu erstellen, bei denen Objekte wachsen oder schrumpfen
In komplexen Modellen die richtigen Proportionen beizubehalten

Erforderliche Schritte zur Skalierung in WebGL

Um Objekte in WebGL zu skalieren, müssen wir eine Reihe von Schritten befolgen. Lassen Sie uns diese herunterbrechen:

Schritt	Beschreibung
1. Erstelle die Skaliermatrix	Wir beginnen mit der Erstellung einer besonderen Matrix, die WebGL anweist, wie unser Objekt skaliert werden soll
2. Multipliziere mit der Modellmatrix	Wir kombinieren unsere Skaliermatrix mit der bestehenden Modellmatrix des Objekts
3. Übergebe an den Shader	Wir senden diese neue Matrix an unser Shader-Programm
4. Wende in der Vertex-Shader an	Der Shader verwendet diese Matrix, um die Position jedes Vertex zu adjustieren

Mach dir keine Sorgen, wenn diese Schritte kompliziert klingen – wir werden jeden einzelnen im Detail mit unserem Beispiel erkunden!

Beispiel – Skaliere ein Dreieck

Lassen Sie uns unsere Kenntnisse durch die Skalierung eines einfachen Dreiecks in die Praxis umsetzen. Wir beginnen mit einer grundlegenden WebGL-Konfiguration und fügen dann die Skalierungsfunktion hinzu.

Schritt 1: Einrichten des WebGL-Kontexts

Zuerst müssen wir unseren WebGL-Kontext einrichten. So machen wir das:

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

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

Dieser Code findet unser Canvas-Element und erstellt einen WebGL-Kontext. Es ist wie das Vorbereiten unserer Leinwand und Pinsel, bevor wir mit unserer Kunstwerken beginnen!

Schritt 2: Vertex-Shader definieren

Nun erstellen wir unseren Vertex-Shader. Hier geschieht die Skalierungszauber:

const vertexShaderSource = `
attribute vec2 a_position;
uniform mat3 u_matrix;

void main() {
vec3 position = u_matrix * vec3(a_position, 1);
gl_Position = vec4(position.xy, 0, 1);
}
`;

Dieser Shader nimmt jede Vertex-Position und multipliziert sie mit unserer Matrix (die unsere Skalierung enthalten wird). Es ist wie das Geben von Anweisungen an jeden Punkt unseres Dreiecks, wie er sich bewegen soll.

Schritt 3: Fragment-Shader definieren

Der Fragment-Shader bestimmt die Farbe unseres Dreiecks:

const fragmentShaderSource = `
precision mediump float;

void main() {
gl_FragColor = vec4(1, 0, 0, 1);  // Rote Farbe
}
`;

Wir halten es hier einfach – unser Dreieck wird rot sein. Probiere ruhig verschiedene Farben aus!

Schritt 4: Shader-Programm erstellen und verknüpfen

Nun kompilieren und verknüpfen wir unsere Shader:

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 Prozess ist wie das Zusammenbauen der Teile einer Maschine – jeder Shader ist ein Komponente, und wir stellen sie zusammen, um unser Programm zu erstellen.

Schritt 5: Dreiecksdaten erstellen

Lassen Sie uns unser Dreieck definieren:

const positions = new Float32Array([
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, positions, gl.STATIC_DRAW);

Diese Koordinaten definieren ein einfaches Dreieck. Denke daran, wie das Ploten von Punkten auf einem Diagramm, um unsere Form zu zeichnen.

Schritt 6: Skalierung implementieren

Nun zum spannenden Teil – die Skalierung unseres Dreiecks! Wir verwenden eine Funktion, um unsere Skaliermatrix zu erstellen:

function createScaleMatrix(scaleX, scaleY) {
return new Float32Array([
scaleX, 0, 0,
0, scaleY, 0,
0, 0, 1
]);
}

// Beispiel: Skaliere das Dreieck auf das doppelte seiner Größe
const scaleMatrix = createScaleMatrix(2, 2);

Diese Matrix ist wie ein Satz von Anweisungen, die WebGL sagen, wie viel unser Dreieck in jede Richtung strecken oder schrumpfen soll.

Schritt 7: Das skalierte Dreieck rendern

Schließlich setzen wir alles zusammen und rendern unser skaliertes Dreieck:

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 matrixUniformLocation = gl.getUniformLocation(program, 'u_matrix');
gl.uniformMatrix3fv(matrixUniformLocation, false, scaleMatrix);

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

Dieser Codewendet unsere Skaliermatrix an und zeichnet das Dreieck. Es ist wie das Enthüllen unseres Kunstwerks nach all der Vorbereitung!

Fazit

Glückwunsch! Du hast dein erstes WebGL-Dreieck skaliert. Denke daran, dass Skalierung nur eine der vielen Transformationen ist, die du in WebGL anwenden kannst. Während du deine Reise fortsetzt, wirst du entdecken, wie man Skalierung mit Drehung, Translation und mehr kombiniert, um komplexe und dynamische 3D-Szenen zu erstellen.

Übung macht den Meister, also habe keine Angst, verschiedene Skalierungswerte und Formen auszuprobieren. Wer weiß? Das nächste große Videospiel oder 3D-Web-Anwendung könnte genau hier beginnen, mit deinem skalierten Dreieck!

Frohes Coden und möge deine WebGL-Objekte immer in neue Höhen skalieren!

Credits: Image by storyset