Cel Shading - How To: Border Detection

[bergandil]

Hey all!

I’d like to make toon outlines in the BGE, but just don’t know where to start.
My plan is editing the rendering process, but I don’t know whether I need to implement it in the BGE itself, or if I can access it through scripting.

Btw, here is what I want to do: (separately for all objects)

• first render the backfaces of the objects with thick (thicker than normal) black lines
• then render the objects normally

Thank You for reading.

[TwisterGE]

Just copy your mesh and scale it with Shift+S. Then apply a black material to it…

[Smoliterno]

just returning to blender after a few years… but if im not mistaken there was a toon shader that actually did something like that?

Becase duplicating your mesh and scaling it seems a Little innecesary high poly…

[RockyMadio]

@Smoliterno

just returning to blender after a few years… but if im not mistaken there was a toon shader that actually did something like that?

Becase duplicating your mesh and scaling it seems a Little innecesary high poly…

^^

Blend Swap | Toon Shading Outlines - Cel-Shading [GLSL|Realtime|BGE]

[Scalia]

@blenderrendersk

Hey, I used an outline filter in a game once

uniform sampler2D bgl_RenderedTexture;
uniform sampler2D bgl_DepthTexture;
uniform vec2 bgl_TextureCoordinateOffset[9];

const float near = 0.1;
const float far = 100.0;

float depth(in vec2 coo)
{
 vec4 depth =  texture2D(bgl_DepthTexture, coo);
 return -near / (-1.0+float(depth) * ((far-near)/far));
}

void main(void)
{


    vec4 sample[9];
    vec4 border;
    vec4 texcol = texture2D(bgl_RenderedTexture, gl_TexCoord[0].st);



    for (int i = 0; i < 9; i++)
    {
        sample[i] = vec4(depth(gl_TexCoord[0].st + bgl_TextureCoordinateOffset[i])); 
    }

    vec4 horizEdge = sample[2] + sample[5] + sample[8] -
                     (sample[0] + sample[3] + sample[6]);

    vec4 vertEdge = sample[0] + sample[1] + sample[2] -
                    (sample[6] + sample[7] + sample[8]);

    border.rgb = sqrt((horizEdge.rgb * horizEdge.rgb) + 
                            (vertEdge.rgb * vertEdge.rgb));

       if (border.r > 0.8||border.g > 0.8||border.b > 0.8){
        gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
    }else{
  gl_FragColor.rgb = texcol.rgb;
        gl_FragColor.a = 1.0;
    }
}

This is the code. Using it should give you the same effect as before!
Nice project btw! Keep going

this is the shader that BlenderRenderSky uses… and he’s super cool, so you know that it will work.

[bergandil]

@Scalia

this is the shader that BlenderRenderSky uses… and he’s super cool, so you know that it will work.

What license is it?

[Scalia]

free. he posted it because someone asked. check out the original post.

[bergandil]

Been playing around with those shaders you recommended.

Still, couldn’t effectively (I mean without raising GPU computing time greatly) get a nice smooth outline.

Still, I’d be glad, if someone could point me to the right direction to alter the rendering process.

[superflip]

short and sweet…no idea whos it is

 uniform sampler2D bgl_RenderedTexture;
    uniform sampler2D bgl_DepthTexture;


    void main()
    {
       float depth = texture2D( bgl_DepthTexture, gl_TexCoord[0].xy).r;
       float depth2 = texture2D( bgl_DepthTexture, gl_TexCoord[0].xy + vec2(0,0.002)).r;
       float depth3 = texture2D( bgl_DepthTexture, gl_TexCoord[0].xy + vec2(0.002,0)).r;
       
       float fac = abs(depth-depth2) + abs(depth-depth3);
       
       float intensity = 9050;  


       vec4 sub = vec4(fac*intensity,fac*intensity,fac*intensity,0);
       
       gl_FragColor = texture2D( bgl_RenderedTexture, gl_TexCoord[0].xy ) - sub;
    }
    
    
    
    #change float intensity