Interaktive 3D-Zitrusgummischeibe

Erstelle mit WebGPU eine ansprechende, interaktive 3D-Zitrusgummischeibe. Liefere das vollständige Erlebnis in einer eigenständigen HTML-Datei mit eingebettetem JavaScript und WGSL-Shadern. Es muss sich um eine echte 3D-Echtzeitsimulation handeln, nicht um ein Video, Bild oder eine sich wiederholende Animation. APPEARANCE Erstelle eine dicke, halbkreisförmige Orangenscheibe mit durchscheinendem, saftigem Fruchtfleisch, acht klar erkennbaren Segmenten, feinen inneren Membranen, winzigen Bläschen, einer hellen weißen Schicht und einer weichen Orangenschale. Sie soll wie hochwertige Gummibonbonware wirken: kräftige Farben, glänzende Highlights, durch das Fruchtfleisch fallendes Licht, überzeugende Brechung und weiche Kontaktschatten. Vermeide übermäßiges Blooming, ausgewaschene Farben und eine harte Kunststoffoptik. Verwende einen warmen, hellen Studiohintergrund und eine aufgeräumte redaktionelle Oberfläche mit großzügigem Weißraum. Füge den großen kursiven Serifentitel „Citrus Jelly“ hinzu. Halte die Steuerelemente kompakt und die Scheibe gut sichtbar. PHYSIK DES SOFTBODYS Das Jelly-Gefühl ist der wichtigste Aspekt. - Greife mit der Maus oder dem Finger nach einer beliebigen Stelle der Scheibe. - Ziehe, hebe, dehne und verdrehe sie und lasse sie wieder los. - Die Verformung muss lokal erfolgen: Wenn an einer Kante gezogen wird, soll sich das nahegelegene Fruchtfleisch dehnen, während der Rest auf natürliche Weise folgt. - Nach dem Loslassen soll die Scheibe wackeln, überschwingen und allmählich ihre ursprüngliche Form wieder annehmen. - Integriere Schwerkraft, Trägheit, Dämpfung, Bodenkollisionen und weiches Abprallen. - Erhalte das Volumen näherungsweise und verhindere, dass das Mesh kollabiert oder sich nach innen umstülpt. - Die Schale soll etwas fester sein als das Fruchtfleisch. - Innere Segmente, Membranen und Bläschen müssen der Verformung folgen, ohne außerhalb des Körpers zu schweben. Verwende einen stabilen volumetrischen Softbody-Solver, etwa ein Tetraedermesh mit XPBD-Constraints. Imitiere die Weichheit nicht durch Skalieren oder Drehen des gesamten Objekts. CONTROLS Füge drei Farbvoreinstellungen hinzu: Orange, Zitrone und Ruby. Füge Folgendes hinzu: - Regler für die Festigkeit. - Regler für die innere Dämpfung. - Schaltfläche „Einen Schubs geben“. - Zurücksetzen-Schaltfläche. - Kontrollkästchen für Viertelgeschwindigkeit. - Kontrollkästchen „Mesh anzeigen“. - Schaltfläche zum Pausieren/Fortsetzen. Zeige kleine Live-Anzeigen für Masse, prozentuales Ruhevolumen und kinetische Energie an. TECHNISCHE ANFORDERUNGEN Verwende echtes WebGPU-Rendering mit WGSL-Shadern. Erzeuge die gesamte Geometrie und alle visuellen Details prozedural, ohne importierte Modelle oder Bilddateien. Halte die Simulationsaktualisierungen unabhängig von der Bildrate des Renderings. Unterstütze Desktop- und Touchgeräte. Zeige eine klare Fallback-Meldung an, wenn WebGPU nicht verfügbar ist. Teste kräftiges Ziehen, wiederholtes Loslassen, alle Steuerelemente und schmale Bildschirme. Behebe instabile Physik, fehlerhafte Geometrie und visuelle Artefakte, bevor du die fertige HTML-Datei auslieferst. Das Ergebnis soll sich wie ein kleines, haptisches Süßigkeiten-Experiment anfühlen, mit dem zu spielen wirklich befriedigt.