GLSL 效果示例
透明图片描边:沿不规则剪影加一圈外轮廓
输入一张有透明边缘的叶片,外描边跟随叶尖和凹口。
在线示例
修改右侧代码,左侧预览会实时更新。
观察什么
输入一张有透明边缘的叶片,外描边跟随叶尖和凹口。
实现原理
对透明度作邻域最大值扩张,再减去原透明度,得到外圈。这里检测剪影,不检测叶片内部的亮度变化。
找到控制效果的代码
vec4 tex=texture2D(u_texture,uv);float a=tex.a;vec2 px=(1.+u_parameter*7.)/vec2(256.);float around=0.;for(int y=-1;y<=1;y++)for(int x=-1;x<=1;x++)around=max(around,texture2D(u_texture,uv+vec2(float(x),float(y))*px).a);c=mix(c,vec3(1.,.65,.2),max(around-a,0.));c=mix(c,tex.rgb,a);
动手修改
把效果参数从 0 调到 1:px=(1.+u_parameter*7.)/vec2(256.) 会让相邻采样距离从一个纹理像素增至八个。橙色边框会向叶片外扩,叶片不透明的内部仍保持原色。
调试与成本
3×3 循环读取九个相邻 Alpha,另有一次原图采样。把 around-a 改为 around,可查看减去原遮罩之前的膨胀区域;橙色会包含原剪影,但最后叠回的叶片仍遮住内部。