sábado, 5 de abril de 2014

Unity3D Shaders: Creando nuestros propios shaders (I)

Una de las cosas en las que no me he enredado dentro de Unity3D han sido los shaders, y creo que lo ideal es aprender un poco de todo aunque te especialices en algo en concreto ya que si al menos sabes controlar un poco las otras áreas que tocarán al crear tu propio videojuego, podrás enfocar mucho mejor el area que te compete.

Ya que dentro de los shaders hay muchísimas cosas que podríamos aprender, vamos a ir paso a paso, tutorial a tutorial aprendiendo a hacer cosillas con shaders.
Una imagen vale mas que mil palabras
Para empezar...

¿Que es un shader?
Los shaders son utilizados para realizar transformaciones y crear efectos especiales, como por ejemplo iluminación, fuego o niebla. La ventaja de usar shaders es principalmente que interactúa directamente con la GPU, para quien no sepa lo que es, el procesador de gráficos de tu pc o smartphone, es el microprocesador optimizado para los cálculos gráficos.

Dicho esto vamos a comenzar con el tutorial con una pequeña porción de código que tocará hoy y el próximo día empezaremos a ver resultados de verdad.

Al crear un shader nuevo desde el menú Assets/Create/Shaders nos genera un código tal que así:

Shader "Custom/Tutorial" {
 Properties {
  _MainTex ("Base (RGB)", 2D) = "white" {}
 }
 SubShader {
  Tags { "RenderType"="Opaque" }
  LOD 200
  
  CGPROGRAM
  #pragma surface surf Lambert

  sampler2D _MainTex;

  struct Input {
   float2 uv_MainTex;
  };

  void surf (Input IN, inout SurfaceOutput o) {
   half4 c = tex2D (_MainTex, IN.uv_MainTex);
   o.Albedo = c.rgb;
   o.Alpha = c.a;
  }
  ENDCG
 } 
 FallBack "Diffuse"
}
De lo cual vamos a quedarnos hoy con lo más básico y aprenderemos a añadir distintas propiedades que mas adelante aprenderemos a usar, de manera que lo modificaremos dejando solo lo básico:

Shader "Custom/Tutorial" {
 Properties {
  _MainTex ("Base (RGB)", 2D) = "white" {}
 }
 SubShader {

 } 
}
A lo cual vamos a añadirle algunas propiedades mas y vamos distintos tipos de propiedades a añadir:
Shader "Custom/Tutorial" {
 Properties {
          _Color ("Main Color", Color) = (1,1,1,0.5)
          _Shininess ("Shininess", Range (0.01, 1)) = 0.7
          _MainTex ("Base (RGB)", 2D) = "white" { }
 }
}
Normalmente se le dan nombre con guión bajo a las propiedades simplemente por tener un nombre normalmente similar a nombres reservados dentro del lenguaje, por ejemplo Color es una palabra reservada por el lenguaje, así que para definir los nombres, considero una buena práctica usar como primer caracter un '_'.

Vamos a ver tres tipos de variables que se usarán para dar nuestros efectos y con ejemplos prácticos que veremos mas adelante ya que, si aplicamos este shader a cualquier material, no hará nada mas que guardar los valores que le demos.

_Color ("Main Color", Color) = (1,1,1,0.5)
Esta primera variable, internamente se llamará _Color, en el inspector se llamará "Main Color" y aparecerá como una paleta de colores la cual tendrá rojo, verde, azul y alfa respectivamente de manera que tendremos el color blanco resultante de todos los colores al máximo y el alfa a la mitad con una semitransparencia.

_Shininess ("Shininess", Range (0.01, 1)) = 0.7
En este caso, usaremos mas adelante brillo, aquí tendremos una barra que tendrá un rango mínimo de 0.01 a 1 y por defecto lo tendremos a 0.7 que sería un 70%.
_MainTex ("Base (RGB)", 2D) = "white" { }
Por último una textura, la cual se le aplicará al material mas adelante que por defecto estará vacío.

Una vez explicados los tres tipos básicos de propiedades, mas adelante haremos nuestro primer shader funcional, ya que este solo permite añadir propiedades al shader pero no hace nada con ellos para interactucar con nuestro material de nuestro objeto 3D.

2 comentarios:

  1. Respuestas
    1. Es algo que dejé en el tintero, habrá varias entregas mas, solo es cuestión de tiempo ;)

      Eliminar