I. Introduction▲
Dans cette vidéo, Steven Wittens présente comment fonctionne le rendu de nos images 3D sur l'écran. La conférence n'est pas spécialement orientée WebGL mais plus sur les cartes graphiques 3D et leur fonctionnement (donc concerne aussi OpenGL et DirectX).
Durant cette conférence, vous allez apprendre comment dessiner quelque chose, où cela est dessiné et ce qu'il faut dessiner. Grâce à cela, vous serez capable de comprendre comment la carte graphique fonctionne et ainsi de mieux comprendre comment utiliser les bibliothèques comme WebGL.
II. Vidéo▲
JS Conf - Making WebGL Dance
III. Diapositives▲
Vous pouvez retrouver les diapositives de la conférence sur le site de Steven Wittens. Notez qu'elles sont entièrement dynamiques et réalisées en WebGL.
IV. Résumé▲
IV-A. Rasterisation▲
Durant la première partie, Steven explique comment les pixels sont colorés à l'écran. Pour cela, il retrace l'évolution des techniques permettant de remplir les pixels composant un triangle afin de le retranscrire à l'écran. Les techniques vues sont :
- lignes de Bresenham (permettant d'afficher des lignes avec une simple boucle for) ;
- rendu scanline :
- précision au sous pixel (utilisation d'échantillons) ;
- filtrage au voisin le plus proche ;
- filtrage bilinéaire ;
- aliasing et filtrage anisotrope ;
- recouvrement du pixel ;
- super échantillonnage (SSAA) ;
- multi échantillonnage (MSAA) ;
- carte de relief (height map) (générée avec un bruit de Perlin) ;
- tampon de profondeur (à la base de la technique du shadow mapping) ;
- normales (à la base du rendu de lumière différé).
IV-B. Algèbre linéaire▲
La seconde partie s'articule autour de l'algèbre linéaire dans les rendus graphiques. En effet, il serait bien difficile de se passer des matrices lors de la réalisation des scènes 2D et 3D et Steven explique en détails comment celles-ci fonctionnent et pourquoi elles constituent une méthode efficace. De plus, il détaille aussi pourquoi nous avons besoin d'une quatrième dimension dans un monde 3D.
IV-C. Shaders▲
Finalement, Steven explique où se placent les shaders au cours du rendu et ce qu'il est possible de faire avec.
IV-C-1. Skeletal Animation▲
Le modèle 3D est animé grâce aux shaders. En effet, les différents paramètres de l'animation sont envoyés aux shaders qui se doivent de calculer la position correcte des sommets suivant des formules. Le modèle en lui-même reste statique.
IV-C-2. Normal mapping▲
Le normal mapping est une technique permettant d'augmenter le niveau de détail visible sur un modèle avec un très faible coût. Pour cela, une texture supplémentaire est envoyée aux shaders et affectera le calcul de la lumière, rajoutant ainsi du relief sur le modèle.
IV-C-3. Parallax mapping▲
Le parallax mapping est une amélioration du normal mapping où la position de la caméra est aussi envoyée aux shaders afin que ceux-ci puissent déformer le rendu de façon à faire croire qu'il y a un relief. Cela permet aussi de supprimer les désavantages du normal mapping lorsque la caméra est proche du plan.
V. Commenter▲
Vous pouvez commenter et donner vos avis dans la discussion associée sur le forum.