Gelée de pitaya

Créez une scène 3D interactive appelée « Pitaya Jelly » : une moitié de fruit du dragon en gelée douce et translucide. Construisez l’intégralité du projet dans un seul fichier HTML, avec un rendu WebGPU véritable et des shaders WGSL. N’utilisez ni modèles prédéfinis ni ressources image. APPEARANCE Une grande moitié de fruit du dragon, face coupée vers le haut, posée sur une surface de studio claire. Une peau rose framboise intense, une fine couche interne pâle et une chair blanche nacrée. Environ 250 minuscules graines noires réparties naturellement dans la chair. 12 à 14 pétales charnus autour du fruit, passant du rose à la base au vert à l’extrémité. Une surface brillante et humide, avec réfraction de la lumière, petites bulles internes et ombre de contact douce. Le matériau doit évoquer une gomme tendre, et non un plastique rigide. Préservez des couleurs saturées sans hautes lumières surexposées. PHYSIQUE ET INTERACTION Implémentez une véritable déformation de corps mou à l’aide d’un maillage volumique avec des connexions élastiques et des contraintes de conservation du volume, comme XPBD. Les utilisateurs doivent pouvoir saisir la chair avec la souris ou le doigt, l’étirer, puis la relâcher. La déformation doit se concentrer autour du point de saisie, plutôt que de simplement déplacer l’objet entier. Après le relâchement, le fruit doit onduler, gigoter et retrouver progressivement sa forme initiale. Rendez les pétales de la peau manipulables individuellement. Ils doivent être plus souples que la chair, se courber puis revenir en place tout en restant attachés au fruit. Les graines doivent suivre la surface déformée sans flotter au loin ni s’enfoncer dans la chair. Maintenez la stabilité de la simulation lors des tractions importantes, avec un contact au sol et une protection contre les éléments inversés. DIRECTION ARTISTIQUE Utilisez une interface de studio minimaliste et claire, à l’esthétique éditoriale : beaucoup d’espace blanc, des bordures fines, des contrôles discrets et aucune décoration superflue. En haut à gauche : « ÉTUDES DE MATÉRIAUX / N° 019 » Un grand titre à empattements, en italique, sur deux lignes : « Pitaya Jelly. » En dessous : « Un peu sauvage. » « Un peu sucré. » « Un dragon très tendre. » À droite, ajoutez un panneau flottant intitulé « LE SPÉCIMEN » contenant : Badge de densité : ρ 1,04 g/cm³. Trois préréglages : Pearl — chair blanche et peau rose. Ruby — chair couleur framboise et peau rose. Gold — chair pâle et peau dorée. Des curseurs de fermeté et d’amortissement interne, avec leurs valeurs visibles. Des boutons « Donner une impulsion » et « Réinitialiser ». Des cases à cocher « Vitesse ¼ » et « Afficher le maillage ». Un bouton « Pause ». Ajoutez également : Un bouton de plein écran avec une option pour quitter ce mode. Un indicateur d’état « WEBGPU · EN DIRECT ». Des relevés en temps réel de la masse, du pourcentage du volume au repos et de l’énergie cinétique. Une brève indication d’interaction : « Tirez la chair. Tirez un pétale. Relâchez. » Une section repliable « À l’intérieur de l’expérience » qui explique fidèlement l’implémentation. EXIGENCES TECHNIQUES Livrez un seul fichier autonome nommé pitaya-jelly-webgpu.html. Utilisez un véritable rendu WebGPU, et non une imitation en Canvas 2D. Générez toute la géométrie de manière procédurale. Utilisez une réfraction tenant compte de l’épaisseur, des réflexions de Fresnel et un éclairage de studio doux. Utilisez un pas de temps de simulation fixe pour garantir un comportement cohérent. Prenez en charge les interactions sur ordinateur et sur écran tactile, avec une mise en page adaptative. Évitez toute reconstruction coûteuse de la géométrie ou compilation de shaders pendant la manipulation. Affichez un message de secours clair lorsque WebGPU n’est pas disponible. Vérifiez la manipulation, le relâchement, le retour à la forme initiale, les préréglages, la réinitialisation, la pause, le plein écran et la mise en page mobile. Les priorités principales sont un comportement convaincant de gelée, de beaux matériaux et une interaction satisfaisante. Le résultat doit donner l’impression d’une expérience de matériau soignée et ludique.