3D-Supergrafik & komplettes 3D-RayTracing-Programm erstellen

- Einführung in das grossartige Gebiet der 2D- und 3D-Computergraphik sowie in das Top-Thema RayTracing.

- Unser Weg von 2D-Grafik, über 3D-Grafik bis hin zu RayTracing-Bildern.

- Zeichnen von Pyramiden im eigenen Browser

- Screenshots aufnehmen von selbst erstellten Zeichnungen

- Unser Ziel: Zeichnen und Programmieren von 2D-Bildern im Browser

- Viele Vor- und (ein paar wenige) Nachteile der Benützung von JavaScript für unser Vorhaben.

- Wie wird JavaScript in einer Webseite eingebaut?

- Groß- und Kleinschreibung wird unterschieden

- Zeilenende werden mit einem Strichpunkt markiert

- Unterscheidung von globalen und lokalen Variablen

- Einbinden von externen JavaScript-Dateien

- Benützung des meist bereits eingebauten Debuggers zur Fehlerbehebung

- Unterscheidung zwischen 2D- und 3D-Grafik

- Unterscheidung zwischen Bitmap- und Vektorgrafik

- Erstellung unseres ersten Programms und einer Grafikleinwand

- Aufrufen unseres Programms im Webbrowser

- Das benutzte Koordinatensystem

- Programmierung unseres ersten 2D-Computergrafik-Bildes

- Erstellung eines Rechtecks und eines Kreises im Browser

- Schreiben von Text im Grafikbereich des Browsers

- Programmieren eines beliebigen Vielecks mittels eines Pfades

- Gemeinsames Zeichnen eines Bildes

- Einbau von Buttons zur automatischen Erstellung eines Rechtecks und zum Löschen der Grafik

- Unterscheidung der Button-Zustände "gedrückt" und "gedrückt und losgelassen"

- Erkennen von Berührungen (touch) statt Mausklicks

- Aufbau von "Event Listener" zur Detektion von Mausbewegungen und Mausklicks

- Zeichnen an der aktuellen Mausposition

- Wie wir Pyramiden und andere Bilder gezeichnet haben

- Weshalb wir unser Vorhaben mit guten Gründen im Webbrowser und mit JavaScript umsetzen können

- Wie wir JavaScript im Browser programmieren und Fehler vermeiden können

- Die Unterschiede zwischen 2D- und 3D-Grafiken, sowie von Bitmap- und Vektorgrafiken

- Wie wir eine Zeichnungsfläche im Browser aufgebaut haben und die Koordinaten festlegten

- Wie wir Rechtecke, Kreise, Polygone und Texte auf die Zeichnungsfläche brachten

- Wie wir die Mausbewegung und die Mausklicks mit Listener erkannten und dazu benutzten an der aktuellen Mausposition die Zeichnungsfläche zu bemalen

- Unser Ziel: Speichern der Punkte, die mit der Maus im Browser eingegeben werden

- Erstellen einer neuen Datei, die unsere Funktionen aufnimmt

- Hereinladen der neuen Datei in das Hauptprogramm

- Ansehen des Quellcodes im Browser

- Vorbereitungen zur Speicherung von eingegebenen Punkten

- Erstellung von 1D-, 2D- und 3D-Arrays, in welche unsere Punkte gespeichert werden

- "Event listeners" von Mausbewegungen, Mausklicks und Tastenklicks rufen Funktionen auf zur Weiterverarbeitung dieser Events

- Debugger-Benutzung

- Auslesen der Mausposition und Ziehen einer Linie von der vorherigen Mausposition zur aktuellen Mausposition

- Jeder Mausklick definiert einen neuen Punkt, der mit dem vorherigen Punkt verbunden wird

- Benutzung eines 2D-Arrays zur Speicherung der Punktnummer und der X- und Y-Koordinaten jedes Punktes

- Zentrierung des Koordinatensystems

- Beobachten von Variablen im Debugger

- Auffrischung der Zeichnung mit allen Punkten und Linien, wann immer nötig

- Beschriftung aller gezeichneten Punkte

- Hinzufügen eines Koordinatenkreuzes

- Beenden der Eingabe und damit Fertigstellung von geschlossenen 2D-Objekten

- Beenden der "Event Listeners", um die Eingabe weiterer Punkte zu verhindern

- Wie wir Teile des Programms in eine andere Datei auslagerten

- Wie wir 1D-, 2D- und 3D-Arrays aufbauten

- Wie wir die Mausbewegung, die Mausklicks und die Tastenklicks benutzten, um die Mauskoordinaten zu speichern und Linien zum vorherigen Punkt zu zeichnen

- Wie wir die Koordinaten ins Zentrum setzten

- Wie wir die eingegebenen Punkte neu zeichneten, wenn nötig, beschrifteten und schließlich zu einem vollständigen 2D-Objekt ergänzten

- Unser Ziel: Erstellung von 3D-Objekten aus den eingegebenen 2D-Objekten

- Überblick über die Möglichkeiten 3D-Objekte zu erstellen

- Methode 1: Kopieren und Verbinden von 2D-Ebenen

- Methode 2: Eingabe per Maus in drei verschiedenen Darstellungen

- Methode 3: Eingabe oder Einlesen von Datenreihen für jede Fläche oder alle Punkte eines 3D-Objekts

- Methode 4: Erstellung von Rotationskörpern aus 2D-Objekten

- Die Herleitung zur Erstellung von 3D-Rotationsobjekten aus 2D-Objekten

- Berechnung der rotierten Punkte mithilfe einfacher Mathematik

- Festlegen der Anzahl Rotationssegmente

- Festlegen des Arrays zur Speicherung des 3D-Objekts

- Berechnung der X-, Y- und Z-Koordinaten des 3D-Objekts

- Zeichnen des 3D-Objekts

- Abfrage der Tastenklicks, um die Anzahl der Segmente zu ändern

- Wir erkannten, dass viele Alltagsgegenstände rotationssymmetrisch sind

- Wir schauten uns verschiedene Methoden zur Erzeugung von 3D-Objekten an

- Die Herleitung eines 3D-Rotationskörpers

- Wie wir die Erzeugung des 3D-Rotationskörpers implementierten

- Wie wir ein 3D-Rotationskörper zeichnen ließen und die Anzahl Segmente live ändern konnten

- Unser Ziel: Einbau der Perspektive

- Perspektivische Verzerrung und Zentralprojektion als häufig benutzte Methode zur Darstellung der Raumtiefe.

- Parallele Linien treffen sich im Fluchtpunkt und weiter entfernt liegende Objekte werden kleiner dargestellt

- Ansicht eines Würfels und des Fluchtpunkts von vorne, links und oben

- Herleitung der perspektivischen Verzerrung durch geometrische Überlegungen

- Definition des Abstands vom 3D-Objekt zum Fluchtpunkt

- Berechnung der perspektivischen Verzerrung für jeden Punkt

- Einführung eines Schalters zum Ein- und Ausschalten der Perspektive

- Einbau der Berechnung der Perspektive

- Wir erkannten, dass die Perspektive häufig in der Malerei und der Computergrafik benutzt wird

- Wie die Perspektive hergeleitet werden kann

- Wie wir die Perspektive implementiert haben und einen Schalter einbauten, um die Perspektive ein- und auszuschalten

- Unser Ziel: Drehung von 3D-Objekten in alle drei Raumrichtungen

- Herleitung der Drehung in 2D

- Beschreibung eines Punkts in 2D mit Winkel und Distanz

- Drehung eines Punktes in 2D als Kombination des ursprünglichen Lagewinkels und des Drehwinkels

- Erweiterung der Drehformeln von 2D auf 3D

- Einführung des Rotationswinkels

- Implementation der Rotationsformeln

- Hinzufügen von Tastenabfragen, um 3D-Objekte zu drehen

- Anwendung der Perspektive nach der Rotation des 3D-Objekts

- Überblick über die Rotationsformeln

- Wie wir diese Rotationsformeln implementierten

- Wie wir Tastenabfragen erkannten, um unsere 3D-Objekte in allen drei Raumrichtungen zu drehen

- Wie wir die Perspektive nach der Rotation des 3D-Objekts berücksichtigten

- Unser Ziel: Die Färbung von 3D-Objekten

- Wir werden unsere 3D-Objekte einfärben, um die dritte Dimension besser erkennen zu können

- Wir werden die Methoden "Hiddenline" und "Wireframe" kennenlernen

- Warum Max die Rückseite seines Würfels nicht sehen kann

- Herleitung der Methode zur Färbung eines 3D-Objekts

- Einbau der Berechnung des Durchschnitts der Z-Werte der 4 Ecken der Flächen

- Definition der Flächen aus jeweils vier benachbarten Punkten

- Zählung der Anzahl Flächen

- Zeichnen der Flächen in weiß mit schwarzen Kanten

- Berechnung der absteigenden Reihenfolge der Flächenabstände vom Betrachter

- Zeichnen der Flächen in der berechneten Reihenfolge, um eine "Hiddenline"-Darstellung zu erreichen mit versteckten Flächen, die von anderen überdeckt werden

- Färbung der 3D-Flächen gemäß ihrer Reihenfolge

- Aufbau einer Möglichkeit zum Wechsel der Darstellung von "Hiddenline" zu "Wireframe" zu simulierten Grautönen.

- Wie wir von Punkten zu Flächen wechselten

- Wie wir die Reihenfolge der Flächen berechneten

- Wie wir das 3D-Objekt einfärbten, mit und ohne Berücksichtigung der Flächendistanz vom Betrachter

- Unser Ziel: Die Erstellung eines kompletten RayTracing-Programms.

- Was ist "Ray Tracing"?

- Wie können wir die Realität simulieren, um Berechnungszeiten von Millionen von Jahren zu verhindern?

- Was beeinflusst die Farbe eines Objekts?

- Grundprinzip von RayTracing

- Komponenten, welche die Farbe eines Objekts definieren

- Grundgerüst der RayTracing-Funktion

- Änderung der Auflösung

- Abrasterung von links nach rechts und von oben nach unten

- Definition des ersten Lichtstrahls, welcher in unsere 3D-Szene geschickt wird

- Was bedeutet "RayTracing" ?

- Wie wir einen Trick nutzten, um die Berechnung von Millionen Lichtstrahlen von überall her zu simulieren

- Welche Komponenten beeinflussen die Farbe eines Objekts?

- Das Grundgerüst der RayTracing-Funktion

- Die Erstellung des ersten Lichtstrahls, welcher berechnet wird

- Unser Ziel: Die für RayTracing benötigte Mathematik

- Definition, Länge, Addition, Multiplikation und Benutzung von Vektoren

- Definition des Gegenvektors, des Ortsvektors und des Normalenvektors

- Definition des Skalarprodukts und des Vektorprodukts von Vektoren

- Schnitt und Schnittpunkt von zwei Vektoren

- Definition der Geradengleichung

- Berechnung des Winkels zwischen zwei Vektoren

- Wir lernten die vektorgeometrischen Grundlagen kennen

- Wie wir Winkel zwischen Vektoren berechneten