Star

Created With

linkCode & Results: Image and Video Kernels

Utilizando los conceptos explicados en laboratorios anteriores, se hace la convolución de la imagen y el video con las matrices de los kernels: Emboss, Top Sobel, Outline y Sharpen. Utilizando la GPU en lugar de la CPU.

kernels.js
1linklet img;

2link

3linklet shaderEmboss;

4linklet shaderTopSobel;

5linklet shaderOutline;

6linklet shaderSharpen;

7link

8linklet imgEmboss;

9linklet imgTopSobel;

10linklet imgOutline;

11linklet imgSharpen;

12link

13linklet v = 1.0 / 9.0;

14link

15linklet emboss = [

16link    [-2, -1, 0],

17link    [-1, 1, 1],

18link    [0, 1, 2]

19link];

20link

21linklet topSobel = [

22link    [1, 2, 1],

23link    [0, 0, 0],

24link    [-1, -2, -1]

25link];

26link

27linklet outline = [

28link    [-1, -1, -1],

29link    [-1, 8, -1],

30link    [-1, -1, -1]

31link];

32link

33linklet sharpen = [

34link    [0, -1, 0],

35link    [-1, 5, -1],

36link    [0, -1, 0]

37link];

38link

39link

40link

41linkfunction preload() {

42link    shaderEmboss = loadShader("/vc/docs/sketches/workshops/imaging/hardware/kernels/shader.vert", "/vc/docs/sketches/workshops/imaging/hardware/kernels/kernels.frag");

43link    shaderTopSobel = loadShader("/vc/docs/sketches/workshops/imaging/hardware/kernels/shader.vert", "/vc/docs/sketches/workshops/imaging/hardware/kernels/kernels.frag");

44link    shaderOutline = loadShader("/vc/docs/sketches/workshops/imaging/hardware/kernels/shader.vert", "/vc/docs/sketches/workshops/imaging/hardware/kernels/kernels.frag");

45link    shaderSharpen = loadShader("/vc/docs/sketches/workshops/imaging/hardware/kernels/shader.vert", "/vc/docs/sketches/workshops/imaging/hardware/kernels/kernels.frag");

46link    img = loadImage("/vc/docs/sketches/workshops/imaging/BabyYoda.jpg", () => img.resize(windowWidth / 2, windowHeight / 2));

47link}

48link

49linkfunction setup() {

50link    createCanvas(windowWidth - 15, windowHeight - 21);

51link    noLoop();

52link

53link    button = createButton('FullScreen');

54link    button.attribute('style', 'box-shadow:inset 0px 1px 0px 0px #000000;\n' +

55link        '\tborder-radius:6px;\n' +

56link        '\tborder:1px solid #000000;\n' +

57link        '\tdisplay:inline-block;\n' +

58link        '\tcursor:pointer;\n' +

59link        '\tcolor:#000000;\n' +

60link        '\tfont-family:Arial;\n' +

61link        '\tfont-size:15px;\n' +

62link        '\tfont-weight:bold;\n' +

63link        '\tpadding:6px 24px;\n' +

64link        '\ttext-decoration:none;\n');

65link    button.position(3, 3);

66link    button.mousePressed(fullScreen);

67link

68link    imgEmboss = shaderImage(shaderEmboss, emboss);

69link    imgTopSobel = shaderImage(shaderTopSobel, topSobel);

70link    imgOutline = shaderImage(shaderOutline, outline);

71link    imgSharpen = shaderImage(shaderSharpen, sharpen);

72link}

73link

74linkfunction draw() {

75link    console.time("kernels");

76link

77link    image(imgEmboss, 0, 0, windowWidth / 2, windowHeight / 2);

78link    image(imgTopSobel, windowWidth / 2, 0, windowWidth / 2, windowHeight / 2);

79link    image(imgOutline, 0, windowHeight / 2, windowWidth / 2, windowHeight / 2);

80link    image(imgSharpen, windowWidth / 2, windowHeight / 2, windowWidth / 2, windowHeight / 2);

81link

82link    fill(255, 255, 255);

83link    textSize(32);

84link    text('Emboss', 270, 30);

85link    text('Outline', 280, 315);

86link    text('Top Sobel', 644, 30);

87link    text('Sharpen', 665, 315);

88link

89link    console.timeEnd("kernels");

90link}

91link

92linkfunction shaderImage(shader, matrix) {

93link    graphic = createGraphics(windowWidth - 15, windowHeight - 21, WEBGL);

94link

95link    graphic.shader(shader);

96link    shader.setUniform('texture', img);

97link    shader.setUniform('verticalOffset', 1 / img.height);

98link    shader.setUniform('horizontalOffset', 1 / img.width);

99link    shader.setUniform('kernelRow1', matrix[0]);

100link    shader.setUniform('kernelRow2', matrix[1]);

101link    shader.setUniform('kernelRow3', matrix[2]);

102link

103link    graphic.beginShape();

104link    graphic.vertex(-width / 2, -height / 2, 0, 0);

105link    graphic.vertex(width / 2, -height / 2, 1, 0);

106link    graphic.vertex(width / 2, height / 2, 1, 1);

107link    graphic.vertex(-width / 2, height / 2, 0, 1);

108link    graphic.endShape(CLOSE);

109link

110link    return graphic;

111link}

112link

113linkfunction fullScreen() {

114link    let fs = fullscreen();

115link    fullscreen(!fs);

116link}

117link

118linkfunction windowResized() {

119link    resizeCanvas(windowWidth - 15, windowHeight - 21);

120link}

shader.vert
1link

2linkprecision highp float;

3link

4linkattribute vec3 aPosition;

5linkattribute vec2 aTexCoord;

6linkattribute vec4 aVertexColor;

7link

8linkuniform mat4 uProjectionMatrix;

9linkuniform mat4 uModelViewMatrix;

10link

11linkvarying vec4 vVertexColor;

12linkvarying vec2 vTexCoord;

13link

14linkvoid main() {

15link  vVertexColor = aVertexColor;

16link  vTexCoord = aTexCoord;

17link  gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0);

18link}

19link

kernels.frag
1link

2link

3linkprecision mediump float;

4link

5linkuniform sampler2D texture;

6linkuniform float verticalOffset;

7linkuniform float horizontalOffset;

8linkuniform vec3 kernelRow1;

9linkuniform vec3 kernelRow2;

10linkuniform vec3 kernelRow3;

11link

12linkmat3 kernelMatrix;

13link

14linkvarying vec4 vVertexColor;

15linkvarying vec2 vTexCoord;

16link

17linkfloat constrain(in float value, in float constraint1, in float constraint2);

18linkvec4 convolution();

19link

20linkvoid main() {

21link    kernelMatrix = mat3(kernelRow1, kernelRow2, kernelRow3);

22link    gl_FragColor = convolution() * vVertexColor;

23link}

24link

25linkfloat constrain(in float value, in float constraint1, in float constraint2) {

26link    return  (value>=constraint1) ? (value<=constraint2) ? value : constraint2 : constraint1;

27link}

28link

29linkvec4 convolution() {

30link    float rtotal = 0.0;

31link    float gtotal = 0.0;

32link    float btotal = 0.0;

33link

34link    for (float kx = -1.0; kx <= 1.0; kx++) {

35link        for (float ky = -1.0; ky <= 1.0; ky++) {

36link            vec2 coords = vec2(vTexCoord.x + (kx*horizontalOffset), vTexCoord.y + (ky*verticalOffset));

37link            float r = 0.0;

38link            float g = 0.0;

39link            float b = 0.0;

40link

41link            if ((coords.x >= 0.0 && coords.x <= 1.0) && (coords.y >= 0.0 || coords.y <= 1.0)) {

42link                vec4 actualPixel = texture2D(texture, coords);

43link                r = actualPixel.r;

44link                g = actualPixel.g;

45link                b = actualPixel.b;

46link            }

47link

48link            rtotal += kernelMatrix[int(kx) + 1][int(ky) + 1] * r;

49link            gtotal += kernelMatrix[int(kx) + 1][int(ky) + 1] * g;

50link            btotal += kernelMatrix[int(kx) + 1][int(ky) + 1] * b;

51link        }

52link    }

53link

54link    rtotal = constrain(rtotal, 0.0, 255.0);

55link    gtotal = constrain(gtotal, 0.0, 255.0);

56link    btotal = constrain(btotal, 0.0, 255.0);

57link

58link    return vec4(rtotal, gtotal, btotal, 1.0);

59link}

60link


videos.js
1linklet video;

2linklet shaderVideo;

3linklet videofinal;

4linklet interfaz;

5link

6linklet emboss = [

7link    [-2, -1, 0],

8link    [-1, 1, 1],

9link    [0, 1, 2]

10link];

11link

12linklet topSobel = [

13link    [1, 2, 1],

14link    [0, 0, 0],

15link    [-1, -2, -1]

16link];

17link

18linklet outline = [

19link    [-1, -1, -1],

20link    [-1, 8, -1],

21link    [-1, -1, -1]

22link];

23link

24linklet sharpen = [

25link    [0, -1, 0],

26link    [-1, 5, -1],

27link    [0, -1, 0]

28link];

29link

30link

31link

32linkfunction preload() {

33link    shaderVideo = loadShader("/vc/docs/sketches/workshops/imaging/hardware/kernels/shader.vert", "/vc/docs/sketches/workshops/imaging/hardware/kernels/kernels.frag");

34link    video = createVideo("/vc/docs/sketches/fingers.webm");

35link}

36link

37linkfunction mousePressed() {

38link    video.loop();

39link}

40link

41linkfunction setup() {

42link    createCanvas(640, 480, WEBGL);

43link    noStroke();

44link    video.hide();

45link    video.volume(0);

46link

47link    cam = createCamera();

48link    cam.setPosition(320, 240, (height / 2) / tan(PI / 6));

49link

50link    interfaz = createGraphics(640, 480);

51link    interfaz.fill(255);

52link    interfaz.textSize(25);

53link    interfaz.text('Emboss', 220, 35);

54link    interfaz.text('Outline', 230, 275);

55link    interfaz.text('Top Sobel', 520, 35);

56link    interfaz.text('Sharpen', 535, 275);

57link

58link    stroke(255, 255, 255);

59link    strokeWeight(11);

60link    line(0, 246, 640, 246);

61link    strokeWeight(5);

62link    line(320, 0, 320, 480);

63link

64link    shader(shaderVideo);

65link    shaderVideo.setUniform('texture', video);

66link    shaderVideo.setUniform('verticalOffset', 1 / video.height);

67link    shaderVideo.setUniform('horizontalOffset', 1 / video.width);

68link}

69link

70linkfunction draw() {

71link    console.time("videos");

72link

73link    filterVideo(emboss, 1);

74link    filterVideo(topSobel, 2);

75link    filterVideo(outline, 3);

76link    filterVideo(sharpen, 4);

77link

78link    image(interfaz, 0, 0);

79link

80link    console.timeEnd("videos");

81link}

82link

83linkfunction filterVideo(matrix, nVideo) {

84link    shaderVideo.setUniform('kernelRow1', matrix[0]);

85link    shaderVideo.setUniform('kernelRow2', matrix[1]);

86link    shaderVideo.setUniform('kernelRow3', matrix[2]);

87link

88link    var x0 = (width / 2) * (1 - (nVideo % 2));

89link    var x1 = (width / 2) * (2 - (nVideo % 2));

90link    var y0 = (height / 2) * (Math.ceil(nVideo / 2) - 1);

91link    var y1 = (height / 2) * Math.ceil(nVideo / 2);

92link

93link    beginShape();

94link    vertex(x0, y0, 0, 0);

95link    vertex(x1, y0, 1, 0);

96link    vertex(x1, y1, 1, 1);

97link    vertex(x0, y1, 0, 1);

98link    endShape(CLOSE);

99link}

shader.vert
1link

2linkprecision highp float;

3link

4linkattribute vec3 aPosition;

5linkattribute vec2 aTexCoord;

6linkattribute vec4 aVertexColor;

7link

8linkuniform mat4 uProjectionMatrix;

9linkuniform mat4 uModelViewMatrix;

10link

11linkvarying vec4 vVertexColor;

12linkvarying vec2 vTexCoord;

13link

14linkvoid main() {

15link  vVertexColor = aVertexColor;

16link  vTexCoord = aTexCoord;

17link  gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0);

18link}

19link

kernels.frag
1link

2link

3linkprecision mediump float;

4link

5linkuniform sampler2D texture;

6linkuniform float verticalOffset;

7linkuniform float horizontalOffset;

8linkuniform vec3 kernelRow1;

9linkuniform vec3 kernelRow2;

10linkuniform vec3 kernelRow3;

11link

12linkmat3 kernelMatrix;

13link

14linkvarying vec4 vVertexColor;

15linkvarying vec2 vTexCoord;

16link

17linkfloat constrain(in float value, in float constraint1, in float constraint2);

18linkvec4 convolution();

19link

20linkvoid main() {

21link    kernelMatrix = mat3(kernelRow1, kernelRow2, kernelRow3);

22link    gl_FragColor = convolution() * vVertexColor;

23link}

24link

25linkfloat constrain(in float value, in float constraint1, in float constraint2) {

26link    return  (value>=constraint1) ? (value<=constraint2) ? value : constraint2 : constraint1;

27link}

28link

29linkvec4 convolution() {

30link    float rtotal = 0.0;

31link    float gtotal = 0.0;

32link    float btotal = 0.0;

33link

34link    for (float kx = -1.0; kx <= 1.0; kx++) {

35link        for (float ky = -1.0; ky <= 1.0; ky++) {

36link            vec2 coords = vec2(vTexCoord.x + (kx*horizontalOffset), vTexCoord.y + (ky*verticalOffset));

37link            float r = 0.0;

38link            float g = 0.0;

39link            float b = 0.0;

40link

41link            if ((coords.x >= 0.0 && coords.x <= 1.0) && (coords.y >= 0.0 || coords.y <= 1.0)) {

42link                vec4 actualPixel = texture2D(texture, coords);

43link                r = actualPixel.r;

44link                g = actualPixel.g;

45link                b = actualPixel.b;

46link            }

47link

48link            rtotal += kernelMatrix[int(kx) + 1][int(ky) + 1] * r;

49link            gtotal += kernelMatrix[int(kx) + 1][int(ky) + 1] * g;

50link            btotal += kernelMatrix[int(kx) + 1][int(ky) + 1] * b;

51link        }

52link    }

53link

54link    rtotal = constrain(rtotal, 0.0, 255.0);

55link    gtotal = constrain(gtotal, 0.0, 255.0);

56link    btotal = constrain(btotal, 0.0, 255.0);

57link

58link    return vec4(rtotal, gtotal, btotal, 1.0);

59link}

60link


Code & Results: Image and Video Kernels

Home

Workshopschevron_right
Imaging & Videochevron_right
Softwarechevron_right

Problem Statement Basic - Gray Scale Image Kernels Ascii Art Mosaic Conclusions & Future Work

Hardwarechevron_right

Problem Statement Background Gray Kernels Ascii Art Mosaic Conclusions & Future Work

Renderingchevron_right
GLobal illuminationchevron_right

Ambient Occlusion SSAO SSDO RTAO

Rasterisation

P5 Code Snippetschevron_right

P5 Component Basics Video on dom Video on canvas 3D Libs Sound

Memberschevron_right

Julian David Acosta Bello Santiago Duque Bernal Camilo Andres Gil Ballen Santiago Alejandro Morales Pulido

GitHub