Creando el efecto de pantalla con Shader Graph
Lo primero que agregarás al shader será obtener la información de color de la pantalla, así como realizar la conversión entre espacios de color RGB y YIQ.
Obtener la imagen de pantalla
Primero, hay que obtener los colores RGB de los píxeles en la pantalla desde el “framebuffer”. Crea un parámetro de shader de tipo “Texture2D”, y en las propiedades del parámetro, escribe en el campo “Reference” el texto “_CameraOpaqueTexture”. El nombre tiene que ser exactamente el mismo, ya que es un parámetro que usará Unity para indicarle al shader dónde acceder a la información de la textura.
Después, usando este parámetro, puedes crear un nodo “Sample Texture 2D” para obtener información de la textura. Conecta el parámetro de la textura con este nodo nuevo, y así puedes obtener en la salida del sampler los valores de color.
Conversión de RGB a YIQ y viceversa
Para convertir los pixeles RGB a YIQ y viceversa, necesitas utilizar unas matrices que, al multiplicar los vectores de los pixeles, van a realizar la conversión entre espacios de color. Cada matriz sera construida utilizando dos “Sub Graphs” de Shader Graph, de modo que puedas utilizarlos dentro del shader principal.
Primero crea el Sub Graph para convertir de color RGB a YIQ, que tendrá por practicidad el nombre “RGB2YIQ”. Los Sub Graphs se crean como assets desde el menú contextual, o el menú Assets en la barra de menús de Unity.
Una vez creado, abre el Sub Graph. Lo primero que agregarás será el parámetro de entrada, que será el color RGB. Crea un nuevo parámetro Vector3 y nómbralo “RGB”.
Así mismo, es necesario configurar la salida del Sub Graph para que el shader principal pueda utilizar el color en YIQ. Selecciona el nodo Output, y en la vista Graph Inspector > Node Settings, añade un elemento de tipo Vector3 con el nombre “YIQ”.
Para hacer la conversión de RGB a YIQ se necesita “multiplicar” el color original por una matriz que haga la transformación. Crea la matriz con un nodo “Matrix 3×3”, y llena cada uno de sus elementos con los valores indicados por la siguiente imagen:
Por último, conecta la salida del nodo de multiplicación a la salida del Sub Graph. Las conexiones de los nodos deberían verse de esta manera:
Para crear el Sub Graph “YIQ2RGB” para “revertir” la transformación del espacio de color, puedes simplemente duplicar el Sub Graph “RGB2YIQ”, invertir los nombres de sus entradas y salidas, y cambiar los valores de la matriz por los que tiene la imagen siguiente:
Ya con los Sub Graphs de conversión de color listos, puedes comenzar con los efectos del shader principal convirtiendo los colores RGB a YIQ, aplicando modificaciones, y revirtiendo la transformación. Primero abre el Shader Graph creado en los pasos anteriores. Luego crea dos nodos “RGB2YIQ” y “YIQ2RGB” (los Sub Graphs creados con anterioridad), y conecta la salida RGBA del nodo “Sample 2D Texture” a la entrada RGB del nuevo nodo “RGB2YIQ”. Conecta la salida de este último a la entrada RGB del nodo de “YIQ2RGB”. De momento, el efecto no va a hacer nada, simplemente mostrará la imagen tal cual, con la diferencia de que el shader estará listo para implementar los efectos visuales. La siguiente imagen muestra cómo se verían estas conexiones entre nodos, incluyendo un ejemplo de la modificación de señal que hablaré a detalle en la siguiente página:
