Sometimes, for debugging purposes, or maybe for some effects, we would like to render a model, together with the wireframe on top of it.

A simple way to to this is to first render the model normally, and then render it using RenderState.FillMode set to FillMode.Wireframe. Now if we draw it like this, the wireframe would still be colored the same way as the model. To fix this, we need to use a separate effect for drawing the wireframe, which would draw it using a single color.

If we do this, we get the following:

The problem is clearly visible, especially when the camera is moving. Because the object and the wireframe are drawn in the exact same position, Z-Fighting occurs.

One way to fix this, the one used in this sample, is to set the DepthBias to a non-zero value. The DepthBias is used to modify the depth of a rendered polygon. A positive value will make the depth larger, thus moving the polygon further from the camera. A negative will move the polygon close to the camera.

By using a negative depth bias, the wireframe will appear close to the camera, so no more Z-Fighting will occur.

However, care must be taken with the DepthBias, and it must be kept at a low value. A high value would bring polygons that should be occluded closer to the camera, and risk making them visible, as seen in the next picture.

In the downloadable sample, you can see a Game Component that uses a BasicEffect to draw the wireframe of a model. Before drawing, we set the DepthBias to a value, and before exiting the function, we reset it to the default value of 0.0f, so other drawing code is not affected.

When running the sample, the DepthBias for wireframe rendering is set to -0.000001f. Use the buttons indicated on the screen to adjust the DepthBias, and see how different values affect the rendering.

The sample can be downloaded here.