¿Qué es el mapeado por paralaje?

El mapeado por paralaje es una técnica que aumenta la profundidad y el detalle de las superficies texturizadas para elementos gráficos generados por ordenador.
El mapeado por paralaje es una herramienta muy empleada para crear la ilusión de detalles en las superficies sin añadir polígonos extra a un modelo en 3D. Esta tecnología permite que las texturas revelen irregularidades, como bultos y abolladuras, cuando se ven desde distintos ángulos.

a textured bluetooth speaker
Aunque el mapeado por paralaje es una función avanzada, se puede implementar fácilmente con las herramientas de modelado en 3D adecuadas. En esta guía, explicaremos cómo funciona el mapeado por paralaje, hablaremos de unas cuantas técnicas y explicaremos sus aplicaciones prácticas.

Introducción al mapeado por paralaje

¿Qué es un mapa de paralaje?

Un mapa de paralaje es un tipo de textura que explica la profundidad o la altura de los detalles de una superficie, de forma parecida a un mapa topográfico.

Por ejemplo, si miras una imagen en 3D de un muro de ladrillo, se verá lisa sin efectos especiales. Pero el mapeado por paralaje hace que el muro de ladrillo parezca más realista al añadir líneas de lechada hendidas en la imagen lisa. Esta tecnología “engaña” al ojo mediante la manipulación de texturas para que parezcan tridimensionales en un espacio bidimensional.

Esta tecnología tiene muchísimas aplicaciones, entre las que se incluyen las siguientes:

  • Videojuegos
  • Películas y animación
  • Realidad virtual y realidad aumentada
  • Diseño web

Fundamentos de la percepción de la profundidad

Los ojos y el cerebro colaboran para procesar información visual y percibir la profundidad. El cerebro determina la profundidad con señales binoculares, que comparan las imágenes de cada ojo para crear una imagen cohesionada, lo cual ayuda a determinar la profundidad.

Sin embargo, también podemos determinar la profundidad con un solo ojo, gracias a las señales monoculares. La perspectiva, la sombra, el tamaño relativo y los gradientes de textura le transmiten al cerebro información importante sobre la profundidad.

El mapeado por paralaje funciona debido a la forma en la que el cerebro humano percibe la profundidad. Cuando te mueves, los objetos más cercanos cambian más que los que están lejos. El mapeado por paralaje utiliza este principio para conseguir que las texturas de los objetos cambien en respuesta a tu ángulo de visión, que simula la profundidad que tu cerebro espera ver.

Por ejemplo, al circular en un coche, los árboles cercanos parecen pasar rápidamente, mientras que las montañas lejanas se “mueven” con lentitud. Esta diferencia en el movimiento transmite una sensación de profundidad. El mapeado por paralaje imita esta experiencia haciendo que los detalles cercanos se muevan algo más, lo que genera la ilusión de profundidad en una superficie plana.

Texturas de paralaje

Las texturas de paralaje también se llaman “mapas de altura” o “mapas de desplazamiento”. Son imágenes en escala de grises en las que los tonos de gris representan la altura de los detalles de la superficie. En las zonas elevadas, se emplea un tono más claro y, en las más bajas, tonos más oscuros.

Estas texturas permiten dar profundidad a superficies que, de otro modo, serían planas, sin tener que añadir más polígonos. De esta forma, se consigue que las imágenes sean más realistas sin perjuicio de la velocidad ni de los tiempos de carga.

El mapeado por paralaje utiliza texturas para establecer una referencia de cómo debería cambiar cada elemento de la textura principal en función del ángulo de visión. El algoritmo del mapa interpreta los valores de la escala de grises de la textura de paralaje para crear una imagen más realista.

Creación de texturas de paralaje

Para generar una textura de paralaje, sigue estos pasos:

  1. Parte de una imagen base: esta es una imagen con una textura en 2D de la superficie que quieres replicar como, por ejemplo, ladrillos, azulejos o piedra.
  2. Determina la altura: visualiza qué partes de la textura deben estar a mayor altura y cuáles a una menor.
  3. Ponla en escala de grises: usa un editor de gráficos para pintar las áreas con tonos de gris (claro para las zonas elevadas y más oscuro para las que tengan una menor altura).
  4. Perfecciona el diseño: difumina la textura y dale y contraste para generar transiciones más fluidas entre todas las áreas.

Tampoco tienes por qué hacer todo esto manualmente. Adobe Photoshop incluye herramientas para crear y perfeccionar imágenes en escala de grises. Adobe Substance 3D es una herramienta más avanzada que permite crear texturas de paralaje con solo unos clics.

Técnicas de mapeado por paralaje

Funcionamiento del mapeado por paralaje

El funcionamiento del mapeado por paralaje se basa en varios principios subyacentes:

  • El desplazamiento de la textura: el mapeado por paralaje funciona mediante el desplazamiento de las coordenadas de la textura. Cambia la posición de las muestras de la textura en función de la perspectiva desde la que se contempla para generar la ilusión de profundidad.
  • Mapas de altura y de desplazamiento: el mapeado por paralaje utiliza un mapa en escala de grises para orientar el grado de desplazamiento de la textura.
  • Ángulo de visión: el efecto del mapeado por paralaje cambia en función del ángulo de visión de la superficie. El desplazamiento se va ajustando a medida que cambia el ángulo para simular una superficie en 3D.

Imagina que estás mirando un libro abierto. Cada página representa una capa de profundidad en una textura. Si miras el libro directamente en un ángulo de 90°, podrás ver cada página con claridad. Ahora bien, si inclinas el libro, las páginas que tengas más cerca taparán a las que están más lejos. El mapeado por paralaje simula este efecto en las texturas bidimensionales mediante un mapa de altura para indicar cuáles son las texturas que tienes más cerca o más lejos.

Guía paso a paso para el mapeado por paralaje

El mapeado por paralaje es una técnica avanzada, pero hay herramientas como Substance 3D que te la ponen fácil. Si estás empezando a usarlo a un nivel básico, sigue estos consejos:

  • Comienza con una textura: podría ser un muro de ladrillo, un camino empedrado o un suelo de baldosas.
  • Crea un mapa de altura: utiliza un software como Photoshop para convertir la textura a escala de grises.
  • Utiliza un motor gráfico: la mayoría de los motores gráficos, como Unity, admiten el mapeado por paralaje. Importa la textura principal y el mapa de altura.
  • Aplica el sombreador de mapeado por paralaje: asigna un sombreador o materiales para añadir un mapeado por paralaje a la textura y vincularla al mapa de altura.
  • Ajusta los parámetros: ajusta la intensidad del efecto de paralaje para lograr la ilusión de profundidad que buscas.
  • Contempla desde ángulos distintos: desplaza la cámara para ver cómo se ajusta la textura a medida que cambias de ángulo.

Estos son unos breves consejos para que te pongas manos a la obra, pero no tengas miedo de experimentar por tu cuenta con el mapeado por paralaje.

Ventajas del mapeado por paralaje

El mapeado por paralaje aporta muchas ventajas, entre las que se incluyen las siguientes:

  • Mayor realismo: el mapeado por paralaje confiere a las imágenes un aspecto más táctil para simular experiencias de la vida real.
  • Inmersión emocional: esta mejora del realismo repercute sobre la narrativa de los videojuegos y las animaciones, al darle vida a las historias.
  • Optimización del rendimiento: el mapeado por paralaje aumenta la sensación de profundidad mediante la manipulación de texturas sin tener que añadir más polígonos. El renderizado se agiliza muchísimo, lo que viene muy bien para aplicaciones en tiempo real como es el caso de los videojuegos.

Aplicaciones prácticas

El mapeado por paralaje es útil para muy diversas aplicaciones como, por ejemplo:

  • Videojuegos, incluida la realidad virtual
  • Modelos arquitectónicos
  • Visualización de productos para fabricantes y comercios minoristas

Del 2D al 3D: mapeado por paralaje en Substance 3D

El mapeado por paralaje revolucionó todo lo que abarca desde los videojuegos hasta el diseño web. Esta tecnología insufla vida en los diseños y aumenta mucho el detallismo de las imágenes planas en 2D.

La mejor forma de comprobar de lo que es capaz el mapeado por paralaje es probarlo en tus propios diseños. Prueba Adobe Substance 3D para crear gráficos impresionantes e intrincados que se salgan de la pantalla.

Preguntas frecuentes

¿EN QUÉ SE DIFERENCIAN EL MAPEADO DE RELIEVE Y EL DE PARALAJE?

Ambas técnicas simulan la profundidad en una superficie sin aumentar la geometría. Sin embargo, el mapeado de relieve utiliza mapas de relieve en escala de grises para simular los altibajos de una textura, lo que afecta a la forma en que refleja la luz. El mapeado de relieve parece plano cuando lo miras desde un ángulo.

El mapeado por paralaje va más allá al desplazar las coordenadas de la textura en función de la perspectiva desde la que esta se contempla, lo que dota a las texturas de una mayor profundidad.

¿EN QUÉ SE DIFERENCIAN LOS MAPAS DE NORMALES Y LOS DE PARALAJE?

Los mapas de normales utilizan colores RGB para representar la dirección de las normales sobre una superficie, lo que genera la ilusión de una superficie compleja. En cambio, un mapa de paralaje es una imagen en escala de grises que representa la altura de los detalles superficiales.

¿QUÉ HACE EL MAPEADO DE OCLUSIÓN POR PARALAJE?

El mapeado de oclusión por paralaje (POM, por las siglas en inglés de “parallax occlusion mapping”) simula el autosombreado de una superficie para crear una ilusión de profundidad realista. Rastrea los rayos de luz desde el punto de vista a través de un mapa de altura hasta que impactan sobre una superficie, lo que permite renderizar detalles sobre esta.

¿AFECTA EL PARALAJE AL RENDIMIENTO?

Sí. Es más eficiente que añadir polígonos, pero aun así, requiere más potencia computacional que una textura simple. El mapeado por paralaje básico afecta poco al rendimiento, pero usar técnicas más avanzadas como el mapeado de oclusión consume más recursos informáticos.

https://main--cc--adobecom.hlx.page/cc-shared/fragments/products/substance3d/bottom-blade-cta-s3d-collection