Questo liquido sembra in rilievo, ma la pagina resta piatta

Trascinando il dito nella demo di Misaki Nakano, il liquido si gonfia, si sposta e lascia una traccia sottile sulla superficie. Le creste sembrano avere un volume, ma la geometria resta piatta. Nella guida pubblicata il 1° novembre, la sviluppatrice ricostruisce un effetto realizzato nel 2021 per un progetto dedicato al fondotinta, usando three.js e shader.

La simulazione dei fluidi produce una mappa delle velocità: in ogni punto indica direzione e intensità del movimento. Una seconda texture conserva lo spessore. A ogni fotogramma, lo shader usa la velocità per risalire alla posizione da cui arriva il materiale, preleva lì lo spessore e aggiorna quello del pixel corrente. Due buffer si alternano per leggere il risultato precedente e scrivere quello nuovo.

Lo spessore da solo non basta. Quando il liquido si assottiglia, il colore dovrebbe restare un po’ visibile, come quando si spalma un cosmetico. Nakano aggiunge perciò una mappa dell’opacità che ricorda il massimo raggiunto in passato e lo combina con lo spessore presente. La traccia non sparisce appena il materiale si sposta: è una memoria visiva, non un calcolo dell’assorbimento o dell’asciugatura.

Il rilievo nasce invece confrontando lo spessore di ogni pixel con quello dei vicini. Da queste differenze lo shader ricava l’orientamento apparente della superficie, cioè le normali, e lo usa per scegliere colori e riflessi da una texture Matcap. L’occhio vede una gobba perché la luce cambia come se ci fosse una gobba, senza che i vertici vengano sollevati.

La guida rende visibili anche i compromessi. Con texture a 8 bit lo spessore ha solo 256 livelli per canale, e l’illuminazione mostra gradini che si attenuano passando ai 32 bit in virgola mobile. Il metodo inoltre non conserva esattamente il volume: girando in cerchio si può far aumentare il liquido. È una costruzione regolata per ottenere un aspetto convincente, con i suoi trucchi lasciati bene in vista.