WebGL 2 Guide - #2 Rendering Pipeline

-

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 auch Pixel genannt.
  • Die Hauptaufgabe des Fragment Shaders ist, die Farbe eines jeden Pixels zu berechnen.

Framebuffer

  • Ist ein zweidimensionaler Buffer, welcher die vom Fragment Shader berechneten Fragmente enthält.
  • Wenn die Fragmente berechnet wurden, wird daraus ein 2D Bild erzeugt und auf dem Bildschirm dargestellt.
  • Der Framebuffer ist das finale Element in der Rendering Pipeline.

Attributes

  • Sind Inputvariablen, welche im Vertex Shader verarbeitet werden.
  • Stellen die Spezifikation dar, wie Daten aus Buffern zu lesen sind.
  • Stellen die Spezifikation dar, wie Daten dem Vertex Shader zu Verfügung gestellt werden.
  • Bsp.:
    • Es werden drei Positionskoordinaten als jeweils 32-bit-floats im Buffer abgelegt. Nun muss über ein Attribute definiert werden, in welchem Buffer sich diese Daten befinden, was für einen Type sie haben (3-Komponenten, 32-bit-floats), an welchem Offset diese Daten anfangen und wie viele Bytes pro Position zur nächsten führen. Da der Vertex Shader pro Vertex aufgerufen wird, sind die Attributes pro Aufruf immer unterschiedlich.

Uniforms

  • Sind Inputvariablen für den Vertex Shader und dem Fragment Shader.
  • Anders als bei den Attributes sind Uniforms konstant über einen Rendering Cycle. Z.B.: wird die Position einer Lichtquelle oft über Uniforms realisiert.
  • Uniforms sind im Grunde globale Variablen die gesetzt werden bevor der Shader ausgeführt wird.

Textures

  • Sind Arrays mit Daten auf welche das Shaderprogramm zugreifen kann.
  • Bilddaten werden sehr häufig in Texturen gespeichert, aber Texturen sind im Grunde nur Daten und können auch andere Informationen enthalten als einfache Farbwerte eines Bildes.

Varyings

  • Werden dazu verwendet um Daten vom Vertex Shader an den Fragment Shader zu übergeben.
  • Abhängig davon, was gerendert werden soll - Punkte, Linien oder Dreiecke - werden die Werte die von einem Vertex Shader in einem Varying gesetzt wurden, bei der Ausführung des Fragmend Shaders anders interpoliert.

Rendering

  • Unabhängig von der Komplexität und der Anzahl an Punkten die eine Fläche haben kann, werden Geometriedaten immer gleich behandelt.
  • Es gibt zwei fundamentale Datentypen um ein 3D-Geometrieobjekt darzustellen:
    • Vertices
    • Indices

Vertices

  • Sind Punkte, welche die Ecken eines 3D-Objekts definieren.
  • Jeder Vertex besteht aus drei 32-bit-floats welche die x-, y- und z-Koordinaten des Vertexes darstellen.
  • Ansammlungen von Vertexpunkten die ein 3D-Objekt darstellen, müssen in einem Vertexbuffer (VBO) abgelegt werden.

Indices

  • Beschreiben, wie Vertexpunkte verbunden werden müssen, um daraus eine Fläche zu erstellen.
  • Ansammlungen von Indices müssen in einem Indexbuffer (IBO) abgelegt werden.


Im nächsten Schritt werden wir unsere ersten Zeilen Code schreiben:
WebGL 2 Guide - #3 Erste Schritte

Comments

Post a Comment

Popular posts from this blog

[Python] Passwort cracker for Zip-archives

-
Image
Do you have a zip-file with a password and you can't remember it? Then let's write a little tool, that tries to recover it. Disclaimer: "Cracking passwords and getting access to files of others without their permission is criminal! This blog post is only for illustrative purposes, to get an insight of how an hacker would probably do it, so you know how to protect yourself against it. This blog post is not meant to seduce you in any way to use it for criminal purposes! So i don't take any responsibility if you use it for criminal purposes, nor do i take any responsibility for the consequences which arise from it. Also, the authors of the linked pages are responsible for their sites and their content, so i don't take any responsibility for that." So, that being said, let's begin. The dictionary attack There are several ways to crack a password, however we will discuss only one of them, the dictionary attack. How does it work? It...
Read more

[Python] Machine Learning Intro #1 - Hello World

-
Image
The Machine Learning Intro series is going to be a series about Machine Learning and will cover the very basics of what Machine Learning actually is and how to implement it using Python. What is SciKit-Learn? SciKit-Learn is a Python module for Machine Learning. It provides simple and efficient tools for data mining, data analysis and various classification, regression and clustering algorithms. So in short - it makes our lives a lot easier dealing with Machine Learning, because we don't have to write all those algorithms by hand. And that's why we will use it here. What is Machine Learning? You can think of it as a subfield of Artificial Intelligence (AI). The algorithm learns from experience and examples - like a human does. So with Machine Learning, you can solve problems you couldn't solve with regular hard coded rules. For example, given the case, you have to write a program that takes images of apples and oranges as input and then it has to ...
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...
Read more