SHADERS UNITY ET WEBGL

• Expliquer le pipeline de rendu GPU (vertex → rasterisation → fragment) et identifier le rôle précis du vertex shader et du fragment shader dans ce pipeline, indépendamment du moteur utilisé
• Lire, analyser et modifier un shader écrit en HLSL (Unity) ou en GLSL (WebGL / Three.js), en reconnaissant les équivalences syntaxiques entre les deux langages
• Maîtriser les espaces de coordonnées 3D (local, world, view, clip, screen) et les matrices associées (MVP), et comprendre comment chaque moteur expose ces données dans ses shaders
• Implémenter des effets d’éclairage et de post-processing courants dans Unity URP et dans Three.js, en comprenant les concepts et équations sous-jacentes
• Acquérir de la méthodologie pour diagnostiquer et debugger des shaders

JOUR 1 - Partie 1 : Le pipeline GPU et les langages shaders - Matin (3h30)

• Pipeline vertex → rasterisation → fragment : rôles, étapes fixes/programmables, primitives, clipping, draw calls
• HLSL et GLSL : types (float, int, bool, half), vecteurs, swizzling, built-ins essentiels (normalize, dot, reflect, mix/lerp, step, smoothstep)
• Entrées/sorties : attributs vertex (position, UV, normal), uniforms, varyings, interpolation rasterizer
• Atelier 1 - Premier shader vertex + fragment
• Dessiner un point et utiliser gl_PointCoord / pointcoord
• Dessiner un triangle en utilisant l'interpolation rasterizer
• Comprendre les entrées (position locale, UV) → sorties (position écran, couleur)
• Debug interactif : mapper position XYZ → RGB, visualiser des espaces (fragCoord, pointCoord)
• Cross-platform Unity + Three.js

Partie 2 : Espaces de coordonnées et matrices - Après-midi (3h30)

• Espaces 3D et matrices
• Espaces local, world, view, clip, screen : rôles et usages
• Matrices MVP, inverse-transposée pour normales
• Textures et espace UV

Atelier 2 - Vertex shader avec animation

• Animation ondulatoire des sommets
• Appliquer les transformations MVP (local → clip space)
• Cross-platform Unity + Three.js

Atelier 3 - Fog en View Space

• Comprendre et utiliser le bon espace de coordonnées pour implémenter l’algorithme
• Variantes linéaire vs exponentielle

JOUR 2 - Partie 3 : Eclairage et shading stylisé - Matin (3h30)

• Normales, éclairage et shading stylisé :
• Normales et normal maps : matrice inverse-transposée, espace TBN (Tangent-Binormal-Normal)
• Modélisation d'éclairage : Blinn-Phong (diffuse et spéculaire)
• Introduction PBR pour rendus realistes
• Éclairage stylisé : toon shading par rampes et paliers (step/smoothstep), rim light / Fresnel, AO stylisée

Atelier 4 : Shader toon

• Construire un shader toon de A à Z : rampe de couleurs

Atelier 5 : Eclairage stylisé : Rim Light

• Comprendre l’effet Fresnel
• Implémenter l’effet

Partie 4 : Post-processing, fonctions clés, retro engineering - Après-midi (3h30, 65 % théorie / 35 % pratique)

• Post-processing et fonctions clés :
• Post-processing : accès aux buffers (color, depth, screen UV), architecture d'un pass complet
• Rendu Unity URP vs Three.js (render targets, blit)
• Fonctions essentielles : step, smoothstep, mix/lerp, dot, reflect, normalize, fract/floor, noise, hash
• Debug et optimisation : Frame Debugger, Spector.js

Atelier 6 : Dithering rétro en post-processing

• Quantification couleur + matrice de Bayer
• Appliquer en full-screen pass

Atelier 7 : Rétro-engineering d’un shader

• Lire et annoter un shader complet pour comprendre l’algorithme

Bertie met tout en œuvre pour adapter nos prestations à chaque situation de handicap. Si vous êtes en situation de handicap et avez des besoins spécifiques, n’hésitez pas à en faire part à notre référente handicap : maureen@bertieformation.com