Cocos Creater Shader-3D溶解效果

最新推荐文章于 2024-08-16 22:07:37 发布

gaozhao910325

最新推荐文章于 2024-08-16 22:07:37 发布

阅读量117

点赞数 3

文章标签： 3d

本文链接：https://blog.csdn.net/gaozhao910325/article/details/140459025

版权

复制一个卡通渲染着色器文件，在properties加入一下属性：

        dissolveTexture:    { value: white, editor: { parent: USE_DISSOLVE } }
        dissolveThreshold:  { value: 0.0, editor: { range: [0, 1], step: 0.01}}
        dissolveLineWidth:  { value: 0.1, editor: { range: [0, 0.3], step: 0.01}}
        dissolveColor0:     { value: [1, 0, 0, 1], editor: { type: color } }
        dissolveColor1:     { value: [1, 0, 0, 1], editor: { type: color } }
        offsetDirection:    { value: [0.0, 0.0, 0.0, 0.0]}
        offsetThreshold:    { value: 0.0, editor: { range:  [0, 10], step: 0.01 } }
        offsetScale:        { value: 0.5, editor: { range:  [0, 1], step: 0.01 } }

在shared-ubos加入全局Uniform：

  #if USE_DISSOLVE
    uniform sampler2D dissolveTexture;
    uniform Dissolves{
      vec4 dissolveColor0;
      vec4 dissolveColor1;
      vec4 offsetDirection;
      float dissolveThreshold;
      float dissolveLineWidth;    
      float offsetThreshold;
      float offsetScale;
    };
  #endif

在片元着色器中加入以下代码，注意阴影片元着色器也要添加代码：

    #if USE_DISSOLVE
      //获取噪声纹理的颜色
      vec4 colDissolve = texture(dissolveTexture, v_uv);
      //颜色小于阙值就不着色
      if(colDissolve.r < dissolveThreshold){
        discard;
      }
      float t = 1.0 - smoothstep(0.0, dissolveLineWidth, colDissolve.r - dissolveThreshold);
      vec4 dissolveColor = mix(dissolveColor0, dissolveColor1, t);
      color.rgb = mix(color.rgb, dissolveColor.rgb, t * step(0.001, dissolveThreshold));
    #endif

在ts文件里的update函数设置溶解阙值，控制溶解效果：

    private dissolveThreshold: number = 0.0;
    protected update(dt: number): void {
        this.dissolveThreshold += dt;
        if (this.dissolveThreshold > 1) {
            this.dissolveThreshold = 1.0;
        }
        this.material.setProperty("dissolveThreshold", this.dissolveThreshold);
    }

可以给消融效果加上膨胀和带方向的消融，添加顶点着色器代码：

    #if USE_DISSOLVE
    //膨胀消融，沿法线方向膨胀
    pos += vec4(v_normal, 0.0) * clamp(dissolveThreshold - offsetThreshold, 0.0, 1.0) * offsetScale;    
    //方向消融
    pos += offsetDirection * clamp(dissolveThreshold - offsetThreshold, 0.0, 1.0) * offsetScale;
    #endif