Right click to pitch/rotate. Click to place a point on the map and see how transformations apply to that point.
This map is restricted to show a single zoom-level 11 tile, even when highly over/underzoomed.
Tile coordinate (x,y) starts as x=x, y=y, z=0 (everything on flat plane), w=1 (neutral scaling).
Angles are in radians, width and height are in pixels.
Matrix transformation refresher: x in output is based on sum of 'x' column in matrix (input x * row x + input y * row y + input z * row z + input w * row w)
Why four dimensions instead of 3? Very roughly: we use 'w' to calculate perspective scaling effects. Note that the 'perspective' matrix is the only transformation that directly modifies 'w'.
For output of (x,y,z,w), we divide (x,y,z) by w to get "Normalized Device Coordinates" (NDC), which range from -1 to 1. Values outside of that range (aka GL Coordinates greater than 'w') are considered "clipped" and aren't displayed. (x,y) are then screen coordinates. (z) is effectively perpendicular to the screen -- we use it for depth testing.