La multiplication des coordonnées $(\mathrm{X<msub>e</msub>},\mathrm{Y<msub>e</msub>},\mathrm{Z<msub>e</msub>},1.0)$ d'un point par la matrice de projection de WebGL produit des coordonnées de clipping $(\mathrm{X<msub>c</msub>},\mathrm{Y<msub>c</msub>},\mathrm{Z<msub>c</msub>},\mathrm{W<msub>c</msub>})$.

Comment en déduire les coordonnées du pixel $(\mathrm{X<msub>s</msub>},\mathrm{Y<msub>s</msub>})$ dans le canvas ? A l'inverse, comment retrouver les coordonnées du point à partir des coordonnées du pixel ?

Tout développeur qui s'initie à la 3D avec WebGL est rapidement confronté à une entité mathématique, la matrice de projection :

$\left[\begin{array}{cccc}\mathrm{X<msub>e</msub>}& \mathrm{Y<msub>e</msub>}& \mathrm{Z<msub>e</msub>}& 1\end{array}\right]x\left[\begin{array}{cccc}\frac{2N}{R-L}& 0& 0& 0\\ 0& \frac{2N}{T-B}& 0& 0\\ \frac{R+L}{R-L}& \frac{T+B}{T-B}& \frac{F+N}{N-F}& \mathrm{<mo>-</mo>1}\\ 0& 0& \frac{2FN}{N-F}& 0\end{array}\right]$

Les différentes constantes utilisées pour définir le volume de clipping se présentant par exemple ainsi (coupe Y/Z) :

Cette matrice peut sembler d'autant plus étrange au développeur qu'elle comporte 4 lignes et 4 colonnes (une matrice 4x4), alors qu'il semblerait que l'on puisse se contenter d'une matrice 3x3 pour réaliser les calculs. D'ailleurs, où est passée l'intervention de $\mathrm{Z<msub>e</msub>}$ au dénominateur dans les calculs ?

Bref, pourquoi cette matrice ? Comment calculer ses coefficients ? Et comment en déduire les coordonnées de la projection d'un point ?