WebGL - Was du unbedingt wissen musst
Mit HTML5 hat das Internet einen echten Gamechanger bekommen.
HTML5 hat in 2014 die vierte HTML-Version im Internet abgelöst und viele neue Funktionen mitgebracht. HTML steht für Hypertext Markup Language und ist eine textbasierte Auszeichnungssprache. Eines der neuen Elemente ist WebGL.
API
Aber bevor ich mit noch mehr komplizierten Begriffen um mich werfe, brechen wir die Wörter doch einmal auf.
Angefangen mit der API. Eine API ist ein Satz von Befehlen, Funktionen und Protokollen, die Programmier nutzen können, um eine Software zu bauen oder mit einem externen System zu interagieren.
Stellt euch das vor wie ein Lego-Set. Anstatt mühselig für jeden Schritt einen neuen Baustein zu schnitzen oder herzustellen, nehmt ihr einfach ein Baustein aus einem bestehenden Projekt. Das spart viel Arbeit und ist meistens effizienter. Genau das sind APIs in der Welt der Programmierer. Die APIs sind überall und meistens wissen viele nicht einmal, dass sie diese tagtäglich nutzen.
Wer ein Update auf Facebook postet, seinen Kontostand auf dem Handy überprüft oder auch die Wetter-App nutzt, hat schon einmal eine API genutzt. APIs sind komplex, kommen in vielen Formen und sind überall im Internet verstreut.
»Hab eigentlich wegen WebGL auf den Blogpost geklickt..«
Copy Me
kopiert// Initialisierung des WebGL-Kontextes
var canvas = document.getElementById("myCanvas");
var gl = canvas.getContext("webgl");
// Definition der Vertex- und Fragment-Shaders
var vertexShaderSource = `
void main(void) {
gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
}
`;
var fragmentShaderSource = `
void main(void) {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;
// Kompilierung der Shaders
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);
// Verknüpfung der Shaders zu einem Programm
var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
gl.useProgram(shaderProgram);
// Zeichnen eines Punktes
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.POINTS, 0, 1);
Da war ja was. WebGL!
In dem Fenster über diesem Text findest du einen Beispiel Code für WebGL. Diese zeigt einen roten Punkt auf schwarzem Hintergrund.
WebGL ist eine JavaScript-API für die Darstellung von interaktiven 3D-Grafiken in einem Webbrowser.
WebGL steht für Web Graphics Library und basiert auf OpenGL ES 2.0. Damit können Entwickler hardwarebeschleunigte 3D-Grafiken im Browser erstellen, ohne zusätzliche Plugins zu installieren. Durch WebGL können Grafiken auf dem HTML-5-Canvas Element gerendert werden. Dazu benutzt es die GPU (Graphics Processing Unit oder auch Grafikkarte) deines Computers.
Diese Programmierung passiert in JavaScript, und wird durch GLSL (OpenGL Shading Language) erweitert, welche für die Definition von Shader-Programmen verwendet wird.
>>Die WebGL Grundlagen <<
WebGL ist einfach zu verstehen, wenn man sich die Grundlagen anschaut, aus denen die Funktionen zusammengebaut werden.
-
Shader
»In WebGL werden Shader verwendet, um Grafiken zu steuern. Ein Vertex-Shader manipuliert die Position von Eckpunkten, während ein Fragment-Shader die Farben und Effekte der Pixel definiert.
-
Canvas
»Das HTML5-Canvas-Element wird verwendet, um den WebGL-Content zu rendern. Der Kontext des Canvas wird in WebGL-Programmen verwendet, um die 3D-Szene zu manipulieren.
-
Buffers und Attribute
»Daten wie Vertices, Farben und Texturen werden in sogenannten Buffern gespeichert. Attribute definieren, wie diese Daten interpretiert werden sollen.
-
Rendering-Engine
»Die Rendering-Engine ist verantwortlich dafür, dass 3D-Elemente im Browser angezeigt werden. Diese nutzt den GPU für schnellere Ergebnisse.
-
Koordinatensystem
»WebGL wird in einem Koordinatensystem definiert. Diese liegt normalerweise im Bereich von -1 bis 1 für X, Y und Z-Achsen. Transformationen, um Objekte im Raum zu positionieren und zu bewegen
-
Event-Handling
»Interaktionen wie Maus-Bewegungen und Tastendrücke sorgen für eine verbesserte Benutzererfahrung. WebGL hat die Möglichkeit, je nach Interaktion die Grafik anzupassen.
WebGL - wo JavaScript die Bühne betritt, die GPU zum Tanzen bringt und 3D-Grafiken direkt im Browser zum Leben erweckt.
