-
Notifications
You must be signed in to change notification settings - Fork 5
[cocos2dx]outline
Shuai YUAN edited this page Apr 28, 2017
·
10 revisions
- wikipedia: Image gradient
- Image derivatives
- wikipedia: Color gradient
- wikipedia: Sobel operator
- wikipedia: Canny edge detector
- wikipedia: Discrete Laplace operator
- OpenCV: Sobel Derivatives
- Sobel Edge Detector
- Let it glow! - Dynamically adding outlines to characters
- unity3d shader之Roberts Sobel Canny 三种边缘检测方法
- cocos2d 游戏的描边实现
- cocos2d-x与着色器设计--入门篇(游云凌天原创)
- https://github.com/LingTian/shaderlearner/tree/shaderlearner/newmygame/Resources/shaders
- 基于cocos2dx 2.x做的一些shader效果Demo
- http://stackoverflow.com/questions/11188314/opengl-glsl-cel-shading-and-outline-algorithm
- https://gamedev.stackexchange.com/questions/68401/how-can-i-draw-outlines-around-3d-models
// From https://github.com/spite/Wagner/blob/master/fragment-shaders/sobel-fs.glsl
uniform sampler2D tInput;
uniform vec2 resolution;
varying vec2 vUv;
void main(void) {
float x = 1.0 / resolution.x;
float y = 1.0 / resolution.y;
vec4 horizEdge = vec4( 0.0 );
horizEdge -= texture2D( tInput, vec2( vUv.x - x, vUv.y - y ) ) * 1.0;
horizEdge -= texture2D( tInput, vec2( vUv.x - x, vUv.y ) ) * 2.0;
horizEdge -= texture2D( tInput, vec2( vUv.x - x, vUv.y + y ) ) * 1.0;
horizEdge += texture2D( tInput, vec2( vUv.x + x, vUv.y - y ) ) * 1.0;
horizEdge += texture2D( tInput, vec2( vUv.x + x, vUv.y ) ) * 2.0;
horizEdge += texture2D( tInput, vec2( vUv.x + x, vUv.y + y ) ) * 1.0;
vec4 vertEdge = vec4( 0.0 );
vertEdge -= texture2D( tInput, vec2( vUv.x - x, vUv.y - y ) ) * 1.0;
vertEdge -= texture2D( tInput, vec2( vUv.x , vUv.y - y ) ) * 2.0;
vertEdge -= texture2D( tInput, vec2( vUv.x + x, vUv.y - y ) ) * 1.0;
vertEdge += texture2D( tInput, vec2( vUv.x - x, vUv.y + y ) ) * 1.0;
vertEdge += texture2D( tInput, vec2( vUv.x , vUv.y + y ) ) * 2.0;
vertEdge += texture2D( tInput, vec2( vUv.x + x, vUv.y + y ) ) * 1.0;
vec3 edge = sqrt((horizEdge.rgb * horizEdge.rgb) + (vertEdge.rgb * vertEdge.rgb));
gl_FragColor = vec4( edge, texture2D( tInput, vUv ).a );
}
// Original source obtained from https://www.shadertoy.com/view/Mdf3zr by jmk
precision mediump float;
varying mediump vec2 vTex;
uniform lowp sampler2D samplerFront;
uniform mediump float seconds;
uniform mediump float pixelWidth;
uniform mediump float pixelHeight;
uniform float EdgeFlag;
uniform float RC;
uniform float GC;
uniform float BC;
float d = sin(seconds * 2.)*0.5 + 1.5;
vec2 resolution = vec2(1./pixelWidth, 1./pixelHeight);
float lookup(vec2 p, float dx, float dy)
{
vec2 uv = (p.xy + vec2(dx * d, dy * d)) / resolution.xy;
vec4 c = texture2D(samplerFront, uv);
return 0.2126*c.r + 0.7152*c.g + 0.0722*c.b;
}
void main(void)
{
vec2 p = gl_FragCoord.xy;
float gx= 0.0;
gx += -1.0 * lookup(p, -1.0, -1.0);
gx += -2.0 * lookup(p, 0.0, -1.0);
gx += -1.0 * lookup(p, 1.0, -1.0);
gx += 1.0 * lookup(p, -1.0, 1.0);
gx += 2.0 * lookup(p, 0.0, 1.0);
gx += 1.0 * lookup(p, 1.0, 1.0);
float gy = 0.0;
gy += -1.0 * lookup(p, -1.0, -1.0);
gy += -2.0 * lookup(p, -1.0, 0.0);
gy += -1.0 * lookup(p, -1.0, 1.0);
gy += 1.0 * lookup(p, 1.0, -1.0);
gy += 2.0 * lookup(p, 1.0, 0.0);
gy += 1.0 * lookup(p, 1.0, 1.0);
float g = gx*gx + gy*gy;
vec4 col = texture2D(samplerFront, p / resolution.xy);
if (EdgeFlag == 1.0)
col *= vec4(g*RC/255., g*GC/255., g*BC/255., 1.0);
else
col += vec4(g*RC/255., g*GC/255., g*BC/255., 1.0);
gl_FragColor = col;
}