Image Shaders

Transcript

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