Editor Essentials

All content in this course uses:

Crea un efecto facial en AR agregando una malla 3D y aplicando tanto un tinte de color como texturas detalladas al rostro.

Add a face texture spanish

Una de las características más comunes de las aplicaciones de filtros faciales en AR (Realidad aumentada) es la capacidad para cubrir la cara del usuario con un nuevo material o una nueva textura. Esto se puede usar para aplicar una máscara graciosa o visualizar el diseño de un tatuaje. 

Agregar una superposición de malla en 3D que abarque la cara del usuario.

Aplicar un tinte de color simple a la superposición facial.

Aplicar una textura más compleja a la superposición facial.

En el tutorial anterior, seguiste el proceso para crear un filtro facial simple. En este tutorial, harás lo siguiente:

Agregar una textura personalizada al filtro facial que creaste.

Explorar el GameObject Face_Reference_Mesh. 

Crear una textura personalizada para mostrarla sobre la cara. 

Explorar las prácticas recomendadas para la creación de texturas personalizadas. 

 Descripción general

AR Default Face (Cara predeterminada en AR)

 es que solo se hace visible cuando la aplicación está en ejecución y se detecta una cara. Esta restricción convierte la depuración y la iteración de diseño en tareas tediosas, ya que es necesario crear el proyecto para ver los resultados.

Para resolver este problema, AR Foundation ofrece un modelo que está incluido en los Assets (Recursos) que importaste anteriormente (Face_Reference_Mesh). Una 

 es un modelo en 3D. Puedes colocar el GameObject Face Reference Mesh (Malla de referencia facial) en la Scene (Escena) para utilizarlo como marcador de posición mientras experimentas con diferentes texturas, accesorios y efectos.

Sigue estas instrucciones para agregar el GameObject Face Reference Mesh a la Escena:

Si aún no lo has hecho, abre el proyecto de modelo de AR en Unity y luego abre la Escena BasicFaceFilter.

desde la ventana Project a la ventana Hierarchy (Jerarquía) o a la vista de Escena.

Para ver bien la malla de cara, haz doble clic en Face_Reference_Mesh en la ventana Hierarchy. De esta manera, la malla se mostrará resaltada en la vista de Escena.

¿Cómo agregar la malla de referencia facial?

 (también conocido como Albedo) representa el color que tiene un objeto antes de que cualquier luz entre en contacto con él. Una de las características más divertidas de la creación de filtros faciales en AR es que te permite diseñar nuevos estilos para tu cara. ¡Es hora de crear un nuevo look!

Sigue estas instrucciones a fin de crear un nuevo material para tu filtro: 

  Haz clic derecho en la carpeta y selecciona 

 en el menú contextual para crear un nuevo material.

  Asigna el nombre «FaceTexture» al nuevo material.

  En la ventana Inspector, haz clic en el selector de objetos (ícono del círculo) ubicado junto a la propiedad 

 y selecciónala. La imagen que seleccionaste ahora está aplicada al material como el mapa de color (Albedo).

  En la ventana Hierarchy, selecciona el ícono desplegable (flecha) que está a la izquierda del GameObject 

 para mostrar los GameObjects secundarios. 

 para aplicar el material.  En la vista de Escena, el patrón de olas ahora estará visible en el GameObject 

¿Cómo crear un nuevo material?

Cuando seleccionas un color en la propiedad Base Map, este se aplica como color liso al material. Si también agregas una textura en la propiedad Base Map, el color seleccionado se usa como tinte en la textura de la imagen.

Sigue estas instrucciones para cambiar el tinte de la propiedad Base Map:

  En la ventana Project, selecciona el material 

  En la ventana Inspector, haz clic en el selector de color de la propiedad 

 Utiliza los selectores de la ventana de diálogo Color para cambiar el color del tinte.

  Experimenta con diferentes colores y selecciona un tinte que te guste. Si quieres quitar el tinte, cambia el color a blanco.

¿Cómo asignar un tinte al material?

La transparencia de un material depende de la información disponible en su canal Alpha (Alfa). 

 son mapas en escala de grises que controlan la translucencia del material, donde los píxeles más oscuros son más transparentes y los píxeles más claros son más opacos. Estos mapas no afectan el color del material. 

Debido a que los mapas Alpha solo utilizan valores de la escala de grises, no necesitan tres canales, como los valores de color RGB, y pueden ocupar un solo canal. Unity utiliza los valores de la escala de grises del canal Alpha de la imagen Base Map para controlar la transparencia. 

Sigue estas instrucciones para ajustar la transparencia del material:

 siga seleccionado en la ventana Project. 

  En la ventana Inspector, cambia la propiedad 

En la vista de Escena, el modelo de cara ahora debería tener transparencia en las áreas ubicadas alrededor del contorno para crear un efecto de olas.

¿Cómo ajustar la transparencia?

Ya creaste un material y lo aplicaste al GameObject

 en la Escena. Sin embargo, para poder verlo en la aplicación, debes aplicarlo al Prefab 

 que creaste anteriormente. El GameObject

 presente en la Escena solo sirve como referencia, por lo que debes hacerlo invisible al crear la aplicación.

Sigue estos pasos para aplicar el material al Prefab:

 ubicado en esta carpeta para abrirlo en la vista de Escena.

  En la ventana Inspector, busca el componente Mesh Renderer (Renderizador de mallas). 

  En la sección Materials, haz clic en el selector de objetos (ícono de círculo) de 

  Selecciona la flecha hacia atrás ubicada en la esquina superior izquierda de la ventana Hierarchy para salir del modo de edición de Prefabs.

  En la ventana Hierarchy, haz clic derecho en el GameObject 

 y desactívalo en la ventana Inspector. Ya no necesitas este GameObject porque ya aplicaste el material al Prefab. (No querrás que aparezcan dos caras si solo debe haber una en la Escena). 

¿Cómo aplicar el material a la cara predeterminada?

Si pruebas la aplicación ahora, debe mostrar el material que creaste y aplicarlo en cualquier cara que detecte.

Sigue estas instrucciones para crear y probar la aplicación:

  Abre la ventana Build Settings (Ajustes de creación) (

 Asegúrate de que el dispositivo esté conectado y selecciona 

 para crear la aplicación en el dispositivo.

 La aplicación se abrirá automáticamente en el dispositivo. La nueva textura debería aparecer sobre tu cara en la aplicación.

: si quieres un repaso de cómo crear la aplicación en el dispositivo, puedes revisar el proceso para 

¿Cómo crear y probar la aplicación?

es el proceso para hacer que la aplicación sea lo más eficiente posible. Si usas texturas sin optimizar, la aplicación se podría ver lenta.

La optimización es indispensable para las experiencias de AR porque estas se ejecutan en dispositivos móviles, los cuales tienen una capacidad de procesamiento menor que otros dispositivos. Al crear texturas para AR, debes tomar en cuenta el tipo y el tamaño de la imagen, además de decidir si deben tener transparencia. 

Las texturas que utilizas para las aplicaciones de AR (o para cualquier proyecto de Unity) son imágenes. Puedes elegir el tamaño de la textura para equilibrar la calidad y el rendimiento. Si la textura es demasiado pequeña, la experiencia del usuario en la aplicación podría ser negativa, especialmente si el principal objetivo es mostrar elementos visuales atractivos. Si la textura es demasiado grande, la aplicación podría ser demasiado lenta y la experiencia del usuario podría ser frustrante.

Tal vez hayas notado que los tamaños de las texturas se suelen presentar en potencias de dos. Por ejemplo, 512 x 512, 1024 x 1024, 2048 x 2048 (2K) y 4096 x 4096 (4K).

Las tarjetas de gráficos antiguas necesitan estos tamaños para tener un buen rendimiento en el tiempo de ejecución. Aunque la mayoría de las tarjetas de gráficos modernas no tienen esta restricción, aún se recomienda utilizar tamaños en potencias de dos. 

El tipo de imagen también influye mucho en la optimización. Al tomar una decisión, debes tomar en cuenta los siguientes factores:

El espacio de almacenamiento disponible en la plataforma objetivo.

La velocidad de lectura (es decir, la velocidad con la que la plataforma objetivo puede llevar la imagen del disco a la memoria del sistema).

La velocidad de lectura de la memoria del sistema a la GPU.

La memoria RAM que la plataforma objetivo puede asignar a la reproducción de video.

Estas son algunas ventajas potenciales que puedes obtener al utilizar diferentes tipos de imágenes en tus creaciones:

: este formato conserva la calidad y su tamaño es relativamente pequeño. Sin embargo, los archivos PNG están comprimidos, por lo que el proceso de lectura debe incluir la descompresión. El beneficio del tamaño reducido de los archivos PNG suele ser mayor que el tiempo adicional requerido para leerlos, por lo que este es un tipo de archivo ideal para la mayoría de los casos.

: esta es una buena opción para favorecer la calidad, ya que los archivos no están comprimidos e incluyen un canal Alpha. Sin embargo, los archivos TGA son bastante grandes, por lo que pueden tardar mucho en cargarse. El tipo de archivo TGA es una buena opción para las texturas que se pueden precargar, como las imágenes de fondo de una aplicación en AR.

: este tipo de archivo es bastante pequeño, pero cada compresión del proceso genera una pérdida de calidad. Los archivos JPG no contienen un mapa Alpha, por lo que no se pueden utilizar en ningún proceso que requiera transparencia.

Consejos de optimización de imágenes

Si deseas desarrollar aún más tus habilidades, explorar nuevos conceptos o mejorar tu proyecto, echa un vistazo a algunas de las actividades opcionales que aparecen abajo. Estas actividades tienen etiquetas de Fácil, Medio o Difícil para que puedas elegir el nivel del desafío. 

Estas actividades son totalmente opcionales, por lo que puedes omitir este paso si no deseas completarlas. Sin embargo, te recomendamos intentar completar al menos una de ellas para aprovechar al máximo esta experiencia de aprendizaje. ¡Buena suerte!

Los materiales contienen varias propiedades con las que puedes personalizar la apariencia y sensaciones que transmite (look and feel) un objeto. Además de cambiar el color de un material, como lo hiciste en estos tutoriales, puedes modificar otras propiedades. 

Intenta modificar las siguientes propiedades del material en la sección Surface Inputs de la ventana Inspector cuando esté seleccionado:

 entre más alto sea su valor, más metálico se verá el material. Entre más metálico sea, más luz reflejará.

 entre más alto sea su valor, más suave se verá el material. Entre más suave sea, más luz reflejará.

 esta propiedad determina si el material brilla. Si activas esta propiedad, verás un selector de color disponible.

Si deseas más información sobre cómo ajustar los materiales, puedes explorar la sección 

Habilidades básicas para creadores artísticos: sombreadores y materiales

Duplica una de las texturas proporcionadas y edítala para crear tu propia versión. Por ejemplo, puedes eliminar diferentes secciones de la textura o agregar una línea de otro color. 

 es un software de código abierto que, al igual que Adobe® 

®, sirve para crear, modificar y exportar gráficos. 

 si no tienes Photoshop. Si necesitas ayuda para usar el software de edición de texturas que elegiste, puedes encontrar muchos tutoriales en Internet. 

Crea tu propia textura desde cero y empieza a diseñar tus propios filtros. Utiliza el archivo 

 como base para crear tus propias texturas y aplicarlas al GameObject 

: la textura de olas proporcionada en los archivos de muestra es un ejemplo de textura con transparencia. Si quieres usar transparencia en tus filtros faciales, deberás guardar la imagen de textura en un formato de archivo que tenga un canal Alpha, como PNG. 

¿Qué más puedes hacer?

En este tutorial, creaste un material personalizado para agregar más colores y patrones al filtro facial. ¡Pero aún puedes hacer más! En el siguiente tutorial, agregarás algunos accesorios al filtro.

Unity Version 2021.3