Pitaya-Gelee

Erstelle eine interaktive 3D-Szene namens „Pitaya-Gelee“ – eine halbierte Drachenfrucht aus weichem, transluzentem Gelee. Erstelle das gesamte Projekt in einer einzigen HTML-Datei mit echter WebGPU-Darstellung und WGSL-Shadern. Verwende keine vorgefertigten Modelle oder Bild-Assets. APPEARANCE Eine große halbierte Drachenfrucht liegt mit der Schnittfläche nach oben auf einer hellen Studiooberfläche. Eine kräftige himbeerrosa Schale, eine dünne helle innere Rindenschicht und perlweißes Fruchtfleisch. Etwa 250 winzige schwarze Kerne, natürlich über das Fruchtfleisch verteilt. 12–14 fleischige Schalenblätter rund um die Frucht, mit einem Übergang von rosafarbenen Ansätzen zu grünen Spitzen. Eine glänzende, feuchte Oberfläche mit Lichtbrechung, kleinen eingeschlossenen Bläschen und einem weichen Kontaktschatten. Das Material soll wie weiches Fruchtgummi aussehen, nicht wie starrer Kunststoff. Erhalte die kräftigen Farben ohne ausgefressene Glanzlichter. PHYSIK UND INTERAKTION Implementiere eine echte Softbody-Verformung mit einem volumetrischen Mesh, elastischen Verbindungen und volumenerhaltenden Nebenbedingungen, etwa mit XPBD. Nutzer können mit der Maus oder dem Finger in das Fruchtfleisch greifen, es auseinanderziehen und wieder loslassen. Die Verformung soll sich um den Greifpunkt konzentrieren, statt einfach das gesamte Objekt zu verschieben. Nach dem Loslassen soll die Frucht wackeln, nachfedern und allmählich ihre ursprüngliche Form wieder annehmen. Mache die Schalenblätter einzeln ziehbar. Sie sollen weicher als das Fruchtfleisch sein, sich biegen und zurückfedern, dabei aber an der Frucht befestigt bleiben. Die Kerne müssen der verformten Oberfläche folgen, ohne davonzuschweben oder im Fruchtfleisch zu versinken. Halte die Simulation auch bei starkem Ziehen stabil, mit Bodenkontakt und Schutz vor invertierten Elementen. VISUELLES DESIGN Verwende eine minimalistische, helle Studio-Oberfläche mit redaktioneller Ästhetik: großzügiger Weißraum, dünne Rahmen, zurückhaltende Bedienelemente und keine unnötige Dekoration. Oben links: „MATERIAL STUDIES / NO. 019“ Eine große kursive Serifenschrift-Überschrift über zwei Zeilen: „Pitaya-Gelee.“ Darunter: „Ein bisschen wild.“ „Ein bisschen süß.“ „Ein sehr weicher Drache.“ Füge rechts ein schwebendes Panel mit dem Titel „THE SPECIMEN“ hinzu, das Folgendes enthält: Dichte-Badge: ρ 1.04 g/cm³. Drei Presets: Pearl – weißes Fruchtfleisch und rosafarbene Schale. Ruby – himbeerfarbenes Fruchtfleisch und rosafarbene Schale. Gold – helles Fruchtfleisch und goldene Schale. Regler für Festigkeit und interne Dämpfung mit sichtbaren Werten. Schaltflächen „Einen Schubs geben“ und „Zurücksetzen“. Kontrollkästchen „¼ Geschwindigkeit“ und „Mesh anzeigen“. Eine Schaltfläche „Pausieren“. Füge außerdem Folgendes hinzu: Eine Vollbildschaltfläche mit Option zum Beenden des Vollbildmodus. Eine Statusanzeige „WEBGPU · LIVE“. Live-Anzeigen für Masse, prozentuales Ruhevolumen und kinetische Energie. Einen kurzen Interaktionshinweis: „Zieh am Fruchtfleisch. Zupf an einem Blatt. Lass los.“ Einen aufklappbaren Bereich „Im Inneren des Experiments“, der die Implementierung korrekt erläutert. TECHNISCHE ANFORDERUNGEN Liefere eine eigenständige Datei namens pitaya-jelly-webgpu.html. Verwende echte WebGPU-Darstellung, keine 2D-Canvas-Imitation. Erzeuge die gesamte Geometrie prozedural. Verwende eine dickenabhängige Lichtbrechung, Fresnel-Reflexionen und weiche Studiobeleuchtung. Verwende einen festen Simulationszeitschritt für ein konsistentes Verhalten. Unterstütze Desktop- und Touch-Interaktion mit einem responsiven Layout. Vermeide während des Ziehens aufwendige Geometrie-Neuerzeugung oder Shader-Kompilierung. Zeige eine klare Fallback-Meldung an, wenn WebGPU nicht verfügbar ist. Überprüfe Ziehen, Loslassen, Formwiederherstellung, Presets, Zurücksetzen, Pausieren, Vollbild und das mobile Layout. Die wichtigsten Ziele sind ein überzeugendes Gelee-Verhalten, wunderschöne Materialien und eine befriedigende Interaktion. Das Ergebnis soll sich wie ein ausgefeiltes, spielbares Material-Experiment anfühlen.