La Forge - shader

Initiation aux shaders : Matériel, Ombres et Lumière (Partie 3)

2021-01-29T00:00:00+00:00

Lors de la précédente partie nous étions laissés avec un résultat sympa mais qui ne casse pas 3 pattes à un canard!

Comme promis dans sa conclusion nous allons nous attaquer à rajouter de la couleur dans tout ça. 🌈

Le Matériel

Afin d’appliquer un matériel sur un objet de notre scène on va devoir expliquer au raymarcher ce qu’il doit faire lorsqu’il touche un objet et de quelle couleur le pixel de l’écran associé doit être coloré.

Un rayon part de l’oeil traverse l’écran et continue sa course jusqu’à rencontrer un objet de notre scène. Si le rayon touche l’objet vert, le pixel traversé par le rayon doit être coloré en vert. Et à l’inverse si c’est l’objet rouge qui est touché, le pixel doit devenir rouge.

Pour cela il nous faut un moyen de stocker l’information de couleur en fonction de l’objet touché.

On va donc opérer à quelques modification de notre modèle de données.

Tout d’abord on créé une structure qui va nous permettre de stocker à la fois la distance de l’objet par rapport à l’oeil, ainsi que son information de couleur.

Pour ne pas stocker des données trop lourdes on va uniquement définir un entier qui sera l’index de notre matériel à appliquer au solide s’il est touché par un rayon venant de l’oeil.

Modifications du code existant

Implémentation de la structure de données

struct Data {
    float d; // distance signée entre l'objet touché et l'oeil
    int m;   // index du matériel à appliquer
}

On va devoir faire aussi faire quelques modifications et ajouts:

Tout d’abord, on doit définir quelques fonctions permettant de manipuler notre structure.

Notamment une fonction de minimum entre deux struct Data

/**
* Retourne le minimum entre deux structures de données en se basant sur la distance signée.
* d1 : structure 1
* d2 : structure 2
*/
Data minData(Data d1, Data d2) {
    
    if(d1.d < d2.d) {
        return d1;
    }
    return d2; 
}

Modification des SDF existantes

On doit aussi modifier nos deux fonctions SDF (Signed Distance Field) pour le plan et la sphère.

SDF de la sphère

/**
* Retourne la distance signée d'une sphère par rapport à l'oeil
* point: Point de la scène 3D touché par le rayon de lumière
* rayon: Rayon de la sphère
*/
float sdSphere(vec3 point, float rayon) {
    return length(point) - rayon;
}

devient

/**
* Retourne la distance signée d'une sphère par rapport à l'oeil
* point    : Point de la scène 3D touché par le rayon de lumière
* radius   : Rayon de la sphère
* material : Matériel à appliquer à la sphère 
*/
Data sdSphere(vec3 point, float radius, int material) {
    return Data(length(point) - radius, material);
}

SDF de la plan

/**
* Retourne la distance signée d'un plan horizontal par rapport à l'oeil
* point    : Point de la scène 3D touché par le rayon de lumière
* height   : Rayon de la sphère
*/
float sdHorizontalPlan(vec3 point, float height) {
    return point.y - height;
}

Devient

/**
* Retourne la distance signée d'un plan horizontal par rapport à l'oeil
* point    : Point de la scène 3D touché par le rayon de lumière
* height   : Rayon de la sphère
* material : Matériel à appliquer au plan
*/
Data sdHorizontalPlan(vec3 point, float height, int material) {
    return Data(point.y - height, material);
}

Modification de la fonction de génération de scène

/**
* Renvoie la distance signée de l'intégralité des objets de la scène
* point : Point de la scène qui doit être calculé
*/
float scene(vec3 point) {
    
    float dSphere = sphere(point - vec3(0.5, 0, 2.), .7);
    float dPlan = sdHorizontalPlan(point, -.2);
    
    return min(dSphere, dPlan);
}

devient

/**
* Renvoie la distance signée et le matériel associé de l'intégralité des objets de la scène
* point : Point de la scène qui doit être calculé
*/
Data scene(vec3 point) {
    
    Data dSphere = sdSphere(point - vec3(0.5, 0, 2.), .7, MATERIAL_RED);
    Data dPlan = sdHorizontalPlan(point, -.2, MATERIAL_GREEN);
    
    return minData(dSphere, dPlan); // le minimum de distance entre les deux structures
}

Modification de l’algorithme de raymarching

On doit aussi modifier la fonction de Raymarching

Il devient:

/**
* Calcule la distance de l'objet le plus proche par rapport à l'oeil 
* en fonction d'un rayon directeur
* rO : origine du rayon
* rD : vecteur directeur du rayon
*/
Data rayMarch(vec3 rO, vec3 rD) {
    
    float d = 0.0;
    int m = 0;
    for(int i=0; i < MAX_ITERATIONS; i++) {
        
        vec3 p =  rO + rD * d;
        Data ds =  scene(p);
        d += ds.d;
        m = ds.m;
        if (ds.d < MIN_DISTANCE || d > MAX_DISTANCE) break;
    }
    
    return Data(d, m);

}

Dictionnaire de matériel

On définit des constantes qui vont correspondre à

#define MATERIAL_RED   1  
#define MATERIAL_BLUE  2
#define MATERIAL_GREEN 3
#define MATERIAL_YELLOW 4

Puis une fonction qui va associer notre index à une couleur sous forme de vec3.

/**
* Renvoie le matériel associé à l'index ou du noir si l'index est inconnu
* m : index du matériel
*/
vec3 material(int index) {
    switch(index) {
        case MATERIAL_RED:
            return vec3(1.0, 0, 0);
        case MATERIAL_GREEN:
            return vec3(0, 1.0, 0);
        case MATERIAL_BLUE:
            return vec3(0, 0, 1.0);
        case MATERIAL_YELLOW:
            return vec3(1.0, 1.0, 0);
        default:
            return vec3(0);
    }
        
}

Fonction principale

/**
* Calcule la couleur que doit posséder un pixel en fonction de ses coordonnées absolues
* fragColor : Couleur du pixel à afficher à l'écran
* fragCoord : Coordonnées du pixel à l'écran
*/
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Calcule des UV de l'écran
    vec2 uv = (fragCoord- 0.5*iResolution.xy) / iResolution.y;
    
    // La caméra est au centre du monde
    vec3 eye = vec3(0);
    
    // L'écran est décalé de 1
    vec3 pixel = vec3(uv, 1.0);
    
    // Calcul du rayon directeur de l'oeil traversant le pixel
    vec3 rayDirector = normalize(pixel - eye);
    
    // On applique l'algorithme de raymarching à ce pixel
    Data data = rayMarch(eye, rayDirector);

    // On récupère le matériel
    vec3 col = material(data.m);

    // Output to screen
    fragColor = vec4(col, 1.0);
}

Ce qui nous donne un très joli levé de soleil dans la plaine 😁

Si vous voulez vous amuser avec voici le code.

Le ciel les oiseaux et ta mère!

Comme vous pouvez le remarquer ( ou justement pas le remarquer 😋 ) notre sol à disparu !

Cela est du au fait que notre plan est infini et récouvre l’intégralité de l’espace.

On va donc devoir modifier un chouia notre code pour le faire apparaître de nouveau.

On va conditionner l’application de notre matériel si et seulement si la distance de l’objet n’est pas supérieur à notre distance d’affichage.

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    ...

    // On applique l'algorithme de raymarching à ce pixel
    Data data = rayMarch(eye, rayDirector);
    
    vec3 col = vec3(0);

    // le matériel est appliqué seulement si l'objet n'est pas trop loin
    if( data.d < MAX_DISTANCE) {
        // On récupère le matériel
        col = material(data.m);
    }

    // Output to screen
    fragColor = vec4(col, 1.0);
}

Ce qui nous donne:

On a bien le sol vert qui découpe du ciel noir, mais il y a une sorte d’aréole verte autour du demi-cercle rouge.

On peut d’ailleurs amplifier le phénomène en diminuant le nombre d’itérations de notre raymarcher.

#define MAX_ITERATIONS 20

Cela est dû au fait que le raymarcher n’atteint pas réellement la surface de l’objet du fait du faible nombre d’itérations. Ce qui conduit à des erreurs d’appréciation des distances et donc des problème d’attribution de matériel.

Pour avoir quelque chose de convenable on va au contraire augmenter ce nombre d’itérations.

#define MAX_ITERATIONS 200

Et voilà on a un ciel !! 🥳

Bon il est noir mais c’est temporaire on va le rendre bien plus beau par la suite !

Le code.

Les normales

Une partie essentielle d’un rendu réaliste du scène 3D est d’être dans la capacité de déterminer les variations géométriques de la surface que tente de rendre.

Une normal est un vecteur unitaire qui donne une indication sur la direction de l’extérieure de la surface.

crédit de l’image

Chacun des vecteurs de l’image partent de la surface selon une certaine direction.

Le but est donc de déterminer la direction de ce vecteur sur l’ensemble de la scène.

Pour ceux qui s’en rappellent on va utiliser le même principe que lorsque l’on cherche la pente d’une courbe, autrement dit sa dérivée.

Calculer une dérivée revient à caculer une application en un point, se déplacer d’une petite distance recalculer l’application en ce nouveau point. Et faire la la différence entre ces deux résultat.

Dans le cadre d’une f(x), en 1D. dx = f(x + h) - f(x) où h est le plus petit possible.

On va généraliser la chose dans la 3ème dimension.

Et caluler notre dérivé dans les 3 dimensions.

Notre application dans le cadre du calcul de la normale à une surface en un point est tout simplement notre fonction scene appliquée en un point.

Pour se déplacer dans les x, y et z. On va définir h suffisamment petit permettant de nous déplacer sur la surface.

Nous sommes surtout intéressés par la direction du vecteur et non pas sa norme.

On normalise donc le vecteur composé des dx, dy, dz calculés.

/**
* Calcul le vector normal d'un point de la scène
* point : Point de la scène qui doit être calculé
*/
vec3 normal(vec3 point) {
    float dp = scene(point).d;
    
    vec2 eps = vec2(0.001, 0);
    
    float dx = scene(point + eps.xyy).d - dp;
    float dy = scene(point + eps.yxy).d - dp;
    float dz = scene(point + eps.yyx).d - dp;
    
    return normalize(vec3(dx, dy, dz));
}

et modifie notre fonction d’affichage pour montrer le champ des normal:

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    ...

    vec3 col = vec3(0);

    // le matériel est appliqué seulement si l'object n'est pas trop loin
    if( data.d < MAX_DISTANCE) {
        
        // On recalcule le point par rapport à la distance trouvée lors du calcul de raymarch
        vec3 point = eye + rayDirector * data.d;
    
        // On récupère le matériel
        col = normal(point);
    }

    // Output to screen
    fragColor = vec4(col, 1.0);
}

Ce qui nous permet d’afficher cette image:

Si on analyse un peu cette image, on peut tracer les normales que j’ai dessiné ici en violet.

Plus une surface est rouge plus son vecteur normal est orienté dans l’axe des x.

Plus une surface est verte plus son vecteur normal est orienté dans l’axe des y.

Il n’y a pas de bleu car dès que l’on quitte la surface on n’affiche pas de couleur.

Les zones en noir correspondent à des composantes négatives, en effet une composante de couleur est négative elle ramenée à 0.

On remarque aussi que le sol est entièrement vert, c’est du au fait qu’il est entièrerement horizontal et donc sa normal est purement vertical et donc de valeur (0, 1, 0).

Le code

Et la lumière fut ! 🌞

Maintenant que l’on a nos normales en chaque point de notre surface on va pouvoir calculer la contribution d’une source lumineuse dans notre rendu de scène.

Pour cela nous allons faire appel à loi de Snell-Descartes sur l’incidence de la lumière réfléchi.

Ce que l’on désire c’est connaître l’intensité lumineuse reçu en chaque point de la scène.

On trace un rayon de lumière entre le point de la surface qui doit être calculé et la source lumineuse.

On normalise ce vecteur.

Puis on réalise le produit scalaire entre ce vecteur direction et la normale à la surface en ce point.

/**
* Calcul l'intensité lumineuse renvoyée par la scène en un point à l'oeil
* point         : Point de la scène qui doit être calculé
* normal        : Vecteur normal à la surface au point calculé
* lightPosition : Position de la source de lumière dans l'espace
*/
float lighting(vec3 point, vec3 normal, vec3 lightPosition) {
    
    // On calcule le vecteur de la direction de la lumière
    vec3 lightDirection = lightPosition - point;
    
    // On normalise ce vecteur direction
    vec3 lightNormal = normalize(lightDirection);
    
    // Puis l'intensité lumineuse
    return dot(lightNormal, normal);
}

Puis on modifie la fonction d’affichage pour montrer la contribution de la lumière dans la scène.

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    ...
    
    vec3 col = vec3(0);

    // le matériel est appliqué seulement si l'object n'est pas trop loin
    if( data.d < MAX_DISTANCE) {
        
        // On recalcule le point par rapport à la distance trouvée lors du calcul de raymarch
        vec3 point = eye + rayDirector * data.d;
    
        // On récupère le matériel
        vec3 normalVector = normal(point);
        
        // On calcule la lumière en un point de la scène
        float lightIntensity = lighting(point, normalVector, lightPosition);
        
        // Intensité lumineuse en niveau de gris
        col = vec3(lightIntensity);
    }

    // Output to screen
    fragColor = vec4(col, 1.0);
}

Ce qui nous donne:

Plus la surface est blanche plus la normale est alignée avec la source de lumière.

Le code

On va maintenant rendre notre scène en prenant en compte le matériel de la surface ainsi que la contribution lumineuse.

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    ...

    // le matériel est appliqué seulement si l'object n'est pas trop loin
    if( data.d < MAX_DISTANCE) {
        
        // On recalcule le point par rapport à la distance trouvée lors du calcul de raymarch
        vec3 point = eye + rayDirector * data.d;
    
        // On récupère le matériel
        vec3 normalVector = normal(point);
        
        // On calcule la lumière en un point de la scène
        float lightIntensity = lighting(point, normalVector, lightPosition);
        
        // On pondère le rendu du matériel avec la contribution lumineuse
        col = material(data.m) * lightIntensity;
    }

    // Output to screen
    fragColor = vec4(col, 1.0);
}

Et voici le résultat on a une jolie ombre réaliste pour le côté non exposé.

Le code

Ombre et lumière les faces d’une même pièce 🌛

Notre scène a bien des ombres mais aucune ombre portée.

Donnons à notre scène un peu plus de réalisme.

Pour cela il faut se demander la chose suivante: Qu’est-ce qu’une ombre ?

La réponse évidente est une absence de lumière.

Mais qu’est ce qui provoque cette absence de lumière ? La réponse est souvent un obstacle entre l’objet 3D plongé dans l’ombre et la source de lumière.

Pour déterminer s’il y a un obstacle entre un point de notre scène et une source lumineuse on va appliquer l’algorithme de raymarching en utilisant comme paramètres:

le point de la scène que l’on désire déterminer être dans l’ombre ou non
le rayon directeur de la lumière calulé précédemment

Le point rO de la scène est ici séparé de la source de lumière par un autre solide qui bloque la vue du point rO.

En appliquant l’algorithme de raymarching on va se retrouver au point C.

Si la distance rO -> C est inférieure à la distance r0 -> S.

Alors il y a un obstacle sur la route. L’intensité lumineuse en rO est donc nulle !

float lighting(vec3 point, vec3 normal, vec3 lightPosition) {
    
    // On calcule le vecteur de la direction de la lumière
    vec3 lightDirection = lightPosition - point;
    
    // On normalise ce vecteur direction
    vec3 lightNormal = normalize(lightDirection);
    
    // On caclule la distance qui sépare notre point de 
    Data data = rayMarch(point, lightNormal);
    
    // Si la distance calculé est inférieure à la longueur du rayon 
    // alors l'intensité lumineuse est nulle
    if (data.d < length(lightDirection)) {
        return 0.0;
    }
    
    // On calcule l'intensité lumineuse via le produit scalaire des deux vecteurs
    return dot(lightNormal, normal);
}

Oups! c’est pas trop ce qu’on voulait 😠

Alors qu’est ce qui se passe ?

Et bien on calcule le raymarching d’un point qui est lui même sur une surface de notre scène, donc toutes les distances calculées sont nulles !!

Pour corriger ce problème on va “décoller” notre point de calcul en se déplaçant très légèrement dans la direction de la normal à notre surface.

Data data = rayMarch(point + normal*0.01, lightNormal);

Et finalment on atteint le résultat escompté 😁

Et on peut amplifier la chose avec une lumière plus rasante.

// Source de lumière
vec3 lightPosition = vec3(3.0, 2.5, 0);

Le code

Correction colorimétrique

Tout capteur a ses défaut et l’oeil ne fait pas exception.

Le sujet est passionnant et je vous redirige vers cet article pour en savoir plus.

Ce qui est à retenir c’est ce tableau-ci:

La première ligne du tableau représente ce que l’on devrait voir avec un capteur linéaire et donc oeil parfait.

La seconde ce qu’un oeil distingue réellement. Il a tendance a mieux distinguer les hautes intensités lumineuses et être moins performant dans des conditions de plus faible luminostité.

Si on représente c’est valeurs sous la forme d’un graphique:

Le but va être alors de corriger ce manque précision dans les noirs pour rendre plus réelle notre rendu des couleurs.

On appelle ce coefficient d’erreur dans la colorimétrie le gamma de l’image. Que l’on note γ

Les données nous donne une valeur de γ de 2.2.

La courbe ainsi tracée à pour formule x^γ.

Pour revenir à une dynamique de constraste linénaire on va réaliser son symétrique par rapport l’axe f(x) = x, autrement dit f(x) = x ^ (1/γ)

Bon maintenant que l’on a la théorie place à la pratique!

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    ...

    // Définition du gamma de l'image
    float gamma = 2.2;

    // On applique la correction du gamma de chaque de couleur du pixel
    col = pow(col, vec3(1./gamma));

    // Output to screen
    fragColor = vec4(col, 1.0);
}

Ce qui nous donne ce résultat:

Comme toujours le code.

De meilleures couleurs

On a des couleurs, de la lumière des ombres portées et même une correction du gamma de notre image.

Mais qu’est ce que nos couleurs sont moches ! 🤢

On va d’abord un peu redéfinir notre dictionnaire de matériaux.

#define MATERIAL_SPHERE 1  
#define MATERIAL_FLOOR  2
#define MATERIAL_SKY    3

Ensuite il nous faut une palette de couleur cohérente. J’ai découvert très récemment le site coolors qui m’en fourni une.

Le petit soucis c’est que notre définition des couleurs de pixel est un peu spéciale.

En effet les composante de couleur vont de 0 à 1 dans notre système et de 0 à 255 sur coolors.

Le deuxième soucis est qu’ils ne prennent pas en compte les aberrations dûes au gamma de l’image.

si on se contente d’écrire:

vec3 material(int index) {

    vec3 material;

    switch(index) {
        case MATERIAL_SPHERE:
            material = vec3(89, 66, 54);
            break;
        case MATERIAL_FLOOR:
            material = vec3(255, 186, 73);
            break;
        case MATERIAL_SKY:
            material = vec3(10, 157, 255);
            break;
        default:
            material = vec3(0);
    }
    
  
    return material/255.;
        
}

On va obtenir des couleur qui sont un peu plus fades. Qui sont très belle au demeurant :)

Si on veut exactement les couleurs que l’on a dans la palette choisie, il va falloir opérer à des ajustements.

J’ai écrit un petit script qui permet de “corriger” les couleurs.

En remplaçant les valeurs trouvée.

/**
* Renvoie le matériel associé à l'index ou du noir si l'index est inconnu
* m : index du matériel
*/
vec3 material(int index) {

    vec3 material;

    switch(index) {
        case MATERIAL_SPHERE:
            material = vec3(98.69, 51.12, 32.88);
            break;
        case MATERIAL_FLOOR:
            material = vec3(1000.00, 499.51, 63.81);
            break;
        case MATERIAL_SKY:
            material = vec3(0.80, 344.03, 1000.00);
            break;
        default:
            material = vec3(0);
    }
    
  
    return material / 1000.;
        
}

On obtient:

Et c’est bien plus beau 😎

Le code associé au chapitre.

Un ciel légèrement plus réaliste

Dans la vraie vie le ciel n’est jamais bleu uni comme cela, ça se rapproche plutôt d’un dégradé comme celui ci:

On va donc essayer de mettre en place ceci pour notre scène.

Tout d’abord, l’on va définir non pas une couleur de ciel, mais deux, une pour la couleur sombre du dégradé et une deuxième pour la couleur claire du dégradé.

#define MATERIAL_SPHERE      1  
#define MATERIAL_FLOOR       2
#define MATERIAL_SKY_LIGHT   3
#define MATERIAL_SKY_DARK    4

Ensuite nous allons utiliser une fonction d’interpolation linéaire appelée mix.

Elle prend 3 paramètres:

le vecteur x : couleur claire du dégradé
le vecteur y : couleur sombre du dégradé
le coefficient a : coefficient à appliquer

Et renvoie un vecteur de sortie s.

La formule appliquée sur chaque composante des vecteurs est s = (1- a) * x + a * y

Pour générer notre dégradé qui va de notre couleur claire vers notre couleur sombre, on va devoir définir notre coefficient en fonction des uv.y de notre image.

Pour rappel:

Le centre de l’image à une valeur d’uv de (0,0) et le coin supérieur droit(1, 1).

Nous allons donner à notre gradient cette courbe de coefficient:

La formule est a(y) = (y + 0.5) ^ 1.5

Et maintenant le code!

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Calcule des UV de l'écran
    vec2 uv = (fragCoord- 0.5*iResolution.xy) / iResolution.y;
    
    ...
    
    // ciel
    vec3 skyColDark  = material(MATERIAL_SKY_DARK);
    vec3 skyColLight = material(MATERIAL_SKY_LIGHT);
    
    vec3 col = mix(skyColLight, skyColDark, pow(uv.y + 0.5, 1.5));

    ....

    // Output to screen
    fragColor = vec4(col, 1.0);
}

Ce qui donne:

Beaucoup mieux! 😃

Il reste une petite chose à traiter. La lumière est réfléchi par les couches de l’atmosphère et redirigé vers le sol.

Dans un but de simplification on va considéré que cette lumière venant du ciel est purement vertical (ce qui n’est évidemment pas vrai).

On va définir une composant de couleur supplémentaire que l’on va additionner au lumière calculées.

// Définition de la couleur venant du ciel
vec3 ambiantSky = normalVector.y * skyColLight;

// On pondère le rendu du matériel avec la contribution lumineuse
col = material(data.m) * (lightIntensity + ambiantSky);

Et voici le rendu finale de notre scène!!

Le code.

Conclusion

On est passé de

Quelle aventure cette article 😁. On a appris à:

appliquer un matériel sur un objet de notre scène.
calculer les lumières de manière réaliste
calculer les ombres associées
gérer la colorimétrie et le gamma de notre image
et enfin faire un ciel digne de ce nom !

Dans la prochaine partie on verra comment implémenter une caméra dans ce monde 3D un peu plus perfectionnée que maintenant.

Je vous remercie de votre lecture et je vous dis à la prochaine pour de nouveaux articles, sur les shaders ou un autre sujet. 💗

Initiation aux shaders : RayMarching (Partie 2)

2020-12-26T00:00:00+00:00

On a vu dans la partie précédente comment manipuler les pixels d’une image grâce au langage de shader.

Il est temps de s’attaquer à du bien plus intéressant: la 3D ! 😎

L’algorithme de RayMarching

Littéralement “marché de rayon”.

L’idée est très élégante. Elle se base entièrement sur le principe des SDF (Signed Distance Field).

On a comme situation de départ un oeil situé au centre de l’écran mais reculé d’une certaine distance.

La situation est représentée vu de haut.

On veut afficher notre objet en bleu.

On choisi un pixel sur notre écran.

On détermine un rayon directeur entre notre oeil et le pixel.

Grâce à la SDF de notre solide on détermine la distance de l’objet par rapport à notre oeil et on trace un cercle du rayon de la distance nous séparant de l’objet. Autrement dit le point du solide le plus proche de l’oeil.

Puis on trace un rayon infini partant de l’oeil et dans la direction du vecteur. Le point d’intersection M entre le cercle que l’on vient de tracer devient notre nouveau point de départ.

On réitère l’opération de ce point M comme oeil.

On récupère un point O et rebelote.

Lorsque le diamètre du cercle obtenu est suffisamment petit, on considère que l’on a touché l’objet.

On somme l’ensemble des distances trouvées précédemment et l’on retourne la somme.

Il existe le cas ou le rayon ne touche pas l’objet alors le diamètre du cercle va être trop grand.

Si la distance est trop grande on la renvoie la distance maximale.

Ce qui est important de comprendre c’est que l’on va efectué cette algorithme un très grand nombre de fois et plusieurs fois par frame. Autant optimiser tout ce qui peut l’être. 😉

Implémentation

Pour nous faciliter la vie on va définir quelques constantes:

#define MIN_DISTANCE 0.001
#define MAX_DISTANCE 20.
#define MAX_ITERATIONS 50

Pui on implémente l’algorithme de raymarching en lui-même.

float rayMarch(vec3 rayOrigin, vec3 rayDirector) {
    
    // Initialisation des distances
    float accumulatedDistance = 0.0;
    float computedDistance = 0.0;
    vec3 currentPoint;
    
    // Boucle de l'algorithme d'au plus MAX_ITERATIONS
    for(int i = 0; i < MAX_ITERATIONS; i++) {
    
        // Calcul du point courant
        currentPoint = rayOrigin + rayDirector * accumulatedDistance;
        
        // Calcul de la distance du point courant par rapport à une sphère
        // de rayon 0.5 et décalé de 0.5 vers la droite et avancé de 1.8 de l'écran
        computedDistance = length(currentPoint - vec(0.5, 0, 1.8)) - 0.5;
        
        // On accumule la distance trouvée
        accumulatedDistance += computedDistance;
        
        // Si la distance trouvé est suffisamment faible on stoppe l'algorithme
        if ( computedDistance < MIN_DISTANCE ) {
            break;
        }
        
        // Si la distance trouvée est trop grange on retourne la distance
        if( accumulatedDistance > MAX_DISTANCE ) {
            return MAX_DISTANCE;
        }
    
    }
    
    return accumulatedDistance;
}

Puis on calcule les paramètres de notre algorithme

    // Calcule des UV de l'écran
    vec2 uv = (fragCoord- 0.5*iResolution.xy) / iResolution.y;
    
    // La caméra est au centre du monde
    vec3 eye = vec3(0);
    
    // L'écran est décalé de 1
    vec3 pixel = vec3(uv, 1.0);
    
    // Calcul du rayon directeur de l'oeil traversant le pixel
    vec3 rayDirector = normalize(pixel - eye);

Le rayon directeur doit-être unitaire. D’où l’utilisation de la méthode normalize.

Pour rappel les UVs sont des coordonnées dont l’origine est au centre de l’écran et dont les coordonnées sont transformé pour que l’axe des Y dans un ratio 16:9 soit situés entre [-1, 1].

On applique en suite l’algorithme de raymarching avec les paramètres calculés.

    // On applique l'algorithme de raymarching à ce pixel
    float d = rayMarch(eye, rayDirector);

On désire afficher cette distance sous la forme d’une composante de couleur. On doit donc compresser les distances pour les faire rentrer dans l’intervalle [0, 1].

Et on affiche sous forme de niveau de gris notre sphere.

    // On tasse les distances pour les faire rentrer dans l'intervalles [0, 1]
    d /= MAX_DISTANCE;

    // On affiche
    fragColor = vec4(d, d, d, 1.0);

Et cette fois-ci on affiche une sphère et non pas un disque! Bienvenu dans la 3ème dimension !! 😎

Pour s’en convaincre on peut booster le contraste et la luminosité de l’image.

On remarque des cercles concentriques décalés vers la gauche. Plus le disque est sombre plus il est proche d’une distance de 0.

On est bien en face d’un objet dans la 3ème dimension.

Plusieurs objets dans notre scène

Notre monde est un peu vide, il est temps de le remplir.

Dessiner un plan horizontal

Un plan horizontal est défini par l’ensemble des points qui sont à la même hauteur.

On défini la SDF du plan

float horizontalPlan(float height, vec3 point) {
    return point.y - height;
}

Elle prend en paramètre la hauteur du plan par rapport au plan XZ de notre monde. Ainsi que le point dont on cherche la distance par rapport au plan.

Pour tester notre code on va opérer une petite modification.

On va définir la SDF de ce plan.

float horizontalPlan(float height, vec3 point) {
    return point.y - height;
}

Puis une fonction scene qui prend en compte le point dont lequel on désire connaître la distance par rapport à la scène.

float scene(vec3 point) {    
    // Un plan 0.2 unité plus bas que le plan XZ
    return horizontalPlan(-.2, point);
}

On va par la même occassion se définir une SDF pour la sphère.

float sphere(vec3 center, vec3 point, float rayon) {
    return length(point - center) - rayon;
}

Et on modifie la fonction de raymarching

float rayMarch(vec3 rayOrigin, vec3 rayDirector) {
    
    // Initialisation des distances
    float accumulatedDistance = 0.0;
    float computedDistance = 0.0;
    vec3 currentPoint;
    
    // Boucle de l'algorithme
    for(int i = 0; i < MAX_ITERATIONS; i++) {
    
        // Calcul du point courant
        currentPoint = rayOrigin + rayDirector * accumulatedDistance;
        
        // Calcule de la distance du point courant par rapport à la scene
        computedDistance = scene(currentPoint);
        
        // On accumule la distance trouvée
        accumulatedDistance += computedDistance;
        
        // Si la distance trouvé est suffisamment faible on stoppe l'algorithme
        if ( computedDistance < MIN_DISTANCE ) {
            break;
        }
        
        // Si la distance trouvée est trop grange on retourne la distance
        if( accumulatedDistance > MAX_DISTANCE ) {
            return MAX_DISTANCE;
        }
    
    }
    
    return accumulatedDistance;
}

Ce qui nous permet d’afficher ceci 😃

On obtient bien ce qui est attendu. la ligne d’horizon tend bien vers le plan car elle se trouve à une distance trop importante.

Afficher plus d’un élément.

Pour afficher plus d’un élément il faut se représenter les choses ainsi

Partant du point P et suivant ce rayon précis la sphère est plus proche de P que le plan (orange).

Autrement dit la SDF de la sphère va renvoyer une distance plus faible que le plan.

Mathématiquement ce concept peut-être représenté par le minimum des deux distances.

float scene(vec3 point) {
    
    float dSphere = sphere(vec3(0.5, 0, 2.), point, .7);
    float dPlan = horizontalPlan(-.2, point);
    
    return min(dSphere, dPlan);
}

Ce qui nous permet d’afficher les deux éléments.

Mais il manque quelque chose…

De la couleur ! 🤡

Conclusion

On a appris à afficher très sommairement des solides dans un environnement 3D. Et sans bibliothèques complexes.

La prochaine fois on rajoutera de la couleur, des ombres et de la lumière!

Je vous donne aussi le lien de mon shadertoy.

Je vous remercie de m’avoir lu 😀.

Initiation aux shaders (Partie 1)

2020-12-24T00:00:00+00:00

Bon je vais pas vous mentir j’ai à peu près 3 jours d’expérience sur le sujet, voyez plutôt ça comme une sorte de cahier de route de ma découverte du domaine.

J’ai trouvé deux outils pour faciliter mon initiation:

Le premier est un peu la bible du débutant, le second permet d’expériencer facilement ce que l’on apprend.

En route pour l’aventure 🐱‍👓

Hello world sauce shader

Ce qui déroute en premier lorsque l’on lance shadertoy, c’est l’absence de ce que l’on connait d’habitude.

Le main est déjà très étrange:

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{

}

Cela ressemble vaguement à du C mais il y des différences. Le main qui s’applle mainImage prend deux paramètres:

out vec4 fragColor
in vec2 fragCood

Beaucoup de choses déjà dans ces deux paramètres. D’abord les mots-clefs in/out. Ils agissent comme des sas entre le code que l’on écrit et le code qui appelle le code que l’on écrit.

Opérateur de liaison

in défini une variable qui peut-être modifié par notre code sans pouvoir impacter le code appelant, en forçant la recopie de la variable
out défini une variable qui n’est pas initialisée par le code appelant mais qui peut être utilisé par celui-ci à l’issue de l’éxécution de la fonction. C’est dans les faits une référence.

Les vecteurs

Ensuite vient les termes vec4 et vec2, ce sont des structures de données semblables à des tableaux de float (toujours des floats), mais boosté aux stéroïdes. Il existe en effet tout une collection de facilté d’écriture.

Il est par exemple possible de déclarer un vec2 ainsi:

vec2 pos = vec2(1.0, 2.0);

Et accéder à ses composantes de cette manière:

float x = pos.x; // 1.0
float y = pos.y; // 2.0

On peut aussi opérer des inversions de composantes

vec2 inverted_pos = pos.yx; // (2.0, 1.0)

Il est aussi possible de faire de la récupération partielle de composantes

vec3 pos = vec3(1.0, 2.0, 3.0);
vec2 pos2 = pos.xz; // (2.0, 3.0)

Ou même dupliquer des composantes

vec3 pos = vec3(1.0, 2.0, 3.0);
vec3 pos2 = pos.xxx; // (1.0, 1.0, 1.0)

Dernier outil que je connais, il est possible de ne pas complètement définir un vecteur

vec3 pos = vec3(0.0); // (0.0, 0.0, 0.0)
vec3 pos2 = vec3(4.0); // (4.0, 4.0, 4.0)

Les nom de variables du main

Avant de parler de tout ça une petite remise en contexte est nécessaire.

Le mainImage n’est pas vraiment le main du programme. Un shader est une routine qui s’éxécute sur chaque pixels d’une image.

Pour rappel, un pixel est la plus petite unité qui compose une image, pixel ( picture element ).

Afin de rendre une image on ne peut décemment pas traiter un à un les pixels ça serait beaucoup trop long et gourmand en ressources, surtout avec les résolutions d’aujourd’hui qui sont gigantesques comme la 4k et la 8k.

L’idée qui a été choisi est de paralléliser les traitements de chacun des pixels.

Cela implique que le traitement entre deux pixels est totalement indépendant car il doit s’effectuer au même moment.

Un pixel est composé de 3 lampes, une rouge, une bleue et une verte. En fonction de la valeur de chaque composante on est capable de générer n’importe quelle couleur du spectre visible.

Couleur du pixel

Le but de notre routine est de définir l’intensité des lampes rouge, verte et bleue.

Le résultat de notre calcul doit être affecté dans la variable fragColor. Celle-la est un vec4, cela signifie qu’elle possède 4 composantes: (Rouge, Vert, Bleu, ?).

La dernière est le canal alpha qui gère la transparence. On ne s’en occupera pas dans cette partie.

Dernière chose à savoir est que chacune de ces composantes se répartissent entre 0 ( pas de lumière du tout ) et 1 ( intensité maximale ).

Le code ci-dessous explique de renvoyer pour chaque pixel de l’image un vecteur (1.0, 0.0, 0.0, 1.0) autrement dit du rouge pur. La 4ème composante est à 1.0 pour signifier qu’il n’y a pas de transparence.

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Output to screen
    fragColor = vec4(1.0, 0.0, 0.0, 1.0);
}

Mais aussi du vert

fragColor = vec4(0.0, 1.0, 0.0, 1.0);

Mais aussi du bleu

fragColor = vec4(0.0, 0.0, 1.0, 1.0);

Mais aussi du jaune

fragColor = vec4(1.0, 1.0, 0.0, 1.0);

Bref vous voyez l’idée. Notre routine contrôle chaque pixel de l’écran qui mis tous ensemble forme l’image finale.

La position du pixel

Bon tout ça c’est très bien mais un peu limité tous les pixels ont la même couleur on est pas près de faire le nouveau Pixar à la mode. 😋

C’est là qu’intervient notre second paramètre fragCoord il s’agit là aussi d’un vec2, la première composante est l’abscisse du pixel sur l’écran et la deuxième son ordonnée dans la pratique (x, y).

Essayons de visualiser cela 🧐

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{

    // Output to screen
    fragColor = vec4(fragCoord.x, 0.0, 0.0 ,1.0);
}

Rouge, encore! Mais c’est normal quand on y réfléchi, les coordonnées des pixels sont données sous leur forme cartésiennes, c’est à dire des nombres entiers positifs.

Or les composantes de couleur ne peuvent pas dépasser la valeur 1.0.

Il va donc falloir normaliser les valeurs. Pour cela on va utiliser un autre outils mis à disposition par le langage de shader qui nous fourni tout une série de variable appelée des uniforms.

Il faut les voir comme le moyens de communiquer des informations entre les différentes unité de traitement de pixels. Celle qui va nous intéresser ici est iResolution. Elle contient la taille en pixels de l’écran et donc le nombre en X et en Y de pixels.

Ce qui va nous permettre d’effectuer une règle de trois entre la position du pixel et la résolution.

iResolution.x       -> rouge pur (1.0)
fragCoord.x         -> intensité de rouge  (X)

X = (fragCoord.x * 1.0) / iResolution.x

En utilisant les propriétés des vecteurs:

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{

    vec2 uv = fragCoord / iResolution.xy;

    // Output to screen
    fragColor = vec4(uv.x, 0.0, 0.0 ,1.0);
}

De même en Y

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{

    vec2 uv = fragCoord / iResolution.xy;

    // Output to screen
    fragColor = vec4(uv.y, 0.0, 0.0 ,1.0);
}

On peut même cartographier les deux composantes

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{

    vec2 uv = fragCoord / iResolution.xy;

    // Output to screen
    fragColor = vec4(uv.x, uv.y, 0.0 ,1.0);
}

Le noir est une absence de luminosité autrement dit (0.0, 0.0, 0.0, 1.0).

Le jaune une combinaison de rouge et de vert, le jaune pur représente (1.0, 1.0, 0.0, 1.0).

En prenant la formule à l’envers on peut déterminer l’origine du repère de notre écran ainsi que le sens du repère.

Pour une résolution de 800x450, il vient:

Changement de repère

Bon je sais pas vous mais le repère en bas à gauche n’a jamais été ma tasse de thé ou de café pour les amateurs.

Je préfère que l’origine de mon repère soit le centre de mon écran, cela va faciliter grandement les calculs qui vont suivre. (oui il va y avoir un max de maths 🤓).

Pour mettre le centre au centre on va retrancher la moitié de la résolution sur chacune des composantes.

Cette soustraction va automatiquement nous amener à obtenir des valeurs négatives. Une composante de couleur étant toujours positive, une valeur négative sera mise à 0.0.

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{

    vec2 uv = fragCoord - 0.5 * iResolution.xy;

    // Output to screen
    fragColor = vec4(uv.x, uv.y, 0.0 ,1.0);
}

On se retrouve avec 4 quadrants:

Que l’on peut avec la même technique que tout à l’heure visualiser de manière plus précise sous la forme d’un continuum.

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{

    vec2 uv = (fragCoord - 0.5 * iResolution.xy) / (iResolution.xy / 2.0);

    // Output to screen
    fragColor = vec4(uv.x, uv.y, 0.0 ,1.0);
}

Dessiner des formes simples

Le disque

C’est la forme la plus simple à afficher.

Son équation dans le plan cartésien est :

x² + y² < R²

Comme on a centré le repère, il n’y a pas besoin de se soucier d’offset.

en prenant la racine de chaque côté

sqrt(x² + y²) < R

Le langage fourni une fonction appellée length qui permet de récupérer la norme d’un vecteur.

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{

    vec2 uv = (fragCoord - 0.5 * iResolution.xy) / (iResolution.xy / 2.0);

    // Output to screen
    fragColor = vec4(uv.x, uv.y, 0.0 ,1.0);
    
    if (length(uv) < 1.0) {
        fragColor = vec4(1.0, 1.0, 1.0 ,1.0);
    }
}

Bon c’est presque ça, on a juste négligé le ratio de notre image. Pour rétablir le disque on peut diviser nos coordonnées par la résolution en Y sur 2.

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{

    vec2 uv = (fragCoord - 0.5 * iResolution.xy) / (iResolution.y / 2.0);

    // Output to screen
    fragColor = vec4(uv.x, uv.y, 0.0 ,1.0);
    
    if (length(uv) < 1.0) {
        fragColor = vec4(1.0, 1.0, 1.0 ,1.0);
    }
}

Et tada 🎉 un disque!

Un triangle équilatéral

Je vais pas vous mentir, ça n’a pas été très facile de déterminer comment dessiner le triangle.

Le principe reste le même: déterminer si un point appartient ou non à une surface.

Le problème ici est que la forme est bien plus complexe qu’un disque.

Il faut donc ruser pour trouver une solution

Une petite simulation avec geogebra m’a permis de me simplifier la représentation du problème.

Si M est en dehors de l’angle AB, AC. La valeur de d est négative.

De même dans l’autre sens

Par contre si l’on se trouve dans l’angle, la valeur d devient positive.

Le problème c’est que si le point est dans l’angle mais en dehors du triangle, la valeur reste positive.

L’idée est d’appliquer l’algorithme sur les 3 angles, pour que le point soit bel et bien à l’intérieur du triangle. Si chacun des produits scalaires sont positifs alors le point M appartient au triangle.

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{

    vec2 uv = (fragCoord - 0.5 * iResolution.xy) / (iResolution.y / 2.0);

    // Output to screen
    fragColor = vec4(uv.x, uv.y, 0.0 ,1.0);
    
    // Coordonnées des sommets du triangles équilatéral
    float k = 1.75;
    vec3 A = vec3(0.0, 0.57, 0.0) * k;
    vec3 B = vec3(0.5, -0.28, 0.0) * k;
    vec3 C = vec3(-0.5, -0.28, 0.0) * k;
    
    // Calcul des coordonnées des vecteurs
    vec3 AB = B-A;
    vec3 AC = C-A;
    
    vec3 BA = A-B;
    vec3 BC = C-B;
    
    vec3 CA = A-C;
    vec3 CB = B-C;
    
    // M est le point que l'on cherche à déterminer s'il est en dehors ou non du triangle
    vec3 AM = vec3(uv - A.xy, 0);
    vec3 BM = vec3(uv - B.xy, 0);
    vec3 CM = vec3(uv - C.xy, 0);
    
    // Calcul des déterminants
    float d1 = dot(cross(AB, AM), cross(AM, AC));
    float d2 = dot(cross(BA, BM), cross(BM, BC));
    float d3 = dot(cross(CA, CM), cross(CM, CB));
    
    // Dessin du cercle de rayon 1
    if (length(uv) < 1.0) {
    
        fragColor = vec4(0.0, 0.0, 1.0 ,1.0);
    }
    
    // Si tous les déterminants sont positifs, le point est dans le triangle
    if (d1 >= 0.0 && d2 >= 0.0 && d3 >= 0.0) {
    
        fragColor = vec4(1.0, 1.0, 1.0 ,1.0);
    }
}

Et un triangle pour la table 12 ! Un ! 👨‍🍳

Champ de Distance Signé

Les deux algorithmes (pour le disque et pour le triangle) sont appelées des SDF : Signed Distance Field ou Champ de Distance Signé.

Un champ est une propriété qui recouvre tout un espace ( ici 2D ). Cela signifie que notre propiété va s’appliquer sur chaque pixel de l’écran.

La deuxième partie est cette idée de distance. On recheche pour tout point de l’écran si l’on est à l’intérieur ou l’extérieur d’une surface donnée et surtout à quelle distance on se trouve d’elle.

Reprenons le disque qui est un peu plus simple. Son champ de distance est donné en tout point de l’écran par la relation suivante:

Distance du point observé par rapport au centre du disque - rayon du disque

Tout ce que l’on fera par la suite sera de calculer la SDF de nos forme.

Et pourquoi “signé”, parce que si l’on est à l’intérieur de la du disque, la distance devient négative.

Conclusion

C’est tout pour aujourd’hui!

La suite sera de se plonger dans le monde merveilleux de la 3D enfin de la projection de la 3D sur un écran 2D.

On y verra notamment le RayMarcher.

Bonne Fêtes à toutes et tous et merci de m’avoir lu. 🤗