Level 3: Das Licht

1. Wo du weitermachst

Diese Seite baut auf Level 2 auf: auf deinem Level, so wie es am Ende von Level 2 war, mit dem Bad und dem Becken im Schacht. Öffne den Ordner /workspace/backrooms-starter wieder in VS Code und starte die Vorschau (»Go Live«).

2. Lampen und Möbel

Leuchten unter der Decke

Eine Leuchte hängt knapp unter der Decke, mitten über ihrem Feld, unter einer schrägen Decke so schräg wie sie:

Farbiges Licht färbt alles, was es trifft, auch über die Tür hinaus in den Nachbarraum: Im Gang siehst du, wie rotes und blaues Licht aus zwei Türen fällt.

Lampen an der Wand

Was hier Leuchte heißt, ist ein helles Feld, das immer unter der Decke hängt. Licht kann aber auch aus einem Modell kommen, einer Lampe: einer Wandlampe, einer Stehlampe, einer Laterne. Die Kammer wird ein Ruheraum. Statt der flackernden Leuchte an der Decke hängen zwei Wandlampen an den Wänden, und an der Südwand steht ein Sofa. Ersetze rooms/kammer.room durch:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

# Eine Kammer, die gestern noch nicht da war. Jetzt steht ein Sofa darin.

[room]
name = Kammer
height = 2.2
wallpaper = #9a8a4c

[map]
#####
5...6
#W.E#
#.S.#
#####

[W]
model = models/industrial_wall_lamp/industrial_wall_lamp_1k.gltf   # Poly Haven, CC0
height = 0.43
rotation = 90
offset = -0.42, 1.4, 0   # an die Westwand, 1,4 m hoch
light = #ffd9a0
power = 1.2

[E]
model = models/industrial_wall_lamp/industrial_wall_lamp_1k.gltf   # Poly Haven, CC0
height = 0.43
rotation = 270
offset = 0.42, 1.4, 0    # an die Ostwand
light = #ffd9a0
power = 1.2

[S]
model = models/sofa_03/sofa_03_1k.gltf   # Poly Haven, CC0
height = 0.93
rotation = 180
offset = 0, 0, -0.07     # an die Südwand

[6]
door = saal 1

light = #ffd9a0 bei einem Modell macht es zu einer Lampe. Ihr Licht kommt aus den Teilen, die im Modell selbst leuchten, bei dieser Lampe aus der Glühbirne hinter dem Glas, und es strahlt nach allen Seiten, nicht nur nach unten wie eine Leuchte unter der Decke. Hat eine Lampe einen Schirm, der nach unten zeigt, wie die Wandlampen im Holzsaal aus Level 0, schreib beam = 75 dazu: Dann fällt ihr Licht nur nach unten, in einen Kegel, der bis 75° von der Senkrechten reicht, und die Decke darüber bekommt kein direktes Licht. beam = up, 60 schickt es nach oben. power und flicker gelten wie bei einer Leuchte. Glas und die leuchtenden Teile halten das Licht nicht auf, aber Arm und Schirm einer Lampe werfen Schatten an die Wand.

offset = x, y, z schiebt ein Modell aus der Mitte seines Felds, in Metern und wie in den anderen 3D-Aktivitäten: x nach Osten (im Grundriss nach rechts), y nach oben, z nach Süden (im Grundriss nach unten), mit einer negativen Zahl in die andere Richtung. Die Lampe im Feld W rückt 42 cm nach Westen an die Wand und hängt 1,4 m hoch. Das Sofa rückt 7 cm nach Süden: Es ist 1,12 m tief, ein Feld nur 1 m, und ragte sonst in die Wand. offset gibt es auch für Blöcke. Welche Seite eines Modells vorn ist, legt fest, wer es gebaut hat; rotation in Schritten von 90 dreht es, bis es stimmt. Die Lampe an der Westwand ist um 90° gedreht, damit ihre Rückseite an der Wand liegt. Mit drei Zahlen, rotation = x, y, z, dreht es sich um alle drei Achsen, dieselben wie bei offset: erst um y, wohin es schaut, dann um x, gekippt, dann um z, zur Seite geneigt.

Dabei kommt es auf die Reihenfolge an. Zuerst dreht das Programm ein Modell, um seine eigene Mitte. Dann stellt es dessen Mitte über die Mitte des Felds und seinen tiefsten Punkt auf den Boden, oder auf den Sockel. Erst danach schiebt offset es weiter, in den Richtungen der Welt, nicht in denen des gedrehten Modells: offset = -0.42, 1.4, 0 heißt immer 42 cm nach Westen und mit der Unterkante 1,4 m über dem Boden, wie auch immer die Lampe gedreht ist.

Modelle von Poly Haven

Sofa und Wandlampe liegen schon in models/, dazu die Wandlampe mit Schirm und der Kerzenleuchter aus dem Holz- und dem Samtsaal und Möbel: ein Schreibtisch aus Metall, Stühle, eine Kommode, ein Regal, ein altes Bettgestell, ein Schaukelstuhl und ein kleiner Tisch. Alle sind von Poly Haven. Dort steht jedes Modell unter CC0: Du darfst es verwenden, wofür du willst, ohne zu fragen. So holst du dir weitere:

1. Wähl auf der Seite des Modells beim Download die Auflösung 1K und das Format glTF. glTF und GLB kann das Programm lesen. 1K genügt: Das Programm nimmt vom Modell die Farbe der Oberfläche und, für Spiegelungen, wie glatt und metallisch sie ist. Mit 2K oder 4K ist die Oberfläche nur aus der Nähe schärfer, und die Bilder brauchen vier- oder sechzehnmal so viel Platz.
2. Ein Modell in glTF besteht aus mehreren Dateien: einer .gltf, einer .bin und Bildern im Ordner textures. Sie gehören zusammen in einen eigenen Ordner in models, etwa models/sessel/, so wie sie ankommen.
3. In der Raumdatei steht dann model = models/sessel/DATEINAME.gltf. Wie groß das Modell ist, steht auf seiner Seite bei den Maßen; die Höhe davon gehört in height.

Kommt beim Herunterladen eine ZIP-Datei an, zieh sie in VS Code in den Ordner models und pack sie im Terminal in einen eigenen Ordner aus:

cd /workspace/backrooms-starter/models
unzip DATEINAME.zip -d sessel

Weitere Modelle unter CC0 findest du bei den 3D-Scans der Smithsonian Institution und bei Sketchfab, die Suche dort schon auf CC0 und herunterladbare Modelle eingestellt; beide als GLB herunterladen. Nimm nur Modelle, deren Lizenz das erlaubt, und schreib in einem Kommentar neben model = dazu, woher sie kommen.

3. Im Maschinenraum: Was das Programm rechnet

Viele Spiele rechnen das Licht für jedes Bild neu, 60-mal in der Sekunde, weil sich dort Figuren, Türen und Lampen bewegen, und müssen dafür stark vereinfachen. Hier bewegst nur du dich, die Leuchten bleiben, wo sie sind. Darum rechnet das Programm das Licht einmal aus, wenn das Level lädt, und klebt es dann wie eine zweite Tapete auf jede Fläche. Diese Tapete aus Licht heißt Lightmap, und das Ausrechnen nennt man Backen. Es läuft auf der Grafikkarte, in Shadern: kleinen Programmen in GLSL, die für Tausende Punkte zugleich laufen. Schritt für Schritt, im Saal mit seinen Säulen:

Die Punkte. Die Lightmap hat auf jedem Meter Wand, Boden und Decke 16 Punkte in jeder Richtung, alle 6,25 cm einen. Nur für diese Punkte rechnet die Grafikkarte aus, wie hell es dort ist; dazwischen mischt sie beim Zeichnen die vier nächsten. Mit G siehst du die Punkte, mit T ohne Tapete und Teppich deutlicher:

Wo ein Modell oder ein Block nah an einer Wand, auf dem Boden oder unter der Decke steht, wirft er Schatten, für die 6,25 cm zu grob sind: Eine Säule unter der Decke wirft dort einen scharfen Keil. Dort bekommt die Fläche ein zweites, feineres Stück Lightmap, das zu seinem Rand hin weich in das grobe übergeht. Es reicht 60 cm über den Umriss hinaus, so weit reichen die weichen Schatten; um ein Modell liegen bis zu viermal so viele Punkte in jeder Richtung, um einen Block dreimal so viele, denn seine Kanten sind gerade. Auch eine Lampe an der Wand bekommt eins, für die Schatten ihres Arms. Weit weg sind die feinen Punkte so klein, dass G sie ausblendet; dort sieht die Fläche glatt aus.

Ein Bild für alle Flächen. Alle Punkte aller Flächen liegen in einem einzigen Bild, der Lightmap. Jede Fläche ist darin ein Rechteck aus ihren Punkten: so viele breit und hoch, wie sie Meter breit und hoch ist, mal 16. Nur Boden und Decke eines Raums teilen sich je ein Rechteck, so wie der Grundriss sie von oben zeigt: Wo zwei ihrer Stücke aneinanderstoßen, liegen dieselben Punkte, und das Licht hat dort keine Naht. Das Programm legt die Rechtecke dicht an dicht in das Bild, die großen zuerst, wie Kisten in einen Kofferraum, und macht das Bild nur so groß wie nötig, mit einer Zweierpotenz als Seite, etwa 1024 × 1024 Punkte. Jede Ecke einer Fläche weiß, wo im Bild ihr Rechteck liegt. Beim Zeichnen holt sich die Grafikkarte für jeden Pixel der Fläche die Helligkeit von der passenden Stelle im Rechteck: Das Rechteck wird auf die Fläche geklebt, wie ein Bild auf eine Wand. Shift+G zeigt die ganze Lightmap, hier die deines Levels (zum Vergrößern anklicken):

?show=atlas&face=bad,wall in der Adresse zeigt nur das Rechteck der größten Wand im Bad, Punkt für Punkt. Ein anderer Raum statt bad, floor oder ceiling statt wall; eine Zahl dahinter nimmt die nächstkleinere Fläche (bad,wall,1 die zweitgrößte), fine ihr feineres Stück. In den feinen Stücken sieht man gut, wie ein Schatten an der Kante, die ihn wirft, scharf beginnt und mit dem Abstand weicher wird, warum, kommt gleich. An der Wand hinter der Treppe im Bad und um eine Kiste auf dem Dachboden, die zwei Leuchten sieht und darum zwei Schatten wirft:

Bevor es um die Strahlen geht: Geh zurück ins Zimmer (Shift R) und schau nach oben, zur Decke.

Direktes Licht. Für jeden Punkt nimmt das Programm einen Punkt auf jeder Leuchte und schickt einen Strahl dorthin. Steht etwas im Weg, eine Wand, eine Säule oder ein Modell, kommt von dieser Leuchte nichts an. Sonst kommt Licht an, umso weniger, je weiter die Leuchte weg ist (doppelt so weit: ein Viertel) und je schräger es auf die Fläche fällt. Das wiederholt es 64-mal, jedes Mal mit einem anderen Punkt auf der Leuchte, und nimmt den Durchschnitt. Ganz zufällig sind diese Punkte nicht: Das Programm teilt die Leuchte in 8 × 8 Felder, und jeder Punkt der Lightmap kommt in den 64 Durchgängen in jedes Feld genau einmal, darin an eine zufällige Stelle. So verteilen sich seine Strahlen gleichmäßig über die ganze Leuchte, und der Halbschatten wird glatter als mit Zufall allein. Ein Punkt, der eine Leuchte nur halb sieht, ist in etwa der Hälfte der Durchgänge beleuchtet: Er liegt im Halbschatten. Darum werfen große Leuchten weiche Schatten und kleine scharfe. Und der Halbschatten ist dort schmal, wo der Schatten an der Kante beginnt, die ihn wirft, und wird breiter, je weiter er von ihr weg fällt: wie an der Wand hinter der Treppe und um die Kiste. Nur mit direktem Licht sieht der Saal so aus:

Hier geht es weiter, sobald du deine Antwort oben abgegeben hast.

Ohne Bounce-Licht ist die Decke fast schwarz: Keine Leuchte strahlt nach oben.

Wie weich ein Schatten ist, hängt also davon ab, wie groß die Leuchte ist. Mit size = 0.2 und mit size = 2 (und power so, dass jede gleich viel Licht gibt, denn eine kleinere Leuchte gibt auch weniger):

[L]
light = #fff3cf
power = 18
size = 0.2

Bounce-Licht. In Wirklichkeit ist eine Decke trotzdem hell, weil jede Fläche einen Teil des Lichts zurückwirft, das auf sie fällt, in ihrer eigenen Farbe: der Teppich bräunliches Licht, eine rote Wand rotes. Ist das direkte Licht fertig, schickt das Programm von jedem Punkt Strahlen in zufällige Richtungen und schaut, wie hell die Flächen sind, die sie treffen. Was dabei herauskommt, ist das Licht, das einmal zurückgeworfen wurde, ein Bounce. Damit das schnell geht, sammelt es das zurückgeworfene Licht vorher in Würfeln von 25 cm, und weil zufällige Strahlen ein körniges Ergebnis geben, glättet es das Bounce-Licht am Ende. Das Ganze dreimal: Beim zweiten Bounce werfen die Flächen auch das Licht des ersten zurück und so weiter, darum steht beim Backen »bounce 1 of 3«. Mit einem, zwei und drei Bounces (in level.ini mit bounces = 1 und so weiter):

Kontaktschatten. Wo zwei Flächen aneinanderstoßen, in Ecken, an einer Sockelleiste oder unter einem Block, kommt von vielen Seiten kein Bounce-Licht, weil die andere Fläche im Weg ist. Zwei kurze Strahlen von 80 cm prüfen bei jedem der 64 Durchgänge, wie viel Platz um einen Punkt herum ist: Trifft einer etwas, dunkelt das Bounce-Licht dort ab, umso mehr, je näher es ist, und sanft auslaufend, damit keine harte Linie entsteht. Auf Englisch heißt das Ambient Occlusion. Nur das Bounce-Licht, ohne und mit Kontaktschatten:

Alles zusammen. Direktes Licht, Bounce-Licht und Kontaktschatten, mal der Farbe von Wänden und Boden:

Beim Zeichnen: Tone Mapping und Bloom. Die Lightmap enthält das Licht, wie es wirklich ist: Unter einer Leuchte ist es viel heller als in einer Ecke, und die Leuchte selbst ist noch einmal viel heller. Ein Bildschirm kann das nicht zeigen, er kennt nur Helligkeiten von 0 bis 1. Das Tone Mapping drückt große Werte sanft zusammen, wie eine Kamera: Helles bleibt hell, ohne dass alles darüber gleich weiß wird. Davor kommt Bloom (H): Was viel heller ist als Weiß, die Leuchten vor allem, strahlt weich in seine Umgebung, so wie in einer Kamera oder im Auge, wenn man in eine Lampe schaut. Dafür verkleinert das Programm das Bild mehrmals auf die Hälfte, verwischt die hellsten Stellen und legt sie wieder vergrößert darüber. Das kostet bei jedem Bild ein wenig Zeit, darum fehlt Bloom mit der Rot-Cyan-Brille, in VR und in der Automap; dort hat jede Leuchte einen eigenen, einfachen Schein.

Warum es so echt aussieht. Die Räume sind schlicht: gelbe Tapete, Teppich, ein paar Säulen. Dass sie trotzdem wie ein Foto wirken, liegt fast nur am Licht. In Wirklichkeit fällt Licht nicht nur von der Lampe auf den Boden, es prallt von allen Flächen ab, färbt sich dabei, macht Decken hell und Ecken dunkel, und Schatten haben weiche Ränder. Genau das rechnet das Programm aus, mit rund tausend Strahlen für jeden Punkt der Lightmap. Ein Spiel, das 60 Bilder in der Sekunde zeichnen muss, hat dafür keine Zeit und schummelt; das sieht man. Hier geht es, weil sich nichts bewegt: Keine Lampe wandert, keine Tür geht auf, keine Figur läuft durchs Bild. Das Licht wird einmal gebacken und stimmt dann für immer, und es gibt nichts, das sich anders verhielte als das Licht und den Trick verriete. Die Backrooms sind leer, und genau darum sehen sie so echt aus.

Modelle bekommen ihr Licht nicht aus der Lightmap: Das Programm rechnet es für jede Ecke ihres Netzes aus, mit denselben Leuchten und demselben Bounce-Licht.

Die Teile einzeln ansehen

Oben links steht für jeden Teil ein Schalter mit seiner Taste; grün heißt an. Ein Klick auf den Schalter oder die Taste schaltet ihn um:

Licht aufheben

Backen dauert, darum hebt die Vorschau das fertige Licht im Browser auf. Lädst du neu, ohne etwas zu ändern, steht oben links »Light loaded from this browser«, und es wird hell, ohne dass gebacken wird. Änderst du auch nur ein Zeichen in einem Raum, passt das aufgehobene Licht nicht mehr, und es wird neu gebacken. Ob es passt, sagt ein Fingerabdruck (englisch Hash): eine kurze Zahl, ausgerechnet aus allen Dateien des Levels, den Modellen, dem Teil des Programms, der backt, und dem, was das Programm aus deinen Räumen baut: den Flächen und den Leuchten.

Nach dem Backen bekommen noch die Modelle ihr Licht, oben links steht dann »Light for the models« mit einer Zahl in Prozent. Ist auch das fertig, lädt »Save light« das Licht als Datei level.light herunter. Zieh sie aus deinem Download-Ordner in den Explorer von VS Code, neben level.ini. Dann lädt das Level sein Licht aus dieser Datei, auch in einem anderen Browser, und du kannst deine Backrooms als fertige Webseite weitergeben. Nach jeder Änderung am Level musst du sie neu speichern; eine veraltete Datei meldet die Vorschau oben links.

4. Zeigen und veröffentlichen

Speichere vorher das Licht (»Save light«, siehe »Licht aufheben«) und leg level.light neben level.ini: Dann ist es bei allen sofort hell, und niemand muss warten, bis gebacken ist.

Willst du dein Level woanders hinlegen, auf einen Webserver, der nur Dateien ausliefert: ./export.sh . ../mein-level im Terminal, im Ordner der Vorlage, baut einen Ordner mein-level neben ihr, nur mit dem, was dein Level braucht, dem Licht und den Modellen, die es nennt. Für eine VR-Brille muss die Adresse mit https:// anfangen.

5. Die Nachtschicht

Jetzt kennst du alles, was in einer Raumdatei stehen kann. Die Nachtschicht ist ein ganzes Level, gebaut aus genau diesen Einträgen. Du kannst sie sofort durchlaufen, ihr Licht ist schon gebacken:

Die Nachtschicht betreten

Sie öffnet sich in einem neuen Tab, schon fertig gebacken. Das geht auch auf dem Handy, dem Tablet und mit einer VR-Brille: Öffne dieselbe Adresse im Browser der Brille und tippe auf »ENTER VR«.

Wie sie gebaut ist, kannst du nachlesen: Ihre Räume liegen auf GitHub, eine Datei pro Raum, im Ordner rooms. Lies sie Zeile für Zeile und nimm dir, was du brauchen kannst.

Du kannst sie auch in deine Vorlage holen und dort öffnen. Klone sie im Terminal in den Ordner der Vorlage, als Ordner nachtschicht:

git clone https://github.com/specht/backrooms-nachtschicht nachtschicht

Dann häng an die Adresse der Vorschau ?level=nachtschicht an. Beim ersten Mal backt dein Browser das Licht selbst. Bei siebzehn Räumen und 150 Modellen dauert das an einem Rechner mit einer Grafikkarte von vor ein paar Jahren etwa eine Viertelstunde. Lass so lange den Tab und die Vorschau offen. Danach hebt dein Browser das Licht auf, und beim nächsten Mal ist es sofort hell, solange du an der Nachtschicht nichts änderst.