cocos-awesome/assets/Scene/SwitchScene__PolkaDotsCurtain/Materials/PolkaDotsCurtain.effect

// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.

CCEffect %{
  techniques:
  - passes:
    - vert: vs
      frag: fs
      blendState:
        targets:
        - blend: true
      rasterizerState:
        cullMode: none
      properties:
        texture: { value: white }
        dots: {value: 80.0}
        center: {value: [0, 1]}
        time: {value: 0}
}%

CCProgram vs %{
  precision highp float;

  #include <cc-global>
  #include <cc-local>

  in vec3 a_position;
  in vec4 a_color;
  out vec4 v_color;

  #if USE_TEXTURE
  in vec2 a_uv0;
  out vec2 v_uv0;
  #endif

  void main () {
    vec4 pos = vec4(a_position, 1);

    #if CC_USE_MODEL
    pos = cc_matViewProj * cc_matWorld * pos;
    #else
    pos = cc_matViewProj * pos;
    #endif

    #if USE_TEXTURE
    v_uv0 = a_uv0;
    #endif

    v_color = a_color;

    gl_Position = pos;
  }
}%

CCProgram fs %{
  precision highp float;
  uniform sampler2D texture;
  uniform sampler2D texture2;
  uniform Common {
    vec2 center;
    float dots;
    float time;
  };
  float progress = time;
  in mediump vec2 v_uv0;
  in vec4 v_color;

  vec4 getFromColor(vec2 uv) {
    return texture(texture, uv);
  }
  vec4 getToColor(vec2 uv) {
    return texture(texture2, uv);
  }

  vec4 transition(vec2 uv) {
    // 计算当前UV坐标点到图像中心点的距离
    float distanceToCenter = distance(uv, center);
    // 计算UV坐标点映射到dots纹理中的位置，并计算该位置与纹理中心点的距离
    float distanceToDotsCenter = distance(fract(uv * dots), vec2(0.5, 0.5));

    // 比较UV坐标点到纹理中心点的距离与进度的比值，如果比值小于等于progress，
    // 并且distanceToDotsCenter小于distanceToCenter，则认为需要切换到下一张图像
    bool nextImage = distanceToDotsCenter < (progress / distanceToCenter);
    return nextImage ? getToColor(uv) : getFromColor(uv);
  }

  void main () {
      gl_FragColor = v_color * transition(v_uv0);
  }
}%