UNITY Texturas

Introducción

• Una textura representa una imagen que se 'pega' a la superficie de un objeto 3D o 2D.

• Un objeto dentro del juego en un mundo 2D se representará como un cuadrado/rectángulo (Unity permite emplear sprites con otras formas, como círculos,...).

Sobre ese cuadrado se dibujará una imagen (textura) que será lo que represente a nuestro personaje dentro del juego.

• En el caso de las figuras 3D, estas están formadas por muchos triángulos unidos formando una figura en el espacio 3D, como ya comentamos anteriormente en esta WIKI.

Las texturas van a ser las imágenes que se van a poner 'encima' de la malla tridimensional que representa a la figura para darle un aspecto realista.

La pregunta aquí sería, ¿ cómo podemos acoplar una imagen bidimensional (la textura) a una figura tridimensional ? Lo veremos a continuación.

• Relacionado con el concepto de Textura, Unity emplea Materiales que son los que van a llevar asociada la textura. Posteriormente Unity 'asocia' el material a la figura. Lo veremos en la sección de Materiales de esta misma Wiki.

• Para trabajar con texturas podemos hacer uso de varios programas como:

• Gimp (gratuito)
• PhotoShop (de pago, con versión de prueba)

• A partir de la versión 2018.1, Unity incorpora una nueva forma de renderizar las texturas denominada URP (Universal Render Pipeline).

Entre las ventajas de usar este tipo de renderizado tenemos:

• Soporta técnicas avanzadas de sombreado
• Puede manejar texturas de mayor resolución más eficientemente que los pipelines más antiguos como el Built-In Render Pipeline de Unity.
• Permite una gestión más eficiente de los recursos gráficos, lo que es crucial para el rendimiento en dispositivos con recursos limitados.
• Puedes utilizar diferentes configuraciones y herramientas que te permiten controlar cómo se renderizan las texturas en diferentes dispositivos, adaptándose así a las necesidades específicas de cada plataforma.

Cuando creamos un proyecto nuevo, podemos escoger si vamos a hacer uso del nuevo sistema de renderizado o si seguimos con el antiguo.

En función de esta elección tendremos que tener en cuenta que a la hora de importar los paquetes de Unity o crear/usar materiales debemos de realizar unos ajustes para que se visualicen correctamente.

Lo indicaré cuando veamos los materiales.

Los colores

• Cuando dibujamos un gráfico, la textura tiene información de qué color tiene que tener en cada pixel (punto) que se va a dibujar.

Esta información sigue un modelo de colores. En este punto se va a explicar el modelo RGB (Red-Green-Blue)

Existen otros modelos como YUV o CMYK.

• Con estos tres colores básicos (rojo-verde-azul) podemos obtener cualquier color mezclándolos en la proporción correcta.

Por ejemplo:

Información obtenida del libro Beginning Android 4 Games

Todos los colores anteriores se obtienen como combinación de los tres básicos: RED – GREEN – BLUE.

• Cada color básico se puede expresar con un número en coma flotante entre los valores 0.0f - 1.0f (siendo 1 la intensidad más alta y 0 la más baja)

También se puede codificar cada color con un byte con valores entre 0 y 255.

• Dependiendo de las diferentes opciones podemos tener diferentes formatos RGB:
• Codificación RGB de 32 bits: tiene 12 bytes por cada pixel (32 bits por color (al ser flotante) = 4 bytes x 3 colores=12 bytes). Las intensidades pueden varias entre 0.0f y 1.0f.
• Codificación RGB de 24 bits: tiene 3 o 4 bytes (si tiene alfa, visto después) por cada pixel (8 bits por color = 1 bytes x 3 colores=3 bytes). Las intensidades pueden varias entre 0 e 255. La orden de los componentes puede ser RGB o BGR. Se conoce como RGB888 o BGR888.
• Codificación RGB de 16 bits: tiene 2 bytes por cada pixel. Red y blue tienen una intensidad que varía entre 0 y 31 (5 bits x 2 = 10 bits) y el verde una intensidad entre 0 y 63 (6 bits). El orden puede ser RGB o BGR y se conoce como RGB565 o BGR565.

• Lo normal es trabajar con el formato RGB888.

Formato de imágenes

• A la hora de guardar imágenes disponemos de multitud de formatos diferentes.

Dos de los más conocidos son los formatos JPEG y PNG.

• JPEG es un formato que pierde calidad con respecto a la imagen original pero tiene una nivel de compresión alto (ocupa menos en disco).
• PNG no pierde calidad y es idéntica a la imagen original.

Nota: Siempre que utilicemos una imagen que no necesite transparencia (explicado a continuación) ni una calidad excesiva debemos eligir el formato jpg ya que tiene un gran nivel de compresión.

El componente Alfa: Nivel de transparencia.

• El componente alfa es un número que indica el nivel de transparencia de una imagen.

• Normalmente al superponer una imagen sobre otra, la imagen superior 'tapa' a la inferior.

Cuando creamos una imagen esta tiene una forma cuadrada/rectangular ya que al guardar le tenemos que dar un tamaño en pixeles (puntos) en su ancho y alto.

Sin embargo, los personajes que conforman un juego no tienen esa forma, puede ser redonda, con bordes redondeados,...

Información obtenida del libro 'Beginning Android 4 Games'

Si disponemos de un fondo y queremos que el personaje pase por dicho fondo, tendríamos este efecto:

Imagen superpuesta. El color blanco aparece alrrededor del gráfico.

• Gracias al componente alfa podemos establecer que un determinado color sea transparente (lo que se conoce como alfa).

Así, aplicado a los formatos gráficos vistos anteriormente, podemos aplicar el formato RGBA8888 (y sus variantes). Con esto indicamos que el componente alfa está compuesto por un valor que va desde 0 (totalmente transparente) a 255 (totalmente opaco).

Si hacemos que en el ejemplo el color blanco sea totalmente transparente, conseguiremos este efecto:

Imágenes superpuestas. El color blanco tiene un nivel de transparencia de 0.

• IMPORTANTE: Si la imagen necesita transparencias no podemos guardarla en el formato JPG.

Obligatoriamente tendría que ser

• Formato PNG: Imagen comprimida sin pérdida de calidad. Algunas imágenes con transparencias no son importadas correctamente.
• Formato TGA (es el que recomienda UNITY): No comprime la imagen. Las transparencias siempre son importadas correctamente.

• Para hacer un color transparente en GIMP:

• Vídeo de como facer un fondo transparente en GIMP: https://www.youtube.com/watch?v=m-7j6bP94fg
• También podemos asignar a un color un nivel de transparencia como se indica en la siguiente imagen:

Cambiando unha cor a transparente

• Desde GIMP podemos ver los diferentes canales y visualizarlos de forma independiente:

Texturas en objetos 3D

• Como comentamos anteriormente, la forma en como asociamos una textura (imagen bidimensional, con un ancho-alto) a una figura tridimensional (denominada Mesh) es la de 'pegar' la imagen sobre las caras que conforman la figura.

• Texturas aplicadas a un modelo 3D
• 

  Las texturas se generan en un único archivo intentando aprovechar el mayor espacio posible. Forman lo que se denomina un MAPA UV. Siendo U la coordenada que representa el eje horizontal y V la coordenada que representa el eje vertical. Los valores de UV están entre 0-1.

• 

  Figura 3D sin texturas aplicadas.

• 

  Figura 3D sobre la que se le han aplicado las texturas anteriores.

• Para poder hacer el proceso anterior, primero debemos de recortar la figura 3D en sus caras, para que estas queden dibujadas de una forma bidimensional.

Veamos un ejemplo con un cubo (algo supongo que todos hemos hecho alguna vez :) )

• Como vemos tenemos un objeto 3D (el cubo) el cual lo hemos 'recortado' para que sus caras se dibujen sobre una superficie 2D.

Ahora solo tenemos que pasar cada textura (tenemos 6, aunque podemos utilizar la misma textura en cada cara) a cada una de las caras del cubo.

El programa 3D ya se encargará de 'colocar' cada textura en cada una de las caras.

• Este concepto lo podemos aplicar a cualquier figura 3D.

Lo normal es que una figura 'compleja' la tengamos dividida en 'trozos' para que cada uno de ellos tenga texturas diferentes.

• Otro ejemplo lo encontramos cuando queremos representar un planeta.

La figura 3D que representa un planeta es una esfera (no exactamente, ya que los planetas están achatados pero simplificamos).

Para 'pegar' la textura, una de las formas de hacerlo, es cortar la esfera por la mitad (como si fuera una naranja para hacer zumo) y 'aplastar' las dos mitades sobre el plano. Una vez hecho esto, podemos poner encima una textura como la siguiente:

La podemos poner sobre la esfera de esta forma:

• Veamos otro con una nave espacial:

• Texturas aplicacas a nave espacial
• 

  Nave sin aplicar la textura.

• 

  Textura a aplicar a la nave una vez esté 'cortada'.

• 

  Nave una vez aplicada la textura anterior.

Gráficos obtenidos del Blog de Xoppa-LIBDX

• En Unity disponemos de multitud de recursos gráficos que ya vienen con sus propias texturas, pero que una vez tenemos los conceptos anteriores claros, siempre podremos modificar o añadir nuevas texturas creadas por nosotros.

• Notas Importantes:

• Cuando creemos nuestras texturas, estas siempre deben de tener un tamaño potencia de 2, es decir, 256,512,1024,2048.

Si se realizan con un programa 3D, seguramente, este ya os dará como opción un tamaño de los indicados anteriormente.

• Siempre es mejor trabajar con las resoluciones más grandes que vamos a necesitar. Reducir dicha resolución a un tamaño menor se realiza fácilmente.
• Unity permite realizar una compresión de la textura sin casi pérdida de calidad.
• Unity recomienda utilizar el formato de fichero .tga (recomendado por Unity) o .png para guardar texturas con información de transparencia (canal alfa). En caso de no necesitar tener transparencias, hacer uso del formato .jpg.

Ejemplo de aplicación de textura en Unity

• Si no lo habéis hecho ya al llegar a este punto, es hora de que aprendamos como agregar nuevos recursos a nuestro proyecto.

Pasar a leer el punto Recursos: Asset Store.

Una vez hecho, vamos a incorporar a nuestro proyecto texturas para el planeta Tierra (vienen otras texturas a mayores para crear planetas 'alienígenas').

Buscar en el asset store recursos para texturas de planetas (buscar por 'Planet Shader and Shadowing' y filtrar solo los recursos gratuitos).

• Aparecerá el siguiente recurso:

Instalar e importar el recurso anterior.

• Una vez hecho dispondréis en al ventana de 'Proyect' de una nueva sección y dentro de ella, la sección 'Texturas'.

• Vamos a crear una esfera y a añadir la textura indicada:

• Asociando una textura a una esfera
• 

  Botón derecho sobre la ventana jerárquica y añadimos un objeto 3D, una esfera.

• 

  Debemos de colocarla en una zona que sea visible por la cámara. Podéis pulsar sobre la cámara para ver un 'preview' en la vista de escena o pulsar sobre la pestaña 'Game' en la vista de escena.

• 

  Para 'asociar' la textura al objeto 3D, debéis de pulsar con el botón izquierdo del ratón sobre la textura y arrastrarla. Podéis arrastrarla a la esfera en la vista de escena o a la ventana inspector de la esfera (previamente seleccionada). Al hacerlo, en las propiedades de la esfera aparecerá en la sección Shader el nombre de la imagen que hemos 'arrastrado'. Lo que hace Unity es crear un material (lo veremos después) y asociar a dicho material la textura que hemos arrastrado.

• 

  Podéis comprobar como se ha creado una nueva carpeta de nombre 'Materials' y dentro de ella se encuentra el material que Unity asocia a la esfera y sobre el que se encuentra la textura asociada.

• 

  Si quisiéramos volver al material por defecto, es decir, al material sin textura asociada,pulsaremos sobre la rueda dentada de la sección y escogeremos la opción Reset o simplemente arrastramos otra textura diferente y Unity ya se encargará de reemplazarla.

• Para hacerlo un poco más divertido vamos a hacer que el planeta 'rote'.

Primero descargar este archivo a vuestro ordenador: Archivo:Unity Curso Rotar.zip. Debéis de descomprimirlo. Aparecerá un archivo con extensión .cs

• Rotando el planeta
• 

  Arrastramos dicho archivo al Unity. A la carpeta 'Assets' en la ventana de 'Proyect'. Puede ser que os abra la aplicación de Visual Studio para editar el script (un script es como un programa). Podéis cerrar la aplicación.

• 

  Ahora dentro del Unity arrastramos como hicimos antes con la imagen, pero esta vez con el script, hasta la esfera o si está seleccionada podemos arrastrar el script a la ventana inspector. Al hacerlo aparecerá un nuevo elemento de tipo 'script' con el nombre del mismo.

• 

  Si ahora pulsamos el botón de 'Play' podemos 'jugar' a nuestro juego

• 

  En este caso podemos ver como 'rota' la Tierra. Si pulsamos otra vez sobre el mismo botón dejaremos de ejecutar el juego.

Importando nuevas texturas

• Para importar una nueva textura a Unity solamente tenemos que 'arrastrar' la imagen a la carpeta Assets de Unity.

Por ejemplo, podemos ir al sitio web https://3dtextures.me y descargar alguna de las texturas (veremos los diferentes tipos cuando expliquemos los materiales). Por ejemplo en este enlace descargar la imagen Snow_004_DISP.png.

• Importando una nueva textura
• 

  Arrastramos la textura que queremos incorporar a la carpeta Assets del Project Window.

• 

  Seleccionamos la textura importada y podemos comprobar el tamaño de la imagen (1024x1024), el tipo de compresión y el formato de color (RGB) así como el tamaño que ocupa. Indicar que dicho tamaño puede ser modificado en la propiedad Max Size.

• 

  Si cambiamos el tamaño de la textura, debemos pulsar el botón Apply. Indicar que el tamaño estará en función del nivel de zoom que vayamos a tener sobre dicha textura. Así, si la textura está asociada a un GameObject que siempre se va a ver a una distancia, podríamos poner un tamaño pequeño, mientras que si vamos a estar muy cerca necesitaremos un tamaño grande. Disponemos de otros parámetro como el nivel de calidad de la compresión, el algoritmo y formato utilizado para el mismo.

• 

  Dependiendo de la instalación de Unity, podremos generar el juego para diferentes plataformas. En función del soporte instalado, dispondremos de dichas plataformas a la derecha del botón 'Default'. En el ejemplo, tenemos las plataformas PC/Linux/Mac y WebGL. Podemos indicar un tamaño concreto para cada una de las plataformas, optimizando el tamaño de las texturas en función de la plataforma a correr. Por ejemplo, en móviles, el tamaño de las texturas suele ser más pequeño.

• 

  Cuando importamos nuevas texturas podemos establecer el tipo de textura. Normalmente dejaremos 'default', pero veremos en el tema de materiales que tendremos que escoger el tipo Normal Map para realizar ciertos efectos.

• Podemos consultar todas las opciones disponibles en este enlace.

Explicación técnica

• Las texturas son los gráficos que se 'pegan' sobre cada una de las superficies de una figura 3D.

Por lo tanto trabajamos con imágenes 2D las cuales 'pegamos' a figuras 3D.

• Ya vimos en un apartado anterior como se realiza este proceso.

Al igual que en el espacio disponemos de coordenadas x,y,z para situar nuestros GameObjects, las texturas tienen su propio espacio y se denomina UV

• Cuando trabajamos con texturas, establecemos su posición en base a dos coordenadas que se encuentran entre los valores [0-1]

• Si queremos que dicha textura se dibuje sobre un triángulo tendremos que establecer para cada uno de los vértices del triángulo que posición de la textura se tiene que dibujar:

Esto dará como resultado lo siguiente:

Propiedades de las texturas en Unity

• Más información en https://docs.unity3d.com/Manual/class-TextureImporter.html.

• Cuando seleccionamos una textura en Unity, en la Inspector Window aparecen una serie de propiedades:

• Veamos las más importantes, y el resto las iremos viendo a lo largo de la Wiki a medida que las vayamos necesitando.

• La primera propiedad es el tipo de textura.

Normalmente emplearemos la opción 'default', pero veremos en esta Wiki como las texturas que están asociadas los materiales para que la luz se comporte de una forma determinada, deben ser de tipo 'Normal Map', o que las texturas asociadas a la interface de usuario deben ser de tipo Editor GUI...

• Propiedad alfa source.

Si nuestra textura tiene transparencias (canal alfa), podemos dejar la opción por defecto.

En caso de que no tenga, podemos seleccionar la opción 'None'

Si no trae canal alfa pero queremos que Unity genere dicho canal a partir de las tonalidades de grises, escogeremos la opción 'From Gray Scale'.

• Propiedad Wrap Mode.

Esta propiedad indica si queremos que la textura pueda repetirse cuando está 'asociada' a una superficie de un GameObject. Por ejemplo, cuando tenemos una textura que representa un 'trozo' de terreno y queremos asociarla a un plano muy extenso y queremos que se repita, tendremos que poner el valor de la propiedad a 'Repeat'. Veremos un ejemplo práctico de esto en el editor de terrenos.

• Propiedad MaxSize.

Podemos observar en la parte baja (si no os aparece tenéis que 'arrastrar' hacia arriba la doble línea que aparece en la parte baja al lado del nombre) que la textura tiene un tamaño en píxeles de 1024x1024 es de tipo RGB, está comprimida haciendo uso del algoritmo BC6H y que ocupa 1,3MB.

Normalmente trabajaremos con la resolución más alta y será Unity el que la comprima al tamaño adecuado.

Como tamaño máximo de la textura, se suele poner el doble del tamaño de la textura (1024x2 = 2048), pero si no es necesario, podremos cambiar y poner un tamaño menor, ahorrándonos mucho espacio.

Indica que estamos en la opción default esto quiere decir, que las modificaciones que hagamos se aplicarán a todas las plataformas para las que generemos el juego, pero podemos personalizar estas opciones para cada plataforma concreta.

Las plataformas que aparecen dependerá de las escogidas cuando instalamos Unity.

• Notas:

• 'MipMaps' son una versión en pequeño de las texturas, cuando las texturas aparecen muy pequeñas al estar alejada la cámara de ellas.
• 'Filter Mode' indica como se modifica la textura cuando sufre deformaciones al estar asociada a un modelo 3D que haga que se estire.
• 'Aniso Level' es un parámetro que da una mayor calidad a la textura y normalmente se usa para las texturas asociadas al suelo y al terreno.
• Podemos consultar en este enlace los diferentes formatos de compresión empleados en las diferentes plataformas.

Avanzado

Asociando nuevas texturas a objetos 3D

• Disponéis en la página principal del curso de varios programas para el diseño de figuras 3D y animaciones.

Podéis escoger el que queráis, ya que en todos ellos vais a encontrar la forma de realizar lo que voy a explicar a continuación.

• Yo os recomiendo el Wings3D por su sencillez, ya que lo que vamos a hacer no requiere de grandes funciones y el manejo es relativamente sencillo.

• Lo que voy a exponer en este punto es la forma de poder crear figuras sencillas (un cubo en el videotutorial) y asociarles una textura.

La ventaja que tiene Unity es que disponemos de muchos recursos gráficos para incorporar a nuestro juego, pero creo que a nivel de hacer aplicaciones/juegos para los alumnos de secundaria, puede ser interesante para el profesor poder crear figuras 3D con sus propios gráficos, como representar átomos, bacterias,....

Las texturas las podéis obtener de internet o escanear un dibujo y guardar el gráfico que después podríais asociar a una figura 3D.

• Los pasos a seguir son:

• Descargar e instalar el programa Wings3D, versión 2.1.7.
• Descargar unos patch´s del programa de la misma versión (2.1.7).
• Mover los archivos descargados al directorio: C:\Program Files\wings3d_2.1.7\lib\wx-1.8.3\ebin (o al directorio donde instalasteis el Wings3D, carpeta lib\wx-1.8.3

• Disponéis en este enlace de tres vídeos en los que os explico como crear figuras sencillas 3D y cómo asociarles las texturas.

Importando los modelos creados a Unity

• Tenéis más información sobre los formatos soportados por Unity en este enlace.

• En esta wiki también explico otras operaciones interesantes que se pueden hacer.

• Una vez creado el modelo en Wings realizamos el siguiente proceso:

• Importando modelo 3D con texturas al Unity
• 

  Vamos al menú 'File' => 'Export' => '3ds'

• 

  Dejamos las opciones de exportación por defecto y pulsamos 'Ok'.

• 

  Le damos un nombre al archivo y lo guardamos en la carpeta que elijamos (la extensión del archivo es .3ds).

• 

  Ahora en el programa Unity, en la pestaña de 'Assets' podemos organizarlo como queramos (en forma de carpetas). En este caso creé una carpeta de nombre 'Propios' y dentro de esta, una nueva carpeta de nombre 'Cubo' (para crear una subcarpeta debéis presionar el botón derecho sobre la carpeta y escoger la opción 'Create' => 'Folder'.

• 

  Ahora debemos arrastrar el archivo 3ds guardado en el paso anterior a la carpeta creada en el Unity.

• 

  Dentro de la carpeta de 'Cubo' creamos una nueva subcarpeta de nombre Texture donde guardaremos la imagen que conforma la textura.

• 

  Arrastramos la imagen que conforma la textura a la nueva carpeta creada.

• 

  Ahora es necesario asociar la textura al nuevo asset. Para ello es necesario crear un 'material'. Un material va a determinar como se refleja la luz sobre el objeto y otra seria de características. Esta parte será abordada en la sección avanzada. Para hacerlo más simple, vamos a crear el material de una forma 'indirecta'. Vamos a arrastrar el nuevo objeto a la vista de escena.

• 

  Ahora arrastramos la imagen de la textura al GameObject creado que se encuentra en la vista de escena. Fijarse como se crea una nueva carpeta de nombre Materials. Si arrastramos un nuevo Asset del cubo a la vista veremos que este no lleva la textura asociado. Esto es así ya que el Asset del cubo no tiene asignado el material que se creó. Vamos a asignárselo.

• 

  Nos fijamos en el nombre del nuevo material. Este material tiene asociada la textura.

• 

  Seleccionamos el asset importado (en este caso el cubo) y en la ventana 'Inspector' pulsamos sobre la opción 'Materials'. Veremos que pone Cube1_auv: none. Debemos de pulsar la rueda dentada para escoger el material que estará asociado a este asset.

• 

  Escogemos el material.

• 

  Pulsamos el botón Apply. Ahora ya podemos arrastrar el nuevo Asset importado y la vista de escena y aparecerá con la textura asociada.

Asociando texturas a modelos complejos

• En los ejemplos anteriores estamos asociando texturas a objetos simples, como cubos o esferas.

Pero el mismo principio podéis aplicarlo a figuras más complejas.

La forma de abordarlo puede ser:

• Crear una única figura compleja y 'recortarla' en trozos diferentes. Esto sería lo mismo que hemos hecho con las figuras simples.
• Crear una figura compuesta por múltiples figuras simples, recortar cada figura simple y asociar a cada una de ellas una textura. Veamos un ejemplo.

• Importando modelo 3D complejo
• 

  Creamos en Wings u otro programa un modelo complejo. En este caso tenemos un cubo y un cono. Cada uno de ellos tiene una textura asociada como ya hicimos anteriormente.

• 

  Ahora tenemos la opción de combinar los objetos (el cubo y el cono) para formar una única figura. No lo vamos a hacer, pero si quisiéramos, con los objetos que queramos juntar seleccionados pulsamos el botón derecho del ratón y escogeremos la opción 'Combine'.

• 

  Exportamos a 3ds e importamos al Unity como hicimos con las figuras simples. Tendremos dos archivos de texturas, una para el cono y otra para el cubo. Debemos de seleccionar el GameObject y arrastraremos cada una a su figura 3D correspondiente. Se creará una carpeta Materials como antes.

• 

  Debemos de fijarnos en el nombre de los materiales para asignarlos al modelo importado del Wings.

• 

  Seleccionamos el modelo importado, escogemos 'Materials' y seleccionamos las dos texturas. Debemos de recordar presionar el botón Apply una vez seleccionadas. Ahora ya podemos arrastrar cuantas veces queramos el modelo importado que aparecerá con las texturas asociadas.

Conceptos para programadores

• Lo que viene a continuación son unas explicaciones teóricas para los alumnos que realizan el ciclo de Programación de aplicaciones multiplataforma.

• Como comentamos anteriormente, las figuras 3D están formadas por múltiples triángulos.

Shaders

• Resulta que a partir de la versión OPEN GL 2.0 los gráficos se renderizan utilizando Shader´s. Los Shader son programas escritos en un lenguaje parecido a C que se denomina GLSL y que permite modificar las propiedades de los puntos que se van a renderizar pudiendo hacer efectos muy complejos.

En Unity, se pueden escribir 'shader program' en el lenguaje anterior, pero el que utiliza es una modificación del HLSL denominado Cg.

• El proceso de aplicar un 'Shader Program' a una figura se divide en dos etapas:

• Vertex Shader: se aplican operaciones a cada uno de los vértices de la figura. Por ejemplo, podríamos modificar la posición y tamaño de un objecto 3D.
• Fragment Shader: es la segunda etapa. A diferencia de la anterior se va a aplicar a cada fragmento de la figura. Por simplificar vamos a identificar fragmento como pixel. Como podéis suponer el coste de GPU será mayor que en el caso anterior, por lo que no se debe abusar de estos mecanismos. Por ejemplo, podríamos cambiar el color de cada pixel de la figura y realizar efectos de brillo, oscuridad,...

• Ejemplos que se pueden realizar con Shaders:

• https://www.youtube.com/watch?v=Q7udL3rYJZs
• https://www.youtube.com/watch?v=JkyGTZ0992s

• Más información en:

• Wiki.
• https://docs.unity3d.com/es/current/Manual/Shaders.html
• https://docs.unity3d.com/Manual/SL-ShaderPrograms.html

• A partir del Unity 2018, existe una herramienta que viene integrada con Unity y que nos permite desarrollar Shaders sin necesidad de tener unos conocimientos de programación avanzados.

Esta herramienta es el Shader Graph Editor.

Tenéis en este enlace información y ejemplos sobre dicha herramienta.

Vídeos:

• En este enlace tenéis un vídeo explicativo de su funcionamiento.
• Otro ejemplo de desarrollo.

Colores

En OPENGL se puede establecer el color en cada uno de los vértices de cualquier figura 3D. Si todos los vértices tienen el mismo color, la superficie entera se dibuja del color indicado.

Si cada vértice tiene un color diferente, se produce un degradado de un color al otro.

• Veamos un ejemplo de programación en Unity en el que modificamos los colores de cada vértice, poniendo los vértices pares a rojo y los impares a amarillo.

Previamente hay que crear un material (lo veremos posteriormente) y cambiar el tipo de shader de 'Standard' (que no soporta la asignación de colores a vértices) a uno de tipo Particles.

• Cambiando el tipo de shader
• 

  Creamos un nuevo material (veremos en otra sección para que sirven)

• 

  Una vez cambiado el nombre, en la ventana Inspector cambiamos el tipo de Shader a uno de tipo 'Particles'.

• 

  Arrastramos el material a una figura cualquiera previamente añadida a la escena.

• Ahora creamos un nuevo script con el siguiente código y lo asociamos a la figura 3D que tiene asociado el shader.

 1     void Start()
 2     {
 3         Mesh mesh = GetComponent<MeshFilter>().mesh;
 4         Vector3[] vertices = mesh.vertices;
 5 
 6         // create new colors array where the colors will be created.
 7         Color[] colors = new Color[vertices.Length];
 8 
 9         for (int i = 0; i < vertices.Length; i++)
10         {
11             if (i % 2 == 0)
12                 colors[i] = Color.red;
13             else
14                 colors[i] = Color.yellow;
15         }
16 
17         // assign the array of colors to the Mesh.
18         mesh.colors = colors;
19     }

• Al ejecutar el juego podemos comprobar como se produce un degradado desde el color rojo al amarillo en ciertas caras del cubo:

Enlace a la página principal del curso

-- Ángel D. Fernández González -- (2018).