WebGL - Zeichnen eines Vierecks
Hallo, angehende Web-Entwickler! Heute machen wir uns auf eine aufregende Reise in die Welt von WebGL, wo wir lernen, wie man ein Viereck (oder kurz "Quad") zeichnet. Machen Sie sich keine Sorgen, wenn Sie neu im Programmieren sind – ich werde Sie bei jedem Schritt mit der Geduld eines erfahrene Lehrers führen, der schon unzähligen Schülern wie Ihnen geholfen hat.
Was ist WebGL?
Bevor wir mit dem Zeichnen von Vierecken beginnen, lassen Sie uns einen Moment innehalten, um zu verstehen, was WebGL ist. WebGL (Web Graphics Library) ist eine leistungsstarke JavaScript-API, die es uns ermöglicht, beeindruckende 2D- und 3D-Grafiken in Webbrowsern zu erstellen. Es ist, als hätten wir einen magischen Pinsel, der unsere Vorstellungen auf einer Webseite zum Leben erweckt!
Schritte zum Zeichnen eines Vierecks
Nunzerlegen wir den Prozess des Zeichnens eines Vierecks in handhabbare Schritte. Denken Sie daran wie das Bau eines Hauses – wir beginnen mit dem Fundament und arbeiten uns nach oben.
Schritt 1: Einrichten der HTML-Leinwand
Zuerst brauchen wir eine Leinwand, auf der wir zeichnen können. In HTML verwenden wir das <canvas>-Element. Es ist, als würden wir ein Staffelei für Malerei aufstellen.
<canvas id="myCanvas" width="600" height="400">
Ihr Browser unterstützt das HTML5 canvas-Tag nicht.
</canvas>Schritt 2: Initialisieren des WebGL-Kontexts
Als nächstes müssen wir unseren WebGL-Kontext erhalten. Das ist, als würden wir unseren magischen WebGL-Pinsel picksich nehmen.
const canvas = document.getElementById('myCanvas');
const 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 WebGL nicht');
}Schritt 3: Erstellen des Vertex-Shaders
Jetzt erstellen wir einen Vertex-Shader. Dies tells WebGL, wo die Ecken unseres Vierecks zu zeichnen sind.
const vertexShaderSource = `
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
}
`;
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);Schritt 4: Erstellen des Fragment-Shaders
Der Fragment-Shader entscheidet, welche Farbe unser Viereck haben wird. Lassen Sie uns eine fröhliche blaue Farbe wählen!
const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);
}
`;
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);Schritt 5: Erstellen und Verknüpfen des Programms
Nun erstellen wir ein Programm und verknüpfen unsere Shaders mit ihm. Das ist, als würden wir unseren Pinsel und die Farbe zusammenfügen.
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);Schritt 6: Erstellen eines Puffers und Laden der Vertex-Daten
Es ist an der Zeit, die Ecken unseres Vierecks zu definieren!
const positions = [
-0.7, -0.5,
0.7, -0.5,
0.7, 0.5,
-0.7, 0.5
];
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);Schritt 7: Verbinden des Positionspuffers mit dem Attribut
Wir müssen WebGL mitteilen, wie es unsere Positionsdaten lesen soll.
const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);Schritt 8: Zeichnen des Vierecks
Endlich, der Moment, auf den wir gewartet haben – lasst uns unser Viereck zeichnen!
gl.useProgram(program);
gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);Beispiel – Zeichnen eines Vierecks
Nun setzen wir alles in einem kompletten Beispiel zusammen:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebGL Viereck</title>
</head>
<body>
<canvas id="myCanvas" width="600" height="400">
Ihr Browser unterstützt das HTML5 canvas-Tag nicht.
</canvas>
<script>
const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
alert('Ihr Browser unterstützt WebGL nicht');
}
const vertexShaderSource = `
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
}
`;
const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);
}
`;
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
const positions = [
-0.7, -0.5,
0.7, -0.5,
0.7, 0.5,
-0.7, 0.5
];
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
gl.useProgram(program);
gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
</script>
</body>
</html>Und voilà! Ihr eigenes WebGL-Viereck. Wenn Sie diese HTML-Datei in einem Browser öffnen, sollten Sie ein schönes blaues Viereck auf der Leinwand sehen.
Schlussfolgerung
Glückwunsch zum Zeichnen Ihres ersten WebGL-Vierecks! Wir haben heute viel Boden coberter, von der Einrichtung der Leinwand bis hin zur Erstellung von Shaders und schließlich das Zeichnen unserer Form. Denken Sie daran, dass das Lernen von WebGL wie das Malen ist – es erfordert Übung und Geduld. Lassen Sie sich nicht entmutigen, wenn es nicht sofort klappt. Bleiben Sie experimentierfreudig, und bald werden Sie beeindruckende 3D-Grafiken im Web erstellen!
In unserer nächsten Lektion werden wir erkunden, wie man unseren WebGL-Kreationen Interaktivität hinzufügt. Bis dahin, viel Spaß beim Programmieren!
Credits: Image by storyset