前言

消融效果是有游戏中常用的一种效果，通常用于角色死亡时的消失，消融效果的原理是通过一张噪波贴图，实现模型上随机消失。

效果展示：

image

正文

噪声图

什么是噪声图：其实就是一张灰度图（如图）

image

其实也可以叫做采样图。
至于噪声图的来源与生成大家可以去网上查一查，文章挺多的，菜鸟主要说一下他与本次要实现的效果之间的联系

实现原理

消融

消融其实就是从随机地方开始，然后向四周蔓延，直到慢慢的全部看不见。
首先我们要对噪声纹理进行采样
由于噪声纹理是一张灰度图，所以采样得到r，g，b都是一样的
取其中的与指定的阈值进行比较
大家都清楚黑-白的是rgb值从0-1的一个变化过程，咱们至于要指定一个值，当噪声纹理采样的r值小于这个值时将当前这个片元的alpha设置为0

vec4 frag () {
  vec4 color=mainColor;
  vec2 uv=v_uv;
  vec4 noiseCol =texture(moiseTexture, v_uv);
  if(noiseCol.r<solubility){
        color=vec4(1.0,1.0,1.0,0.0);
  }
  vec4 col = color * texture(mainTexture, v_uv);
  col = CC_APPLY_FOG(col, factor_fog);
  return CCFragOutput(col);
}

image

外描边

菜鸟这个外描边颜色加的确实不咋的，本来像加一个火红的燃烧颜色的，大家可以自己试一下，我将大概的方法说一下，

在上边我们实现了消融
举个例子：
- 假设我们设定的阈值是0.5，噪声采样的r值小于0.5的透明度设置为0，
- 我们的描边初始设为0.15（可自己调整）
- 我们只需要才做一层判断，当噪声采样的r值大于0.5，小于0.5+0.15时对颜色进行修改

 vec4 frag () {
    vec4 color=mainColor;
    vec2 uv=v_uv;
Creator3D:shader_噪声消融
# 前言
消融效果是有游戏中常用的一种效果，通常用于角色死亡时的消失，消融效果的原理是通过一张噪波贴图，实现模型上随机消失。
# 效果展示：
![](https://gitee.com/carlosyzy/Creator3D_Shader_Noise_Dissolve/raw/master/file/2.gif)
# 正文
## 噪声图
- 什么是噪声图：其实就是一张灰度图（如图）
![](https://gitee.com/carlosyzy/Creator3D_Shader_Noise_Dissolve/raw/master/file/3.png)
其实也可以叫做采样图。
至于噪声图的来源与生成大家可以去网上查一查，文章挺多的，菜鸟主要说一下他与本次要实现的效果之间的联系
## 实现原理
### 消融
- 消融其实就是从随机地方开始，然后向四周蔓延，直到慢慢的全部看不见。
- 首先我们要对噪声纹理进行采样
- 由于噪声纹理是一张灰度图，所以采样得到r，g，b都是一样的
- 取其中的与指定的阈值进行比较
大家都清楚黑-白的是rgb值从0-1的一个变化过程，咱们至于要指定一个值，当噪声纹理采样的r值小于这个值时将当前这个片元的alpha设置为0

vec4 frag () {
vec4 color=mainColor;
vec2 uv=v_uv;
vec4 noiseCol =texture(moiseTexture, v_uv);
if(noiseCol.r<solubility){
color=vec4(1.0,1.0,1.0,0.0);
}
vec4 col = color * texture(mainTexture, v_uv);
col = CC_APPLY_FOG(col, factor_fog);
return CCFragOutput(col);
}

![](https://gitee.com/carlosyzy/Creator3D_Shader_Noise_Dissolve/raw/master/file/1.gif)

### 外描边
菜鸟这个外描边颜色加的确实不咋的，本来像加一个火红的燃烧颜色的，大家可以自己试一下，我将大概的方法说一下，
- 在上边我们实现了消融
- 举个例子：
  - 假设我们设定的阈值是0.5，噪声采样的r值小于0.5的透明度设置为0，
  - 我们的描边初始设为0.15（可自己调整）
  - 我们只需要才做一层判断，当噪声采样的r值大于0.5，小于0.5+0.15时对颜色进行修改

vec4 frag () {
vec4 color=mainColor;
vec2 uv=v_uv;
vec4 noiseCol =texture(moiseTexture, v_uv);
float solubility=sin(cc_time.x);

if(noiseCol.r<solubility+0.15){
  float c=(solubility-noiseCol.r)*(0.15/1.0)*0.4;
  color*=vec4(1.0,c,c,1.0);
  if(noiseCol.r<solubility){
      color=vec4(1.0,1.0,1.0,0.0);
  }
}
vec4 col = color * texture(mainTexture, v_uv);
col = CC_APPLY_FOG(col, factor_fog);
return CCFragOutput(col);

}

最终的效果就是咱们一开始展示的那样。
# 地址
- 微信公众号：搬砖小菜鸟
![](https://gitee.com/carlosyzy/Creator3D_Mesh_Basics/raw/master/file/gzh.jpg)
- 扫码关注公众号，发送"噪声消融"可获取源码
- 菜鸟同时创建了一个qq群（960124989）大家可以添加一下，方便大家在使用过程中遇见问题的沟通


    vec4 noiseCol =texture(moiseTexture, v_uv);
    float solubility=sin(cc_time.x);

    if(noiseCol.r<solubility+0.15){
      float c=(solubility-noiseCol.r)*(0.15/1.0)*0.4;
      color*=vec4(1.0,c,c,1.0);
      if(noiseCol.r<solubility){
          color=vec4(1.0,1.0,1.0,0.0);
      }
    }
    vec4 col = color * texture(mainTexture, v_uv);
    col = CC_APPLY_FOG(col, factor_fog);
    return CCFragOutput(col);
  }

最终的效果就是咱们一开始展示的那样。