Meduse dorate degli abissi

Crea una pagina web interattiva con meduse in Three.js. Su uno sfondo oceanico luminoso al centro e blu profondo ai bordi, mostra 6–10 meduse dorate e traslucide che ruotano lentamente e pulsano verso l'alto; almeno tre devono rimanere sempre visibili e qualsiasi medusa oltrepassi il limite superiore deve rientrare dal basso. Ogni medusa presenta strisce radiali arancioni e bianco crema, macchie, una luminescenza interna e un bordo traslucido ben definito; i bracci orali arricciati sono visibili attraverso l'ombrello. Quando l'ombrello si contrae, il suo bordo si espande visibilmente verso l'esterno.

Ogni medusa è composta da uno strato interno e uno esterno dell'ombrello, una morbida gonnellina, 20 tentacoli sottilissimi e 4 bracci orali arricciati. L'ombrello si contrae periodicamente e la gonnellina, i tentacoli e i bracci orali seguono un sistema stabile di fisica a molle Verlet: non usare animazioni preregistrate. Tutto il movimento si basa su un unico clock fisico unificato; limita gli intervalli di frame troppo lunghi e usa un numero sufficiente di sotto-passaggi affinché la simulazione non diverga né si sposti dalla posizione durante esecuzioni prolungate.

Aggiungi allo sfondo caustiche soffuse, finte cortine di luce volumetrica e plancton scintillante, resi con bloom delicato e tone mapping ACES per un'illuminazione da abissi. Gestisci correttamente l'ordinamento dei livelli trasparenti e l'anti-aliasing affinché i tentacoli restino continui e nitidi. Quando il mouse si avvicina a una medusa, le sue pulsazioni accelerano, la luminescenza si intensifica e i tentacoli ricevono una lieve spinta. Supporta il trascinamento del mouse per ruotare la visuale e la rotellina per lo zoom, con distanza di visualizzazione e angolo di inclinazione limitati. Sostituisci le meduse dorate con 15–20 pesci tropicali luminosi blu-verdi. Mantieni la fisica a molle Verlet per il movimento della coda e delle pinne e fai sì che il banco giri lentamente nella scena evitando le collisioni. Usa WebGL2 con modelli e materiali procedurali. Niente WebGPU, modelli esterni, audio, pannello di controllo o passaggio tra più scene. Fornisci una pagina web statica eseguibile direttamente, con le dipendenze incluse localmente. Segui l'approccio visivo e fisico di Aurelia e conserva le note di attribuzione e licenza per tutto il codice e gli algoritmi utilizzati; se riusi l'opera originale o l'algoritmo delle caustiche di Dave Hoskins, mantieni la relativa attribuzione di licenza.

Crea una pagina web interattiva con meduse in Three.js. Su uno sfondo oceanico luminoso al centro e blu profondo ai bordi, mostra 6–10 meduse dorate e traslucide che ruotano lentamente e pulsano verso l'alto; almeno tre devono rimanere sempre visibili e qualsiasi medusa oltrepassi il limite superiore deve rientrare dal basso. Ogni medusa presenta strisce radiali arancioni e bianco crema, macchie, una luminescenza interna e un bordo traslucido ben definito; i bracci orali arricciati sono visibili attraverso l'ombrello. Quando l'ombrello si contrae, il suo bordo si espande visibilmente verso l'esterno.

Ogni medusa è composta da uno strato interno e uno esterno dell'ombrello, una morbida gonnellina, 20 tentacoli sottilissimi e 4 bracci orali arricciati. L'ombrello si contrae periodicamente e la gonnellina, i tentacoli e i bracci orali seguono un sistema stabile di fisica a molle Verlet: non usare animazioni preregistrate. Tutto il movimento si basa su un unico clock fisico unificato; limita gli intervalli di frame troppo lunghi e usa un numero sufficiente di sotto-passaggi affinché la simulazione non diverga né si sposti dalla posizione durante esecuzioni prolungate.

Aggiungi allo sfondo caustiche soffuse, finte cortine di luce volumetrica e plancton scintillante, resi con bloom delicato e tone mapping ACES per un'illuminazione da abissi. Gestisci correttamente l'ordinamento dei livelli trasparenti e l'anti-aliasing affinché i tentacoli restino continui e nitidi. Quando il mouse si avvicina a una medusa, le sue pulsazioni accelerano, la luminescenza si intensifica e i tentacoli ricevono una lieve spinta. Supporta il trascinamento del mouse per ruotare la visuale e la rotellina per lo zoom, con distanza di visualizzazione e angolo di inclinazione limitati. Rendi selezionabile ogni medusa. Al clic, metti in pausa il suo movimento e mostra una scheda informativa con il nome della specie, la profondità dell'habitat e due brevi curiosità scritte per un pubblico generale. Usa WebGL2 con modelli e materiali procedurali. Niente WebGPU, modelli esterni, audio, pannello di controllo o passaggio tra più scene. Fornisci una pagina web statica eseguibile direttamente, con le dipendenze incluse localmente. Segui l'approccio visivo e fisico di Aurelia e conserva le note di attribuzione e licenza per tutto il codice e gli algoritmi utilizzati; se riusi l'opera originale o l'algoritmo delle caustiche di Dave Hoskins, mantieni la relativa attribuzione di licenza.