The following two infographics demonstrate WebGL concepts including winding order and texture sampling. See below for more information.
WebGL Winding Order
Winding order refers to the direction vertices follow. By default WebGL expects counter clockwise winding order. Faces are considered to face the viewport with counter clockwise winding order.
The winding order for each triangle in the graphic above, begins with a solid black circle and ends with an arrow. For example the top left triangle begins at vertex number 0, moves to vertex number two, then to vertex number one, and closes at vertex number zero again. The bottom right triangle begins at vertex number three, moves to number two, then to vertex zero, and closes at vertex number three again. One square can display with two triangles sharing vertices.
WebGL Texture Sampling
The WebGL texture sampling infographic depicts a lighthouse scene.
The lighthouse scene represents the texture to sample.
The built-in function
texture2D() samples texel
s,t is located in the sky area of the photograph.
texture2D() returns the color located at texel
Therefore the color returned is a dull blue.