Showcase 02 · Physik
Stoff
Ein Banner mit der Moralo-Marke hängt als echtes Tuch im Wind. Greifen Sie es, ziehen und werfen Sie es. Mit zu viel Kraft reißt es genau dort, wo Sie ziehen.
Die Live-Demo benötigt JavaScript und WebGL 2. Unten ist beschrieben, wie das Tuch simuliert wird.
- Partikel
- 0
- Fäden
- 0
- Iterationen
- 0
- Gerissen
- 0
- Bilder/s
- –
- Physik
- Verlet · WebGL 2
So funktioniert es
Das Tuch ist ein Gitter aus Partikeln, verbunden durch Fäden: gerade Fäden halten es zusammen, diagonale verhindern Scherung, lange Federn geben ihm Steifigkeit. Pro Schritt bewegt die Verlet-Integration jedes Partikel aus seiner letzten Bewegung weiter, danach werden alle Fäden mehrmals auf ihre Länge zurückgezogen. Wird ein Faden zu stark gedehnt, reißt er, und das Loch öffnet sich genau dort, wo Sie ziehen.
Der Wind ist ein Feld, das sich über Ort und Zeit ändert und auf jedes Dreieck entlang seiner Flächennormale drückt. Der Mauszeiger ist eine Kugel, um die sich das Tuch legt. Die Grafikkarte zeichnet das Tuch mit berechneten Normalen, einer gewebten Oberfläche und weichem Licht. Die Marke ist die Textur, ihre Farben kommen aus den Design-Tokens.