How to correctly render coincident polygons in OpenGL (ES)

opengl-es webgl depth-buffer
Jayesh picture Jayesh · Oct 20, 2011 · Viewed 7.2k times · Source

I understand that by setting the depth function in OpenGL ES one can control how overlapping geometries are rendered in a 3D scene. I use gl.depthFunc(gl.LEQUAL) (webgl) in my code.

However when two sets of polygons are coincident and are of different color, the resulting surface turns out to be an arbitrary mixed pattern of the two colors (which changes as the camera location changes, hence leads to flickering). Take a look at this image:

enter image description here

How can I fix this? I have tried different depthFunc values, but none of them solves this problem. I would like the coincident polygons to have single color, it doesn't matter which one.

Answer

River picture River · Oct 20, 2011

This is called z-fighting, and is related to two objects being rendered at the same depth, but rounding errors (and depth buffer precision) occasionally popping one in front of the other. One solution available to you is to use the glPolygonOffset function:

http://www.khronos.org/opengles/sdk/docs/man/xhtml/glPolygonOffset.xml

You can see an example of it in use at the bottom of this page:

http://www.glprogramming.com/red/chapter06.html

Related questions

How can I read the depth buffer in WebGL?

Using the WebGL API, how can I get a value from the depth buffer, or in any other way determine 3D coordinates from screen coordinates (i.e. to find a location clicked on), other than by performing my own raycasting?

Read More
What does `precision mediump float` mean?

In the learningwebgl tutorial1 I've found an interesting line in the fragment shader. precision mediump float; I've found an article about it here, but I still can't understand what does it mean? And if I remove this line, nothing changes. …

Read More
Tools for GLSL editing

I'm looking for some kind of tool to work with GLSL. I want to experiment with shaders in the WebGL application, so what I'm looking for is something like RenderMonkey. As far as I know - RenderMonkey is not supported …

Read More