Einen ASCII-3D-Renderer bauen

Der Artikel erklärt die 3D-Rendering-Pipeline anhand der Implementierung eines ASCII-3D-Renderers

Das Ergebnis dieses Artikels ist neben dem Blogbeitrag auch unter den folgenden Links zu sehen
GitHub: https://github.com/kciter/ascii-3d-renderer.js
Chromatic: https://6637eb83d047d2bb1b3cfe67-bdnazvfsel.chromatic.com/?path=/story…

• Ist es möglich, ASCII wie 3D aussehen zu lassen?
  • ASCII ähnelt stark vergrößerten schwarzweißen Pixeln
  • Die Helligkeit lässt sich über die Zeichendichte steuern
• Wie werden 3D-Koordinaten in 2D-Koordinaten umgewandelt?
  • Der Ablauf besteht grob aus Vertex-Verarbeitung, Rasterisierung und Fragment-Verarbeitung
  • 3D-Koordinaten werden Vertex genannt und bezeichnen einen im 3D-Raum liegenden „Punkt“
  • Ein einzelner Vertex reicht nicht aus, um ein Objekt darzustellen, daher werden mehrere Vertices zu einem Objekt zusammengefasst
  • Die kleinste Einheit zur Darstellung eines Objekts nennt man Polygon
• Vertex-Verarbeitung
  • Der Prozess, bei dem Vertices transformiert werden, heißt Vertex-Verarbeitung
  • Er erfolgt in der Reihenfolge World-Transformation, View-Transformation und Projektions-Transformation
  • Jede Transformation wird mithilfe von Matrizen berechnet
  • Die World-Transformation platziert die in einer 3D-Modelldatei enthaltenen Vertices im 3D-Raum
  • Die View-Transformation platziert die Kamera und berechnet, von welchen Koordinaten und aus welchem Blickwinkel ein Objekt betrachtet wird
  • Die Projektions-Transformation ist eine Berechnung zur Darstellung von Perspektive. Üblicherweise wird eine perspektivische Projektion verwendet.
  • Durch die Projektions-Transformation ist eine Umwandlung in 2D-Raumkoordinaten möglich
• Rasterisierung
  • Der Prozess, bei dem 2D-Raumkoordinaten in Pixelkoordinaten umgewandelt werden
  • Er umfasst Clipping, perspektivische Division, Backface Culling, Viewport-Transformation und Scan Conversion
  • In diesem Artikel werden diese Schritte passend kombiniert und implementiert
• Fragment-Verarbeitung
  • Der Prozess zur Verarbeitung der in Pixel umgewandelten Koordinaten
  • In einem typischen 3D-Renderer folgen dabei Nachbearbeitungsschritte wie Shader-Berechnungen
  • In diesem Artikel wird nur das Ergebnis der Lichtberechnung angewendet
• Der Implementierungsteil besteht fast vollständig aus Quellcode und wird daher in der Zusammenfassung ausgelassen

[cosine20]

Hat Spaß gemacht zu lesen. Es war schön, dass dabei auch wieder Erinnerungen an die Computergrafik-Vorlesung aus meinem Bachelor hochkamen.

[toaonly]

Hat Spaß gemacht zu lesen. Besonders beeindruckt hat mich, dass sogar die Kameraposition mitgedacht wurde.

[thesol9]

Sogar die grundlegende Rendering-Pipeline wird erklärt.
Das war sehr spannend.