学校建设网站目标google国外入口
期望图:
PS中的实现
先贴上两个使用PS做图的链接:
参考链接1
参考链接2
简单素描的实现
链接1使用程序很容易在shader中复现。
总结起来就是以下几步:
- 灰度化
- 反色(反相)
- 高斯模糊
- 颜色减淡
灰度图
直接对每一个像素乘于一个灰度的乘子即可得到当前像素的灰度:
vec3 greyScale(vec3 inputcolor){vec3 G = vec3(0.299,0.587,0.114);float grayvalue = dot(inputcolor,G);return vec3(grayvalue);
}
效果图如下:
反色
直接相减即可
vec3 invertColor(vec3 inputcolor){return (vec3(1.0,1.0,1.0) - inputcolor);
}
效果图如下:
模糊(使用均值模糊)
对每个像素乘于一个5*5的核之后乘于0.4即可:
1 1 1 1 1
1 1 1 1 1
1 1 1 1 1
1 1 1 1 1
1 1 1 1 1
效果图如下:
颜色减淡
final_color
为第三步模糊化之后的结果。
base_color
为第一步取灰度图之后的结果。
float base_color = greyScale(texture2D(texture, coord).rgb).r;
final_color = vec3( min(base_color + basecolor * final_color.r/(1.0-final_color.r) , 1.0) );
即:
final_color = min ( base_color * (1 / (1-final_color)) , 1.0 );
若没有第三步,那么final_color = base_color*(1/base_color) = 1
,则结果全部为白色。
第三步的作用相当于是提取边框。
效果图:
素描实现二
上图中人手的部分完全是白色,也就是说,只有边缘有灰色黑色,这是模糊变换的结果。
要想人手的部分是灰色,需要将模糊变换替换为别的滤镜,比如:
半径为2的最小值。
final_color =min(final_color,invertColor(greyScale(texture2D(texture, coord)).rgb) ) );
...
这个的效果图如下:
仔细对比效果图与期望图的差别之后,我们发现在人物的背景墙中出现了斜向的笔刷样式。
在背景的反色效果中,其颜色值明显小于一个值。可以依据这个提取出背景,然后画出笔刷。
但是效果很差,笔刷太过于规整:
//实现背景条纹失败
if( invertColor( greyScale(texture2D( texture, coord.xy+vec2(samples[2],samples[7]) ).rgb)).r < 0.3)if( mod (coord.x - coord.y , 0.05 ) <= 0.01 ) final_color = vec3(0.0, 0.0, 0.0 );