Showcase 12 · Mechanische Miniatur

Das erwachende Königreich

Eine flache, gravierte Metallkarte erwacht: Mauern wachsen aus der Platte, Türme schrauben sich in die Höhe, Brücken heben sich aus dem Fluss und Wappen klappen auf. Angetrieben wird alles von einem Zahnrad in der Mitte. Greifen Sie es und drehen Sie es vor oder zurück, oder lassen Sie den Motor laufen; ziehen Sie neben dem Zahnrad, um die Miniatur von einer anderen Seite zu betrachten.

Die Live-Demo benötigt JavaScript und WebGL 2. Die Erklärung unten ist auch ohne sie lesbar.

So funktioniert es

Die ganze Szene hängt an einer einzigen Zahl: dem Aufbau zwischen flacher Karte und fertigem Königreich. Jedes der mehreren hundert Bauteile hat darauf einen eigenen Einsatzpunkt und eine eigene Mechanik: Es wächst aus der Platte, schraubt sich hoch, springt auf, klappt an einem Scharnier auf oder hebt sich auf seine Pfeiler. Die Einsatzpunkte laufen als Welle vom Zahnrad nach außen. Weil jede Stellung eine reine Funktion dieser Zahl ist, läuft alles rückwärts genauso sauber wie vorwärts, und das Zahnrad ist kein Videoregler, sondern die Achse der Welt.

Gezeichnet wird mit WebGL 2: Eine Handvoll Grundkörper, als Programmcode erzeugt, wird per Instancing hundertfach platziert, eine Zeichenoperation pro Form. Ein gerichtetes Licht wirft Schatten aus einer Tiefenkarte, die mit dem Aufbau über die Platte wandern. Emaille, Messing, Glas und die gravierte Platte kommen aus den Design-Tokens und folgen der Darstellung Hell oder Dunkel. Ein Zahnradgriff wird als Strahl vom Zeiger auf die Ebene des Zahnrads berechnet; der Drehwinkel um die Achse wird zum Aufbau.