title: Orthographic 3D Backface Culling using Surface Normals
body: <p>I'm creating an HTML5 canvas 3D renderer, and I'd say I've gotten pretty far without the help of SO, but I've run into a showstopper of sorts. I'm trying to implement backface culling on a cube with the help of some normals calculations. Also, I've tagged this as WebGL, as this is a general enough question that it could apply to both my use case and a 3D-accelerated one.</p>
  
  <p>At any rate, as I'm rotating the cube, I've found that the wrong faces are being hidden. Example:</p>
  
  <p><img src="https://i.stack.imgur.com/Z2w4G.png" alt="Backface Culling Issue on a Cube"></p>
  
  <p>I'm using the following vertices:
  <a href="https://developer.mozilla.org/en/WebGL/Creating_3D_objects_using_WebGL#Define_the_positions_of_the_cube%27s_vertices" rel="nofollow noreferrer">https://developer.mozilla.org/en/WebGL/Creating_3D_objects_using_WebGL#Define_the_positions_of_the_cube%27s_vertices</a></p>
  
  <p>The general procedure I'm using is:</p>
  
  <ol>
  <li><p>Create a transformation matrix by which to transform the cube's vertices</p></li>
  <li><p>For each face, and for each point on each face, I convert these to vec3s, andn multiply them by the matrix made in step 1.</p></li>
  <li><p>I then get the surface normal of the face using Newell's method, then get a dot-product from that normal and some made-up vec3, e.g., [-1, 1, 1], since I couldn't think of a good value to put in here. I've seen some folks use the position of the camera for this, but...</p></li>
  <li><p>Skipping the usual step of using a camera matrix, I pull the x and y values from the resulting vectors to send to my line and face renderers, but only if they have a dot-product above 0. I realize it's rather arbitrary which ones I pull, really.</p></li>
  </ol>
  
  <p>I'm wondering two things; if my procedure in step 3 is correct (it most likely isn't), and if the order of the points I'm drawing on the faces is incorrect (very likely). If the latter is true, I'm not quite sure how to visualize the problem. I've seen people say that normals aren't pertinent, that it's the direction the line is being drawn, but... It's hard for me to wrap my head around that, or if that's the source of my problem.</p>
  
  <p>It probably doesn't matter, but the matrix library I'm using is gl-matrix:</p>
  
  <p><a href="https://github.com/toji/gl-matrix" rel="nofollow noreferrer">https://github.com/toji/gl-matrix</a></p>
  
  <p>Also, the particular file in my open source codebase I'm using is here:</p>
  
  <p><a href="http://code.google.com/p/nanoblok/source/browse/nb11/app/render.js" rel="nofollow noreferrer">http://code.google.com/p/nanoblok/source/browse/nb11/app/render.js</a></p>
  
  <p>Thanks in advance!</p>