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,可查看减去原遮罩之前的膨胀区域;橙色会包含原剪影,但最后叠回的叶片仍遮住内部。

深入理解

用到的内置函数

一步步学会这个效果