Formation libre · rendu temps réel

Du chiffre à l'image
Un moteur 3D écrit sous vos yeux

Une image de synthèse n'est pas dessinée : elle est calculée. Sur cette page, un vrai moteur de rendu tourne dans votre navigateur — matrices, rasterisation, équation de réflectance. Vous éditez les nombres, l'image change. Aucune bibliothèque, aucune texture téléchargée, aucune image pré-calculée : tout est produit ici, maintenant, par du code que vous pouvez lire.

Le moteur

Écrivez la matière. Regardez-la exister.

À gauche, la description de l'objet et de sa matière, en JSON. À droite, ce que la carte graphique en fait, soixante fois par seconde. Modifiez un nombre et appuyez sur Appliquer — ou touchez directement les curseurs.

matiere.json

La texture n'est pas un fichier : elle est calculée par une fonction pour chaque pixel, à partir d'un bruit procédural. C'est pourquoi elle ne pixellise jamais quand on s'approche, et pourquoi elle ne pèse rien.

Première étape

Un sommet est trois nombres. Un pixel est un calcul.

Le modèle affiché à droite n'existe nulle part comme image. Il existe comme une liste de positions, et une suite de multiplications qui les amène de l'espace de l'objet jusqu'à votre écran. Voici cette suite, avec les vraies valeurs de la scène en cours.

Ces matrices sont celles employées à l'instant par le rendu. Faites tourner l'objet avec la souris : les nombres changent sous vos yeux, parce que ce sont eux qui font tourner l'image, et non l'inverse.

Modèle → Monde

L'objet est décrit autour de son propre centre. Cette matrice le place dans la scène : position, rotation, échelle. Trois informations, seize nombres.

Monde → Vue

On ne déplace jamais la caméra : on déplace le monde entier dans l'autre sens. C'est exactement équivalent, et bien moins coûteux.

Vue → Projection

C'est ici que naît la perspective. La matrice écrase le volume visible en un cube, et la division finale par la profondeur fait que le lointain rétrécit.

Le cœur

Ce que « PBR » calcule vraiment

Les trois lettres veulent dire « rendu fondé sur la physique ». Derrière, il y a une équation qu'on peut écrire en entier, et dont chaque terme a un sens mesurable. La voici, telle qu'elle tourne dans le nuanceur de cette page.

Distribution des normales — GGX D = α² / (π · ((n·h)²·(α²−1) + 1)²)

Quelle proportion des micro-facettes de la surface est orientée pile pour renvoyer la lumière vers l'œil. C'est elle qui fait la taille du reflet : rugosité faible, reflet minuscule et intense ; rugosité forte, reflet large et diffus.

Fresnel — Schlick F = F₀ + (1 − F₀)(1 − v·h)⁵

Toute surface devient un miroir quand on la regarde de très biais — l'eau, le bitume, une table en bois. Cette puissance cinquième est la raison des reflets rasants au bord des objets. Ce n'est pas un effet : c'est de l'optique.

Géométrie — Smith G = G₁(n·v) · G₁(n·l)

Les micro-facettes se font de l'ombre entre elles et se masquent mutuellement. Sans ce terme, une surface rugueuse renverrait plus de lumière qu'elle n'en reçoit — ce qui est physiquement impossible.

Le tout spéculaire = D·F·G / (4·(n·v)·(n·l))

Plus une part diffuse pour ce qui n'est pas réfléchi. Un métal n'a aucune part diffuse : c'est toute la différence entre le curseur de métallicité à 0 et à 100.

Pourquoi ça compte. Avant ce modèle, chaque logiciel avait ses réglages arbitraires et une matière changeait d'aspect en changeant de moteur. Depuis, « rugosité 0,3 · métallicité 1 » décrit le même métal partout — Blender, Unreal, Godot, ou cette page. C'est un accord sur la physique, pas sur une esthétique.

Les cartes

Cinq images pour une matière

Une matière PBR n'est pas une image : c'en est plusieurs, qui répondent chacune à une question différente pour chaque point de la surface. Sur cette page elles sont toutes calculées, pas chargées. Regardez-les séparément.

Chaque vignette est rendue par la même fonction de bruit que l'objet, à la même échelle. La carte de normales est la plus contre-intuitive : ses couleurs ne sont pas des couleurs, ce sont des directions — rouge pour l'axe X, vert pour Y, bleu pour Z. Un bleu uniforme signifie « surface parfaitement plate ».

Honnêteté

Ce que ce moteur ne fait pas

Pas d'ombres portées

L'objet ne se projette pas d'ombre sur lui-même ni sur un sol. Cela demande un second rendu depuis la lumière, et ce n'est pas le sujet ici.

Pas d'éclairage indirect

Dans la réalité, la lumière rebondit : un mur rouge teinte ce qui est à côté. Ici la lumière vient de deux sources directes plus un ciel simplifié. Le rendu réaliste complet demande de suivre les rebonds, ce qui coûte mille fois plus cher.

Une approximation du ciel

La part ambiante est un dégradé haut-bas, pas une vraie carte d'environnement. Sur un chrome parfait, cela se voit : un vrai moteur y reflèterait la pièce entière.

Ces trois manques sont exactement ce qui sépare un moteur pédagogique de 400 lignes d'un moteur de production. Le reste — la géométrie, les matrices, l'équation de réflectance, les cartes — est identique dans son principe.