根據(jù)對 來點花樣！使用噪聲圖實現(xiàn)不規(guī)則溶解效果 的學(xué)習(xí)。

在學(xué)習(xí)Shader的過程中做的小案例，嘗試在 Creator v2.4.10 使用噪聲圖實現(xiàn)物體的消融效果。

噪聲圖：

640.png

Shader的編寫：

CCEffect 中添加 propertie：

properties:
    dissolveMap: { value: white, editor: { tooltip: '噪音圖'} }
    dissolveThreshold: { value: 0.3, editor: { tooltip: '溶解閾值'} }
    edgeColor: { value: [1, 1, 1, 1] ,editor: { type: color, tooltip: '邊緣顏色'}}
    edgeWidth: { value: 0.05, editor: { tooltip: '邊緣寬度'} }

修改片段著色器fs：

聲明部分：

  #if USE_TEXTURE
  uniform sampler2D dissolveMap; // 噪音圖
  #endif
 
  uniform Dissolve {  // 消融相關(guān)
    vec4 edgeColor;
    float edgeWidth;
    float dissolveThreshold;
  };

入口函數(shù)：

void main () {
    vec4 o = vec4(1, 1, 1, 1);
 
    #if USE_TEXTURE
      vec4 dissolveValue = texture2D(dissolveMap, v_uv0);
 
      if (dissolveValue.r < dissolveThreshold) { // 溶解
        discard;
      }
      
      o = texture2D(texture, v_uv0);
    #endif
 
    o *= v_color;
    if (dissolveValue.r < dissolveThreshold + edgeWidth && o.a > 0.0) { // 邊緣
      float edge = smoothstep(dissolveThreshold - edgeWidth, dissolveThreshold + edgeWidth, dissolveValue.r);
      vec4 finalColor = mix(o, edgeColor, edge);
      o = finalColor;
    }
 
    gl_FragColor = o.rgba;
  }

使用腳本控制節(jié)點逐漸消融：

const {ccclass, property} = cc._decorator;
 
@ccclass
export default class DissolveEffect extends cc.Component {
 
    @property
    dissolveInterval: number = 0.01;
    @property
    dissolveStep: number = 0.01;
 
    start () {
        const material = this.getComponent(cc.Sprite).getMaterial(0);
 
        material.setProperty('dissolveThreshold', 0);
        
        this.schedule(()=>{
 
            let dissolveThreshold = material.getProperty('dissolveThreshold', 0);
            dissolveThreshold += this.dissolveStep;
            material.setProperty('dissolveThreshold', dissolveThreshold);
 
            // console.log(dissolveThreshold);
            
        }, this.dissolveInterval, 1/this.dissolveStep);
    }
}

最終效果：

shader.gif