Pitaya Jelly

Crea una scena 3D interattiva chiamata “Pitaya Jelly”: una metà di frutto del drago composta da gelatina morbida e traslucida. Realizza l’intero progetto in un unico file HTML usando il rendering WebGPU reale e shader WGSL. Non usare modelli preconfezionati né risorse immagine. APPEARANCE Una grande metà di frutto del drago appoggiata con il lato tagliato rivolto verso l’alto su una superficie da studio chiara. Buccia color rosa lampone intenso, una sottile parte interna chiara e polpa bianca perlata. Circa 250 minuscoli semi neri distribuiti naturalmente sulla polpa. 12–14 petali carnosi della buccia intorno al frutto, con una transizione dalle basi rosa alle punte verdi. Una superficie lucida e umida, con rifrazione della luce, piccole bolle interne e una morbida ombra di contatto. Il materiale deve sembrare una caramella gommosa morbida, non plastica rigida. Mantieni i colori saturi senza alte luci bruciate. FISICA E INTERAZIONE Implementa una deformazione soft body reale usando una mesh volumetrica con connessioni elastiche e vincoli che preservano il volume, come XPBD. Gli utenti devono poter afferrare la polpa con il mouse o un dito, allungarla e rilasciarla. La deformazione deve concentrarsi intorno al punto afferrato, invece di limitarsi a traslare l’intero oggetto. Dopo il rilascio, il frutto deve oscillare, tremolare e recuperare gradualmente la forma originale. Rendi i petali della buccia trascinabili singolarmente. Devono essere più morbidi della polpa, piegarsi e tornare elasticamente alla posizione iniziale, rimanendo attaccati al frutto. I semi devono seguire la superficie deformata senza fluttuare via né sprofondare nella polpa. Mantieni stabile la simulazione durante le trazioni intense, con contatto con il pavimento e protezione contro gli elementi invertiti. DESIGN VISIVO Usa un’interfaccia da studio minimale e chiara, dall’estetica editoriale: ampio spazio bianco, bordi sottili, controlli discreti e nessuna decorazione superflua. In alto a sinistra: “MATERIAL STUDIES / NO. 019” Un grande titolo in corsivo con grazie, disposto su due righe: “Pitaya Jelly.” Sotto: “Un po’ selvatico.” “Un po’ dolce.” “Un drago molto morbido.” A destra, aggiungi un pannello fluttuante intitolato “THE SPECIMEN” contenente: Badge della densità: ρ 1.04 g/cm³. Tre preset: Pearl — polpa bianca e buccia rosa. Ruby — polpa color lampone e buccia rosa. Gold — polpa chiara e buccia dorata. Slider per la rigidità e lo smorzamento interno, con valori visibili. Pulsanti “Dagli una spinta” e “Ripristina”. Checkbox “¼ velocità” e “Mostra mesh”. Un pulsante “Pausa”. Includi anche: Un pulsante per la modalità a schermo intero con un’opzione per uscirne. Un indicatore di stato “WEBGPU · LIVE”. Letture in tempo reale di massa, percentuale del volume a riposo ed energia cinetica. Un breve suggerimento per l’interazione: “Tira la polpa. Tira un petalo. Lascia andare.” Una sezione comprimibile “Dentro l’esperimento” che spieghi con precisione l’implementazione. REQUISITI TECNICI Consegna un unico file autonomo chiamato pitaya-jelly-webgpu.html. Usa il rendering WebGPU effettivo, non un’imitazione in Canvas 2D. Costruisci tutta la geometria proceduralmente. Usa rifrazione sensibile allo spessore, riflessi Fresnel e un’illuminazione morbida da studio. Usa un timestep di simulazione fisso per garantire un comportamento coerente. Supporta l’interazione desktop e touch con un layout responsive. Evita la ricostruzione costosa della geometria o la compilazione degli shader durante il trascinamento. Mostra un messaggio di fallback chiaro quando WebGPU non è disponibile. Verifica il trascinamento, il rilascio, il recupero della forma, i preset, il ripristino, la pausa, lo schermo intero e il layout mobile. Le priorità principali sono un comportamento convincente da gelatina, materiali di grande effetto e un’interazione appagante. Il risultato deve sembrare un esperimento sui materiali curato e giocabile.