28 points par kciter1 2024-05-07 | 3 commentaires | Partager sur WhatsApp

Implémentation d’un moteur de rendu 3D en ASCII tout en expliquant le pipeline de rendu 3D

Le résultat de cet article peut aussi être consulté, en plus du billet de blog, via les liens suivants :
GitHub: https://github.com/kciter/ascii-3d-renderer.js
Chromatic: https://6637eb83d047d2bb1b3cfe67-bdnazvfsel.chromatic.com/?path=/story…

  • Est-il possible de faire paraître de l’ASCII en 3D ?
    • L’ASCII ressemble à des pixels noir et blanc fortement agrandis
    • La luminosité peut être ajustée selon la densité des caractères
  • Comment transformer des coordonnées 3D en coordonnées 2D ?
    • Le processus se déroule globalement en traitement des vertex, rastérisation et traitement des fragments
    • Une coordonnée 3D est appelée un vertex, c’est-à-dire un « sommet » situé dans l’espace 3D
    • Un seul vertex ne suffit pas à représenter un objet, on regroupe donc des vertex pour le faire
    • La plus petite unité permettant de représenter un objet est appelée un polygone
  • Traitement des vertex
    • Le processus de transformation des vertex est appelé traitement des vertex
    • Il s’effectue dans l’ordre : transformation monde, transformation vue, puis projection
    • Chaque transformation est calculée à l’aide de matrices
    • La transformation monde consiste à placer dans l’espace 3D les vertex contenus dans le fichier du modèle 3D
    • La transformation vue consiste à positionner la caméra et à calculer depuis quelles coordonnées et sous quel point de vue l’objet est observé
    • La transformation de projection est le calcul permettant d’exprimer la perspective. On utilise généralement une projection en perspective.
    • La projection permet de convertir les coordonnées vers un espace 2D
  • Rastérisation
    • Processus qui convertit des coordonnées d’espace 2D en coordonnées de pixels
    • Passe par l’écrêtage, la division perspective, l’élimination des faces arrière, la transformation de viewport et le scan conversion
    • Dans cet article, ces opérations sont implémentées en les combinant de manière appropriée
  • Traitement des fragments
    • Processus de traitement des coordonnées converties en pixels
    • Dans un moteur de rendu 3D classique, on effectue des post-traitements comme des calculs de shader
    • Dans cet article, seul le résultat du calcul d’éclairage est appliqué
  • La partie implémentation est presque entièrement constituée de code source, elle est donc omise de ce résumé

3 commentaires

 
cosine20 2024-05-09

J’ai pris beaucoup de plaisir à lire cela. Ça m’a aussi rappelé avec nostalgie mon cours d’infographie de licence, et c’était très agréable.

 
toaonly 2024-05-08

J’ai trouvé cette lecture très agréable. J’ai été impressionné par le fait que le travail prenne en compte jusqu’à la position de la caméra.

 
thesol9 2024-05-07

Jusqu’à l’explication du pipeline de rendu de base
C’était vraiment très intéressant.