Fetta di agrume gommosa 3D interattiva

Crea una splendida fetta di agrume gommosa 3D interattiva usando WebGPU. Fornisci l’esperienza completa in un unico file HTML standalone, con JavaScript e shader WGSL incorporati. Deve essere una vera simulazione 3D in tempo reale, non un video, un’immagine o un’animazione in loop. APPEARANCE Crea una spessa fetta d’arancia semicircolare, con polpa traslucida e succosa, otto spicchi distinti, delicate membrane interne, minuscole bolle, uno strato chiaro di albedo e una morbida buccia arancione. Falla sembrare una caramella gommosa di alta qualità: colore intenso, riflessi lucidi, luce che attraversa la polpa, rifrazione convincente e morbide ombre di contatto. Evita un bloom eccessivo, colori slavati o un aspetto di plastica rigida. Usa uno sfondo da studio caldo e chiaro e un’interfaccia editoriale pulita, con ampi spazi vuoti. Aggiungi il grande titolo serif in corsivo “Citrus Jelly”. Mantieni i controlli compatti e la fetta ben visibile. FISICA DEL CORPO DEFORMABILE La sensazione gelatinosa è l’aspetto più importante. - Afferra qualsiasi punto della fetta con il mouse o con un dito. - Tirala, sollevala, allungala, ruotala e rilasciala. - Rendi la deformazione locale: tirando un bordo, la polpa vicina deve allungarsi mentre il resto segue in modo naturale. - Dopo il rilascio, la fetta deve oscillare, superare temporaneamente la posizione di equilibrio e recuperare gradualmente la forma originale. - Includi gravità, inerzia, smorzamento, collisioni con il terreno e rimbalzi morbidi. - Mantieni approssimativamente il volume e impedisci alla mesh di collassare o di rovesciarsi dall’interno verso l’esterno. - Rendi la buccia leggermente più rigida della polpa. - Gli spicchi interni, le membrane e le bolle devono seguire la deformazione senza fluttuare fuori dal corpo. Usa un solver volumetrico stabile per corpi deformabili, ad esempio una mesh tetraedrica con vincoli XPBD. Non simulare la morbidezza scalando o ruotando l’intero oggetto. CONTROLS Includi tre preset colore: Arancia, Limone e Rubino. Aggiungi: - Slider della consistenza. - Slider dello smorzamento interno. - Pulsante “Dalle una spinta”. - Pulsante di ripristino. - Casella di selezione della velocità a un quarto. - Casella di selezione per mostrare la mesh. - Pulsante di pausa/ripresa. Mostra piccoli valori aggiornati in tempo reale per la massa, la percentuale del volume a riposo e l’energia cinetica. REQUISITI TECNICI Usa un rendering WebGPU autentico con shader WGSL. Genera proceduralmente tutta la geometria e tutti i dettagli visivi, senza modelli importati o file immagine. Mantieni gli aggiornamenti della simulazione indipendenti dalla frequenza dei fotogrammi del rendering. Supporta dispositivi desktop e touch. Mostra un messaggio chiaro di fallback se WebGPU non è disponibile. Testa trascinamenti energici, rilasci ripetuti, tutti i controlli e gli schermi stretti. Risolvi i problemi di instabilità della fisica, la geometria danneggiata e gli artefatti visivi prima di consegnare il file HTML finito. Il risultato deve trasmettere la sensazione di un piccolo esperimento tattile con una caramella, davvero appagante da manipolare.