Every face has two sides called its front side and back side. It’s possible to render just the front sides of faces, or just the back sides, or both front and back sides. The material associated with the face determines this. If the faces make up a solid to be viewed from the outside, we generally arrange for the face’s front sides to point out and to render them just from the outside. On the other hand, when the faces make up a sheet or lamina that can be viewed from either side (as with our triangles and squares), we render both front and back sides of the faces.
Here’s a scene where you can switch between front-side and double-sided (twoSided) rendering. Note when double-sided rendering is selected, you can zoom into the cube’s interior and view it from inside. Step inside and turn double-sided rendering off. Huh, where did it go? There’s also a checkbox for toggling the cube’s top face on and off.
A material’s side attribute is used to identify the sidedness of rendering. Its values can be THREE.FrontSide, THREE.BackSide, or THREE.DoubleSide. When using front-sided rendering, the vertices of a face are ordered counter-clockwise when viewing the face from its front side. You can see this was done in the cube constructed on the previous page.
This process of not bothering to render polygons that face away from the viewer is called backface culling. It ensures that only faces that can possibly be seen get rendered. If we don’t expect users to fly inside our cubes, we don’t need to render our cubes’ back sides (so to speak). Although backface culling can involve a bit more work for the programmer, it speeds rendering and helps ensure faster, smoother graphics.