WebGPU render line color not depth enough when a surface behind it

[xingjun.li]

Hi, I’m rendering a mesh using three.js WebGPU, but the middle line color appears not deep enough. There has z-fighting between the line and the adjacent faces, yet WebGPU doesn’t support polygonOffset. And I do not want to scale the geometry, How can I resolve this?

This is a rendered image by WebGL, and it not use polygonOffset or scale geometry.

[Mugen87]

@xingjun.li

yet WebGPU doesn’t support polygonOffset.

WebGPU supports this as depthbias, depthBiasSlopeScale and depthBiasClamp.

WebGPU

three.js maps polygonOffsetUnits to depthBias and polygonOffsetFactor to depthBiasSlopeScale. You must set polygonOffset to true though.