Textures and Depth Buffering
Following the 3D Graphics Engine tutorial series by javidx9. I'm loosely transcribing the learnings from C++ to JavaScript with HTML canvas.
Keyboard/Mouse Only: click on the canvas to move the camera, with additonal QE+WASD movement.
Notes:
Texturing in it's basic idea of storing additional 2D (U, V) coordinates that correspond to a coordinates on an image in a normalized range of 0-1.
Which during the rasterization of a triangle, when colouring an individual pixel, these UV coordinates are intepolated to find a pixel from the image to use as the colour value.
This tutorial also taught affine texture mapping and perspective correction; by scaling down texture coordinates by the perspective and scaling back during rasterization with the interpolated perspective.
Depth buffering is just the idea of storing pixel Z values during rasterization to ensure the correct pixel colour is on top in cases where tri's may intersect, or to correctly apply transparent values onto intermediate pixels.
Some after implementation notes:
Manually implementing rasterization degraded performance as to be expected as HTML canvas itself uses the GPU/'hardware acceleration', and this showcases how useful GPUs are.
The next rendering project for sure will be to understand how GPUs work as it's time to learn, and implementing real-time shaders like shadows seems impossible.
I've disabled the depth buffer in favour of keeping the painter's algorithm as it results in a ~33% performance decrease.