GrayScale Image and Video
Shaders and Webgl
En esta publicación se desea mostrar los resultados obtenidos al realizar el procesamiento de imágenes y videos con shaders utilizando un leguaje de alto nivel, como lo es GLSL, para empezar a aprovechar las características de nuestro hardware y tener resultados muy favorables a nivel de máquina. El cambio y rendimiento, comparado con la velocidad de respuesta es notable en comparación con el procesamiento de imágenes y videos por medio de hardware.
A continuación, se observará cómo se puede obtener una imagen y video a escala de grises a partir del Promedio de los componentes RGB de una imagen y el caculo del coeficiente Luma. Para ello esta basada en la pagina de wikipedia HSL and HSV, el tutorial de shaders del profesor Andres Colubri en el sitio web processing.org y el tutorial de la página itp-xstory.github.io
donde se explican conceptos básicos de shaders con p5.js. En gran medida la construcción de este programa está basado en el anteriror ejemplo Image GrayScale del procesamiento de imágenes con software, ya que se manejan funciones y procedimientos muy similares,
sin embargo, para el procesamiento por hardware,lo que se hacia para uno solo pixel en software, ahora se hace en paralelo para todos los pixeles.
Comandos por Teclado
Tecla | Operacion | Expresion |
---|---|---|
![]() |
Original | (R,G,B) |
![]() |
Media Aritmetica | I = Avg(R,G,B) |
![]() |
Componente mas grande | M = Max(R,G,B) |
![]() |
Rango Medio | L = (max(R,G,B)+min(R,G,B))/2 |
![]() |
Luma Y601 | Y601 = 0.2989*R + 0.5870*G + 0.1140*B |
![]() |
Luma Y240 | Y240 = 0.212*R + 0.701*G + 0.087*B |
![]() |
Luma 709 | Y709 = 0.2126*R + 0.7152*G + 0.0722*B |
Para esta implementacion se hizo el uso de Shaders, el cual se configura mediante un
archivo .frag , el cual se encarga de hacer las operaciones para poder calcular la escala de grises de los pixeles de la imagen de manera paralela, a este archivo
solo se le envia la imagen o video y el tipo de escala de grises a realizar. Adicionalmente a esto la imagen se agrego com una textura al circulo mostrado en el ejemplo anterior.
En comparacion con ejemplos anteriores para este podemos observar que se tiene una mejor eficiencia al poder operar los pixeles de forma paralela
mediante el uso de la tarjeta grafica, ya que como se habia observado anteriormente en el ejemplo Video GrayScale, notamos que la eficiencia del
video era de aproximadamente 15 F/S en promedio, al aplicar las diferentes formas de escalas de grises, en cambio para este ejemplo el conserva los fotogramas
del video en aproximadamente 58 F/S, conservando la fluidez del video , aunque se esten aplicando las diversas escalas de grises, lo cual comparandolo mediante la implementacion por software
muestra una mejoria en la utilizacion de recursos y una mayor rapidez en el procesamiento .