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) 的效果图为:
相关文章推荐
- Shader特效——“跳动的心”的原理解析【GLSL】
- Shader特效——实现“抗锯齿(AntiAliasing)”【GLSL】
- Shader特效——实现“火苗”【GLSL】
- Shader特效——实现“放大镜/缩小镜”【GLSL】
- Shader特效——“Sephia等效果”的实现 【GLSL】
- Shader特效——“旋转粒子”的实现【GLSL】
- Shader特效——“Invaders Invaders(火星文雨)效果”的实现 【GLSL】
- Shader特效——实现简单的“FishEye”【GLSL】
- Shader特效——“Gamma校正”的实现 【GLSL】
- Shader特效——“Simple RayTrace”的实现 【GLSL】
- Shader特效——“翻页”的实现 【GLSL】
- Shader特效——“Simple 3D Raymarch”的实现 【GLSL】
- Shader特效——实现“HDR”效果【GLSL】
- Shader特效——“Barrel Blur”的实现 【GLSL】
- Shader特效——实现“闪电”【GLSL】
- Shader特效——“Point in Box”的实现 【GLSL】
- Shader特效——“水彩画”的实现【GLSL】
- Shader特效——“Bilateral Filter”的实现 【GLSL】
- Shader特效——"Floyd Steinberg 抖动” 的实现 【OpenCV】【GLSL】
- Shader特效——“Median Filter效果”的实现 【GLSL】