How does webgl-renderer determine which faces are visible?

Questions
1

I read that webgl turns OFF backface culling by default (https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/cullFace). Is this also the case for the three.js webgl-renderer?

If this is the case, how does the the webgl-renderer determine which faces are visible? Does it use the normals for that?

Thanks,
Karel

1 Like
2

A triangles front-facing direction is determined by the winding order of triangle vertices. You can read up more on it here:

https://www.khronos.org/opengl/wiki/Face_Culling

2 Likes
3

In your reference it also says “By default, face culling is disabled” Is this also the case for the webgl-renderer? It could be that the webgl-renderer turns on culling by default.

The reason I ask this is because with the default settings of three.js I can’t see both sides so there must be some culling mechanism. Is this mechanism the winding order or does it use something like the normals?

4

WebGL has gl.CULL_FACE disabled by the default.

Three.js enables or disables it depending on the material being rendered. Specifically on the property material.side.

When side is defined as DoubleSide, face culling is disabled.
Otherwise it’s enabled and set to the corresponding correct behavior.

edit: since material.side is by default set to FrontSide, you could say it defaults to
gl.enable( CULL_FACE ) and gl.cullFace( gl.BACK )

4 Likes