Tranche d’agrume gélifiée interactive en 3D

Créez une magnifique tranche d’agrume gélifiée interactive en 3D avec WebGPU. Livrez l’expérience complète dans un seul fichier HTML autonome, avec le JavaScript et les shaders WGSL intégrés. Il doit s’agir d’une véritable simulation 3D en temps réel, et non d’une vidéo, d’une image ou d’une animation en boucle. APPEARANCE Créez une tranche d’orange épaisse et semi-circulaire, avec une pulpe translucide et juteuse, huit segments distincts, de délicates membranes internes, de minuscules bulles, une fine couche d’albédo pâle et une écorce orange souple. Donnez-lui l’apparence d’un bonbon gélifié haut de gamme : couleur saturée, reflets brillants, lumière traversant la pulpe, réfraction convaincante et ombres de contact douces. Évitez le bloom excessif, les couleurs délavées et l’aspect plastique rigide. Utilisez un arrière-plan de studio clair et chaleureux, ainsi qu’une interface éditoriale épurée avec beaucoup d’espace blanc. Ajoutez le grand titre en italique avec empattements « Citrus Jelly ». Gardez les contrôles compacts et la tranche bien visible. PHYSIQUE DES CORPS MOUS La sensation de gelée est l’élément le plus important. - Saisissez n’importe quelle partie de la tranche avec la souris ou le doigt. - Tirez-la, soulevez-la, étirez-la, tordez-la, puis relâchez-la. - Rendez la déformation locale : tirer sur un bord doit étirer la pulpe à proximité, tandis que le reste suit naturellement. - Après le relâchement, la tranche doit osciller, dépasser sa position d’équilibre, puis retrouver progressivement sa forme d’origine. - Intégrez la gravité, l’inertie, l’amortissement, les collisions avec le sol et des rebonds souples. - Préservez approximativement le volume et empêchez le maillage de s’effondrer ou de s’inverser. - Rendez l’écorce légèrement plus ferme que la pulpe. - Les segments internes, les membranes et les bulles doivent suivre la déformation sans flotter à l’extérieur du corps. Utilisez un solveur volumique stable pour corps mou, par exemple un maillage tétraédrique avec des contraintes XPBD. Ne simulez pas la souplesse en redimensionnant ou en faisant pivoter l’objet entier. CONTROLS Intégrez trois préréglages de couleur : Orange, Citron et Ruby. Ajoutez : - Un curseur de fermeté. - Un curseur d’amortissement interne. - Un bouton « Donnez-lui une petite impulsion ». - Un bouton de réinitialisation. - Une case à cocher pour la vitesse au quart. - Une case à cocher pour afficher le maillage. - Un bouton de mise en pause/reprise. Affichez de petites valeurs en temps réel pour la masse, le pourcentage du volume au repos et l’énergie cinétique. EXIGENCES TECHNIQUES Utilisez un véritable rendu WebGPU avec des shaders WGSL. Générez toute la géométrie et tous les détails visuels de manière procédurale, sans modèles importés ni fichiers image. Faites en sorte que les mises à jour de la simulation soient indépendantes de la fréquence d’affichage. Prenez en charge les ordinateurs et les appareils tactiles. Affichez un message de remplacement clair si WebGPU n’est pas disponible. Testez les glissements appuyés, les relâchements répétés, tous les contrôles et les écrans étroits. Corrigez les problèmes d’instabilité de la physique, les défauts de géométrie et les artefacts visuels avant de livrer le fichier HTML final. Le résultat doit évoquer une petite expérience de confiserie tactile, réellement agréable à manipuler.