截图和着色器bug

Creator 2.x
#1

  • Creator 版本：2.3.2

  • 目标平台： windows平台chrome 版本 81.0.4044.113

  • 详细报错信息，包含调用堆栈：

  • 重现方式：

  • 之前哪个版本是正常的 ：

  • 手机型号 ：

  • 手机浏览器 ：

  • 编辑器操作系统 ：

  • 编辑器之前是否有其它报错 ：

  • 出现概率：

  • 额外线索：

需求场景:在截图分享种加入玩家的头像(圆形)

方案1:使用mask组件制作圆形头像
出现问题.截图时如果使用mask会导致mask意外区域全白
节点树:

1.png2159×1526 265 KB

运行预览:

截图功能代码:
3.png721×1406 125 KB

方案2:用着色器生成圆形头像
出现问题:着色器在编辑器和运行环境结果不一致
节点树:

4.png2159×1526 258 KB

运行预览:
5.png1121×602 311 KB

着色器代码:
1$B@84~AAK74U1E6~]Z_Y$T.png526×1408 64 KB

以上问题,望解决

#2

你把那个需要用 shader 截圆的图片发给我试试。

#3

#4

给你推荐一个 shader 仓库，我在这上面测试是没问题的。

https://github.com/zhitaocai/CocosCreatorShaderEffectDemo

#5

谢谢了:slightly_smiling:

#6

2.2.2也是，编辑器和web和模拟器效果均不一样。

编辑器：

模拟器：

web不显示…

iOS模拟器正常

image.png764×276 161 KB

代码：

`
// Copyright © 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 }
        alphaThreshold: { value: 0.5 }

      纹理宽度

      texWidth: {
      value: 200.0,
      editor: {
      tooltip: “贴图宽度”
      }
      }
      texHeight: {
      value: 200.0,
      editor: {
      tooltip: “贴图高度”
      }
      }
      radius: {
      value: 100.0,
      editor: {
      tooltip: “裁剪半径”
      }
      }
      }%

CCProgram vs %{
precision highp float;

#include
#include

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;

#include

in vec4 v_color;

#if USE_TEXTURE
in vec2 v_uv0;
uniform sampler2D texture;
#endif

uniform TextureInfo {
// 纹理信息
float texWidth;
float texHeight;
float radius;
};

void main () {
vec4 o = vec4(1, 1, 1, 1);

#if USE_TEXTURE
o *= texture(texture, v_uv0);
  #if CC_USE_ALPHA_ATLAS_TEXTURE
  o.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;
  #endif
#endif

o *= v_color;

ALPHA_TEST(o);

float x = pow(v_uv0.x * texWidth - texWidth * 0.5, 2.0);
float y = pow(v_uv0.y * texHeight - texHeight * 0.5, 2.0);
float len = sqrt(x + y);
float blurW = 2.0; // 边缘模糊像素（抗锯齿)

o *= (1.0 - step(radius-blurW, len) * smoothstep(0.0, 1.0, (len - (radius-blurW))/blurW)); 
o *= (1.0 - step(radius, len));
gl_FragColor = o;     


// 如果不传入半径和宽高，则纹理不是正方形时会裁剪成椭圆形
// vec2 mid = vec2(0.5, 0.5);
// float x = pow(v_uv0.x - mid.x, 2.0);
// float y = pow(v_uv0.y - mid.y, 2.0);
// float len = sqrt(x + y);

// o *= (1.0 - step(0.5-0.01, len) * smoothstep(0.0, 1.0, (len - (0.5-0.01))/0.01)); 
// o *= (1.0 - step(0.5, len));
// gl_FragColor = o;

}
}%

`