OpenGL: smudges drawn on image surfaces

Question

I am trying to code an interface to a rubik's cube.

However when I draw it there are smudges on the faces of the cube:

Cube

Here is the well-commented code. Can someone please help me and perhaps run the code and tell me where I might be going wrong?

#include <GL/glut.h>
#include <stdlib.h>

#include <stdio.h>

void init() {

  glClearColor(1.0f, 0.0f, 1.0f, 1.0f);

  glEnable(GL_DEPTH_TEST);

}

static float x_degs = 0.0f;
static float y_degs = 0.0f;

void keyboard(unsigned char key, int x, int y) {

  switch (key) {

    case 'q':

      exit(EXIT_SUCCESS);

    case 'h':

      y_degs -= 1.0f;

      glutPostRedisplay();

      glutSwapBuffers();

      break;

    case 'j':

      x_degs -= 1.0f;

      glutPostRedisplay();

      glutSwapBuffers();

      break;

    case 'k':

      x_degs += 1.0f;

      glutPostRedisplay();

      glutSwapBuffers();

      break;

    case 'l':

      y_degs += 1.0f;

      glutPostRedisplay();

      glutSwapBuffers();

      break;

  }

}

// half the length of one card

static const float card_half_size = 1.0f;

// half the space between cards

static const float space_half_size = 0.1f;

// number of cards per face

static const int NUM_CARDS_PER_FACE = 4;
/*
// start position of center of top left card 

const float start = - 3 * (card_half_size + space_half_size);

// increment between center of cards

const float incr = 2 * (card_half_size + space_half_size);

// half the size of a cube face

const float cube_half_size = 4 * (card_half_size + space_half_size);
*/
// draw a card centered at the origin

void draw_card() {

  glBegin(GL_QUADS);
    glVertex3f(- card_half_size, - card_half_size, 0.0f);
    glVertex3f(- card_half_size, card_half_size, 0.0f);
    glVertex3f(card_half_size, card_half_size, 0.0f);
    glVertex3f(card_half_size, - card_half_size, 0.0f);
  glEnd();

}

// draw a cube face made up of cards

void draw_card_face() {

  const float cube_half_size = 4 * (card_half_size + space_half_size);
  const float start = - 3 * (card_half_size + space_half_size);
  const float incr = 2 * (card_half_size + space_half_size);

  glColor3f(0.0f, 1.0f, 1.0f);

  glBegin(GL_QUADS);
    glVertex3f(- cube_half_size, - cube_half_size, -0.001f);
    glVertex3f(- cube_half_size, cube_half_size, -0.001f);
    glVertex3f(cube_half_size, cube_half_size, -0.001f);
    glVertex3f(cube_half_size, - cube_half_size, -0.001f);
  glEnd();

  glColor3f(1.0f, 1.0f, 1.0f);

  for (int i = 0; i < NUM_CARDS_PER_FACE; i++)

    for (int j = 0; j < NUM_CARDS_PER_FACE; j++) {

      glPushMatrix();
        glTranslatef(start + i * incr, start + j * incr, 0.0f);
        draw_card();
      glPopMatrix();

    }

}

// draw a cube made up of cards

void draw_card_cube() {

  const float cube_half_size = 4 * (card_half_size + space_half_size);

  // front face

  glPushMatrix();
    glTranslatef(0.0f, 0.0f, cube_half_size);
    draw_card_face();
  glPopMatrix();

  // back face

  glPushMatrix();
    glTranslatef(0.0f, 0.0f, - cube_half_size);
    glRotatef(180.0f, 0.0f, 1.0f, 0.0f);
    draw_card_face();
  glPopMatrix();

  // right face

  glPushMatrix();
    glTranslatef(cube_half_size, 0.0f, 0.0f);
    glRotatef(90.0f, 0.0f, 1.0f, 0.0f);
    draw_card_face();
  glPopMatrix();

  // left face

  glPushMatrix();
    glTranslatef(- cube_half_size, 0.0f, 0.0f);
    glRotatef(- 90.0f, 0.0f, 1.0f, 0.0f);
    draw_card_face();
  glPopMatrix();

  // top face

  glPushMatrix();
    glTranslatef(0.0f, cube_half_size, 0.0f);
    glRotatef(90.0f, 1.0f, 0.0f, 0.0f);
    draw_card_face();
  glPopMatrix();

  // bottom face

  glPushMatrix();
    glTranslatef(0.0f, - cube_half_size, 0.0f);
    glRotatef(- 90.0f, 1.0f, 0.0f, 0.0f);
    draw_card_face();
  glPopMatrix();


}

void display() {

  glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
  glLoadIdentity();

  glRotatef(x_degs, 1.0f, 0.0f, 0.0f);
  glRotatef(y_degs, 0.0f, 1.0f, 0.0f);

  gluLookAt(-0.6f, 0.6f, 1.0f, 0.0f, 0.0f, 0.0f, 0.0f, 1.0f, 0.0f);
  draw_card_cube();
  glutSwapBuffers();

}

void reshape(int w, int h) {

  glMatrixMode(GL_PROJECTION);
  glLoadIdentity();
  glOrtho(-15.0f, 15.0f, -15.0f, 15.0f, -15.0f, 15.0f);
  glViewport(0, 0, w, h);
  glMatrixMode(GL_MODELVIEW);

}

int main(int argc, char **argv) {

  glutInit(&argc, argv);
  glutInitDisplayMode(GLUT_RGB | GLUT_DOUBLE | GLUT_DEPTH);
  glutCreateWindow(argv[0]);
  init();
  glutKeyboardFunc(keyboard);
  glutDisplayFunc(display);
  glutReshapeFunc(reshape);
  glutMainLoop();
  return 0;

}

OK, I have revised the code so that I draw th cyan rectangles 0.01f units behind instead of 0.001f units behind and this seems to have fixed the z-fighting. However I would have liked to use glPolygonOffset(factor, units) to fix this problem but I was unable to do it, for the following reasons:

I don't know how to set facor and units (I've tried 1.0 for both).
I've tried different values to no outcome.

Here is the code without the bleeding/stitching/z-fighting:

#include <GL/glut.h>
#include <stdlib.h>

#include <stdio.h>

void init() {

  glClearColor(1.0f, 0.0f, 1.0f, 1.0f);

  glEnable(GL_DEPTH_TEST);

}

static float x_degs = 0.0f;
static float y_degs = 0.0f;

void keyboard(unsigned char key, int x, int y) {

  switch (key) {

    case 'q':

      exit(EXIT_SUCCESS);

    case 'h':

      y_degs -= 1.0f;

      glutPostRedisplay();

      glutSwapBuffers();

      break;

    case 'j':

      x_degs -= 1.0f;

      glutPostRedisplay();

      glutSwapBuffers();

      break;

    case 'k':

      x_degs += 1.0f;

      glutPostRedisplay();

      glutSwapBuffers();

      break;

    case 'l':

      y_degs += 1.0f;

      glutPostRedisplay();

      glutSwapBuffers();

      break;

  }

}

// half the length of one card

static const float card_half_size = 1.0f;

// half the space between cards

static const float space_half_size = 0.1f;

// number of cards per face

static const int NUM_CARDS_PER_FACE = 4;
/*
// start position of center of top left card 

const float start = - 3 * (card_half_size + space_half_size);

// increment between center of cards

const float incr = 2 * (card_half_size + space_half_size);

// half the size of a cube face

const float cube_half_size = 4 * (card_half_size + space_half_size);
*/
// draw a card centered at the origin

void draw_card() {

  glBegin(GL_QUADS);
    glVertex3f(- card_half_size, - card_half_size, 0.0f);
    glVertex3f(- card_half_size, card_half_size, 0.0f);
    glVertex3f(card_half_size, card_half_size, 0.0f);
    glVertex3f(card_half_size, - card_half_size, 0.0f);
  glEnd();

}

// draw a cube face made up of cards

void draw_card_face() {

  const float cube_half_size = 4 * (card_half_size + space_half_size);
  const float start = - 3 * (card_half_size + space_half_size);
  const float incr = 2 * (card_half_size + space_half_size);

  glColor3f(0.0f, 1.0f, 1.0f);

  glBegin(GL_QUADS);
    glVertex3f(- cube_half_size, - cube_half_size, -0.001f);
    glVertex3f(- cube_half_size, cube_half_size, -0.001f);
    glVertex3f(cube_half_size, cube_half_size, -0.001f);
    glVertex3f(cube_half_size, - cube_half_size, -0.001f);
  glEnd();

  glColor3f(1.0f, 1.0f, 1.0f);

  for (int i = 0; i < NUM_CARDS_PER_FACE; i++)

    for (int j = 0; j < NUM_CARDS_PER_FACE; j++) {

      glPushMatrix();
        glTranslatef(start + i * incr, start + j * incr, 0.0f);
        draw_card();
      glPopMatrix();

    }

}

// draw a cube made up of cards

void draw_card_cube() {

  const float cube_half_size = 4 * (card_half_size + space_half_size);

  // front face

  glPushMatrix();
    glTranslatef(0.0f, 0.0f, cube_half_size);
    draw_card_face();
  glPopMatrix();

  // back face

  glPushMatrix();
    glTranslatef(0.0f, 0.0f, - cube_half_size);
    glRotatef(180.0f, 0.0f, 1.0f, 0.0f);
    draw_card_face();
  glPopMatrix();

  // right face

  glPushMatrix();
    glTranslatef(cube_half_size, 0.0f, 0.0f);
    glRotatef(90.0f, 0.0f, 1.0f, 0.0f);
    draw_card_face();
  glPopMatrix();

  // left face

  glPushMatrix();
    glTranslatef(- cube_half_size, 0.0f, 0.0f);
    glRotatef(- 90.0f, 0.0f, 1.0f, 0.0f);
    draw_card_face();
  glPopMatrix();

  // top face

  glPushMatrix();
    glTranslatef(0.0f, cube_half_size, 0.0f);
    glRotatef(90.0f, 1.0f, 0.0f, 0.0f);
    draw_card_face();
  glPopMatrix();

  // bottom face

  glPushMatrix();
    glTranslatef(0.0f, - cube_half_size, 0.0f);
    glRotatef(- 90.0f, 1.0f, 0.0f, 0.0f);
    draw_card_face();
  glPopMatrix();


}

void display() {

  glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
  glLoadIdentity();

  glRotatef(x_degs, 1.0f, 0.0f, 0.0f);
  glRotatef(y_degs, 0.0f, 1.0f, 0.0f);

  gluLookAt(-0.6f, 0.6f, 1.0f, 0.0f, 0.0f, 0.0f, 0.0f, 1.0f, 0.0f);
  draw_card_cube();
  glutSwapBuffers();

}

void reshape(int w, int h) {

  glMatrixMode(GL_PROJECTION);
  glLoadIdentity();
  glOrtho(-15.0f, 15.0f, -15.0f, 15.0f, -15.0f, 15.0f);
  glViewport(0, 0, w, h);
  glMatrixMode(GL_MODELVIEW);

}

int main(int argc, char **argv) {

  glutInit(&argc, argv);
  glutInitDisplayMode(GLUT_RGB | GLUT_DOUBLE | GLUT_DEPTH);
  glutCreateWindow(argv[0]);
  init();
  glutKeyboardFunc(keyboard);
  glutDisplayFunc(display);
  glutReshapeFunc(reshape);
  glutMainLoop();
  return 0;

}

Hello, I'm not sure how to include an image on stack overflow so I've shared one on PicasaWeb here: ![link](https://picasaweb.google.com/johngoche99/OpenGL#5673826643990873458) — John Goche, Nov 11 '11 at 19:47
You don't need `glutSwapBuffers()` in your keyboard handler, just the `glutPostRedisplay()`s — genpfault, Nov 11 '11 at 19:54
True, I've deleted the glutSwapBufers() from the switch statement, but the smudges persist. Not sure what to do about it, I've tried drawaing the cyan rectangle slightly behind the white squares but no luck. Any ideas? — John Goche, Nov 11 '11 at 20:00
Double-check how many bits your depth buffer has via [`glGet()`](http://www.opengl.org/sdk/docs/man/xhtml/glGet.xml) and `GL_DEPTH_BITS`. Some people may be getting 24- or 32-bit depth buffers "by default" whereas you may be getting 16 if you're running your program in a VM. — genpfault, Nov 11 '11 at 20:08
int foo; glGetIntegerv(GL_DEPTH_BITS, &foo); printf("%d\n", foo); the result of this call is 24 on my machine. — John Goche, Nov 11 '11 at 23:56

score 5 · Answer 1 · answered Nov 11 '11 at 19:58

I think you're drawing your checkers as coplanar quads of the faces of your main cube ; if this is the case, the problem you encounter is called "z fighting".

You can take a look at point 12.040 Depth buffering seems to work, but polygons seem to bleed through polygons that are in front of them. What's going on? here : http://www.opengl.org/resources/faq/technical/depthbuffer.htm

Basically, your depth buffer does not have enough precision to resolve which quad to display for each pixel, causing the problem.

You can either manually add an offset to your checker quads, to move them away from the cube ; or use depth bias through glPolygonOffset to solve the issue.

score 2 · Answer 2 · answered Nov 11 '11 at 19:57

2

I think you're trying to do coplanar rendering. Look into glPolygonOffset() instead of using small Z offsets like you do.

answered Nov 11 '11 at 19:57

genpfault

51,148
11
85
139

Thank you for your replies. Yes I was trying to do coplanar rendering. How is glPolygonOffset() more stable than using small z offsets and how do I use it in my code anyways? How do I choose the two parameters to glPolygonOffset() and where to place the glPolygonOffset() calls in the code. – John Goche Nov 12 '11 at 00:07

score 1 · Answer 3 · answered Nov 11 '11 at 19:32

1

This is what I get from your code, compiled with gcc -std=c99 -lGL -lGLU -lglut a.c: no smudges. Can you post yours? (Ubuntu 11.10, Intel GPU)

local screenshot

answered Nov 11 '11 at 19:32

eudoxos

18,545
10
61
110

Hi, thank you for your reply, for instance the top face is all blue instead of checkered. Now try typing j, k, h, l to move the cube. See the link above where I have posted an image. There are smudges (also Ubuntu 11.10 with gcc -std=c99 foo.c -lGL -lGLU -lglut – John Goche Nov 11 '11 at 19:52
The cube is "stable" if I rotate it, here at least. From what you've posted, I'd guess some of the vertices are very close to each other, and which triangle wins the surface is numerically unstable. Not read the code in detail, though. – eudoxos Nov 11 '11 at 20:02
Does the fact that I'm running my code inside Oracle VirtualBox with Ubuntu 11.10 make a difference? My graphics card is an NVIDIA GeForce 410M. – John Goche Nov 11 '11 at 20:04
It seems driver is the only difference. The other answers seem to confirm z-coordinate instability I suggested as well. – eudoxos Nov 11 '11 at 20:22

OpenGL: smudges drawn on image surfaces

3 Answers3