De l'espace de découpage à l'espace NDC (Coordonnées de l'appareil de normalisation)

Comment un sommet passe-t-il de l'espace de découpage à l'espace NDC ? Quelle est la division de perspective ? Quel est le volume de découpage ? Pourquoi est-ce que je pose tant de questions ? Plongeons-y !

Keywords: WebGPU, OpenGL, WebGL, le pipeline de rendu, le rendu en temps réel

By Carmen Cincotti

November 28, 2022

L’espace de découpage contre l’espace NDC
La transformation d’un sommet de l’espace de découpage en NDC
Que se passe-t-il ensuite ?
Des ressources (en français et anglais)

Comprendre la transition de l’espace de découpage à l’espace NDC nous concerne, car c’est la dernière étape avant de transformer nos coordonnées 3D en coordonnées d’écran 2D.

Camera to Clip Space to NDC Space

Cela dit, le rendu par erreur de certains objets 3D supposés “hors de vue” dans votre scène WebGPU, WebGL ou OpenGL peut être le symptôme d’une mauvaise compréhension de l’espace de découpage et de l’espace NDC (coordonnées de l’appareil de normalisation).

Je suppose que vous comprenez suffisamment le pipeline de rendu pour comprendre la plupart des termes que j’utiliserai au cours de cet article.

Si vous pensez avoir besoin d’un rappel, je vous suggère de jeter un coup d’œil à ma série sur le pipeline de rendu qui commence par l’apprentissage des caméras 3D.

L’espace de découpage contre l’espace NDC

L’espace de découpage

L’espace de découpage est l’espace 3D où tous les sommets qui vont être rendus sont présents et sont positionnés dans l’espace sous forme de coordonnées homogènes.

À ce moment, toutes les positions des sommets qui seront rendus à l’écran se situent entre ces coordonnées :

OpenGL, WebGL : $(-w, -w, -w)$ et $(w, w, w)$
WebGPU : $(-w, -w, 0)$ et $(w, w, w)$

où $w$ est la composante homogène d’un sommet donné. Plus à ce sujet plus tard.

Comme vous pouvez le voir, chaque API graphique a des spécifications différentes. Assurez-vous toujours de lire la documentation !

Coordonnées homogènes

$w$ est la quatrième composante d’une coordonnée homogène. On l’appelle souvent la composante homogène.

Bien que nous en verrons plus à ce sujet dans cet article, vous pouvez également jeter un œil à mon explication approfondie sur les coordonnées homogènes.

L’espace NDC

Ensuite, la division en perspective est effectuée par le GPU sur chaque sommet. La division en perspective est une opération dans laquelle, pour une position de sommet donnée, ses composantes x, y et z sont divisées par sa composante homogène, w.

Après cette division, les sommets sont dans l’espace NDC.

Dans l’espace NDC, les sommets sont positionnés en 3D entre ces coordonnées :

OpenGL, WebGL : $(-1, -1, -1)$ et $(1, 1, 1)$
WebGPU : $(-1, -1, 0)$ et $(1, 1, 1)$

Bref, l’espace NDC (Coordonnées de l’appareil de normalisation) est l’espace 3D où se trouvent nos coordonnées 3D après avoir été normalisées par le GPU en effectuant une division de perspective sur les coordonnées qui se trouvaient dans l’espace de découpage.

Camera to Clip Space to NDC Space

Pour mieux comprendre ces concepts, examinons de plus près comment les sommets sont transformés entre le clip et l’espace NDC.

La transformation d’un sommet de l’espace de découpage en NDC

Pour mieux comprendre comment un sommet passe de l’espace de découpage à l’espace NDC, je vous propose de me suivre dans cette petite histoire d’un sommet voyageant dans le pipeline de rendu.

Étape 1 : Le shader de vertex

On commence ce voyage avec un seul sommet positionné à $(0.5, 0.5, 0.5, 1.0)$ . Je vais le définir dans un shader de vertex comme cela dans WebGL :

    void main()
    {
        gl_Position = vec4(0.5, 0.5, 0.5, 1.0);
    }

Ensuite, le shader est envoyé au GPU pour être exécuté.

Étape 2 : Entrer dans l’espace de découpage

Poursuivant son aventure, notre seul sommet entre dans l’espace de découpage.

Vous vous demandez peut-être :

Pourquoi s’appelle-t-il espace de découpage ?

Pour répondre à cette question, imaginons un prisme rectangulaire comme ceci :

Rectangulaire Prisme

Considérons ce prisme comme notre volume de découpage.

Qu’est-ce qu’un volume de découpage ?

Pour visualiser cette idée, nous pouvons supposer que tous les sommets qui tombent dans notre volume de découpage continueront à travers le pipeline de rendu pour un traitement ultérieur.

Tous les autres sommets qui tombent à l’extérieur du prisme seront “découpés” par le GPU, ce qui signifie qu’ils ne continueront pas à travers le pipeline de rendu.

En d’autres termes, si un sommet est en dehors de ce volume, il sera supprimé (ou “découpé”) et nous ne le verrons donc pas dans le rendu final.

Spécification du volume de découpage par OpenGL, WebGL et WebGPU

Chaque API graphique définit sa propre spécification de forme de volume de découpage. Voyons quelques exemples courants.

OpenGL

Le volume de découpage spécifié par la spécification OpenGL est défini comme suit :

−w ≤ x ≤ w \\ −w ≤ y ≤ w \\ -w ≤ z ≤ w

WebGL

Le volume de découpage spécifié par la spécification WebGL est défini comme suit :

−w ≤ x ≤ w \\ −w ≤ y ≤ w \\ -w ≤ z ≤ w

WebGPU

Enfin, le volume de découpage spécifié par la spécification WebGPU est défini comme ceci :

−w ≤ x ≤ w \\ −w ≤ y ≤ w \\ 0 ≤ z ≤ w

Découper les sommets

Continuons en supposant que nous utilisons WebGPU comme API graphique pour rendre cette scène :

Clip space

Avec ce sommet unique positionné à $(0.5, 0.5, 0.5, 1.0)$ , il est clair que ce sommet se trouve à l’intérieur du volume de découpage dont on rappelle qu’il est défini comme suit :

−w ≤ x ≤ w \\ −w ≤ y ≤ w \\ 0 ≤ z ≤ w

Ce sommet ne sera donc pas coupé par le GPU et il continuera à être traité par le pipeline de rendu.

Étape 3 : La division de perspective

C’est le moment tant attendu depuis le début. Notre seul sommet positionné à $(0.5, 0.5, 0.5, 1.0)$ est prêt à entrer dans l’espace NDC.

Le GPU effectuera une opération importante pour normaliser la position du sommet.

Cette opération s’appelle la division de perspective.

{\begin{pmatrix}x_{ndc}\\y_{ndc}\\z_{ndc}\end{pmatrix}}={\begin{pmatrix}{\tfrac {x_{c}}{w_{c}}}\\{\tfrac {y_{c}}{w_{c}}}\\{\tfrac {z_{c}}{w_{c}}}\end{pmatrix}}

Rappelez-vous que nous venons de découper tous les sommets qui étaient en dehors du volume de découpage avec des dimensions spécifiées de 2w x 2w x w.

Par conséquent, les composantes de position normalisée du sommet doivent être comprises entre $-1$ et $1$ après les avoir normalisés en divisant les composantes x et y par la composante w. La composante “z” normalisée tombera donc entre $0$ et $1$ .

Le sommet est maintenant dans l’espace NDC !

⚠️ Chaque API graphique est différent et il faut que vous voyiez les docs de l’API graphique que vous utilisez, mais dans le cas de WebGPU, NDC est comprise entre (-1, -1, 0) et (1, 1, 1).

Que se passe-t-il ensuite ?

La prochaine étape consiste à convertir les coordonnées de notre sommet unique de 3D à 2D, cliquez sur le lien pour en savoir plus.

Carmen's Graphics Blog