GrayScale Image and Video

Shaders and Webgl

  • 02 Oct

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 .

Otros Ejemplos

Video GrayScale

Rgb Average and luma coefficient, Frame rate

Shader Convolution Matrix

Shaders and WEBGL