Part 6. Border highlighting
http://seganelservice.ru/WebGL/Wade33/
This is Sobel shader, which can do such filtering in posteffect:





//common vars for all filtering
int mode = 1;
bool invert = false;
float realWeight = 1.0;
vec3 color = vec3(1.0,1.0,0.0);
vec2 vUv = uvAlphaTime.xy;
vec4 realColor = texture2D( uDiffuseSampler, vUv);
//------Sobel--------//
float sobelWeight = 1.0;
vec2 resolution = vec2(1920.,1080.);
vec2 texel = vec2( 1.0 / resolution.x, 1.0 / resolution.y );
// kernel definition (in glsl matrices are filled in column-major order)
const mat3 Gx = mat3( -1, -2, -1, 0, 0, 0, 1, 2, 1 ); // x direction kernel
const mat3 Gy = mat3( -1, 0, 1, -2, 0, 2, -1, 0, 1 ); // y direction kernel
// fetch the 3x3 neighbourhood of a fragment
// first column
float tx0y0 = texture2D( uDiffuseSampler, vUv + texel * vec2( -1, -1 ) ).r;
float tx0y1 = texture2D( uDiffuseSampler, vUv + texel * vec2( -1, 0 ) ).r;
float tx0y2 = texture2D( uDiffuseSampler, vUv + texel * vec2( -1, 1 ) ).r;
// second column
float tx1y0 = texture2D( uDiffuseSampler, vUv + texel * vec2( 0, -1 ) ).r;
float tx1y1 = texture2D( uDiffuseSampler, vUv + texel * vec2( 0, 0 ) ).r;
float tx1y2 = texture2D( uDiffuseSampler, vUv + texel * vec2( 0, 1 ) ).r;
// third column
float tx2y0 = texture2D( uDiffuseSampler, vUv + texel * vec2( 1, -1 ) ).r;
float tx2y1 = texture2D( uDiffuseSampler, vUv + texel * vec2( 1, 0 ) ).r;
float tx2y2 = texture2D( uDiffuseSampler, vUv + texel * vec2( 1, 1 ) ).r;
// gradient value in x direction
float valueGx = Gx[0][0] * tx0y0 + Gx[1][0] * tx1y0 + Gx[2][0] * tx2y0 +
Gx[0][1] * tx0y1 + Gx[1][1] * tx1y1 + Gx[2][1] * tx2y1 +
Gx[0][2] * tx0y2 + Gx[1][2] * tx1y2 + Gx[2][2] * tx2y2;
// gradient value in y direction
float valueGy = Gy[0][0] * tx0y0 + Gy[1][0] * tx1y0 + Gy[2][0] * tx2y0 +
Gy[0][1] * tx0y1 + Gy[1][1] * tx1y1 + Gy[2][1] * tx2y1 +
Gy[0][2] * tx0y2 + Gy[1][2] * tx1y2 + Gy[2][2] * tx2y2;
// magnitute of the total gradient
float G = sqrt( ( valueGx * valueGx ) + ( valueGy * valueGy ) );
//------Sobel--------//
//------Last common mix--------//
if (invert)
{
G=1.-G;
}
vec4 filteredFinal = G *sobelWeight * vec4(color,1.);
vec4 realFinal = realColor*realWeight;
if (mode==0)
{
//real color
gl_FragColor = realFinal;
}
if (mode==1)
{
//filtered color
gl_FragColor = filteredFinal;
}
else if (mode==2)
{
//max of colors
gl_FragColor = max(realFinal, filteredFinal);
}
else if (mode==3)
{
//min of colors
gl_FragColor = min(realFinal, filteredFinal);
}
else if (mode==4)
{
//mul colors
gl_FragColor = realFinal*filteredFinal;
}
else if (mode==5)
{
//div colors
gl_FragColor = realFinal/filteredFinal;
}
else if (mode==6)
{
//add colors
gl_FragColor = realFinal+filteredFinal;
}
else if (mode==7)
{
//sub colors
gl_FragColor = realFinal-filteredFinal;
}
//------Last common mix--------//