Cómo usar la transparencia en los materiales

Al crear ciertos tipos de superficie, como el agua o el cristal, se necesita la capacidad de hacer que la superficie no solo se vea a través de ella, sino también de darle una sensación de profundidad y color. En el mundo real, estas propiedades se conocen como Transparencia u Opacidad y a menudo se utilizan indistintamente para describir lo mismo. En Unreal Engine, Transparencia y Opacidad tienen dos significados distintos.

• La transparencia se utiliza para definir si se puede ver a través de una superficie.
• La opacidad se utiliza para definir el grado en que una superficie transmite la luz. En otras palabras, el valor de opacidad determina qué tan transparente u opaca (cómo de transparente/no transparente) es una superficie.

En el siguiente tutorial aprenderás todo lo que necesitas saber acerca de cómo utilizar la transparencia en tus materiales de Unreal Engine.

Trasparencia

Transparencia es el término utilizado para describir la capacidad de una superficie para bloquear o permitir el paso de la luz. Por ejemplo, un ladrillo es un objeto que no tiene transparencia. Un vitral transmite parte de la luz, pero no toda, por lo que es una superficie con transparencia. Puedes utilizar la transparencia para simular distintos tipos de superficies del mundo real, incluidas las que se enumeran a continuación.

• Cabello
• Cristal
• Agua
• Efectos visuales de humo o fuego
• Nubes
• Calcomanías de impacto
• Follaje

Trasparencia y opacidad

En Unreal Engine, la transparencia funciona al asignar a cada píxel un valor de Opacidad entre 0 y 1. Cuando la Opacidad es 1, la superficie es totalmente opaca, lo que significa que bloquea el 100 % de la luz que incide sobre ella. Cuando la Opacidad es 0, la superficie deja pasar toda la luz. Los valores de opacidad entre 0 y 1 producen píxeles parcialmente transparentes. La siguiente imagen muestra valores de opacidad que aumentan de 0 a 1 en una Malla estática.

También puedes definir la opacidad con una textura de escala de grises. La imagen de abajo muestra cómo una textura puede ayudar a definir qué partes de una malla deben tener transparencia y qué tan transparentes deben ser. La textura es un gradiente que va del negro en la parte superior (o totalmente transparente) al blanco en la parte inferior (o totalmente opaco). Las zonas del medio tienen un grado variable de opacidad en función de lo cerca del negro o del blanco que esté el píxel de la textura.

Cómo usar la transparencia en los materiales

Puedes configurar materiales transparentes mediante los siguientes pasos:

En este tutorial, se utilizan recursos del Contenido de inicio de Unreal Engine. Si no incluiste el contenido inicial en tu proyecto, lee la página Migración para obtener información sobre cómo mover contenido entre proyectos. De esta manera, puedes añadir el Contenido de inicio a tu proyecto actual y no tener que crear uno nuevo.

1. Primero haz clic derecho en el Explorador de contenido y selecciona Material en la sección Crear recurso básico del menú contextual.

   

2. Ponle al Material el nombre de TransparentMaterial y ábrelo haciendo doble clic en la miniatura del material en el Explorador de contenido. Se abrirá el Editor de materiales.

3. Haz clic en el fondo del gráfico de material para mostrar las propiedades del material en el panel Detalles. En la sección Material cambia el Modo de fusión de Opaco a Translúcido.

   
4. Ahora que el Modo de fusión se estableció correctamente, añade las siguientes Expresiones de material a tu gráfico. Puedes encontrar los nodos al escribir sus nombres en la barra de búsqueda de la paleta del Material. Cuando los encuentres, haz clic izquierdo y arrástralos de la paleta al gráfico de material.

   • Parámetro vectorial x 1

   • Parámetro escalar x 1

   

5. Cambia el nombre del nodo de Parámetro vectorial a BaseColor y dale un valor de color. Conecta la salida del nodo de Parámetro vectorial a la entrada Color base del Nodo principal de material.

6. Cambia el nombre del Parámetro escalar a Opacity y dale un valor predeterminado de 0,5. Conecta el Parámetro escalar a la entrada Opacidad en el Nodo principal del sombreador.

   

7. Haz clic en Aplicar y, luego en Guardar en la barra de herramientas del Editor de materiales para compilar el Material y guardar el recurso.

   

8. Encuentra el recurso TransparentMaterial en el Explorador de contenidos, haz clic derecho en la miniatura y selecciona Crear instancia de material en el menú contextual.

   

9. Dentro del Explorador de contenidos, navega a la carpeta Formas en el Contenido de inicio. Haz clic izquierdo y arrastra la Malla estática Shape_Sphere al viewport y suelta el botón izquierdo del mouse para hacerla aparecer en el nivel.

   

10. Encuentra el recurso TransparentMaterial_Instance en el Explorador de contenidos. Haz clic izquierdo y arrastra la instancia de material a la esfera y suelta el botón izquierdo del mouse para añadirla a la malla.

    

11. Abre la Instancia de material al hacer doble clic en ella en el Explorador de contenidos. En el Editor de instancias de material, sobreescribe el parámetro OpacityAmount al marcar la casilla junto al nombre del parámetro. Una vez que esté habilitado puedes ajustar el valor de OpacityAmount para cambiar cuán transparente será el objeto.

Trasparencia y reflejos

Los objetos que utilizan la transparencia pueden mostrar reflejos de escena si se establecen las siguientes opciones. Sin embargo, ten en cuenta que tener muchos Materiales translúcidos con reflejos habilitados pueden provocar problemas de rendimiento.

1. Abre el TransparentMaterial que se creó anteriormente al hacerle doble clic en el Explorador de contenidos. En la categoría Translucidez del panel Detalles, cambia el Modo de iluminación de Volumétrica no direccional a Volumen de translucidez de la superficie.

   

2. Dentro del gráfico de material, selecciona el parámetro OpacityAmount y duplícalo dos veces al presionar CTRL + D en el teclado. Cuando termines, tu gráfico de material debería verse de la siguiente manera.

   

3. Cambia el nombre de los nuevos nodos de Expresión de material a Metálica y Rugosidad. Establece el valor predeterminado de la Expresión de material Metálica en 1,0 y el de *Rugosidad en 0. Luego, conecta cada nodo de Expresión de material a la entrada correspondiente en el Nodo principal de material.

   

4. Haz clic en Aplicar y Guardar en la barra de herramientas del Editor de materiales y, luego, cierra el Editor de materiales.

   

5. Ahora deberías poder ver reflejos en las esferas de tu nivel.

   

Al ajustar los parámetros de la Instancia de material puedes hacer que la transparencia tenga resultados de aspecto completamente diferentes.

Transparencia tintada o coloreada

Con el modelo de sombreado Transparente fino y la expresión de material, puedes representar con precisión materiales transparentes tintados y coloreados, como cristal y plásticos coloreados. Este modelo de sombreado permite obtener brillos especulares blancos con un color de fondo correctamente tintado para superficies transparentes.

El siguiente es un ejemplo de gráfico de material de un material Translúcido fino.

Haz clic en la imagen para ampliarla.

Configura el Material con las siguientes propiedades del panel Detalles:

• Cambia el Modo de fusión a Translúcido.
• Cambia el Modelo de sombreado a Translúcido fino.
• En la categoría Translucidez, cambia el Modo de iluminación a Sombreado frontal de superficie.

Añade una expresión de Material translúcido fino al gráfico y conecta un Constant3Vector o un Parámetro vectorial en la entrada. Este nodo controla el tinte de color de la superficie transparente.

Sombras de colores translúcidos

En algunos casos, los materiales translúcidos pueden proyectar sombras de colores con transmisión de luz. La cantidad de luz que pasa a través del Material lo determinan sus valores de opacidad y la cantidad de luz que se proyecta sobre el Material.

Actualmente, las sombras de colores translúcidos solo pueden conseguirse con Iluminación estática y Lightmass.

Para obtener más información y ejemplos de uso, consulta Uso de sombras de colores translúcidos.

Trasparencia y rendimiento

La transparencia, en especial la transparencia iluminada, puede convertirse rápidamente en un obstáculo para el rendimiento si hay demasiados objetos transparentes en una escena. El término utilizado para describir este problema es sobredimensión. La sobredimensión se produce cuando hay muchos objetos con transparencia que se renderizan unos encima de otros. La razón por la que la sobredimensión provoca este problema de rendimiento es que el costo de renderizado de la transparencia se vuelve más y más caro para cada capa sucesiva de transparencia que se introduce.

Para ayudarte a identificar mejor si este problema está ocurriendo y dónde, Unreal Engine tiene un modo de vista especial llamado modo Complejidad del sombreador. El modo de Complejidad del sombreador te muestra lo compleja que es de renderizar una superficie determinada al utilizar colores para mostrar la complejidad. Cuanto más verde se vea, menos costará renderizar. Cuanto más rojo se vea, más costoso será renderizar ese cuadro. Usa los siguientes pasos para activar el modo de visualización Complejidad del sombreador.

1. Para habilitar la Complejidad del sombreador, haz clic en la opción Modo de visualización en la parte superior del viewport del Editor. De forma predeterminada, el modo de visualización está establecido en Con iluminación.

   

2. Selecciona la opción Complejidad del sombreador del menú contextual.

   

3. Luego de activar el modo de visualización Complejidad del sombreador, el viewport del nivel debería verse como en el siguiente video.

La sobredimensión se demuestra muy claramente en el video cuando la cámara gira alrededor de las esferas transparentes del nivel. Cuando las esferas se muestran una al lado de la otra, no hay sobredimensión y el viewport es mayoritariamente verde. Cuando las seis esferas están en la misma línea de visión, las áreas con mayor superposición se vuelven de color rojo brillante para indicar sobredimensión. Aunque no es posible ni aconsejable eliminar la sobredimensión al cien por ciento, este modo de visualización puede ser muy útil para averiguar exactamente de dónde proceden los problemas de rendimiento.

Prioridad de orden de translucidez

Cuando hay varios objetos transparentes juntos en una escena, puede que notes que el motor a veces tiene problemas para determinar qué objeto renderizar delante o detrás de los otros objetos transparentes. El siguiente ejemplo lo demuestra con los Materiales anteriores y los VFX de vapor iluminado del Contenido inicial.

Observa como el vapor se renderiza inicialmente delante de las mallas y de repente aparece detrás de cada esfera. Para evitar que esto ocurra, es necesario establecer la Prioridad de orden de translucidez para que los VFX del humo se rendericen siempre por encima de las demás translucencias de la escena. Para cambiar la Prioridad de orden de translucidez en los VFX, haz lo siguiente.

1. Primero selecciona el objeto o los objetos que quieres renderizar sobre el resto de Translucencias del nivel. En este caso, selecciona el sistema de partículas VFX.

   

2. En el panel Detalles, ve a la sección Renderización y despliega la subcategoría Avanzado.

   

3. En la nueva lista de opciones, busca Prioridad de orden de translucidez e ingresa un valor de 100.

   

   De forma predeterminada, todo lo que se añada al nivel tiene una Prioridad de orden de translucidez de 0. Si quieres que algo transparente se sitúe siempre por encima de todo lo transparente, utiliza números positivos. Si quieres que algo transparente se sitúe siempre detrás de todo lo transparente, utiliza números negativos.

4. Ahora echa un vistazo a los VFX de vapor en la escena. Con una Prioridad de orden de translucidez establecida en 100, el vapor siempre se dibujará encima de los otros objetos translúcidos.

5. Establecer la Prioridad de orden de translucidez en -100 hace que el vapor siempre se sitúe detrás de otros objetos translúcidos.

Aunque ajustar la Prioridad de orden de translucidez puede solucionar el problema de orden en el nivel, podría generar nuevos problemas de orden al generar efectos u objetos durante el juego. Debido a esto, es una buena idea definir qué número de Prioridad de orden de translucidez usar y dónde. Por ejemplo, podrías decir que todos los efectos que aparezcan tendrán una Prioridad de orden de translucidez de 100. Entonces, si hay algunos problemas de orden en el nivel, puedes ajustar los objetos en los niveles de Prioridad de orden de translucidez para que sea cualquier número hasta 99. De esta manera, los efectos de juego generados siempre se renderizarán encima de todo lo demás sin importar que Prioridad de orden de translucidez tengan los objetos en el nivel.

Conclusión

La transparencia es una herramienta muy poderosa que puede ayudarte a dar vida a tus proyectos 3D. Recuerda intentar mantener la cantidad de objetos transparentes que utilizan reflejos al mínimo siempre que sea posible, ya que esto puede afectar fácilmente al rendimiento. Por último, asegúrate de comprobar regularmente el modo Complejidad del sombreador tanto en el editor como durante el juego para garantizar que la sobredimensión de la transparencia se mantenga al mínimo.