´

Aufgabenstellung

Entwerfen und implementieren Sie eine WebGL Demoanwendung, die einige der in diesem Modul vorgestellten Techniken verwendet. Die Demo soll ihre Fähigkeit demonstrieren, interessante Shader-Effekte zu erstellen und in einer minimalen Anwendung sinnvoll zu integrieren.

Ich habe mich für die Erstellung eines Heightmap-Terrains, mit Skybox und reflektierender Wassseroberfläche entschieden.

Erläuterungen zur Übung

Im Gegensatz zu den vorherigen Übungen habe ich statt TDL hier das three.js Framework verwendet.

Das Terrain wird aus einer Plane und einer Heightmap (Graustufen-Textur; siehe unten) erzeugt. Die Plane ist dabei entsprechend der Heightmap-Größe tesseliert, sodass jeder Grauwert aus der Textur einem Vertex zugeordnet werden kann. Genauer gesagt wird nur die y-Koordinate eines jeden Vertex verändert, sodass sich aus der flachen Plane ein Terrain formen kann. Je heller/größer der Farbwert eines Pixels ist, desto höher wird auch der Vertex gesetzt.

Verwendete Ressourcen und Quellcode

Ressourcen
• Bootstrap CSS für das Layout
• threejs, JavaScript 3D library
Tutorials/Weblinks
• Terrain Beispielimplementierung mit ThreeExtras.js
• Terrain Demo
Quellcode
• Quellcode Ü6