transparent材质的物体深度顺序有问题

启用了shader的transparent导致了深度顺序出现问题了

侧着看上面一个物体在下面红圈之上

换了个角度看深度就会出现问题

参考了 关于材质transparent 的层级渲染问题,一直得不到解决 depth_func开启LESS_EQUAL也没有解决

这是下面红圈的着色器,用opaque是没问题的,有大佬能看一下么

// Effect Syntax Guide: https://docs.cocos.com/creator/manual/zh/shader/index.html

CCEffect %{
  techniques:
  - name: opaque
    passes:
    - vert: legacy/main-functions/general-vs:vert # builtin header
      frag: unlit-fs:frag
      properties: &props
        mainTexture:    { value: white }
        mainColor:      { value: [1, 1, 1, 1], editor: { type: color } }
  - name: transparent
    passes:
    - vert: general-vs:vert # builtin header
      frag: unlit-fs:frag
      blendState:
        targets:
        - blend: true
          blendSrc: src_alpha
          blendDst: one_minus_src_alpha
          blendSrcAlpha: src_alpha
          blendDstAlpha: one_minus_src_alpha
      properties: *props
}%

CCProgram unlit-fs %{
  precision highp float;
  #include <legacy/output>
  #include <legacy/fog-fs>

  in vec2 v_uv;
  in vec3 v_position;
  in vec4 v_color;

  uniform sampler2D mainTexture;

  uniform Constant {
    vec4 mainColor;
  };

  vec4 frag () {
    vec4 a = vec4(1.0, 1.0, 1.0, 1.0);
    vec4 col = mainColor * a;
    CC_APPLY_FOG(col, v_position);
    return CCFragOutput(col);
  }
}%

补充一下额外信息,同一个位置转到特定角度才会有问题

切割网格先应付着

引擎里面的透明队列排序,是根据物体位置到摄像机位置的距离,dot上摄像机的forward来排的。

Vec3.subtract(_tempVec3, model.node.worldPosition, camera.position);
depth = Vec3.dot(_tempVec3, camera.forward);

在特定角度可能下面那个圆的depth相对来说比那个图片的depth更近。

透明物体的排序本身就有可能错乱。按物体中心排会穿插,按三角面排也会穿插。如果你想更好的显示,首先你可以把透明物体先分成几个组,然后设置渲染优先级来排序。然后你可以把某些只有透明/不透明的物体,改成不透明+alpha test的形式渲染。

其他有正确渲染透明物体的方式( Order - Independent Transparency 等),不过一般都是比较消耗性能。一般游戏就简单的处理就可以了。
贴几个地址备用:
https://learnopengl.com/Guest-Articles/2020/OIT/Weighted-Blended
https://github.com/nvpro-samples/vk_order_independent_transparency