为什么polygonOffset在这种情况下不起作用

Question

我在背景四边形上进行了一些文本渲染。让我们称之为"标签"。两者都位于同一点，这会导致z战斗。

我想推广文本，以避免使用多边形偏移进行z轴冲突。

这就是我将多边形偏移添加到文本材料的方式：

const material = new THREE.RawShaderMaterial(
CreateMSDFShader({
map: this.glyphs,
opacity: opt.opacity ?? 1,
alphaTest: (opt.opacity ?? 1) < 1 ? 0.001 : 1,
color: opt.colour ?? '#ffffff',
transparent: opt.transparent ?? true,
glslVersion: opt.renderMode === 'webgl' ? THREE.GLSL1 : THREE.GLSL3,
side: opt.side ?? THREE.DoubleSide,
depthFunc: opt.depthFunc ?? THREE.LessEqualDepth,
depthTest: true,
depthWrite: false,
polygonOffset: true,
polygonOffsetUnits: -1.0,
polygonOffsetFactor: -4.0,
})
);
const mesh = new THREE.Mesh(geom, material);

这是背景材料：

if (tableOptions.background) {
const geometry = new THREE.PlaneGeometry(1, 1, 1, 1);
const backgroundMaterial = new ActivatableMaterial(
{
color: new THREE.Color(tableOptions.backgroundColour),
toneMapped: false,
opacity: 1,
alphaTest: 0.001,
transparent: true,
},
{
activationColour: new THREE.Color(tableOptions.activationColour),
}
);
this.background = buildUIObject(
Actions.ExpandLabel as Action,
geometry,
backgroundMaterial
);
setName(this.background, 'Background');
this.tableGroup.add(this.background);
}

多边形偏移不起作用(使用Chrome(。当我环绕相机时，文本消失在背景四边形后面，然后随机重新出现。标签始终面向摄影机(使用lookAt(。

什么可以阻止多边形偏移工作？

标签渲染到渲染过程，渲染时间设置如下：

const pars = {
minFilter: THREE.LinearFilter,
magFilter: THREE.LinearFilter,
format: THREE.RGBAFormat,
stencilBuffer: false,
depthBuffer: false,
};
this.renderTargetBuffer = new THREE.WebGLRenderTarget(
resolution.x,
resolution.y,
pars
);
this.renderTargetBuffer.texture.name = 'RenderTargetBuffer';
this.renderTargetBuffer.texture.generateMipmaps = false;

我假设，因为polygonOffset是一个状态，所以这是RawShaderMaterial并不重要。这是一个安全的假设吗？

编辑：我已经将相反的polygonOffset单独添加到背景网格中，但同样不起作用。

Answer 1

在这种情况下，多边形偏移不是最佳解决方案。我转而根据与相机的距离来维护标签的自定义顺序。这样，我可以强制文本渲染顺序大于背景。