# How does webgl-renderer determine which faces are visible?

**URL:** <https://discourse.threejs.org/t/how-does-webgl-renderer-determine-which-faces-are-visible/7671>\
**Category:** Questions\
**Tags:** webgl-renderer\
**Created:** [May 21, 2019, 10:20pm UTC](https://discourse.threejs.org/t/how-does-webgl-renderer-determine-which-faces-are-visible/7671 "2019-05-21T22:20:07Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![kbruneel](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kbruneel/32/5649_2.png) [@kbruneel](https://discourse.threejs.org/u/kbruneel)\
**Post date:** [May 21, 2019, 10:20pm UTC](https://discourse.threejs.org/t/how-does-webgl-renderer-determine-which-faces-are-visible/7671/1 "2019-05-21T22:20:08Z")

</div>

I read that webgl turns OFF backface culling by default ([https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/cullFace](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

---

<div class="post-metadata">

**Author:** ![gkjohnson](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gkjohnson/32/2298_2.png) [@gkjohnson](https://discourse.threejs.org/u/gkjohnson)\
**Post date:** [May 22, 2019, 2:06am UTC](https://discourse.threejs.org/t/how-does-webgl-renderer-determine-which-faces-are-visible/7671/2 "2019-05-22T02:06:06Z")

</div>

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](https://www.khronos.org/opengl/wiki/Face_Culling)

---

<div class="post-metadata">

**Author:** ![kbruneel](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kbruneel/32/5649_2.png) [@kbruneel](https://discourse.threejs.org/u/kbruneel)\
**Post date:** [May 22, 2019, 6:35am UTC](https://discourse.threejs.org/t/how-does-webgl-renderer-determine-which-faces-are-visible/7671/3 "2019-05-22T06:35:49Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![sciecode](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sciecode/32/5623_2.png) [@sciecode](https://discourse.threejs.org/u/sciecode)\
**Post date:** [May 22, 2019, 7:08am UTC](https://discourse.threejs.org/t/how-does-webgl-renderer-determine-which-faces-are-visible/7671/4 "2019-05-22T07:08:19Z")

</div>

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 )`