Introducir el análisis de imágenes/video al implementar: Conversión a escala de grises: promedio rgb y LUMA por hardware.
RGB es la composición del color en términos de la intensidad de los colores primarios de la luz. Es un modelo de color basado en la síntesis aditiva, con el que es posible representar un color mediante la mezcla por adición de los tres colores de luz primarios. El modelo de color RGB no define por sí mismo lo que significa exactamente rojo, verde o azul, por lo que los mismos valores RGB pueden mostrar colores notablemente diferentes en distintos dispositivos que usen este modelo de color. Aunque utilicen un mismo modelo de color, sus espacios de color pueden variar considerablemente.
Una de las opciones para realizar una conversión de una imagen a su equivalente en escala de grises es calculando el promedio de los valores RGB de cada pixel y definiendo los valores de dichos pixeles con el promedio calculado.
En una transmisión de señal de vídeo, luma es la componente que codifica la información de luminosidad de la imagen. En términos generales, es algo muy similar a la versión en blanco y negro de la imagen original. Luma y crominancia combinadas proporcionan la señal denominada señal de vídeo compuesto, utilizada en multitud de aplicaciones; pueden enviarse conjuntamente o transmitirse independientemente. Forman parte de la codificación de vídeo en los estándares de TV NTSC y PAL, entre otros.
Para generar la imagen equivalente en escala de grises, se operan los valores RGB de cada pixel por unos coeficientes predeterminados:
Código shader:
1linkprecision highp float;
2link
3linkattribute vec3 aPosition;
4link
5linkattribute vec2 aTexCoord;
6link
7linkattribute vec4 aVertexColor;
8link
9linkuniform mat4 uProjectionMatrix;
10link
11linkuniform mat4 uModelViewMatrix;
12link
13linkvarying vec4 vVertexColor;
14link
15linkvarying vec2 vTexCoord;
16link
17linkvoid main() {
18link vVertexColor = aVertexColor;
19link vTexCoord = aTexCoord;
20link gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0);
21link}
Código para una imagen:
1linklet theShader;
2linklet img;
3link
4linkfunction preload(){
5link theShader = loadShader('/vc/docs/sketches/shader.vert', '/vc/docs/sketches/RGBFrag.frag',shaderLoaded);
6link img = loadImage('/vc/docs/sketches/lenna.png', ImageLoaded)
7link}
8link
9linkfunction setup(){
10link createCanvas(512, 512,WEBGL);
11link noStroke();
12link textureMode(NORMAL);
13link shader(theShader);
14link theShader.setUniform('texture', img)
15link}
16link
17linkfunction draw(){
18link background(0);
19link beginShape();
20link vertex(-width/2, -height/2,0,0,0);
21link vertex(width/2, -height/2,0,1,0);
22link vertex(width/2, height/2,0,1,1);
23link vertex(-width/2, height/2,0,0,1);
24link endShape(CLOSE);
25link}
26link
27linkfunction ImageLoaded(){
28link console.log('image loaded textureShader')
29link }
30link
31linkfunction shaderLoaded(){
32link console.log('shaderLoaded')
33link }
Código fragment shader:
1linkprecision mediump float;
2link
3linkuniform sampler2D texture;
4link
5linkvarying vec4 vVertexColor;
6linkvarying vec2 vTexCoord;
7link
8linkvoid main() {
9link vec4 col = texture2D(texture, vTexCoord) * vVertexColor;
10link float RGBAverage = (col.r + col.g + col.b) * 0.33;
11link gl_FragColor = vec4(vec3(RGBAverage, RGBAverage, RGBAverage), 1.0);
12link}
Resultado:
Código para un video:
1link
2link let theShader;
3link let vid;
4link
5link function preload(){
6link theShader = loadShader('/vc/docs/sketches/shader2.vert', '/vc/docs/sketches/videoRGBFrag.frag');
7link }
8link
9link function setup() {
10link createCanvas(320, 240, WEBGL);
11link vid = createVideo(['/vc/docs/sketches/fingers.mov', '/vc/docs/sketches/fingers.webm']);
12link vid.hide();
13link vid.loop();
14link fill(0);
15link }
16link
17link function draw() {
18link shader(theShader);
19link theShader.setUniform('texture', vid);
20link rect(0,0,width,height);
21link }
Código fragment shader:
1linkprecision mediump float;
2link
3linkvarying vec2 vTexCoord;
4link
5linkuniform sampler2D texture;
6link
7linkvarying vec4 vVertexColor;
8link
9link
10linkvoid main() {
11link
12link vec4 tex = texture2D(texture, 1.0 - vTexCoord);
13link
14link float RGBAverage = (tex.r + tex.g + tex.b) * 0.333;
15link
16link gl_FragColor = vec4(vec3(RGBAverage, RGBAverage, RGBAverage), 1.0);
17link}
Resultado video:
Código para una imagen:
1linklet theShader;
2linklet img;
3link
4linkfunction preload(){
5link theShader = loadShader('/vc/docs/sketches/shader.vert', '/vc/docs/sketches/LUMAFrag.frag',shaderLoaded);
6link img = loadImage('/vc/docs/sketches/lenna.png', ImageLoaded)
7link}
8link
9linkfunction setup(){
10link createCanvas(512, 512,WEBGL);
11link noStroke();
12link textureMode(NORMAL);
13link shader(theShader);
14link theShader.setUniform('texture', img)
15link}
16link
17linkfunction draw(){
18link background(0);
19link beginShape();
20link vertex(-width/2, -height/2,0,0,0);
21link vertex(width/2, -height/2,0,1,0);
22link vertex(width/2, height/2,0,1,1);
23link vertex(-width/2, height/2,0,0,1);
24link endShape(CLOSE);
25link}
26link
27linkfunction ImageLoaded(){
28link console.log('image loaded textureShader')
29link }
30link
31linkfunction shaderLoaded(){
32link console.log('shaderLoaded')
33link }
Código fragment shader:
1linkprecision mediump float;
2link
3linkuniform sampler2D texture;
4link
5linkvarying vec4 vVertexColor;
6linkvarying vec2 vTexCoord;
7link
8linkvoid main() {
9link vec4 col = texture2D(texture, vTexCoord) * vVertexColor;
10link float gray = dot(col.rgb, vec3(0.299, 0.587, 0.0114));
11link gl_FragColor = vec4(vec3(gray), 1.0);
12link}
Resultado:
Código para un video:
1link
2link
3link let theShader;
4link let vid;
5link
6link function preload(){
7link theShader = loadShader('/vc/docs/sketches/shader2.vert', '/vc/docs/sketches/videoLUMAFrag.frag');
8link }
9link
10link function setup() {
11link createCanvas(320, 240, WEBGL);
12link vid = createVideo(['/vc/docs/sketches/fingers.mov', '/vc/docs/sketches/fingers.webm']);
13link vid.hide();
14link vid.loop();
15link fill(0);
16link }
17link
18link function draw() {
19link shader(theShader);
20link theShader.setUniform('texture', vid);
21link rect(0,0,width,height);
22link }
Código fragment shader:
1linkprecision mediump float;
2link
3linkvarying vec2 vTexCoord;
4link
5linkuniform sampler2D texture;
6link
7link
8linkvoid main() {
9link
10link vec4 col = texture2D(texture, 1.0 - vTexCoord);
11link
12link float gray = dot(col.rgb, vec3(0.299, 0.587, 0.0114));
13link
14link gl_FragColor = vec4(vec3(gray), 1.0);
15link}
Resultado video: