Shaders Tutorial..

Anuncio
Tutorial de Unity 3D
Tema 3
Introducción a los Shaders de Unity3D
Introducción a los Shaders de Unity3D
1. Objetivos
En este tema comenzaremos a trabajar con objetos 3D como vehículos, edificios, armas, etc. Que en
primer lugar mejorarán el aspecto visual de nuestra escena y en última instancia nos terminarán ofreciendo
la posibilidad de crear mundos interactivos como en los videojuegos comerciales.
Comenzaremos configurando algunos aspectos finales de nuestra escena como pueden ser el cielo o la
niebla en el ambiente para después añadir objetos en 3D a partir de un amplio catálogo de recursos online
alojado en la página web http://turbosquid.com
Finalmente, para mejorar el aspecto visual de los objetos en 3D trataremos a fondo su texturizado, los
diferentes tipos de materiales que Unity puede mostrar y la iluminación.
Recuerda que como siempre, para facilitarte las cosas, siempre utilizaremos un guión (-) para prefijar todas
las acciones que requieran tu intervención directa con el programa.
2. Configuración de render
El menú de configuración del render nos permite configurar el aspecto del cielo y de la niebla de
nuestro videojuego, además de algunos efectos globales que afectan a la iluminación. Para seguir este
tutorial lo ideal sería partir de una escena que hayas creado previamente y ya tenga un diseñado un terreno
con todo lujo de detalles.
Comenzaremos configurando el cielo, pero antes de eso necesitamos importar en nuestro proyecto un
paquete de recursos con las texturas correspondientes. En esta ocasión utilizaremos uno de los paquetes
que trae Unity por defecto, se denomina Skyboxes (Cajas de cielo).
– Ve a la Vista de Proyecto y haz clic derecho en una zona vacía, selecciona Import Package →
Skyboxes. Espera que Unity termine de descomprimir el paquete y se abrirá una nueva ventana con
el listado de recursos a importar.
Tutorial de Unity 3D Introducción a los Shaders de Unity3D
Pág. 1
Tutorial de Unity 3D
Tema 3
Introducción a los Shaders de Unity3D
– Haz clic en el botón Import, abajo a la derecha, para que comience la carga de recursos en el
proyecto.
Observa que el paquete que acabamos de importar es uno de los que vienen por defecto con Unity, habrás
comprobado que en la lista de paquetes para importar había muchos más. Si quieres conocerlos todos no
dudes en tomarte un tiempo en importarlos uno a uno y examinar su contenido al finalizar este tutorial.
Ahora vamos a acceder al menú de configuración del
render para hacer uso de las cajas de cielo:
– Asegúrate de tener el Layout de visualización en
modo 2 by3 (Botón superior derecho de la interfaz
de Unity). Entonces, en las pestañas superiores haz
clic en Edit → Render Settings. Verás que la Vista
de Inspector ahora muestra un breve menú como
el de la captura.
Tutorial de Unity 3D Introducción a los Shaders de Unity3D
Pág. 2
Tutorial de Unity 3D
Tema 3
Introducción a los Shaders de Unity3D
Un problema frecuente del menú Render Settings es que deja de ser visible en la Vista de Inspector en el
momento que seleccionemos un objeto de la escena o del proyecto, o también cuando hagamos clic en una
zona vacía y cancelemos la selección.
Aunque podemos volver a abrirlo de la misma forma siempre que queramos, vamos a utilizar una sencilla
opción para evitar que el menú Render Settings se nos oculte accidentalmente.
– Con el menú Render Settings visible en la Vista de Inspector, observa que en su esquina superior
derecha hay un pequeño icono con forma de candado. Haz clic sobre él para cerrarlo y así anclar el
menú en la Vista de Inspector, no desaparecerá hasta que vuelvas a hacer clic sobre el candado.
Una vez tomada esta precaución, vamos a comenzar asignando el material de la caja de cielo (Skybox
Material).
– En el menú Render Settings, haz clic en el pequeño icono en forma de disco que hay a la derecha del
campo Skybox Material, se abrirá una nueva ventana con todos los recursos de materiales cargados
en nuestro proyecto.
Tutorial de Unity 3D Introducción a los Shaders de Unity3D
Pág. 3
Tutorial de Unity 3D
Tema 3
Introducción a los Shaders de Unity3D
Observa que la ventana anterior muestra todos los recursos de materiales cargados en nuestro proyecto y
no sólo los de las cajas de cielo que acabamos de cargar. Un truco sencillo para que nos muestre solamente
las cajas de cielo es el siguiente:
– En la barra de búsqueda en la parte superior de la ventana de materiales, escribe la palabra “sky”
(Cielo). De esta forma la ventana sólo mostrará aquellos materiales cuyo nombre contenga esa
palabra.
– Una vez hecho ésto, puedes ir haciendo clic en los materiales de las cajas de cielo para previsualizar
su aspecto en la Vista de Escena. Cuando te hayas decidido por una pulsa Intro para finalizar.
Ya sólo nos falta configurar la niebla de la escena, se trata de un elemento presente en cualquier entorno
natural en mayor o menor medida y la configuraremos de una forma muy sencilla.
– Asegúrate de tener el menú de Render Settings en la Vista de Inspector.
– Dirígete al modo de niebla (Fog mode) y despliega el menú para seleccionar la opción Linear.
La niebla de tipo lineal es la más sencilla de configurar, ya que se basa en una distancia inicial desde la
cámara (Linear Fog Start), medida en metros, en la que la niebla comienza a afectar a la escena y una
distancia final (Linear Fog End) en la que la niebla produce una saturación total y no deja ver nada.
Tutorial de Unity 3D Introducción a los Shaders de Unity3D
Pág. 4
Tutorial de Unity 3D
Tema 3
Introducción a los Shaders de Unity3D
– Establece unos valores para el inicio y el fin de la niebla en función de tu escena, puedes hacer una
escena con muy poca niebla asignando valores de inicio y fin muy altos (De 1000 a 1500 metros por
ejemplo) o recrear una escena de montaña en un ambiente húmedo con unos valores bajos (De 0 a
300 metros por ejemplo).
– Activa ahora la primera casilla del menú Render Settings, denominada Fog. Es la encargada de que la
niebla se active finalmente y se muestre, puedes comprobar su efecto tanto en la Vista de Escena
como en la Vista de Juego.
En la captura anterior puedes ver una escena con una configuración de niebla relativamente alta, observa
cómo apenas se consigue distinguir el color de los árboles.
Existe un problema y es que el color de la niebla es gris y no resulta natural, vamos a solucionarlo.
– Vuelve de nuevo al menú Render Settings. El segundo parámetro es una celda de color y determina el
color de la niebla (Fog color). Haz clic sobre él para abrir la ventana de colores.
– En la parte superior izquierda de la ventana de colores observarás un icono en forma de
cuentagotas. Su utilidad es obtener un color directamente desde la Vista de Escena o la Vista de
Juego. Haremos clic sobre la parte de la caja de cielo que se junta con el horizonte, ya que salvo
raras excepciones es generalmente azulado y resulta uno de los colores más apropiados para la
niebla.
Tutorial de Unity 3D Introducción a los Shaders de Unity3D
Pág. 5
Tutorial de Unity 3D
Tema 3
Introducción a los Shaders de Unity3D
Deberías obtener un resultado de niebla mucho más natural.
– Tu escena ya debería tener una luz direccional. Seleccionála en la Vista de Escena, y si no la tienes
recuerda que puedes crear una clicando en la pestaña superior Game Object → Create Other →
Directional Light.
– Caso de seguir visualizándose el menú Render Settings en la Vista de Inspector, recuerda abrir el
candado de su parte superior izquierda para que desaparezca y podamos ver los parámetros de la
luz direccional.
– Con la luz direccional seleccionada, utiliza la
herramienta de rotación (Botones superiores
izquierdos o atajo de teclado E) para dirigir la luz en
la dirección que desees.
– Con la luz direccional seleccionada, observa en la
vista de inspector sus parámetros. El campo Color
es una caja de color donde podemos establecer un
color distinto del blanco mientras que el campo
Intensidad (Intensity) nos permite modificar su
intensidad base.
Tutorial de Unity 3D Introducción a los Shaders de Unity3D
Pág. 6
Tutorial de Unity 3D
Tema 3
Introducción a los Shaders de Unity3D
– Dedica ahora unos minutos a seleccionar una caja de cielo, configurar una niebla y una luz
direccional acorde con la escena que deseas ambientar. Puedes plantearte hacer una escena de
noche, un amanecer, un día de espesa niebla...
3. Modelos 3D de Turbosquid
La web http://turbosquid.com es un valioso recurso para localizar todo tipo de objetos 3D para
añadir a nuestro videojuego. Vamos a dedicar unos minutos a configurar nuestras cuentas de usuario para
poder descargar contenido gratuito de todo tipo.
Tutorial de Unity 3D Introducción a los Shaders de Unity3D
Pág. 7
Tutorial de Unity 3D
Tema 3
Introducción a los Shaders de Unity3D
– Abre tu navegador web y busca en Google o escribe en la barra de direcciones
http://turbosquid.com.
– En la esquina superior derecha verás un botón de acceso (Login/Join). Haz clic en él para abrir el
formulario de inscripción.
– Rellena el formulario de inscripción con tus datos de correo electrónico, nombre de usuario y
contraseña. Finalmente pulsa el botón inferior izquierdo Create Account para crear finalmente tu
cuenta de usuario.
En el paso anterior no olvides poner un correo electrónico válido para poder recuperar tu contraseña en
caso de pérdida, y recuerda que habrá nombres de usuario no disponibles o utilizados por otras personas,
así que evita utilizar nombres sencillos como por ejemplo “Juan” o “Laura”.
Una vez finalizado el proceso de inscripción, el texto superior izquierdo de la página web pasará a mostrar el
texto Account. Eso nos indica que estás dentro de tu cuenta y ya puedes comenzar a descargar contenido.
Turbosquid tiene un buscador muy similar al de Google, sólo que los resultados de la búsqueda nos llevarán a
objetos 3D disponibles para descargar. Podemos buscar cualquier tipo de vehículo, objeto, personaje, etc.
Vamos a hacer una sencilla prueba con la que descargaremos una motocicleta y la incluiremos en nuestro
videojuego.
– Con tu cuenta ya creada, dirígete a la barra de búsqueda en la parte superior de la web de
Turbosquid. Generalmente encontraremos más objetos buscando en inglés, así que escribiremos el
texto “motorbike” (Motocicleta) y pulsaremos Intro.
Tutorial de Unity 3D Introducción a los Shaders de Unity3D
Pág. 8
Tutorial de Unity 3D
Tema 3
Introducción a los Shaders de Unity3D
El navegador nos mostrará los resultados de la búsqueda en una ventana similar a la siguiente:
El principal problema es que por defecto nos localizará tanto los objetos gratuitos como los de pago, además
de mostrarnos algunos resultados que no son compatibles con Unity 3D.
Vamos a configurar la búsqueda para que automáticamente nos localice
únicamente los objetos compatibles con Unity 3D.
– En la columna lateral izquierda de la web, localiza la celda de
Compatibilidad (Compatibility). Haz clic en su último botón para
especificar desde lista (Specify file formats from list).
– Se abrirá una nueva ventana dentro de la página web donde
debemos seleccionar los tipos de archivo que queremos buscar.
Unity es compatible con prácticamente cualquier tipo de archivo 3D,
pero si no queremos instalar ningúna extensión tendremos que
marcar únicamente los formatos .fbx, .3ds y .obj y ninguno más,
según la imagen que viene a continuación.
Tutorial de Unity 3D Introducción a los Shaders de Unity3D
Pág. 9
Tutorial de Unity 3D
Tema 3
Introducción a los Shaders de Unity3D
– Para finalizar aplicando el filtro de búsqueda pulsa el botón Apply abajo a la derecha. El resultado de
la búsqueda ahora sólo mostrará objetos compatibles con Unity 3D.
Sólo nos falta indicar que queremos únicamente objetos gratuitos:
– Localiza en la columna lateral izquierda la celda de Precio
(Price). Haz clic en el texto de abajo para establecer un rango
de precios personalizado (Set custom price range).
– Se abrirán 2 celdas donde escribir el precio mínimo y máximo,
escribiremos 0 en ambas y pulsaremos Apply para continuar.
Una vez establecidos ambos filtros de búsqueda, la página web nos mostrará los resultados. En este caso
tenemos un par de resultados de búsqueda, uno de ellos es una motocicleta con buen aspecto para
comenzar a trabajar con ella.
Tutorial de Unity 3D Introducción a los Shaders de Unity3D
Pág. 10
Tutorial de Unity 3D
Tema 3
Introducción a los Shaders de Unity3D
– Haz clic en el icono de la motocicleta para abrir su página de descarga. En ella podrás ver una serie
de capturas con el aspecto aproximado que ofrecerá el objeto en nuestro juego.
Dentro de la página de descarga y antes de descargar, es importante echar un vistazo a la información de
especificaciones (3D Model Specifications) que podemos ver en el lateral derecho. En el apartado con el
número de polígonos (Polygons) intenta evitar modelos que sobrepasen los 15,000 polígonos. En el caso de
nuestra moto podemos contar 6,721, así que funcionará correctamente.
– Pulsa el botón verde de descarga (Download) en la parte superior derecha de la página de descarga
de la motocicleta. Ésto nos llevará a nuestro historial personal de descargas, donde podemos
descargar tanto la motocicleta como cualquier otro objeto que ya hayamos descargado
previamente.
Generalmente, cada objeto puede estar disponible para descargar en varios formatos, entre los que se
encontrarán los que hemos establecido mediante filtrado de búsqueda.
– Para mostrar todos los formatos disponibles haz clic en el botón Show all, según puedes ver en la
siguiente imagen.
Tutorial de Unity 3D Introducción a los Shaders de Unity3D
Pág. 11
Tutorial de Unity 3D
Tema 3
Introducción a los Shaders de Unity3D
Los formatos compatibles con Unity, por orden de mayor a menor compatibilidad, son .fbx, .3ds y .obj. En
nuestro caso sólo tenemos disponible el formato .3ds (No confundir con el formato .max de 3dsmax).
– Hacemos clic sobre él para comenzar la descarga tal y como figura en la captura siguiente.
La descarga comenzará automáticamente. Asegúrate de indicar una ubicación conocida, como por ejemplo el
Escritorio.
El archivo que hemos descargado está comprimido en formato .zip. Antes de poder importarlo como recurso
de nuestro proyecto Unity necesitamos descomprimirlo.
– Haz clic derecho en el archivo que acabas de descargar y selecciona la opción de descompresión
(Generalmente Extract to...). El contenido del archivo se extraerá.
Para conseguir grandes tasas de compresión, es frecuente que el archivo haya sido comprimido varias
veces, si te encontrases con un archivo similar tendrás que extraerlo de nuevo hasta que aparezcan los
archivos que guarda.
En nuestro caso terminamos encontrando una carpeta llamada Vespa donde podemos ver tanto el archivo
vespa.3ds (El objeto 3D) como un par de carpetas más con imágenes y texturas, tal y como podemos ver en
la siguiente captura.
Tutorial de Unity 3D Introducción a los Shaders de Unity3D
Pág. 12
Tutorial de Unity 3D
Tema 3
Introducción a los Shaders de Unity3D
Antes de añadir el objeto 3D como recurso para nuestro proyecto, vamos a recordar que debemos mantener
una buena organización en la Vista de Proyecto. Por tanto vamos a crear un directorio específico donde
guardar los distintos modelos 3D que vayamos importando.
– Ve a la Vista de Proyecto de Unity 3D, haz clic derecho en una zona vacía y selecciona Create →
Folder para crear una nueva carpeta. Llámala “Modelos”.
– Haz clic derecho sobre la carpeta Modelos que acabas de crear y crea una carpeta más llamada
“Motocicleta”. Haremos lo mismo con los sucesivos modelos 3D que descarguemos, teniendo
siempre cada uno de ellos en su carpeta correspondiente.
– Haz clic derecho sobre la carpeta Motocicleta y selecciona la opción Import New Asset... Se abrirá
una ventana de navegador con la que debemos llegar hasta el archivo Vespa.3DS que acabamos de
descargar y descomprimir. Lo seleccionamos y pulsamos el botón Import para importarlo como
recurso de proyecto.
Una vez finalice la carga, la Vista de
Proyecto mostrará el nuevo recurso junto
con una carpeta de materiales (Materials)
asociados. En la Vista de Proyecto
seleccionamos la Vespa podemos ver su
previsualización en la parte inferior de la
Vista de Inspector tal y como muestra la
siguiente imagen.
Tutorial de Unity 3D Introducción a los Shaders de Unity3D
Pág. 13
Tutorial de Unity 3D
Tema 3
Introducción a los Shaders de Unity3D
Ya sólo nos falta añadir nuestra motocicleta a la escena. Para ello debemos asegurarnos de que tenemos el
Layout en modo “2 by 3” y que en la Vista de Escena tenemos visible el terreno y la posición donde queremos
colocarla.
– Desde la Vista de Proyecto selecciona y arrastra la motocicleta hasta la posición deseada del
terreno en la Vista de Escena.
– Observarás que la moto aparece también en la Vista de Jerarquía, haz doble clic sobre su nombre
(Vespa) para centrarla en la Vista de Escena, deberías ver algo así:
Existe un problema con los modelos gratuitos que descargamos de internet, y es que generalmente su
tamaño es arbitrario. En nuestro caso vamos a comprobar el tamaño que tiene ahora mismo nuestra
motocicleta comparándola con un cubo de 1 metro de arista.
– Con la motocicleta centrada en la Vista de Escena, ve a la pestaña superior GameObject → Create
Other → Cube. Ésto creará un cubo con 1 metro de arista exactamente en la misma posición que la
motocicleta.
Tutorial de Unity 3D Introducción a los Shaders de Unity3D
Pág. 14
Tutorial de Unity 3D
Tema 3
Introducción a los Shaders de Unity3D
– En la Vista de Jerarqúia, localiza el cubo (Cube) y haz doble clic sobre él para centrarlo. Observarás
que la cámara de la Vista de Escena se mueve hacia atrás, ésto es debido a que el cubo de 1 metro
de arista es mayor que nuestra motocicleta.
– Vuelve a seleccionar la motocicleta en la Vista de Jerarquía y utiliza los botones superiores
izquierdos para cambiar la escala de nuestra moto (Botón de escala o atajo de teclado R). Modifica
la escala de la moto para que tenga un tamaño aproximadamente real en comparación con el cubo.
Aprovecha también para posicionarla (Botón de posicionamiento o atajo de teclado W) por encima
del terreno.
– Dedica un tiempo a buscar nuevos objetos en Turbosquid, importarlos a tu proyecto y añadirlos en tu
escena. Intenta construir una ciudad con edificios, vehículos e incluso animales y personas sobre tu
terreno.
Es importante que sepas también que algunos de los objetos de Turbosquid incluyen texturas. En la mayoría
de los casos éstas se aplicarán automáticamente en el objeto 3D al importarlo en Unity, pero para casos
más concretos vamos a hablar a continuación sobre cómo maneja Unity las texturas.
Tutorial de Unity 3D Introducción a los Shaders de Unity3D
Pág. 15
Tutorial de Unity 3D
Tema 3
Introducción a los Shaders de Unity3D
4. Texturas
Vamos a volver de nuevo a las texturas para aprender a utilizarlas sobre objetos que hayamos
descargado de internet. Para facilitar las cosas empezaremos trabajando sobre simples cubos, pero todo lo
aprendido será aplicable más adelante a objetos complejos.
En primer lugar necesitamos añadir texturas como recurso en nuestro proyecto.
– Ve a la Vista de Proyecto, haz clic derecho en una zona vacía y selecciona Create → Folder para
crear una nueva carpeta. Ponle como nombre “Texturas”.
– Abre tu navegador web y accede a Google Imágenes. Puedes acceder simplemente a Google y
seleccionar Imágenes en la parte superior de la web tal y como se muestra en la siguiente captura.
– En el buscador escribe la palabra “texture”, en inglés para asegurar más resultados y espera los
resultados de búsqueda. Puedes concretar más el tipo de textura que buscas añadiendo alguna
palabra más como por ejemplo “leather” (Cuero), si queremos buscar texturas de cuero.
En nuestro caso obtenemos los siguientes resultados de búsqueda:
Tutorial de Unity 3D Introducción a los Shaders de Unity3D
Pág. 16
Tutorial de Unity 3D
Tema 3
Introducción a los Shaders de Unity3D
– Haz clic en el resultado de búsqueda que más
te guste. Se abrirá una previsualización en la
que es importante que en la columna lateral
derecha hagas clic en “Tamaño completo”, ya
que lo que se está mostrando es una
miniatura.
– Una vez hecho eso podrás ver la imagen a
tamaño completo en tu navegador. Guárdala,
generalmente haciendo clic derecho sobre
ella y seleccionando la opción Guardar imagen
como... Asegúrate de guardarla en una ruta
conocida como por ejemplo el Escritorio.
Tal y como hemos hecho anteriormente con el modelo
3D de Turbosquid, vamos a importar la textura como
recurso de proyecto antes de utilizarla.
– En la Vista de Proyecto, dentro de la carpeta
Texturas crea una nueva carpeta con el
nombre “Cuero”. Haz clic derecho sobre ella,
selecciona Import New Asset... Se abrirá una
ventana de navegador donde debes buscar la
textura que has descargado, seleccionarla y
pulsar Import para añadirla como recurso.
– Ahora puedes repetir el mismo proceso
cuantas veces quieras para añadir distintos
tipos de textura a tu proyecto.
Vamos a comenzar a hacer uso de las texturas importadas. Para ello vamos a buscar el cubo que habíamos
creado inicialmente para comparar su tamaño con el de nuestra motocicleta.
– En la Vista de Jerarquía, busca el cubo (Cube) y haz doble clic sobre él para centrarlo en la Vista de
Escena.
Tutorial de Unity 3D Introducción a los Shaders de Unity3D
Pág. 17
Tutorial de Unity 3D
Tema 3
Introducción a los Shaders de Unity3D
– Localiza la textura que acabas de importar en la Vista de Proyecto, dentro de la carpeta Texturas.
Arrástrala directamente sobre el cubo, bien sea en la Vista de Escena o en la Vista de Jerarquía.
Observarás que el cubo aplica automáticamente la textura sobre todas sus caras así:
– Puedes dedicar un tiempo a crear todo tipo de figuras básicas
haciendo clic en la pestaña superior GameObject → Create Other,
ahí podrás seleccionar figuras como la esfera (Sphere), cápsula
(Capsule), cilindro (Cylinder) y plano (Plane). Texturiza todas ellas
de diferente forma siguiendo los pasos anteriores.
– También puedes intentar componer objetos básicos posicionando y rotando correctamente las
figuras básicas texturizadas. Puedes intentar montar una farola y añadirle una luz puntual (Point
Light), o un coche y añadirle luces de cono (Spot Light).
Tutorial de Unity 3D Introducción a los Shaders de Unity3D
Pág. 18
Tutorial de Unity 3D
Tema 3
Introducción a los Shaders de Unity3D
5. Materiales
Ahora que ya nos hemos familiarizado con el manejo de texturas y su aplicación sobre objetos vamos
a pasar a trabajar con un aspecto visual más avanzado de Unity. Los materiales indican el aspecto visual que
nos muestra finalmente el objeto, atendiendo especialmente a su reacción frente a las fuentes de luz y los
reflejos del entorno que lo rodea.
– En la Vista de Jerarquía, busca el cubo texturizado que hemos creado anteriormente y haz doble clic
sobre su nombre para centrarlo en la Vista de Escena.
Si observas ahora en la Vista de Inspector, abajo del todo,
comprobarás que hay una pequeña previsualización en
forma de esfera con el aspecto exterior del cubo, una caja
de color y su textura según la siguiente captura. Se trata de
la ventana del material del objeto y vamos a trabajarla en
profundidad.
La caja de color nos permite aplicar un color de teñido en
caso de que queramos ofrecer un aspecto distinto.
– Prueba a modificar el color y observa el resultado.
También son interesantes los valores de repetición (Tiling), que indican la cantidad de veces que la textura
se proyecta sobre las caras del cubo.
– Prueba a modificar los valores de la columna Tiling poniendo valores como 2, 5 ó 10 y observa el
cubo de cerca en la Vista de Escena. Verás cómo la textura ahora se muestra repetidas veces sobre
cada cara del cubo. Ésto resulta especialmente útil para por ejemplo componer suelos y paredes con
una única textura de baldosa y un plano sobre el que se repite varias veces.
Una vez entendido ésto es hora de configurar la reacción que nuestro material tiene con la luz. Los
materiales pueden reflejarla o absorberla en distinta medida, los materiales que absorben la luz se
denominan difusos (Diffuse), mientras que los que la reflejan se denominan especulares (Specular).
Tutorial de Unity 3D Introducción a los Shaders de Unity3D
Pág. 19
Tutorial de Unity 3D
Tema 3
Introducción a los Shaders de Unity3D
Según la captura anterior, observa que en el apartado Shader hay una lista
desplegable en la que ahora mismo figura como selección Diffuse.
– Haz clic en la lista desplegable del Shader y selecciona Specular
para hacer que el material del cubo pase a reflejar la luz que le
llega. Es normal que el menú tarde un poco en responder.
En este punto es importante que sepas que aunque Unity incluye por defecto
aproximadamente unos 50 shaders distintos para materiales, la gran
mayoría de ellos parten de ser o bien difusos o bien especulares. Observa la
lista de la derecha, incluso si accedes a las categorías desplegables, verás
que todos los shaders se caracterizan por ser difusos (Absorben la luz) o
ser especulares (Reflejan la luz).
Habrás notado también que, en la Vista de Inspector, abajo del todo, la
ventana del material ha cambiado ligeramente después de haber
seleccionado el shader especular. Ahora tenemos una caja de color
adicional en la que podremos dar un color de teñido especular para los
reflejos de luz (Specular Color) y una barra que podemos arrastrar de
izquierda a derecha para indicar el brillo (Shininess), que indicará en qué
medida el material refleja la luz que recibe.
Salvo raras excepciones, en el color especular deberías
asignar algún tipo de gris, consiguiendo así que la luz
reflejada pierda un poco de intensidad sin modificar su color
original. En cuanto a la barra de brillo, poniéndola a la
izquierda conseguimos el máximo brillo, mientras que
poniéndola a la derecha conseguimos un efecto muy similar
al del shader difuso.
– Haz unas pruebas con diferentes texturas aplicando el shader difuso y el especular. Observarás que
el especular resulta más apropiado para texturas metalizadas.
Tutorial de Unity 3D Introducción a los Shaders de Unity3D
Pág. 20
Tutorial de Unity 3D
Tema 3
Introducción a los Shaders de Unity3D
El shader especular que acabamos de usar es el más básico de los que trae Unity y no resulta para nada
realista, pero sí es importante comprender su funcionamiento antes de pasar a utilizar otros tipos de
shader más avanzados. Antes de continuar echa un vistazo a la siguiente captura en la que podemos ver el
resultado visual de un objeto a medida que modificamos la cantidad de luz (De derecha a izquierda) y la
cantidad de brillo (De arriba a abajo) de su material.
Otra conclusión importante que podemos sacar de ésto es que con una única textura podemos obtener
infinidad de materiales distintos.
Vamos a dar paso ahora a los materiales más avanzados de Unity. Si vuelves a echar un vistazo a la lista
completa de shaders disponibles en la Vista de Inspector, observarás también que gran parte de ellos vienen
prefijados con la palabra “Bumped”. Este término hace referencia a un efecto de profundidad que se aplicará
sobre la superficie del material dando la sensación de que no es totalmente plana, si no que realmente las
irregularidades dibujadas en la textura tienen una profundidad real.
La mejor manera de entender esto último es configurando un shader de este tipo.
– Despliega la lista de shaders y selecciona Bumped Specular. Observa que podríamos utilizar también
Bumped Diffuse, pero la única diferencia será si reflejará o no la luz, y en este caso queremos ver en
todo su esplendor el efecto de profundidad en la superficie.
Tutorial de Unity 3D Introducción a los Shaders de Unity3D
Pág. 21
Tutorial de Unity 3D
Tema 3
Introducción a los Shaders de Unity3D
Nuevamente, en la Vista de Inspector podemos ver que la
ventana del material ha vuelto a cambiar, en este caso luce
tal y como la podemos ver en la captura de la derecha.
La única diferencia respecto del shader especular anterior
es que ahora observamos que hay un segundo campo
llamado Normalmap (Mapa de normales) para una textura.
La textura de mapa de normales es la que generará las
irregularidades en la superficie del material. Existen muchas
formas de obtener mapas de normales, pero vamos a utilizar
una muy sencilla.
– En la Vista de Inspector, abajo del todo, haz clic en la
textura de base que tiene asignada tu objeto.
Comprobarás que en la Vista de Proyecto aparece marcada en amarillo.
Ésta es una forma rápida de encontrar el recurso de proyecto que
estamos usando, muy útil cuando comenzamos a tener gran cantidad de
texturas.
– Ve a la Vista de Proyecto, selecciona la textura y pulsa el atajo
de teclado Ctrl+D para duplicarla. También puedes ir a la
pestaña superior Edit → Duplicate.
– Haz clic sobre la nueva textura duplicada para poder renombrarla. En nuestro caso, si la textura
original se llama “Textura Cuero” vamos a renombrar la nueva como “Textura Cuero Bump”.
Ahora con la nueva textura seleccionada en la Vista de Proyecto, observa la Vista de Inspector. Te mostrará
diversos parámetros con la configuración actual de la textura y abajo del todo una previsualización. La
ventana que estás viendo se denomina Importador de Texturas.
Tutorial de Unity 3D Introducción a los Shaders de Unity3D
Pág. 22
Tutorial de Unity 3D
Tema 3
Introducción a los Shaders de Unity3D
Vamos a configurar nuestra nueva textura para que pase a
ser un mapa de normales.
– En el apartado Texture Type (Tipo de textura), haz
clic en la pestaña desplegable y selecciona la opción
Normal Map.
Observarás que la celda Alpha from Grayscale se activará
automáticamente, ésto servirá para que las irregularidades
se generen a partir de la textura en escala de grises, siendo
las zonas más oscuras las más profundas.
También aparecen 2 nuevos parámetros configurables: La
barra desplazable de profundidad (Bumpiness) indica cómo
de pronunciadas serán las irregularidades en las superficie,
mientras que filtro (Filtering) nos permite seleccionar 2
modos distintos para calcularlas.
– Configura un factor de Bumpiness no muy alto, por
ejemplo 0,1 será suficiente, y deja el filtro por
defecto ya que generalmente es cuestión de probar
el filtro que mejor resultado nos ofrece.
– Abajo del todo en la Vista de Inspector también, haz
clic en Apply para aplicar los cambios y observa
abajo del todo la nueva textura que hemos generado.
La nueva textura está compuesta por tonos azulados en su
mayoría. Todas las desviaciones del azul puro serán las
irregularidades de las que hablábamos. Vamos ahora a hacer uso
de este mapa de normales en nuestro material.
– En la Vista de Jerarquía, vuelve a seleccionar el cubo.
Tutorial de Unity 3D Introducción a los Shaders de Unity3D
Pág. 23
Tutorial de Unity 3D
Tema 3
Introducción a los Shaders de Unity3D
– En la Vista de Inspector, abajo del todo, haz clic en el
botón Select, en la celda correspondiente a la
textura de mapa de normales según la siguiente
captura. Ésto abrirá una ventana con todas las
texturas del proyecto.
– Busca en ella la textura de mapa de normales que
acabamos de crear, selecciónala y pulsa Intro para
finalizar.
Otra opción interesante para este último paso hubiese sido
arrastrar directamente la textura de mapa de normales
desde la Vista de Proyecto hasta la celda en la Vista de
Inspector.
– En la Vista de Jerarquía, haz doble clic en el cubo para centrarlo en la Vista de Escena y observa el
resultado.
– En la Vista de Jerarquía, haz doble clic en la luz direccional para centrarla en la Vista de Escena.
Utiliza el botón de Rotar en la parte superior izquierda (Atajo de teclado E) y prueba diferentes
orientaciones de la luz para comprobar su efecto sobre el nuevo material.
Tutorial de Unity 3D Introducción a los Shaders de Unity3D
Pág. 24
Tutorial de Unity 3D
Tema 3
Introducción a los Shaders de Unity3D
6. Iluminación
Un material con mapa de normales como el que hemos creado anteriormente simula la presencia de
irregularidades en una superficie que realmente es plana. Generalmente no apreciaremos con gran detalle el
resultado si permanecemos quietos o si no tenemos luces en movimiento.
Vamos a añadir una luz sobre nuestro cubo y moverla sobre su superficie para ver el resultado.
– En la Vista de Jerarquía, haz doble clic en el cubo para centrarlo en la Vista de Escena.
– En las pestañas superiores, haz clic en GameObject → Create Other → Point Light para crear una luz
puntual en la misma posición que el cubo.
– Utiliza el botón Mover que se encuentra arriba a la izquierda del interfaz (Atajo de teclado W) y
coloca la luz puntual justo sobre la superficie del cubo.
– Desplaza la Vista de Escena hasta la superficie del cubo para ver el efecto, mueve de nuevo la luz de
punto para comprobar cómo las irregularidades ganan realismo con el movimiento de la cámara o
de las luces en la escena.
Tutorial de Unity 3D Introducción a los Shaders de Unity3D
Pág. 25
Tutorial de Unity 3D
Tema 3
Introducción a los Shaders de Unity3D
7. Materiales en objetos de Turbosquid
A continuación vamos a aplicar los conocimientos que hemos adquirido sobre materiales a los
objetos descargados en Turbosquid. Cada objeto 3D que descargamos es muy distinto del resto, así que
vamos a utilizar como ejemplo la motocicleta que utilizamos anteriormente y que ya tenemos en la escena.
– En la Vista de Jerarquía, localiza la motocicleta y haz doble clic en ella para centrarla en la Vista de
Escena.
– Observa que en la Vista de Jerarquía, la motocicleta aparece como una lista desplegable, despliégala
de la misma manera que se despliegan las carpetas en la Vista de Proyecto.
Deberías ver algo similar a la siguiente captura. Los objetos en Unity
pueden establecer jerarquías unos con otros, de forma que las
acciones realizadas sobre el objeto padre como pueden ser
posicionar, rotar o escalar, también afectan a sus hijos.
En nuestro caso la motocicleta incluye más de 10 objetos hijo en su
jerarquía.
– En la Vista de Jerarquía, selecciona uno por uno los objetos
hijo de la motocicleta haciendo doble clic en ellos para
centrarlos en la Vista de Escena y observa que son partes
distintas.
– Durante el proceso, en la Vista de Inspector, abajo del todo,
observa que todos los objetos hijo que corresponden a partes
gráficas de la motocicleta tienen uno o varios materiales
asociados.
– Aplica los conceptos que has aprendido sobre materiales para conseguir en la moto un resultado
similar al de la siguiente captura.
Tutorial de Unity 3D Introducción a los Shaders de Unity3D
Pág. 26
Tutorial de Unity 3D
Tema 3
Introducción a los Shaders de Unity3D
Observa que para conseguir que el mapa de normales se
aplique varias veces sobre algunas superficies hemos hecho
uso del factor de repetición (Tiling) que hemos explicado
anteriormente.
A continuación una captura de la configuración del material del
asiento de la motocicleta, observa como hemos utilizado un
factor de tileo de 4 tanto en la textura de base como en el
mapa de normales. También hemos utilizado como color de
base el negro para evitar que el asiento se muestre rojo.
- Aplica todo lo anterior a nuevos objetos de Turbosquid y
realiza la composición de un escenario con gran cantidad de
objetos, materiales y luces.
Tutorial de Unity 3D Introducción a los Shaders de Unity3D
Pág. 27
Tutorial de Unity 3D
Tema 3
Introducción a los Shaders de Unity3D
8. Actividades de evaluación propuestas
Como actividades complementarias, podemos hacer una serie de capturas de pantalla para poder
mostrar el fruto final de nuestro trabajo. No olvides maximizar la Vista de Juego y pulsar Play para recorrer
las zonas visualmente más atractivas de tu escenario, una vez te encuentres en una ubicación interesante,
para capturar la imágen que ves, recuerda que puedes hacer lo siguiente:
– Instala el programa gratuito Paint.NET (También sirve cualquier otro programa de diseño gráfico que
sepas manejar).
– Vuelve a Unity y cuando la Vista de Juego muestre una escena interesante pulsa la tecla Impr Pant
que generalmente encontrarás en la parte superior del teclado a mano derecha.
– Vuelve a Paint.NET y haz clic en la pestaña Edición → Pegar para volcar el contenido de la captura de
pantalla en el programa.
– Nuevamente en Paint.NET haz clic en Archivo → Guardar para guardar las capturas de pantalla que
vayas realizando.
Ahora puedes enseñar fácilmente tu trabajo, difundirlo a través de redes sociales o publicarlo en tú página
web.
Tutorial de Unity 3D Introducción a los Shaders de Unity3D
Pág. 28
Descargar