您的位置:首页 > 运维架构

Shader特效——实现“抗锯齿的黑白格”并原理解析【GLSL】

2016-08-07 16:33 2266 查看

最终效果图:



完整 代码与分析 如下:

#extension GL_OES_standard_derivatives:enable

//precision highp float;

uniform int     u_frequency; // ❤ 小格子的个数 = (2*freq)^2, 大格子的个数 = freq^2
uniform vec4    u_color0;    // 白色
uniform vec4    u_color1;    // 黑色

varying vec2    v_st;

void
main()
{
vec4   color;
vec2   st_width;
vec2   fuzz;
vec2   pmod;
float  fuzz_max;

st_width = fwidth(v_st);
fuzz = st_width * float(u_frequency) * 2.0;
fuzz_max = max(fuzz.s, fuzz.t);
pmod = fract(v_st * float(u_frequency));      // ❤ 创建大网格,每个格子的 pmod 都 ∈ [0, 1)

// 测试
//color = vec4(v_st * float(u_frequency), 0., 1.);
//color = vec4(pmod, 0., 1.);                 // 测试pmod
//color = vec4(fwidth(pmod).x, 0., 0., 1.);   // 测试fwidth
//color = vec4(fwidth(pmod).y, 0., 0., 1.);
//color = vec4(abs(dFdx(pmod).x), 0., 0., 1.);// 测试dFdx
//color = vec4(abs(dFdy(pmod).y), 0., 0., 1.);// 测试dFdy

if (fuzz_max <= 0.5)
{
// smoothstep 在模糊区间上进行插值,分界线的宽度为fuzz
// ❤ 创建更多格子,将原来的大格均分为四
vec2  p = smoothstep(vec2(0.5), fuzz + vec2(0.5), pmod)   // 大部分的格子,并控制格子的比例
+(1.0 - smoothstep(vec2(0.0), fuzz, pmod));      // 一部分的边界
// TEST
//color = vec4(p, 0., 1.);

color = mix(u_color0, u_color1, p.x * p.y + (1.0 - p.x) * (1.0 - p.y));            // 颜色混合:非黑即白
//color = mix(color, (u_color0 + u_color1)/2.0, smoothstep(0.125, 0.5, fuzz_max)); // 和灰色混合, 但效果不明显
}
else
{
color = (u_color0 + u_color1)/2.0;;
}

gl_FragColor = color;
}


测试图:

1. pmod 的测试结果



2. fwidth(pmod).x 和 abs(dFdx(pmod).x) 的效果【即 fwidth 的x分量和 dFdx 的x分量的绝对值相等】



3. fwidth(pmod).y 和 abs(dFdy(pmod).y) 的效果 【即 fwidth 的y分量和 dFdy 的y分量的绝对值相等】



可得出结论:fwidth(pmod).xy == vec2(abs(dFdx(pmod).x) , abs(dFdy(pmod).y))

 注:dFdx dFdy的意义
http://stackoverflow.com/questions/16365385/explanation-of-dfdx http://stackoverflow.com/questions/28246413/understanding-the-basics-of-dfdx-and-dfdy
4. p 的效果



函数图:

1. smoothstep(vec2(0.5), fuzz + vec2(0.5), pmod) 的效果图为:



2. 1.0 - smoothstep(vec2(0.0), fuzz, pmod 的效果图为:



3. smoothstep(vec2(0.5), fuzz + vec2(0.5) + 1.0 - smoothstep(vec2(0.0), fuzz, pmod 的效果图为:



4. p.x * p.y + (1.0 - p.x) * (1.0 - p.y) 的效果图为:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  OpenGL