Posts

WebGL 2 Guide - #7 Das erste Dreieck

-
Image
Im letzten Schritt haben wir einen Einblick in Shader erhalten und gelernt, wie diese funktionieren. In diesem Schritt werden wir uns mit Buffern auseinandersetzen und uns ein Dreieck erstellen und anzeigen. Dazu schauen wir uns zuerst einmal Vertices und Indices genauer an: Wie in dem Diagramm zu sehen, ist dort ein Dreieck definiert mit den Vertexpunkten 0, 1 und 2. Wobei Vertex 0 die x- und y-Koordinaten (0, 0) hat, Vertex 1 (10, 10) und Vertex 2 (20, 0). Diese Koordinaten werden in einem Vertex array gespeichert und dieses wiederum dem Vertex Buffer übergeben. Dasselbe mit dem Index array, hier wird die Beziehung der Vertexkoordinaten beschrieben, welche ein Dreieck ergeben: nämlich Vertex mit dem Index 0, Index 1 und Index 2 ergeben zusammen ein Dreieck. Diese Beziehung wird in einem Index array gespeichert und dem Index Buffer übergeben. Es ist in der 3D-Welt üblich, diese Beziehung gegen den Uhrzeigersinn zu definieren. Im Uhrzeigersinn würde aber auch funktionieren....
Post a Comment
Read more

WebGL 2 Guide - #6 Shader

-
Image
Im letzten Schritt haben wir die ersten WebGL Befehle kennen gelernt. In diesem Schritt wollen wir uns näher mit den Shadern beschäftigen. Da wir ohne diese nichts auf dem Bildschirm darstellen können. Schauen wir uns das vereinfachte Diagramm an, können wir auch erkennen, warum wir ohne Shader nichts auf den Bildschirm gezaubert bekommen: Der Vertex Shader verarbeitet die VBOs, teilt es dem Fragment Shader mit, dieser füllt daraufhin den Framebuffer, welcher an den Bildschirm geht. Ohne Shader gelangt also nichts auf den Bildschirm. Wollen wir unser erstes Dreieck auf den Bildschirm bekommen, kommen wir also nicht an der GPU vorbei. In der Tat würde es auch ohne GPU funktionieren, dann aber spricht man vom sogenannten "Software rendering". Die ganzen Berechnungen welche von der GPU übernommen würde, wird von der CPU übernommen. Dies ist allerdings extrem langsam und nicht mehr Zeitgemäß. Übernimmt die GPU die Berechnungen, spricht man auch von " Hardw...
Post a Comment
Read more

WebGL 2 Guide - #5 Erste WebGL Befehle

-
Im letzten Schritt haben wir alle Randbedingungen erfüllt und können uns nun WebGL widmen. Lasst uns als Erstes einmal die Hintergrundfarbe bzw. die ClearColor  des Canvas ändern. Dazu schreiben wir uns eine Funktion updateClearColor(...color) . Öffnet dazu die main.js  und fügt folgende Zeilen hinzu: // Update the canvas clear color function updateClearColor(...color) { gl.clearColor(...color); gl.clear(gl.COLOR_BUFFER_BIT); } Wir nutzen hier den ES6 spread operator (...) um Elemente automatisch aus einem Array zu extrahieren. gl.clearColor(...color); ist der erste WebGL Befehl, welcher die Farbe, welche zum clearen  eines Buffers verwendet werden soll definiert. gl.clear(gl.COLOR_BUFFER_BIT); Führt dann das eigentliche  clearen  des Buffers durch. gl.COLOR_BUFFER_BIT Ist der Buffer, den wir  clearen   wollen. Es gibt noch mehrere Buffer die wir im Laufe des Guides kennen lernen werden. In diesem Fall möchten wir den C...
Post a Comment
Read more

WebGL 2 Guide - #4 Der WebGL Context

-
Image
Im letzten Schritt haben wir das Grundgerüst aufgesetzt um mit WebGL arbeiten zu können. In diesem Schritt werden wir den WebGL Context erstellen und überprüfen, ob der Browser WebGL unterstützt. Dazu erstellen wir uns eine neue Datei und nennen diese  main.js . Speichert diese ebenfalls in eurem Ordner ab. In unserem Ordner haben wir nun zwei Dateien:  main .js  und  index.html . Nun erstellen wir uns zu erst eine Funktion namens init  in der  main .js  und holen uns die Referenz zum Canvas: "use-strict" function init() { // Get the canvas reference const canvas = document .getElementById( "webgl-canvas" ); // Ensure a canvas was found if (!canvas) { console.error( "Error: no canvas found!" ); return ; } } Wir speichern uns in der Variablen  canvas  die Referenz zum Canvas-Element im DOM und überprüfen im nächsten Schritt, ob auch ein Canvas mit der ID:  "webgl-canvas"  gefund...
Post a Comment
Read more

WebGL 2 Guide - #3 Erste Schritte

-
Image
In diesem Schritt werden wir uns ein Dokument anlegen und das Grundgerüst einer HTML-Seite erstellen. Am Besten legt ihr euch einen extra Ordner für diesen Guide an. Ich habe mir einen neuen Ordner angelegt mit dem Namen webgl-guide . Öffnet nun den Texteditor eurer Wahl, zu empfehlen währen da folgende 3: Visual Studio Code Sublimetext 3 Notepad+ + Ich persönlich verwende Visual Studio Code, aber jeder andere Texteditor tut es auch. Empfehlenswert wäre jedoch, dass der Editor Codehighlighting unterstützt, da dies doch stark die Übersichtlichkeit des Codes erhöht. Legt euch nun eine neue Datei mit dem Namen index.html  an und speichert diese in eurem Ordner ab. Nun werden wir erst einmal das Grundgerüst eines HTML-Dokuments anlegen: <html> <head> <meta charset= "UTF-8" > <title> WebGL Guide </title> </head> <body> </body> </html> Wenn ihr die Datei nun s...
Post a Comment
Read more

WebGL 2 Guide - #2 Rendering Pipeline

-
Image
Das folgende Diagramm soll veranschaulichen, wie die Rendering Pipeline von WebGL aussieht: Im weiteren Verlauf gehe ich auf die einzelnen Elemente genauer ein: Vertex Buffer Objects (VBOs) enthält die Daten, die die Geometrie, welche gerendert werden soll, beschreibt. Vertexkoordinaten Vertexnormalen Vertexfarben Texturkoordinaten Index Buffer Objects (IBOs) enthält Informationen über die Beziehung zwischen den Vertexpunkten. benutzt dazu den Index des Vertexes im Vertexbuffer. Vertex Shader wird auf jeden Vertex aufgerufen manipuliert " per-vertex-data " per-vertex-data: Vertexkoordinaten Vertexnormalen Vertexfarben Texturkoordinaten Fragment Shader jedes Set von drei Vertexpunkten definiert ein Dreieck. Jedem Element auf der Fläche des Dreiecks muss eine Farbe zugewiesen werden. Ein Flächenelement wird auch Fragment genannt. Da diese Elemente auf dem Bildschirm dargestellt werden sollen, werden sie a...
Post a Comment
Read more

WebGL 2 Guide - #1 Einführung

-
Image
Hintergrund Dieser Guide ist als Referenz gedacht und soll einen Einblick in WebGL 2 geben. Ich beziehe mich hier auf WebGL 2 und ESSL 3.00 welches auf OpenGL ES basiert. WebGL 1 ist veraltet und sollte nicht mehr verwendet werden. Zudem werde ich hier den ES6 -Standard verwenden. Warum WebGL 2 Warum nicht ein Framework/Engine verwenden in der man schneller und einfacher zum Ziel kommt und sich stattdessen mit so einer Low-Level-API auseinander setzen? Sicherlich kommt man mit einem Framework oder einer Engine schneller zum Ziel, jedoch werden dort viele interne Abläufe vor dem Anwender versteckt, bei denen es von Vorteil wäre, diese zu verstehen, bzw. von ihrer Existenz überhaupt zu wissen. Voraussetzungen Um optimalen Nutzen aus diesem Guide zu ziehen, solltest du einige Dinge mitbringen: Grundlegendes Verständnis der Programmierung (Da WebGL, wäre JavaScript von Vorteil) Mathematische Kenntnisse (Vektoren und Matrizen sind elementare Bestandteile der...
Post a Comment
Read more