Para simular el comportamiento de la base líquida en un navegador web, la desarrolladora Misaki Nakano implementó un sistema que prioriza la estética visual sobre la precisión física estricta. En lugar de deformar la geometría 3D para crear bultos y crestas, el efecto utiliza una simulación de fluidos para generar un mapa de velocidad. Este mapa dicta cómo se mueven los valores de 'grosor' a través de una superficie. Estos valores se almacenan en un mapa de altura, donde cada píxel representa la cantidad de líquido presente en esa coordenada específica. Al rastrear la velocidad hacia atrás desde un píxel actual hasta su posición de origen, el sistema actualiza el mapa de altura para simular el abultamiento y la tracción del líquido a medida que un usuario desliza un dedo o el ratón sobre él.
Este diagrama explica el proceso de múltiples pasos de uso de mapas de velocidad, altura y alfa para simular el comportamiento de los líquidos.
Esta imagen aclara cómo el mapa de altura funciona como una estructura de datos para el volumen del líquido.
Debido a que un mapa de altura por sí solo no puede capturar perfectamente los rastros delgados que deja el líquido al extenderse, se utiliza un mapa alfa secundario para mantener la continuidad visual. Este mapa rastrea el máximo grosor histórico registrado en cada posición. Incluso cuando el grosor actual en el mapa de altura cae hacia cero, el mapa alfa preserva una parte del color, haciendo que el líquido parezca adherirse a la superficie. Para proporcionar reflejos y sombreados realistas, el sistema calcula las normales de la superficie directamente dentro de un fragment shader muestreando los píxeles vecinos en el mapa de altura. Estas normales se utilizan luego con una textura Matcap para renderizar la apariencia final de la superficie del líquido.
Esta imagen demuestra la necesidad del mapa alfa para mantener los rastros visuales a medida que el líquido se extiende.
Una desventaja técnica significativa en este enfoque es la falta de conservación de volumen. Debido a que el sistema utiliza un algoritmo de rastreo hacia atrás para actualizar el grosor, múltiples píxeles pueden muestrear la misma región de origen simultáneamente. Esto crea un sesgo de muestreo donde la cantidad total de líquido no se preserva perfectamente; por ejemplo, dibujar en movimientos circulares puede hacer que el líquido parezca acumularse y aumentar en volumen. Además, la desarrolladora señaló que la precisión de la textura es crítica para la calidad visual: el uso de texturas de 8 bits da como resultado 'pasos' visibles en el sombreado, mientras que se requieren texturas de punto flotante de 32 bits para producir los contornos suaves necesarios para una simulación cosmética de alta calidad.
Esta imagen ilustra el sesgo de muestreo donde los movimientos circulares hacen que el líquido parezca acumularse.
Esta comparación destaca el requisito técnico de texturas de alta precisión para lograr un sombreado suave.