Sobel Filter Operation| applying the sobel kernel to Texture

Started by SonicBurst, April 26, 2017, 07:21:55 AM

Previous topic - Next topic

SonicBurst

Hi  Jpct Community,

     Recently I was fiddling with Jpct's renderToTexture... and I wanted to do some Sobel filter to a texture for edge detection for a nice toony effect.
So I did this->

                fb.setRenderTarget(targetTexture);
fb.setBlittingShader(shader);
fb.clear(RGBColor.BLUE);
world.renderScene(fb);
world.draw(fb);
fb.display();
fb.removeRenderTarget();


fb.blit(targetTexture, srcX, srcY, destX, destY, sourceWidth, sourceHeight, destWidth, destHeight, -1, false);

blitNumber(lfps, 5, 5);
fb.display();


and this is the fragment shader I intend to apply on the texture->
(copied from internet) ->

in vec2 TexCoords;
out vec4 color;

uniform sampler2D screenTexture;

mat3 sx = mat3(
    1.0, 2.0, 1.0,
    0.0, 0.0, 0.0,
   -1.0, -2.0, -1.0
);
mat3 sy = mat3(
    1.0, 0.0, -1.0,
    2.0, 0.0, -2.0,
    1.0, 0.0, -1.0
);

void main()
{
   vec3 diffuse = texture(screenTexture, TexCoords.st).rgb;
    mat3 I;
    for (int i=0; i<3; i++) {
        for (int j=0; j<3; j++) {
            vec3 sample  = texelFetch(screenTexture, ivec2(gl_FragCoord) + ivec2(i-1,j-1), 0 ).rgb;
           I[i][j] = length(sample);
    }
}

float gx = dot(sx[0], I[0]) + dot(sx[1], I[1]) + dot(sx[2], I[2]);
float gy = dot(sy[0], I[0]) + dot(sy[1], I[1]) + dot(sy[2], I[2]);

float g = sqrt(pow(gx, 2.0)+pow(gy, 2.0));
color = vec4(diffuse - vec3(g), 1.0);
}



     I guess that we dont have that "texelFetch()" in opengles 2.0  . So do we have any alternate for this?
Or any pointer to a different approach ?
     I am new to 3d programming and trying to experiment with different concepts . I would like to make a 3d game for android,
I found Jpct-ae and I loved its simplicity :)


SonicBurst2

Hi I am Sonic Burst...
Thank you for the link  . I got a good hint from it. :)
here is the result , It is the Blender Suzanne model with a custom shader for cel shading and Sobel filter applied on to the rendered/blitted texture.

and

----

----

It really came out quite well...performance was also good  :)
There were some issues though->
1) Don't know why there is some artifacts on the right half side of the image as you can see.
2) Also this is a modified hello shader example  So you can see the blurred fps counter on top left. It was processed as well .So how would I Exclude it from the post processing . Else it would consume the GUI too.
   
    Unfortunately I was not able to access my account :(  So I had to create a new one . I forgot my password and when I used forgot password option , then while renewing the password , it gave me "Invalid activation Code " Error.


SonicBurst2

     One more thing I have noticed recently that if I allow the App to be opened for about ~ 70 sec -90 sec ,
the device crashes... 
But if I comment out "framebuffer.setRenderTarget()" and  "framebuffer.removeRenderTarget()"  ...  then it seemingly works fine....
Something is heavily wrong with the way I am doing my Post Processing...(especially while handling the framebuffer) . :(

EgonOlsen

What kind of crash is that? Maybe you are creating new textures every frame or something like that?

SonicBurst2

Hi Egon....I was able to track it. I noticed that I had out of memory exception due to a misplaced "rendertotarget" without ever removing it.....I deleted that and it is working fine now... :P
So my question was - how to actually exclude the gui elements, (like the fps counter here)

EgonOlsen

Just don't blit them before removing the render target? Or didn't I get the question?