写了一个水波纹的进度条，但是编辑器和浏览器中显示不太一样

425636780 · 2025年09月1日 03:13

如题，这里编辑器中设置baseLine为0.5，且修改0~1也是按照想要的进度显示。如下图

但是浏览器中显示则要设置baseLine为0.05才会显示一半的进度，而且测试下0.0~0.12才是范围值。如下图

下面是实现的shader：

    // 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.1 }
        baseLine: { value : 0.3 }
        A: {value: 0.01}
        W: {value: 2.0}
        waveLen: { value: 5.0}
}%

CCProgram sprite-vs %{
  precision highp float;
  #include <cc-global>
  #if USE_LOCAL
    #include <cc-local>
  #endif
  #if SAMPLE_FROM_RT
    #include <common>
  #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;
    #if SAMPLE_FROM_RT
      CC_HANDLE_RT_SAMPLE_FLIP(uv0);
    #endif
    color = a_color;

    return pos;
  }
}%

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

  in vec4 color;

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


  uniform MyUniformParams {
    float baseLine;
    float A;
    float W;
    float waveLen;
  };

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

    #if USE_TEXTURE
      o *= CCSampleWithAlphaSeparated(cc_spriteTexture, uv0);
      #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

    float value = A * sin(W * cc_time.x + uv0.x * waveLen);
    if(uv0.y < baseLine + value) {
      discard;
    }

    o *= color;
    ALPHA_TEST(o);
    return o;
  }
}%

请大佬们指导一下，十分感谢~

补充：目前使用341版本

3400142659 · 2025年08月31日 06:48

是不是动态合图没有关？看起来是uv导致的，你图片的这个Packable要关掉才行

425636780 · 2025年08月31日 06:56

你好~

资源自动合图已经关了的。

而且浏览器效果跟我在编辑器中看到差别很大，现在这个baseLine设置是0.05

1828006237 · 2025年09月1日 01:49

在387中浏览器和编辑器效果是一样的。
你给出的代码并不能直接使用，也没给出你的cocos版本，我复制你的核心部分到builtin-sprite下效果是一样的。

425636780 · 2025年09月1日 01:53

抱歉没有贴出来，我的是341版本，想问一下不能直接使用的原因是什么呢？

1828006237 · 2025年09月1日 01:57

若干个include

代码最好不要直接复制粘贴出来，论坛上可以发特定格式的代码块（我不会），或者直接发文件/demo

1828006237 · 2025年09月1日 02:06

前后加上三个```反引号即可
https://markdown.com.cn/extended-syntax/fenced-code-blocks.html

// 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 }
        baseLine: { value: 0.3 }
        A: { value: 0.01 }
        W: { value: 2.0 }
        waveLen: { value: 5.0 }
}%

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;
    #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 <builtin/uniforms/cc-global>

  in vec4 color;

uniform MyUniformParams {
  float baseLine;
  float A;
  float W;
  float waveLen;
};
  #if USE_TEXTURE
    in vec2 uv0;
    #pragma builtin(local)
    layout(set = 2, binding = 12) uniform sampler2D cc_spriteTexture;
  #endif

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

    #if USE_TEXTURE
      o *= CCSampleWithAlphaSeparated(cc_spriteTexture, uv0);
      #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

    float value = A * sin(W * cc_time.x + uv0.x * waveLen);
    if (uv0.y < baseLine + value) {
      discard;
    }

    o *= color;
    ALPHA_TEST(o);
    return o;
  }
}%

425636780 · 2025年09月9日 06:44

学会了学会了~