En esta ocasión me centraré en hacer varios tutoriales de efectos de imagen simples pero muy útiles, sigue esta saga y aprenderás a crear efectos para tus juegos bastante vistosos y que ahorran recursos.
Unity 3D, aunque se esfuerza por traer el mejor rendimiento al motor y a la compilación de nuestros juegos, tampoco se las sabe todas, por ejemplo el rendimiento de efectos de imagen en dispositivos móviles no es bueno, esto se debe a la cantidad de marcas de gráficas integradas, que no todas tienen como una especie de standard. Sin embargo hay alguno que otro truco que podemos aplicar para obtener casi el mismo efecto sin sufrir penalizaciones de rendimiento.
En este blog aprenderás a hacer un efecto de imagen básico que te servirá para el resto de efectos que se te ocurran, en los próximos blogs aprenderás a hacer efectos como aberración cromática, zoom blur, gaussian blur, glitch, pixelación entre otros.
Un efecto de imagen o post procesamiento consta de 2 scripts, el primero seria el envio de texturas desde la cámara al shader y el otro sería el shader propiamente.
Test Render Image.cs
He sintetizado al máximo este archivo, casi que puede usar este archivo como una plantilla para futuros efectos de imagen. lo único que cambia es el control de las variables que controlan al shader.
Lo importante a destacar es que un efecto de imagen es un material al que le asignas un shader y que luego todo eso lo asignas a la camara. este script crea un material y lo destruye automáticamente cuando el script es desactivado.
Lo segundo más importante es destacar la función OnRenderImage(source, dest), este toma un frame a veces completa o incompleta, lo envía al shader, el shader procesa la imagen y devuelve el resultado al script y este lo asigna al material.
En este caso vamos a hacer un efecto simple de hacer pero que será útil para entender cómo se hace los desenfoques.
Chromatic Aberration Shader.
Los efectos de imagen en unity es un shader de tipo vértice fragmentos, al que no ves inmediatamente un programa de vértices, tampoco un struct de entrada y de salida, sin embargo siguen existiendo los structs y el programa de vértice, solo que estos provienen desde "UnityCG.cginc" y como es tan común unity lo ha normalizado llamándolo vert_img.
La aberración cromática es producida en pantallas CRT a veces por desgaste de los pixeles en pantalla o mala transmisión de datos, también es muy común verlo cuando pones una lupa en una pantalla, como es el caso de los visores de realidad virtual. El efecto se produce cuando el canal rojo y verde se desplazan en sentido contrario o cuando la distorsión de la lente en un visor altera la luz. Sin embargo el efecto es popular porque da la sensación de que la imagen proviene directamente de una tele ochentera y su efecto es fácil de reproducir.
Como se puede apreciar en las propiedades tengo una imagen 2D llamada _MainTex, este nombre se debe conservar así no importa el efecto de imagen, ya que la cámara envía su textura fuente a este sampler y segundo la distancia que usaremos para controlar la distorsión.
El truco es simple, tomar tres copias del sampler y simplemente sumar y restar las distancias en el eje x y tomar este desplazamiento para el canal rojo y el canal verde, y el azul dejarlo sin modificación.
Como puedes ver el efecto no tiene realmente una base complicada, aunque siempre se puede complicar un efecto simple para simular un efecto lo más fiel posible. En dispositivos móviles lo mejor es tratar de hacer estos efecto lo más simples como sea posible ya que rellenar píxeles en una pantalla es costoso para las gráficas integradas.
Este blog sirve como base para los próximos efectos de imagen, así que mantenlo en la mira. Por lo pronto esto es todo por hoy nos vemos en un próximo blog.
Comments