[求助]Shader实现描边效果,编辑器预览正常,浏览器预览全是描边颜色

最近在学Shader,做了一个简单的根据uv0距离判断边框实现矩形描边效果;实际表现在模拟器(引擎自带的)、creator编辑器内都是正常的展示了描边效果;但是运行到浏览器内,整个sprite就全部是描边的颜色了。困扰了很久,没能解决;特发帖求助

  • Creator 版本: 3.8.3
  • 目标平台: Microsoft Edge
    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.5 }
        borderColor: { value: [0.0, 0.0, 0.0, 1.0], editor: { type: color } }
}%

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>

  in vec4 color;

  uniform Constant {
    vec4 borderColor;
  };

  #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);
    bool isEdge = false;

    #if USE_TEXTURE
      o *= texture(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
    isEdge = (uv0.x >=0.0 && uv0.x < 0.05) || (uv0.x > 0.95 && uv0.x <= 1.0) || (uv0.y >= 0.0 && uv0.y < 0.05) || (uv0.y > 0.95 && uv0.y <= 1.0);
    if(isEdge){
      o *= borderColor;
    }else{
      o *= color;
    }
    ALPHA_TEST(o);
    return o;
  }
}%
  • 效果截图:
    编辑器内:image
    实际运行时:image

我在 3.8.0 试着 浏览器是没有问题

1716263149293

可是试试看,把图片的Packable去掉,

1716263066935

有时候合图会影响uv的计算

1716263317747

1赞

一眼看去就是动态合图的问题。动态合图了之后,涉及到uv的计算就错了。

是这个问题 :+1:

:+1: 是的,第一次接触

请问大佬如果是比较复杂的图形如何描边!

可以参考一下 Shader入门学习案例,描边效果