Pixi.js es una libreria de Javascript que asegura ser el interprete de 2D WebGL más rápido y flexible. Y qué significa eso? pues que te ayuda a desplegar y gestionar gráficos interactivos. Esto es especialmente útil para gráficas en el navegador. En mi caso, lo he usado para dara la ilusión de profundidad a una pintura, es decir, dotar de volumen a una imagen 2D.
Tradicionalmente, para lograr este efecto se divide la imagen en capas, de acuerdo a la profundidad de cada una. Estas diferentes capas son las que se mueven con diferentes velocidades dando la ilusión de profundidad. La capa que se mueve a una velocidad más lenta y cubre distancias más cortas, dará el efecto de estar más cerca del observador.
Para este ejemplo he usado una técnica que se basa en la misma lógica de capas, pero más fácil de generar, llamada Mapa de Profundidad.
Qué es un Mapa de Profundidad?
Simplemente es un archivo en blanco y negro que determina las distancias aplicadas a una imagen 2D. Es decir, es un archivo de imagen que determina la profundidad de una imagen usando un rango de colores entre blanco y negro. Los tonos más cercanos al color blanco, son tonos más «lejanos», y mientras más se mueven hacia el color negro son más «cercanos». Entonces el color negro corresponde a las zonas más próximas al frente, tal como muestra la imagen. Este mapa de profundidad lo he realizado usando Photoshop y una Wacom, y si bien es bastante trabajo, sirve para entender en detalle cómo funciona un mapa de profundidad.
Ya teniendo el Mapa de Profundidad, sólo se deben cargar dos imágenes, el Original y el Mapa de Profundidad, reduciendo el tiempo de carga del navegador significativamente comparado a un efecto generado con capas de transparencia. Para lograrlo hay una pieza de Javascript que hace todo el trabajo pesado, aquí entra Pixi.js.
En la segunda parte comenzaré por mostrar y explicar el resultado a nivel de código, pero mientras tanto puedes ver el resultado a continuación. La idea es mover el mouse dentro del recuadro para lograr ver la imagen con cierto volumen.
La idea es mover el mouse dentro del recuadro para ver el efecto del mapa de desplazamiento que se ha aplicado a la imagen.