WebGL - Zeichnen von Punkten
Hallo, angehende Programmierer! Heute werden wir eine aufregende Reise in die Welt von WebGL antreten, dabei insbesondere das Zeichnen von Punkten betrachten. Als Ihr freundlicher Nachbarschafts-Computerlehrer werde ich Sie Schritt für Schritt durch dieses Abenteuer führen. Machen Sie sich keine Sorgen, wenn Sie noch nie zuvor kodiert haben – wir beginnen bei den Grundlagen und arbeiten uns hinauf. Also, holen Sie sich Ihre virtuellen Stifte und tauchen wir ein!
Was ist WebGL?
Bevor wir mit dem Zeichnen von Punkten beginnen, lassen Sie uns verstehen, was WebGL ist. WebGL (Web Graphics Library) ist eine leistungsstarke JavaScript-API, die es uns ermöglicht, 2D- und 3D-Grafiken in Webbrowsern zu erstellen. Es ist wie ein magischer Pinsel, der direkt auf Ihrer Webseite zeichnen kann!
Erforderliche Schritte
Um Punkte mit WebGL zu zeichnen, müssen wir eine Reihe von Schritten befolgen. Denken Sie daran als ein Rezept für die Erstellung digitaler Kunst. Hier ist eine Tabelle, die diese Schritte zusammenfasst:
| Schritt | Beschreibung |
|---|---|
| 1 | Das Canvas-Element abrufen |
| 2 | Den WebGL-Render-Kontext abrufen |
| 3 | Die Geometrie (Vertexen) definieren |
| 4 | Einen Vertex-Shader erstellen |
| 5 | Einen Fragment-Shader erstellen |
| 6 | Ein Shader-Programm erstellen |
| 7 | Die Daten in die GPU laden |
| 8 | Den Viewport einstellen |
| 9 | Das Canvas leeren |
| 10 | Die Punkte zeichnen |
Nun brechen wir jeden Schritt herunter und sehen, wie sie zusammenkommen, um unser Meisterwerk zu schaffen!
Beispiel – Drei Punkte mit WebGL zeichnen
Lassen Sie uns ein Beispiel durchgehen, bei dem wir drei farbige Punkte auf unserem Canvas zeichnen. Ich werde jeden Teil des Codes im Detail erklären, damit Sie genau verstehen, was passiert.
Schritt 1: Die HTML einrichten
Zuerst müssen wir eine HTML-Datei mit einem Canvas-Element erstellen:
<!DOCTYPE html>
<html>
<head>
<title>Meine ersten WebGL-Punkte</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="400">
Ihr Browser unterstützt das Canvas-Element nicht.
</canvas>
<script src="webgl-points.js"></script>
</body>
</html>Dies erstellt ein Canvas, das unsere Zeichenfläche sein wird. Die JavaScript-Datei, die wir als nächstes erstellen, wird alle Magie vollbringen!
Schritt 2: Die JavaScript-Datei erstellen
Nun erstellen wir eine Datei namens webgl-points.js und fangen an, unsere WebGL-Anwendung zu codieren:
// Schritt 1: Das Canvas-Element abrufen
const canvas = document.getElementById('myCanvas');
// Schritt 2: Den WebGL-Render-Kontext abrufen
const gl = canvas.getContext('webgl');
if (!gl) {
console.error('WebGL wird nicht unterstützt');
throw new Error('WebGL wird nicht unterstützt');
}
// Schritt 3: Die Geometrie (Vertexen) definieren
const vertices = new Float32Array([
0.0, 0.5, // Punkt 1
-0.5, -0.5, // Punkt 2
0.5, -0.5 // Punkt 3
]);
// Schritt 4: Einen Vertex-Shader erstellen
const vertexShaderSource = `
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
gl_PointSize = 10.0;
}
`;
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
// Schritt 5: Einen Fragment-Shader erstellen
const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);
// Schritt 6: Ein Shader-Programm erstellen
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
// Schritt 7: Die Daten in die GPU laden
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
// Schritt 8: Den Viewport einstellen
gl.viewport(0, 0, canvas.width, canvas.height);
// Schritt 9: Das Canvas leeren
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
// Schritt 10: Die Punkte zeichnen
gl.drawArrays(gl.POINTS, 0, 3);Nun brechen wir diesen Code herunter und verstehen, was jeder Teil macht:
Verständnis des Codes
Schritte 1 und 2: WebGL einrichten
const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl');Hier holen wir unser Canvas-Element und erhalten den WebGL-Render-Kontext. Das ist wie das Bereitstellen unserer Pinsel und Paletten!
Schritt 3: Die Geometrie definieren
const vertices = new Float32Array([
0.0, 0.5, // Punkt 1
-0.5, -0.5, // Punkt 2
0.5, -0.5 // Punkt 3
]);Wir definieren drei Punkte im 2D-Raum. Die Koordinaten reichen von -1 bis 1 in beide x- und y-Richtungen. Stellen Sie sich vor, unser Canvas ist in vier Quadranten geteilt, mit (0,0) in der Mitte.
Schritte 4 und 5: Shader erstellen
Shader sind besondere Programme, die auf der GPU ausgeführt werden. Wir haben zwei Arten:
- Vertex-Shader: Bestimmt die Position unserer Punkte.
- Fragment-Shader: Bestimmt die Farbe unserer Punkte.
const vertexShaderSource = `
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
gl_PointSize = 10.0;
}
`;
const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;Der Vertex-Shader setzt die Position und Größe unserer Punkte. Der Fragment-Shader setzt die Farbe auf rot (1.0, 0.0, 0.0 in RGB).
Schritte 6 und 7: Programm erstellen und Daten laden
Diese Schritte beinhalten das Erstellen eines Shader-Programms und das Laden unserer Vertex-Daten in den GPU-Speicher.
Schritte 8 und 9: Viewport einstellen und Canvas leeren
Wir stellen den Viewport auf die Größe unseres Canvas ein und leeren das Canvas zu schwarz.
Schritt 10: Die Punkte zeichnen
gl.drawArrays(gl.POINTS, 0, 3);Schließlich zeichnen wir unsere drei Punkte!
Schlussfolgerung
Glückwunsch! Sie haben gerade Ihre erste WebGL-Anwendung erstellt, die Punkte zeichnet. Dies ist erst der Anfang Ihrer Reise in die faszinierende Welt der Computergrafik. Während Sie weiter erforschen, werden Sie in der Lage sein, komplexere Formen zu erstellen, Animationen hinzuzufügen und sogar in 3D-Grafik vorzudringen.
Denken Sie daran, das Lernen von WebGL ist wie das Malen – es erfordert Übung und Geduld. Lassen Sie sich nicht entmutigen, wenn Dinge beim ersten Mal nicht perfekt funktionieren. Halten Sie experimentierfreudig, und bald werden Sie digitale Meisterwerke schaffen!
In unserer nächsten Lektion werden wir erkunden, wie wir unseren Punkten verschiedene Farben hinzufügen und komplexere Formen erstellen können. Bis dahin, viel Spaß beim Coden!
Credits: Image by storyset