Cocos Shader入门学习案例，消融效果

最新推荐文章于 2024-05-23 16:57:23 发布

Xin2152

最新推荐文章于 2024-05-23 16:57:23 发布

阅读量440

点赞数 14

分类专栏： Cocos_v2 文章标签：学习 cocos2d 着色器 typescript

本文链接：https://blog.csdn.net/weixin_52985165/article/details/137857476

版权

Cocos_v2 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

根据对来点花样！使用噪声图实现不规则溶解效果的学习。

在学习Shader的过程中做的小案例，尝试在 Creator v2.4.10 使用噪声图实现物体的消融效果。

噪声图：

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 {  // 消融相关
    vec4 edgeColor;
    float edgeWidth;
    float dissolveThreshold;
  };

入口函数：

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;
  }

使用脚本控制节点逐渐消融：

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);
    }
}