Cocos Creater Shader-2D漩涡传送门

1、效果图：

2、步骤：

创建2d-sprite精灵，复制一个builitin-sprite.effect，创建材质，修改材质effect，修改精灵材质，修改effect代码，在properties中加入属性，以便的编辑器修改：

        u_skew:      { value: 2.0, editor: { slide: true, range: [0, 10], step: 0.01 } }
        u_scale:      { value: 1.5, editor: { slide: true, range: [0, 10], step: 0.01 } }

片元着色器加入全局uniform代码：

  uniform Contants {
    float u_skew;//扭曲度
    float u_scale;//uv缩放
  };

片元着色器加入纹理扭曲代码：

    //uv 中心变换为 0,0
    vec2 uv = uv0 - 0.5;
    uv *= u_scale;
    
    float r = length(uv);
    
    float phi = atan(uv.y, uv.x) + u_skew / r;
    uv = r * vec2(cos(phi), sin(phi)) + 0.5;

    if (uv.x > 1.0 || uv.y > 1.0 || uv.x < 0.0 || uv.y < 0.0) discard;
    o = CCSampleWithAlphaSeparated(cc_spriteTexture, uv);

顶点着色器加入纹理旋转代码：

    //旋转
    vec2 matCenter = vec2(0.5, 0.5);
    float matSin = sin(cc_time.x * 10.);
    float matCos = cos(cc_time.x * 10.);
    mat2 mat = mat2(matCos,-matSin,matSin,matCos);
    uv0 = (uv0 - matCenter) * mat + matCenter;

3、完整着色器代码：

// Copyright (c) 2017-2020 Xiamen Yaji Software Co., Ltd.
CCEffect %{
  techniques:
  - passes:
    - vert: sprite-vs:vert
      frag: sprite-fs:frag
      depthStencilState:
        depthTest: false
        depthWrite: false
      blendState:
        targets:
        - blend: true
          blendSrc: src_alpha
          blendDst: one_minus_src_alpha
          blendDstAlpha: one_minus_src_alpha
      rasterizerState:
        cullMode: none
      properties:
        alphaThreshold: { value: 0.5 }
        u_skew:      { value: 2.0, editor: { slide: true, range: [0, 10], step: 0.01 } }
        u_scale:      { value: 1.5, editor: { slide: true, range: [0, 10], step: 0.01 } }
}%

CCProgram sprite-vs %{
  precision highp float;
  #include <builtin/uniforms/cc-global>
  #if USE_LOCAL
    #include <builtin/uniforms/cc-local>
  #endif
  #if SAMPLE_FROM_RT
    #include <common/common-define>
  #endif
  in vec3 a_position;
  in vec2 a_texCoord;
  in vec4 a_color;

  out vec4 color;
  out vec2 uv0;

  vec4 vert () {
    vec4 pos = vec4(a_position, 1);

    #if USE_LOCAL
      pos = cc_matWorld * pos;
    #endif

    #if USE_PIXEL_ALIGNMENT
      pos = cc_matView * pos;
      pos.xyz = floor(pos.xyz);
      pos = cc_matProj * pos;
    #else
      pos = cc_matViewProj * pos;
    #endif

    uv0 = a_texCoord;

    //旋转
    vec2 matCenter = vec2(0.5, 0.5);
    float matSin = sin(cc_time.x * 10.);
    float matCos = cos(cc_time.x * 10.);
    mat2 mat = mat2(matCos,-matSin,matSin,matCos);
    uv0 = (uv0 - matCenter) * mat + matCenter;

    #if SAMPLE_FROM_RT
      CC_HANDLE_RT_SAMPLE_FLIP(uv0);
    #endif
    color = a_color;

    return pos;
  }
}%

CCProgram sprite-fs %{
  precision highp float;
  #include <builtin/internal/embedded-alpha>
  #include <builtin/internal/alpha-test>
  #include <cc-global>

  in vec4 color;

  #if USE_TEXTURE
    in vec2 uv0;
    #pragma builtin(local)
    layout(set = 2, binding = 11) uniform sampler2D cc_spriteTexture;
  #endif

  uniform Contants {
    float u_skew;//扭曲度
    float u_scale;//uv缩放
  };

  vec4 frag () {
    vec4 o = vec4(1, 1, 1, 1);

    #if USE_TEXTURE            
      #if IS_GRAY
        float gray  = 0.2126 * o.r + 0.7152 * o.g + 0.0722 * o.b;
        o.r = o.g = o.b = gray;
      #endif

    #endif

    //uv 中心变换为 0,0
    vec2 uv = uv0 - 0.5;
    uv *= u_scale;
    
    float r = length(uv);
    
    float phi = atan(uv.y, uv.x) + u_skew / r;
    uv = r * vec2(cos(phi), sin(phi)) + 0.5;

    if (uv.x > 1.0 || uv.y > 1.0 || uv.x < 0.0 || uv.y < 0.0) discard;
    o = CCSampleWithAlphaSeparated(cc_spriteTexture, uv);

    ALPHA_TEST(o);

    return o;
  }
}%