3D-Grafik mit Anaglyphen

1. Repository klonen

Für diese Anleitung brauchst du ein Repository, das du klonen kannst, indem du auf den blauen Button »Clone Repository« klickst. Gib die folgende URL ein und bestätige mit Enter:

https://github.com/specht/anaglyph.git

Als nächstes musst du angeben, in welches Verzeichnis du das Repository klonen möch­test. Bestätige den Standardpfad /workspace/ mit Enter.

Beantworte die Frage »Would you like to open the repository?« mit »Open«.

Wenn du auf der linken Seite im Explorer nun die Datei scene.ini siehst, hast du alles richtig gemacht. Diese Datei enthält die Anweisungen für die 3D-Szene, die du erstellen wirst.

2. Vor­schau starten

Im Work­space ist bereits die Er­wei­te­rung »Live Server« installiert. Unten rechts findest du den Eintrag »Go Live«. Klicke darauf, um die Vor­schau zu starten. Es öffnet sich ein neuer Tab in deinem Browser mit deiner 3D-Szene, die anfangs nur aus einem einzigen Würfel besteht.

3. Geometrische Objekte

Du solltest einen Würfel sehen, der in der Mitte des Bildschirms schwebt. Benutze die Maus, um die Szene zu drehen und zu zoomen.

Öffne die Datei scene.ini, indem du drauf klickst. Du solltest nun den Inhalt der Datei sehen, der ungefähr so aussieht:

shape = box

Ändere den Wert box in sphere, um den Würfel durch eine Kugel zu ersetzen:

shape = sphere

Speichere die Datei mit StrgS und schaue dir die Vor­schau an. Du solltest nun eine Kugel sehen:

Probiere auch andere Formen aus, indem du den Wert für shape änderst. Hier sind die Formen, die du verwenden kannst:

• box für einen Würfel
• sphere für eine Kugel
• cylinder für einen Zylinder
• cone für einen Kegel
• torus für einen Torus (Ring)
• teapot für den Utah Teapot
• plane für ein Quadrat

Zusätzlich zu den geometrischen Körpern kannst auch ein Gitter anzeigen, indem du shape = grid einfügst:

shape = grid
shape = sphere

Du kannst auch mehrere Formen kombinieren, indem du sie untereinander schreibst. Zum Beispiel:

shape = torus
shape = sphere

4. Objekte verschieben

Um Objekte zu verschieben, kannst du den Befehl move verwenden:

shape = grid

shape = box
move = 100, 0, 0

Dabei gibt move = 100, 0, 0 an, dass das Objekt um 100 Einheiten nach rechts verschoben wird. Die drei Werte stehen für die Verschiebung in den X-, Y- und Z-Richtungen.

Die Richtungen sind wie folgt:

• die X-Achse verläuft von links nach rechts
• die Y-Achse verläuft von unten nach oben
• die Z-Achse verläuft von hinten nach vorn

Ein positiver Wert verschiebt das Objekt also nach rechts (X), nach oben (Y) oder nach vorne (Z), während ein negativer Wert es nach links, nach unten oder nach hinten verschiebt.

Aufgabe: Versuche, die folgende Szene zu erstellen, indem du vier Würfel erstellst:

• ein Würfel in der Mitte
• ein Würfel rechts daneben
• ein Würfel darüber
• ein Würfel davor

5. Objekte rotieren

Um Objekte zu drehen, kannst du den Befehl rotate verwenden:

shape = grid

shape = box
rotate = 0, 30, 0
move = -100, 0, 0

shape = box

shape = box
rotate = 30, 0, 0
move = 100, 0, 0

Du siehst hier ein Gitter und drei Würfel:

• der erste Würfel ist um 30 Grad um die Y-Achse gedreht und nach links verschoben
• der zweite Würfel ist ganz normal in der Mitte
• der dritte Würfel ist um 30 Grad um die X-Achse gedreht und nach rechts verschoben

Aufgabe: Versuche, die folgende Szene zu erstellen, indem du drei Würfel erstellst und rotierst:

6. Objekte skalieren

Um die Größe von Objekten mit einem Faktor zu multiplizieren, kannst du den Befehl scale verwenden:

shape = grid

shape = sphere
scale = 0.5
move = -100, 0, 0

shape = sphere
move = 0, 0, 0

shape = sphere
scale = 1.8
move = 100, 0, 0

In diesem Beispiel siehst du ein Gitter und drei Kugeln:

• die erste Kugel ist halb so groß wie die normale Kugel und nach links verschoben
• die zweite Kugel ist normal groß und in der Mitte
• die dritte Kugel ist 1,8-mal so groß wie die normale Kugel und nach rechts verschoben

Du kannst ein Objekt auch in alle drei Richtungen unterschiedlich skalieren, indem du drei Werte angibst:

shape = grid

shape = sphere
scale = 1, 0.2, 1

Hier wur­de eine Kugel nur in der Y-Richtung verkleinert (auf 20%), sodass sie wie eine Scheibe aussieht:

Aufgabe: Versuche, die folgende Szene zu erstellen, indem du eine Box erstellst und sie auf die zehnfache Breite skalierst. Verschiebe die Box anschließend um 25 Einheiten nach oben, so dass sie auf dem Gitter aufliegt:

7. Transformationen kombinieren

Verschiebungen, Drehungen und Skalierungen nennt man auch Transformationen. Du kannst mehrere Transformationen kombinieren, indem du sie hintereinander schreibst. Zum Beispiel:

shape = grid

shape = box
rotate = 0, 0, 45
move = 100, 0, 0

Hier wur­de ein Würfel zuerst um 45 Grad um die Z-Achse gedreht und dann um 100 Einheiten nach rechts verschoben. Das Ergebnis sieht so aus:

Dabei ist es wichtig, in welcher Reihenfolge du die Transformationen angibst. Wenn du zuerst verschiebst und dann drehst, sieht das Ergebnis anders aus:

shape = grid

shape = box
move = 100, 0, 0
rotate = 0, 0, 45

Dieser Würfel schwebt jetzt über dem Gitter, weil er zuerst nach rechts verschoben wur­de und danach erst um 45 Grad um die Z-Achse gedreht wur­de, denn: jede Drehung findet immer um den Ursprung statt (und jede Skalierung auch).

8. Farben und Schattierung

Du kannst die Farben der Objekte kontrollieren, um verschiedene Effekte zu erzielen:

Dafür stehen dir vier Befehle zur Verfügung:

• background für die Hintergrundfarbe: 0.0 bis 1.0 für schwarz bis weiß
• stroke für die Strichfarbe: 0.0 bis 1.0 für schwarz bis weiß / off für kein Strich
• fill für die Füllfarbe: 0.0 bis 1.0 für schwarz bis weiß / off für keine Füllung
• shade für 3D-Schattierung: on für 3D-Schattierung / off für keine 3D-Schattierung

Im folgenden Beispiel schalten wir die Strichfarbe aus und die 3D-Schattierung ein:

shape = grid

shape = torus
shade = on
stroke = off

9. Übungsaufgaben

Versuche, eine oder mehrere der folgenden Szenen zu erstellen:

Erstelle dafür jeweils eine neue Datei (mit »File« / »New Text File«) und speichere sie unter einem passenden Namen, z. B. ampel.ini, eis.ini oder schneemann.ini. Du musst dann auf der Vor­schauseite nur noch den passenden Da­tei­na­men im Textfeld unten ändern, um die Szene zu sehen.

10. Code auskommentieren

Manchmal möchte man Teile eines Programms vorübergehend deaktivieren, ohne sie zu löschen. Dafür kannst du Zeilen auskommentieren, indem du ein Semikolon ; am Anfang der Zeile setzt. Zum Beispiel:

;shape = grid
shape = box

Um schnell ganze Blöcke auszukommentieren, kannst du mehrere Zeilen markieren und dann StrgK und StrgC (für »comment«) drücken. Um die Kommentare wieder zu entfernen, markiere die Zeilen und drücke StrgK und StrgU (für »uncomment«). Es gibt auch weitere Short­cuts dafür, die du im Menü finden kannst.

11. Ani­ma­tio­nen

Während deine Szene angezeigt wird, läuft im Hintergrund eine Uhr mit. Die Anzahl der Sekunden seit dem Start der Szene wird in der Variablen t gespeichert. Du kannst diese Variable verwenden, um Ani­ma­tio­nen zu erstellen:

shade = on
shape = torus
rotate = 0, t * 30, 0

In diesem Beispiel wird der Torus um 30 Grad pro Sekunde um die Y-Achse gedreht. Das bedeutet, dass er nach 3 Sekunden 90 Grad geschafft hat und nach 12 Sekunden eine volle Umdrehung gemacht hat.

Profitipp: Mit Hilfe der Sinus- und Cosinusfunktionen kannst du auch sanfte Bewegungen erzeugen:

shade = on
shape = box
rotate = cos(t * 2) * 10, 0, sin(t * 3) * 10

Aufgabe: Erstelle eine Animation, bei der die Sonne in der Mitte steht und die Erde um die Sonne kreist. Der Mond soll dabei um die Erde kreisen:

12. Text

Du kannst Text in deine Szene einfügen, indem du den Befehl text verwendest:

text = Hello!

Richtig gut sieht er aber erst mit einer 3D-Schattierung aus:

text = Hello!
shade = on
stroke = off
fill = #f9b935

13. 3D-Modelle

Du kannst auch 3D-Modelle in deine Szene einfügen. Auf der Website kenney.nl gibt es eine große Sammlung von kostenlosen 3D-Modellen, die du verwenden kannst. Du kannst sie direkt in dein Projekt herunterladen und in der scene.ini einfügen. Klicke dazu auf ein Kit, um die verfügbaren 3D-Modelle zu sehen:

Blaster Kit

Car Kit

Castle Kit

City Kit (Commercial)

City Kit (Industrial)

City Kit (Roads)

City Kit (Suburban)

Cube Pets

Factory Kit

Fantasy Town Kit

Food Kit

Graveyard Kit

Holiday Kit

Mini Arcade

Mini Characters

Mini Dungeon

Mini Market

Pirate Kit

Platformer Kit

Survival Kit

Train Kit

Watercraft Kit

14. Schleifen

Wenn du viele Objekte platzieren möch­test, wirst du merken, dass du dafür viele Zeilen schreiben musst. Hier werden z. B. drei Würfel nebeneinander platziert:

Für jeden Würfel werden zwei Zeilen geschrieben:

shape = grid

shape = box
move = -100, 0, 0

shape = box
move = 0, 0, 0

shape = box
move = 100, 0, 0

Du kannst ähnliche Zeilen zu einer Schleife zusammenfassen. Wenn du z. B. schreibst:

shape = grid

loop x from -100 to 100 step 100
    shape = box
    move = x, 0, 0
end

…erhältst du genau dasselbe Bild. Dabei lassen wir eine Variable x in 100er-Schritten von -100 bis 100 laufen, wodurch drei Würfel an den gewünschten Positionen gezeichnet werden.

Um eine Schleife zu verwenden, musst du dich genau an die Syntax halten. Dabei gelten folgende Regeln:

• Eine Schleife beginnt mit loop und endet mit end.
• Du musst eine Variable benennen, z. B. x.
• Du musst mit from angeben, mit welchem Wert du beginnen möch­test.
• Du musst mit end angeben, bis zu welchem Wert die Schleife laufen soll.
• Du kannst mit step angeben, in welchen Schritten die Variable weiterlaufen soll. Wenn du step nicht angibst, wird eine Schrittgröße von 1 angenommen.

Du kannst die oben abgebildete Schleife auch so formulieren:

shape = grid

loop x from 1 to 3
    shape = box
    move = (x - 2) * 100, 0, 0
end

Verschachtelte Schleifen

Schleifen können auch verschachtelt werden. Das heisst: du schreibst erst eine äußere Schleife mit einer Variablen, und darin eine innere Schleife mit einer anderen Variablen, z. B.:

shape = grid

loop z from -100 to 100 step 100
    loop x from -100 to 100 step 100
        shape = box
        move = x, 0, z
    end
end

In der äußeren Schleife nimmt z drei verschiedene Werte an und für jeden Durchlauf der äußeren Schleife nimmt x un­ab­hän­gig von z ebenso drei Werte an. Diese beiden Werte können wir jetzt verwenden, um den Würfel in x- und z-Richtung zu verschieben. Das Ergebnis sieht dann so aus:

Aufgabe: Versuche, mit Hilfe von verschachtelten Schleifen ein Gitter aus 3x3x3 Würfeln zu bauen: