Diese Webseite

Die Bilder sind echte Screenshots aus Minecraft. Ein Python-Werkzeug zerlegt sie in Tiefe, Masken und Ebenen, im Browser setzt WebGL sie wieder zusammen und erweckt sie zum Leben. Scroll Schritt für Schritt durch – und probier in jedem Schritt selbst aus, was passiert.

2D

Höhle See Fackel

1. Screenshot
2. Tiefe
3. Masken
4. Ebenen
5. Effekte
6. Ergebnis

Schritt 1 von 6

Screenshot

Ausgangspunkt ist ein gewöhnlicher Screenshot: flach, ohne Information darüber, was nah und was fern ist. Für den Computer ist das nur ein Raster aus Farben.

Wähle oben eine Szene und scroll dann weiter – Schritt für Schritt wird daraus eine bewegte 3D-Szene.

Weiter: Tiefe

Schritt 2 von 6

Tiefe

Das KI-Modell Depth Anything V2 schätzt für jeden Pixel die Entfernung: hell ist nah, dunkel ist fern. Ein Gitternetz aus über 15.000 Punkten wölbt sich entlang dieser Tiefenkarte – so entsteht beim Drehen echte Parallaxe.

Tiefe

Gitternetz zeigen

Schieb den Regler und zieh im Bild, um es zu drehen. Im flachen Bild zeigt die Lupe die Tiefe an der Stelle, auf die du zeigst.

Weiter: Masken

Schritt 3 von 6

Masken

Masken legen fest, wo sich später etwas bewegen darf. Sie entstehen aus Polygonen, Farbregeln und GrabCut; weiche Verläufe lassen jeden Effekt zum Rand hin auslaufen, statt abzureißen.

Masken dieser Szene

Neu abtasten

Schalte Masken einzeln an und aus. Die Lupe zeigt, wie stark jede Maske an der Stelle wirkt, auf die du zeigst.

Weiter: Ebenen

Schritt 4 von 6

Ebenen

Was frei im Raum steht – die Fackel, die Fische –, wird ausgeschnitten und bekommt eine eigene Tiefe. Die Lücke dahinter füllt das Werkzeug glatt aus dem Umfeld auf, damit beim Drehen nichts aufreißt.

Abstand

Ebenen ausblenden, Lücke zeigen

Zieh die Ebenen auseinander und dreh die Szene. Blende sie aus, um die aufgefüllte Lücke zu sehen.

Weiter: Effekte

Schritt 5 von 6

Effekte

Ein Shader verschiebt Pixel für Pixel – aber nur dort, wo eine Maske es erlaubt: Wellen, Wind, Wolken, Flackern, Hitze. Links der Trennlinie siehst du die Masken, rechts das Ergebnis.

Trennlinie

Effekte dieser Szene

Zieh die Trennlinie im Bild und schalte Effekte ab, um zu sehen, was jeder einzelne tut.

Weiter: Ergebnis

Schritt 6 von 6

Ergebnis

Alles zusammen: Tiefe, Masken, Ebenen und Effekte – so laufen die Szenen auf der Startseite. Dort fliegen zusätzlich Funken und Glühwürmchen, berechnet in WebAssembly.

Zieh im Bild, um die fertige Szene zu drehen.

Zur Startseite

Werkzeuge

• zerlegen.py – Python mit OpenCV und Depth Anything V2: Tiefe, Masken, Ebenen und Retusche
• szene3d.js – WebGL2: Gitternetz, Effekt-Shader und die Übergänge zwischen den Szenen
• funken.wasm – Rust, kompiliert zu WebAssembly: Funken, Glühwürmchen und das „G“
• build.mjs – Node.js: setzt die Seiten aus Vorlagen zusammen, ganz ohne Framework