重要事情
菜鸟的新头像来了，注意了是原创的，原创，原创，原创，原创:
愉快的周末已经完了，又要开始奋斗了，come on！
大家注意了奥，菜鸟又给大家带来了一个不要钱的炫酷效果–护盾
效果展示
正文
从效果中可以看到，整个效果分为三部分：护罩，底盘，星星。接下来菜鸟就三部分分别说一下
1.护罩
护罩的实现原理：
- 创建sphere 作为护罩的基础模型
- 自定义材质
- 顶点着色器，获取sphere自身坐标系下的坐标，
- 片元着色器，拿到sphere自身坐标系下的坐标，通过判断对sphere 底部进行裁剪（菜鸟实用的是透明度为0）
- 片元着色器，结合噪声图，实现整体的透明度设置，以及使用uv偏移实现动态的旋转
- 代码
vec4 frag () {
vec2 uv=v_uv;
vec4 color=mainColor;
uv.x-=cc_time.x/5.0;
uv.y-=cc_time.x/5.0;
vec4 noiseCol=texture(noiseTexture, uv);
color.a=noiseCol.r*0.3;
if(position.y < - 0.35){
color.a=0.0;
}
vec4 col=color * texture(mainTexture, uv);
col = CC_APPLY_FOG(col, factor_fog);
return CCFragOutput(col);
}
2.地盘
地盘的实现原理：
- plane 作为基础模型
- 自定义材质
- 片元着色器：设置上图为plane的贴图，通过采样后数据的处理将黑色的区域的透明度设置为0
- 为了效果更加的完美，同时再给他加一个自身的旋转效果，通过uv来实现旋转的效果
- 片元着色器：设置上图为plane的贴图，通过采样后数据的处理将黑色的区域的透明度设置为0
- 代码
vec4 frag () {
vec2 uv=v_uv;
float speed=0.5;
uv-=vec2(0.5, 0.5);
//旋转矩阵公式
uv = vec2(uv.x * cos(speed * cc_time.x) - uv.y * sin(speed * cc_time.x), uv.x * sin(speed * cc_time.x) + uv.y * cos(speed * cc_time.x));
if(abs(uv.x)>0.5 || abs(uv.y)>0.5){
uv = vec2(0.0, 0.0);
}
//恢复纹理位置
uv += vec2(0.5, 0.5);
vec4 color=mainColor;
vec4 col=texture(mainTexture, uv);
if(col.r>0.3){
col*=color;
}else{
color.a=0.0;
col*=color;
}
col = CC_APPLY_FOG(col, factor_fog);
return CCFragOutput(col);
}
3.星星
星星的实现主要是用粒子系统来，具体的设置参数为：
- 1.粒子的StartLifetime设置区间值，实现随机感
- 2.粒子的ShapeModule的形状设置为Sphere
- 3.设置SizeOvertimerModule 为从大到小的一个过程
地址
- 微信公众号：搬砖小菜鸟
公众号回复护盾 获取demo源码
==关注公众号，获取更多干货==
