Star

Created With

linkConvolutional Matrix with Harwdware

El proceso de shaders se puede extender a operaciones con filtros de convulsión sobre las imágenes que utilizamos como texturas sobre el objeto tridimensional, para esto aplicamos cada matriz sobre los pixeles adyacentes del pixel analizado, aplicando la convolución y obteniendo los nuevos valores para cada canal de color de los mismos.

La matriz de convolucion se pasa como un parametro en una variable uniforme en conjunto con la imagen y las coordenandas de la textura, de esta manera logramos colocar diferentes mascaras de convolucion al pasar otra matriz como parametro dentro de script en javasript.

En el archivo frag tomamos la matriz de convolucion y se la aplicamos a la matriz de texeles adyacentes para generar la modificacion de la textura.

kernel-texture.frag
1linkvoid main() {

2link //Get Coordinates for every neighbor pixel

3link tx[0] = vTexCoord.st + vec2(-texOff.s, -texOff.t);

4link tx[1] = vTexCoord.st + vec2(0.0, -texOff.t);

5link tx[2] = vTexCoord.st + vec2(texOff.s, -texOff.t);

6link tx[3] = vTexCoord.st + vec2(-texOff.s, 0.0);

7link tx[4] = vTexCoord.st + vec2(0.0, 0.0);

8link tx[5] = vTexCoord.st + vec2(texOff.s, 0.0);

9link tx[6] = vTexCoord.st + vec2(-texOff.s, texOff.t);

10link tx[7] = vTexCoord.st + vec2(0.0, texOff.t);

11link tx[8] = vTexCoord.st + vec2(texOff.s, texOff.t);

12link

13link //Get RGBA color from the image in each pixel

14link vec4 rgba[9];

15link for(int i=0; i<9; i++){

16link rgba[i] = texture2D(texture, tx[i]);

17link }

18link

19link //Apply Convolutional Operation to the pixel

20link vec4 conv;

21link for(int i=0; i<9; i++){

22link conv += rgba[i] * mask[i];

23link }

24link conv.a = 1.0;

25link

26link gl_FragColor = conv;

27link}

linkConvolution video

linkFuentes

Convolutional Matrix with HarwdwareConvolution videoFuentes

Home

Workshopschevron_right
P5 Code Snippetschevron_right
Teamchevron_right
Deliverieschevron_right
Workshop Softwarechevron_right
Workshop Hardwarechevron_right
Workshop Renderingchevron_right