Java lwjgl plane border

Question

I am trying to make white square has blue border. I made double plane, but viewing such result seems strange messy white and blue.

Is there good way to make border for square in 3D Java lwjgl?

    float d = 1;
    float f = 1;
    glColor3f(0, 0, 1);
    glBegin(GL_QUADS);
    glVertex3f(-d, f, -f);
    glVertex3f(-d, -f, -f);
    glVertex3f(-d, -f, f);
    glVertex3f(-d, f, f);
    glEnd();

    float d = 1;
    float f = 0.9f;
    glColor3f(1, 1, 1);
    glBegin(GL_QUADS);
    glVertex3f(-d, f, -f);
    glVertex3f(-d, -f, -f);
    glVertex3f(-d, -f, f);
    glVertex3f(-d, f, f);
    glEnd();

Answer 1

strange messy white and blue

Sounds like z-fighting :

Z-fighting, also called stitching, is a phenomenon in 3D rendering that occurs when two or more primitives have similar values in the z-buffer. It is particularly prevalent with coplanar polygons, where two faces occupy essentially the same space, with neither in front. Affected pixels are rendered with fragments from one polygon or the other arbitrarily, in a manner determined by the precision of the z-buffer. It can also vary as the scene or camera is changed, causing one polygon to "win" the z test, then another, and so on. The overall effect is a flickering, noisy rasterization of two polygons which "fight" to color the screen pixels. This problem is usually caused by limited sub-pixel precision and floating point and fixed point round-off errors.

Disable depth testing via glDisable(GL_DEPTH_TEST) sometime before you render the second quad.

Answer 2

The artifact you're describing sounds like what's commonly called "depth fighting" or "z-fighting". It occurs if you draw coplanar polygons with the depth test enabled.

The reason is that all calculations in the rendering pipeline happen with limited precision. So while the two coplanar polygons theoretically have the same depth at any given pixel, one of them will often have slightly larger depth due to precision/rounding effects. Which one ends up being slightly in front can change between pixels, causing the typical artifacts.

To fix this, you have a number of options:

1. If you don't really need depth testing, you can obviously disable it. But often times you really do need depth testing, so this is rarely an option.

2. You can apply an offset to one polygon, so that it's slightly in front of the other. How big the offset needs to be is somewhat tricky, and depends on the depth precision and the transformations you apply. You can either play with various values, or try and mathematically analyze what difference in input coordinates you need to create different depth values.

3. You can use glPolygonOffset() . The effect and related challenges are fairly similar to option 2. But it makes things a little easier for you since you don't have to apply an offset to the coordinates yourself.

4. In a simple case like this, you can draw just a blue frame around the white square, instead of drawing a whole blue square that overlaps the white square. You'll need a few more polygons to draw the "frame" shape (which will look like a large square with a hole the size of the blue square), but this is still fairly easy to draw, more efficient, and avoids the problem entirely.