非常非常感谢大神们分享的相关博文!然后,这个是借鉴了CocosCreator Shader学习(一):描边效果修改的,再次万分感谢楼主!!!
起因是,需要文字下阴影,但是自带的labelShadow在手机上面不显示,才想到用材质实现的。有点锯齿,不知道怎么解决,不过手机上看还好能看得过去。直接贴代码了:
```javascript
// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.
CCEffect %{
techniques:
- passes:
- vert: vs
frag: fs
blendState:
targets:
- blend: true
rasterizerState:
cullMode: none
properties:
texture: { value: white }
alphaThreshold: { value: 0.5 }
outlineWidth: { value: 0.01 }
imgColor: {value: [255,0,255,255] ,editor: {type: color} }
}%
CCProgram vs %{
precision highp float;
#include
#include
in vec3 a_position;
in vec4 a_color;
out vec4 v_color;
#if USE_TEXTURE
in vec2 a_uv0;
out vec2 v_uv0;
#endif
void main () {
vec4 pos = vec4(a_position, 1);
#if CC_USE_MODEL
pos = cc_matViewProj * cc_matWorld * pos;
#else
pos = cc_matViewProj * pos;
#endif
#if USE_TEXTURE
v_uv0 = a_uv0;
#endif
v_color = a_color;
gl_Position = pos;
}
}%
CCProgram fs %{
precision highp float;
#include
#include
in vec4 v_color;
#if USE_TEXTURE
in vec2 v_uv0;
uniform sampler2D texture;
#endif
//cocos规定在shader中所有非sampler的uniform都应以block形式声明
uniform InputData{
float outlineWidth; //外部程序输入描边宽度0.0-1.0。推荐0.05左右
};
uniform color{
vec4 imgColor;
};
//检查pos点是否需要描边
bool checkIsMakeOutline(vec2 pos){
vec4 colorCur = texture(texture, pos);//检测点颜色
if(colorCur.a >= 0.4)return false;//如果已经有颜色了就不需要覆盖颜色不再继续检测
//检测当前点上周的点的alpha值
vec2 posTarget = pos + vec2(0, -outlineWidth);
vec4 colorTarget = texture2D(texture, posTarget);
if(colorTarget.a > 0.004 )return true;//上周的点如果有颜色,检测点就需描边
return false;
}
void main () {
vec4 o = vec4(1, 1, 1, 1);
#if USE_TEXTURE
o *= texture(texture, v_uv0);
#if CC_USE_ALPHA_ATLAS_TEXTURE
o.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;
#endif
#endif
o *= v_color;
ALPHA_TEST(o);
if(checkIsMakeOutline(v_uv0)){
//检查到v_uv0点需要描边,直接改变颜色值
o = imgColor;
}
gl_FragColor = o;
}
}%
```