上代码
原理很简单，将图片的透明度数据偏移一周来达到描边度效果，我想，通过mat应该能更快得到描边效果，另外由于此图的图片边缘紧挨靠边界，导致透明度出错，这个可以在前期图片上预留透明空间来避免这个问题，这里我缩小了原图，但效果不太好
shader_type canvas_item;
uniform int SAMPLES = 6;
uniform float WIDTH = 4.0;
uniform vec4 OUTLINE_COLOR = vec4(0.,0.,0.,1.);
uniform vec2 TEXTURE_SCALE = vec2(0.94);
void fragment(){
vec2 uv_offset = (1.-TEXTURE_SCALE)*.5;
vec2 uv = UV/TEXTURE_SCALE-uv_offset;
vec4 cc = texture(TEXTURE,uv);
if(UV.x<uv_offset.x || UV.x>1.-uv_offset.x){
cc.a = 0.;
}
if(UV.y<uv_offset.y || UV.y>1.-uv_offset.y){
cc.a = 0.;
}
//OUTLINE
float outlineAlpha = 0.0;
float angle = 0.0;
float unit_angle = 1.0/float(SAMPLES) * 3.1415*2.0;
for( int i=0; i<SAMPLES; i++ ){
angle += unit_angle;
vec2 testPoint = vec2( (WIDTH*TEXTURE_PIXEL_SIZE.x)*cos(angle), (WIDTH*TEXTURE_PIXEL_SIZE.y)*sin(angle) );
testPoint = clamp( testPoint+uv, vec2(0.), vec2(1.));
float sampledAlpha = texture( TEXTURE, testPoint ).a;
outlineAlpha = max( outlineAlpha, sampledAlpha );
}
COLOR = mix( vec4(0.0), OUTLINE_COLOR, outlineAlpha );
COLOR = mix( COLOR, cc, cc.a );
}
参考：
单色描边
https://www.shadertoy.com/view/XdV3Dc
发光描边
https://www.shadertoy.com/view/XlsXRB
