Creator3D: shader实现的“地表最强护盾”,没有之一

重要事情
菜鸟的新头像来了,注意了是原创的,原创,原创,原创,原创:

愉快的周末已经完了,又要开始奋斗了,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来实现旋转的效果
  • 代码
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源码

==关注公众号,获取更多干货==

4赞

学习了,感谢分享!

顶 ~
不参加活动么:grin:

给大佬递茶

我也是菜鸟:baby_chick:

:joy::joy::joy:

看着大佬们的文章感觉自己这个太小儿科了 还是算了吧:joy:

大佬 学习了

mark了

mark 牛逼大佬