Empezaremos entendiendo la estructura base de como hacer un shader de vértices y fragmentos, que sería el inicio al tipo de shaders más complejo, pero que ofrece mayor libertad, este blog cubre los pasos básicos para crear un Shader muy simple en lenguaje CG en Unity, para continuar es necesario que entienda el funcionamiento básico de unity, que entienda cómo crear un proyecto, como crear una escena, como crear materiales y como crear un archivo nuevo de shaders.
Recomiendo que cree un proyecto nuevo, no necesita importar absolutamente nada, la intención de este proyecto es que no lo contamine con algún proyecto en desarrollo porque vas a estropear todo, en cambio así cuando tengas probados tus shaders, podrás exportar piezas de este para los proyectos en desarrollo.
Crear un shader CG no es complicado: En la ventana de proyecto, haga clic en Crear y seleccione Shader. Un nuevo archivo llamado "New Shader" debería aparecer en la ventana de proyecto. Haga doble clic en él para abrirlo (o haga clic derecho y seleccione Abrir). Debería aparecer un editor con el sombreado por defecto en el CG. bien ahora vamos a ver que el contenido está escrito con un contenido por defecto, lo vamos a borrar y reemplazar por este que está a continuación y guarde los cambios.
Shader "Cg basic shader" { // define el nombre y la ruta del shader
SubShader { // Unity escoge el subshader que mejor se acomode al dispositivo
Pass { // Algunos shaders necesitan varios pases
CGPROGRAM // Aqui empieza el lenguaje CG
#pragma vertex vert
// Esto especifica el programa de vertices
#pragma fragment frag
// esto especifica el programa de fragmentos
float4 vert(float4 vertexPos : POSITION) : SV_POSITION
// programa de vertices
{
return mul(UNITY_MATRIX_MVP, vertexPos);
// Esta linea transforma en vertices la entrada del subshader
// toma la posicion de los vertices y lo transforma en un
// espacio que podamos entender en unity
}
//Este es el programa de fragmentos
float4 frag(void) : COLOR // fragment shader
{
return float4(1.0, 0.0, 0.0, 1.0);
// la salida viene acompañado de un semántico que devuelve color
// los numeros separados por comas, representa un color
// 1er = rojo, 2do = verde, 3er = azul y 4to = alpha
}
ENDCG // Aqui termina el lenguaje CG
}
}
}Enhorabuena, acaba de crear un sombreado en Unity. Si desea puede cambiar el nombre del shader, esto no afecta al comportamiento o no generará ningún error, aproveche el cambio de nombre para crear un estilo que le permita fácilmente organizarlo e identificarlo.
Por desgracia, no hay nada interesante por ver hasta que el shader esté unido a un material, así como creamos el shader, vamos a crear un material, lo nombraremos con un estilo que podamos identificar fácilmente y arrastraremos el shader hacia el material.
Aun no pasa nada interesante, vamos a crear un cubo y una esfera en la escena y le arrastraremos el material que hemos creado, deberías ver en pantalla algo como esto.
Posiblemente habrás notado el el color que te salió es un rojo brillante y no un verde brillante.
bien ahora vamos a ensuciarnos las manos un poco, abre tu shader y volvamos a modificar un poco algunas líneas para que veas los cambios. en las líneas de código ve a la función frag.
Nota: no hay un consenso en este momento para nombrar funciones, en algunas partes verás esto con el nombre de función y en otras partes con el nombre de programa. así que asume que función o programa son el mismo concepto.
Cambia los valores del retorno como aparece en el código, guarda los cambios y vuelve a unity.
float4 frag ( void ) : COLOR // fragmento shader
{
return float4 ( 0.6 , 1.0 , 0.0 , 1.0 ) ;
// vamos a cambiar el valor del rojo y verde (rojo = 0.6, verde = 1.0, azul = 0.0, alfa = 1.0)
}Como habrás notado ha cambiado el color completamente, sin esperar a que compile y además no hay necesidad de darle play para ver los cambios, esto ocurre porque el compilador de CG es muy rápido como si fuera C, estamos en un lenguaje de muy bajo nivel y los cambios que hagamos son casi instantáneos, esto es una ventaja que supera a C#.
Vamos meterle la mano a la función vertex y a modificarlo como aparece a continuación, guarda los cambios y vuelve a unity.
float4 vert ( float4 vertexPos : POSITION ) : SV_POSITION
// vértice shader
{
return mul ( UNITY_MATRIX_MVP , float4 ( 1.0 , 0.1 , 1.0 , 1.0 ) * vertexPos ) ;
}Has visto que las figuras se han aplastado. Con esto ya has notado que lo básico que hace un shader, modificar la geometría y el color de los objetos, este shader fue preparado solo con el propósito de que entiendas como funciona, sin embargo hay muchas cosas que están pasando en el fondo que no has notado, pero que en futuros blogs explicaré.
Algo de notar es que en los shaders de unity se trabaja con una combinación de dos lenguajes, shaderlab y CG, las modificaciones que hemos hecho, han estado dentro de las palabras CGPROGRAM y ENDCG, esto es muy similar a como cuando en Html observamos que se inicia un programa de javascript.
Otra cosa a tomar en cuenta son las líneas #pragma vertex vert y #pragma fragment frag, estas líneas le indican a la GPU cual es el programa vertex y el programa fragment, estas líneas son las que nos da la seguridad de saber que el shader que estamos trabajando son del tipo vertex fragment.
Puede que sea bueno aclarar la terminología. En algunas API, un #shader es o bien un vertex shader o un fragment shader. La combinación de ambos se llama un #programa. En otras API, es sólo al revés: un "programa" es o bien un programa de vértice o un programa de fragmentos, y la combinación de ambos es un "shader". Por desgracia, la documentación de la Unidad mezcla de ambos convenios. Para simplificar las cosas, tratamos de evitar el término "programa" aquí y utilizar el término "shader" para referirse a la combinación de un vertex shader y un fragment shader.
Espero que tu resultado haya sido satisfactorio, nos vemos en otro blog.
Comments