Image Shaders

Image Shaders
Carlos Marín Lora
PATG
Ingeniería Multimedia
ETSE - UV
Índice
- Estado del Arte
- Carga de Imágenes
- Shaders
Estado del Arte
Estado del Arte
Aplicaciones similares
- Blender Shading Cam
- WebCam Toy
- Photoshop
- OpenGL Camera App
Carga de Imágenes
Carga de Imágenes
SOIL
- SImple OpenGL Image Loader.
- Permite cargar imágenes en formatos como bmp, jpg y png
directamente en texturas.
- Código abierto.
Shaders
Shaders
Original Vertex Shader
- No se produce ninguna modificación.
- Común para todos los elementos posteriores.
- Se recibe una posición y unas coordenadas de textura.
- Y se pasan tal cual al fragment shader.
Shaders
Original Fragment Shader
- No se produce ninguna modificación.
- Los datos salen tal y como entran a la tubería.
Shaders
RGB Filters Fragment Shader
- En cada uno de los tres shaders se eliminan todas las componentes de
color distintas al seleccionado.
- Y únicamente se muestran las componentes del color seleccionado para
cada pixel.
Shaders
GrayScale Fragment Shader
- Con los valores establecidos de la luminancia relativa en el espacio de
color RGB.
- Obtenemos la luminancia para cada pixel.
- Aplicamos el valor de luminancia a las componentes de color
resultantes.
Shaders
Brightness Fragment Shader
- Hacemos una interpolación lineal entre el negro (valor bajo) y el color
del pixel.
- En función de un valor que determina la intensidad del brillo.
Shaders
Contrast Fragment Shader
- Hacemos una interpolación lineal entre el gris (valor medio) y el color
del pixel.
- En función de un valor que determina la intensidad del contraste.
Shaders
Saturation Fragment Shader
- Con los valores establecidos de la luminancia relativa en el espacio de
color RGB. Obtenemos la luminancia para cada pixel.
- Determinamos el valor de luminancia como target.
- Hacemos una interpolación lineal entre el target (escala de grises) y el
color del pixel.
- En función de un valor que determina la intensidad de la saturación.
Shaders
Negative Fragment Shader
- Invertimos los valores de color para cada pixel.
- Restamos al blanco el color de cada pixel.
Shaders
Pixelize Fragment Shader
- Calculamos el radio de acción del pixel base a partir de la función mod.
- Todo pixel dentro de ese radio de acción mostrará los mismos valores
de color que el pixel base.
- En función de un vector dimensión podemos alterar el radio de acción
del pixel base.
Shaders
Edge Fragment Shader
- En función del tamaño en pixels de la imagen.
- Obtenemos los valores de los contornos mediante el operador Sobel
Edge Detector.
- Un gradiente 2D que destaca las regiones de altas frecuencias.
- Lo usamos sobre la representación en escala de grises del pixel para
obtener el valor del gradiente.
Shaders
Edge Fragment Shader
- El operador consiste en dos kernels de convolución:
- Diseñados para recorrer los pixel horizontal y verticalmente.
Shaders
Edge Fragment Shader
- Los resultados para cada componente de textura vendrán dadas por:
- Para obtener el valor de color interpolamos linealmente el color del
pixel con la magnitud del valor obtenido.
Shaders
Blur Fragment Shader
- Desenfoque Gaussiano 3x3.
- Basándonos en cálculos similares al Edge Fragment Shader.
- La intensidad del desenfoque depende del radio de acción que le
proporcionamos.
Shaders
Toons Fragment Shader
- Basándonos en mismos cálculos que el Edge Fragment Shader.
- En función de un valor umbral de magnitud.
- Damos como salida de color el negro o el valor resultante de la
cuantización del color original en función de un valor predeterminado.
Shaders
Hand Fragment Shader
- Basándonos en mismos cálculos que el Edge Fragment Shader.
- Generamos líneas en función del valor del pixel en escala de grises.
- Dependiendo de un umbral pintaremos en un valor de gris determinado
o en otro.
Shaders
Wrap Fragment Shader
- Shaders de deformación de las imágenes.
- En este caso vamos a empujar el centro de la imagen hacia dentro.
- En función de unos parámetros de escalado conseguimos dar la
apariencia de agujero de gusano.
Shaders
Twirl Fragment Shader
- La transformación twirl rota la imagen alrededor de un punto en
función de un paso de ángulo.
- El paso de ángulo decrece en función que nos acercamos a los límites
del radio de rotación preestablecido.
- Se produce una traslación de los valores de color en los texels a los
resultantes en los pixels.
¿Preguntas?
GRACIAS
Shaders
Referencias
- MathWorks. Image Processing on a GPU - mathworks.es
- Algorithms for Image Processing and Computer Vision - J.R.Parker
- Image Processing with Kernels - antongerdelan.net
- Sobel Edge Detector - homepages.inf.ed.ac.uk/rbf/HIPR2/sobel.htm
- Processing.org - Shaders in Processing.
- osgEarth Reference Guides - osgearth.readthedocs.org
- oZone3D - ozone3d.net
- El Código Gráfico - elcodigográfico.wordpress.com
- SOIL -lonesock.net/soil.html
Image Shaders
Carlos Marín Lora
PATG
Ingeniería Multimedia
ETSE - UV