Documentation

Steuerung

T: Wireframe-Modus an / aus.

W, A: Bewegung der Kamera nach vorne und hinten zum Mittelpunkt der Szene.

S, D: Bewegung der Kamera nach links und rechts um den Mittelpunkt der Szene.

Q, E: Bewegung der Kamera runter und hoch um den Mittelpunkt der Szene.

P: Perspektivische Projektion der Szene (default).

O: Orthogonale Projektion der Szene.

F: Frustum-Projektion der Szene.

Z: Zoom der Kamera in den Mittelpunkt der Szene.

Shift + Z: Zoom der Kamera aus den Mittelpunkt der Szene heraus.

Aufgabenstellung

1) Erzeugen Sie zwei neue parametrisierte Flächen (die nicht im Modul vorkommen) zunächst mit Linien, siehe Material (dort gibt es viele Formeln die Sie verwenden können).

2) Füllen Sie dann die Flächen und kolorieren Sie sie passend zur jeweiligen Flächenform, z.B. mit Farbverläufen. Die Linien sollen noch sichtbar sein, oder es besteht die Möglichkeit zwischen Linien und Füllung umzuschalten.

3) Kreieren Sie auch eine eigene Parametrisierung für eine Fläche und kolorieren Sie diese. Dazu sollen Sie sich eine neue Formel ausdenken, natürlich auf der Basis der vorhandenen Formeln aufbauen (aus Module oder aus dem Material). Versuchen Sie Terme zu mischen und schauen Sie, ob das passiert was Sie erwarten.... Alternativ suchen Sie sich eine Form und versuchen Sie diese zu erzeugen, vielleicht "eine Qualle" oder Ihre Lampe (dieses Vorgehen ist meist schwieriger).

Material

Auf der Internetseite:http://www.3d-meier.de/tut3/Seite0.html finden Sie zahlreiche parametrisierte Flächen, die Sie verwenden können.

Umsetzung

Grundlagen für das Erstellen der Modelle: Moodle Kurs-Materialien des Kurses Graphical Visualisation Technologies, Lerneinheiten 1-8 bis einschließlich KUF.

Herleitung und Gleichungen der Flächen

Gleichungen für den Apfel: http://www.3d-meier.de/tut3/Seite54.html

Gleichungen für die Fliege: http://www.3d-meier.de/tut3/Seite244.html

Gleichungen für die Eichel: Als Grundlage diente die Formel für den Apfel. Die Fläche wird durch folgenden Gleichungen dargestellt.

x = cos(u) * ( 4 * cos(v))

z = sin(u) * ( 3.8 * cos(v))

y = (cos(v) + sin(v) - 1) * (1 + sin(v)) * log(1 - pi * v/5 ) + 6 * sin(v)

Die Parameter u und v nehmen hier die folgende Werte (Definitionsbereich) an.

u ist Element aus der Zahlenmenge [0, 2 pi]

v ist Element aus der Zahlenmenge [-pi, pi]

Gleichungen für den Eichelstiel: Er wird seperat über Gleichungen für ein Zylinder erzeugt. Die Grundlage dazu stammt aus den Moodle Kurs-Materialien (https://vfhgvt.eduloop.de/loop/Zylinder). Sie Gleichungen sehen wie folgt aus.

x = r * cos(u)

z = r * sin(u)

y = v - 1.4

Die Farben werden jeweils bei der Erzeugung der Vertices der Modelle generiert und an die Shader weitergegeben (in der draw-Funktion über model.color des Befehls gl.bufferData(gl.ARRAY_BUFFER, model.color, gl.STATIC_DRAW);). In dem Vertexshader werden die Farben über vColor = vec4(tNormal.z, tNormal.z, tNormal.z, 1.0); und vColor = col * (vColor + 1.0) / 2.0; verarbeitet und anschließend an den Fragmentshader weitergegeben.

Je Modell exisitert eine Javascript-Datei. Je nach Modell wurden anhand dessen Vertices prozedural Farbverläufe oder -änderungen erzeugt.