Normals, Culling and Importing Meshes
Following the 3D Graphics Engine tutorial series by javidx9. I'm loosely transcribing the learnings from C++ to JavaScript with HTML canvas.
Notes:
The part 2 video introduced how cross products of two vectors are used to find parallel 'normal' vectors; we can calculate a normal for each tri.
We then use a vector dot product of the vector from the pov camera to the triangle and the normal. If we have a negative dot product, it means the vectors are facing against eachother atleast slightly, meaning the triangle face is visible from that perspective.
This is used to cull the triangles needed to render.
Lighting was also added in this part, this also makes use of dot products with a lighting vector, the dot product sum is then used to determine a tri's luminance.
One last piece, with importing more complex meshes there can be overlapping tris, we needed to sort the tris by the Z-axis to render the forward most tris last; this provides a mostly ok draw order.
A better way to solve this issue is to implement depth buffers for each pixel when rendering each tri, and checking if the current pixel's Z coordinate is higher or not.