Shaders et textures procédurales

Une des particularités des gamejam, c’est de ne pas avoir assez de temps, et de resources… et les textures nécéssite les deux ! Pouvoir en générer de manière procédurale et automatique est une bonne solution. Voici comment elles sont intégré à VikingSurvivor, au travers de l’exemple de la buée.

Nécéssité du gameplay

La buée sortant de la bouche du personnage indique au joueur que la température est basse, et potentiellement dangereuse. Il fallait un système de particules simple permettant de la représenter.

Mais comment obtenir ces formes circulaire, alors que les textures sont carrés, avec une couleur non uniforme à l’intérieur ?

Crée une texture procédurale

L’idée est de faire générer par la carte graphique, une texture de manière aléatoire, et différente pour chaque particule !

Là encore, le bruit de perlin va nous aider ! Nous allons donc générer une simple image 2D avec du bruit.

Mais pour éviter d’avoir trop de “grain” dans la texture, nous allons tweaker la valeur “Frequency”. Ceci va permettre de “zoomer” dans la texture, et d’avoir peu e dégradé.

On pourra ensuite “colorier” l’image en multipliant chaque pixel par une couleur définie. Mais pour l’instant, notre texture est carré ! Et c’est dans le shader que nous allons devoir arrondir les angles.

Shader et mathématiques

Nous allons avoir besoin de plusieurs choses. Premièrement les UV : se sont les coordonnées de la textures que le shader va utiliser. A noter que plutôt que d’utiliser un couplé nommé x et y, on utilise u et v (d’où son nom). Mais c’est une simple question de nommage.

Affiché sous formes d’image, les coordonnées donnent cette image caractéristiques :

Puisque ce sont les coordonnées de la texture, pour l’arrondir, il “suffit” de modifier ces coordonnées pour obtenir un rond ! Et c’est la que les mathématiques interviennent. Il va falloir convertir chaque coordonnées UV (en valeur cartésienne), en valeur circulaire (dites polaire).

float2 toPolar(float2 cartesian) {
    float distance = length(cartesian);
    float angle = atan2(cartesian.y, cartesian.x);
    return float2(angle / UNITY_TWO_PI, distance);
}

Cette fonction existe dans un shader visuel sous godot.

Cependant, cette couleur rouge ne correspond à rien… Il faut donc la retirer. Pour celà, nous allons convertir le résultat de couleur (avec trois valeur rgb), en une seule valeur (le niveau de gris).

C’est mieux ! Mais on remarque que la valeur banche (la valeur 1) est au bord, alors que le noir (la valeur 0) est au centre… Ca n’ira pas, car si on multiplie se résultat avec le bruit de perlin, la multiplication de 0 donnera… 0 !! Notre image sera donc vide au centre, et visible sur les bord. Or nous souhaitons exactement l’inverse !

Pour inverser, il faut ajouter l’inverse de 1. Encore des math ? Une fonction existe pour ça ;) C’est “OneMinus”

On peut alors “mélanger” notre résultat avec notre bruit de perlin. Une simple multiplication suffit.

On peut alors mutliplier le résultat par une couleur si nécéssaire, et on attache chaque résultat à sa sortie :

• le résultat final à “aldebo” pour la couleur
• notre GreyScale au “ciseau alpha” (qui va servir au découpage des bord)
• et on ajouter une valeur “alpha_fitler” qu’on aurra juste à tweaker pour définir de “combien” on veut couper les bords

Et c’est tout ! Nous voilà désormais avec une belle texture procédurale, pouvant être utilisé comme particule pour nos plus beaux effets spéciaux !