![\"20190114_finalMixing\"](\"http:\/\/oneiricworlds.com\/en\/wp-content\/uploads\/2019\/01\/20190114_finalMixing.gif\")
<\/a><\/p>\nLe rendu final de l’\u00e9cume dans le jeu.<\/em><\/p>\n J’utilise Unity comme moteur de jeu, Blender pour la mod\u00e9lisation et le texturing, et Krita pour peindre les textures.<\/p>\n Mon jeu se d\u00e9roule dans un monde recouvert d’oc\u00e9an; avoir de l’\u00e9cume sur les rivages para\u00eet donc assez indispensable. Mon plus gros soucis est que mon jeu est encore en cours de modification et je peux rajouter ou modifier des \u00eeles assez r\u00e9guli\u00e8rement. Donc, il me faut trouver une m\u00e9thode simple et efficace, pour ne pas avoir \u00e0 tout refaire \u00e0 partir de z\u00e9ro \u00e0 chaque it\u00e9ration.<\/p>\n <\/p>\n Il y a quelques temps, des amis m’ont conseill\u00e9 la vid\u00e9o d’explication des effets graphiques de Rime<\/a>, de Simon Tr\u00fcmpler. Il y a des techniques excellentes dans cette pr\u00e9sentation. L’\u00e9cume en particulier et tr\u00e8s bien con\u00e7ue et le rendu est vraiment impressionnant (pour qui cherche un visuel stylis\u00e9 \u00e9videment).<\/p>\n Le seul probl\u00e8me que je vois dans cette m\u00e9thode est le temps n\u00e9cessaire pour cr\u00e9er les uv maps \u00ab\u00a0seamless\u00a0\u00bb (=r\u00e9p\u00e9tables=sans bords=cycliques) pour les maillages d’\u00e9cume. En effet, dans Blender, si l’on veut un maillage circulaire avec un texturing sans \u00ab\u00a0cassure\u00a0\u00bb, il faut parfaitement aligner les bords de l’uv-map. C’est tout \u00e0 fait acceptable pour un seul ou quelques objets, mais j’ai \u00e9norm\u00e9ment d’\u00eeles et de rochers dans mon jeu, trop pour pouvoir utiliser cette m\u00e9thode. En plus de \u00e7a, avec un uv mapping cyclique, il est difficile d’ajuster l’\u00e9chelle des textures apr\u00e8s coup, car on est limit\u00e9 \u00e0 des multiples entiers. Je dois donc trouver une autre approche.<\/p>\n Processus de mise \u00e0 l’\u00e9chelle de l’uv map pour supprimer la cassure du texturing. R\u00e9ussir un alignement parfait peut \u00eatre un peu long si l’on a beaucoup d’objets \u00e0 traiter..<\/em><\/p>\n Id\u00e9alement, mon objectif est:<\/p>\n Comme d’habitude, mon approche est loin d’\u00eatre parfaite et consiste en un compromis entre ce qui me tient \u00e0 c\u0153ur et ce qui est techniquement atteignable.<\/p>\n Ma 1\u00e8re id\u00e9e est d’utiliser des coordonn\u00e9es de texturing automatiques, comme la position des sommets dans le rep\u00e8re monde. \u00c7a marche d\u00e9j\u00e0 plut\u00f4t bien pour mon rendu de terrain (j’esp\u00e8re que je trouverai le temps d’en parler plus longuement un de ces jours), mais les coordonn\u00e9es \u00ab\u00a0monde\u00a0\u00bb ne portent aucune information sur une direction privil\u00e9gi\u00e9e. Cela signifie que je ne peux pas utiliser une texture d’\u00e9cume \u00ab\u00a0classique\u00a0\u00bb avec des lignes qui suivent le rivage (comme ci-dessous). L’effet pourrait effectivement marcher sur un c\u00f4t\u00e9 de l’\u00eele mais pas de tous les c\u00f4t\u00e9s en m\u00eame temps.<\/p>\n Dans cette texture, il y a une direction principale forte (horizontale). L’image du rendu dans le jeu n’est pas tr\u00e8s convaincante.<\/em><\/p>\n Si j’utilise du mapping automatique, il faut une texture relativement neutre\/uniforme en terme de directions, par exemple:<\/p>\n Une texture d’\u00e9cume relativement simple sans direction privil\u00e9gi\u00e9e. Le rendu dans le jeu est un peu mieux……<\/em><\/p>\n OK, c’est mieux, mais encore un peu d\u00e9cevant. C’est le prix \u00e0 payer avec une approche automatique; il va donc falloir ajouter autre chose.<\/p>\n Si je veux des vagues le long du rivage, ou de l’\u00e9cume qui se rapproche (ou s’\u00e9loigne) du rivage, il est n\u00e9cessaire d’avoir une information suppl\u00e9mentaire sur la \u00ab\u00a0direction\u00a0\u00bb principale, et cette information doit \u00eatre contenue dans le maillage (le mesh). J’en ai \u00e9galement besoin pour faire dispara\u00eetre les vagues au fur et \u00e0 mesure qu’elle s’\u00e9loignent. Cette direction change pour chaque triangle affich\u00e9, il faut donc la stocker au niveau des sommets.<\/p>\n On dirait que je n’ai pas le choix, je vais quand m\u00eame devoir faire un uv mapping basique pour stocker cette \u00ab\u00a0direction\u00a0\u00bb du rivage. Mais je n’ai besoin que d’une seule coordonn\u00e9e de texture; et je choisis arbitrairement v<\/strong> (voir image ci-dessous). L’id\u00e9e est d’avoir v<\/strong>=0 sur la ligne d’ar\u00eate ext\u00e9rieure (du c\u00f4t\u00e9 de l’oc\u00e9an), v<\/strong>=1 sur la ligne centrale (du c\u00f4t\u00e9 du rivage) et v<\/strong>=2 \u00e0 l’int\u00e9rieur de l’\u00eele.<\/p>\n Le mapping que j’ai choisi: ici, je ne me pr\u00e9occupe pas du probl\u00e8me de \u00ab\u00a0cout\u00fbre\u00a0\u00bb (en bas du mesh). Seul le mapping sur v<\/strong> m’importe.<\/em><\/p>\n Gr\u00e2ce \u00e0 cette coordonn\u00e9e, je vais pouvoir construire le mouvement des vagues. L’approche la plus simple pour cr\u00e9er ces vagues et d’utilise un sinus<\/strong> de v<\/strong>. Pour le faire bouger, j’y ajoute un offset d\u00e9pendant du temps<\/strong> et de la vitesse<\/strong> des vagues.<\/p>\n sinus(fr\u00e9quence*v + vitesse*temps)<\/strong> ; clipp\u00e9<\/strong> \u00e0 0<\/em><\/p>\n Gardons \u00e0 l’esprit que pour avoir des contours nets, je \u00ab\u00a0clippe\u00a0\u00bb (cache) chaque \u00ab\u00a0fragment\u00a0\u00bb (pixel) en dessous d’un certain seuil.<\/p>\n Changer le seuil de clipping<\/strong> g\u00e9n\u00e8re des vagues plus ou moins grosses<\/em><\/p>\n Changer la\u00a0fr\u00e9quence<\/strong> g\u00e9n\u00e8re plus ou moins de vagues<\/em><\/p>\n Si je veux que l’\u00e9cume disparaisse progressivement dans la mer, il me suffit d’ajouter la coordonn\u00e9e v au sinus, comme ceci:<\/p>\n sinus(fr\u00e9quence*v + vitesse*temps)+v<\/strong> ; clipp\u00e9<\/strong> au bon seuil s<\/strong>. Les vagues deviennent de plus en plus fines au fur et \u00e0 mesure qu’elles avancent dans la mer<\/em><\/p>\n Maintenant, on peut s’amuser \u00e0 rajouter du bruit sur ce shader de base, pour le rendre un peu plus \u00ab\u00a0naturel\u00a0\u00bb. Comme base de bruit, j’utilise une simple texture r\u00e9p\u00e9table faite dans GIMP gr\u00e2ce au filtre \u00ab\u00a0solid noise\u00a0\u00bb:<\/p>\n Bruit r\u00e9p\u00e9table fait avec GIMP.<\/em><\/p>\n A partir de \u00e7a, on peut alt\u00e9rer la vitesse<\/strong>,\u00a0la fr\u00e9quence<\/strong>\u00a0ou tout autre param\u00e8tre du sinus. Bruiter la fr\u00e9quence est particuli\u00e8rement int\u00e9ressant puisque \u00e7a permet de rajouter localement plus ou moins de vagues, comme ceci:<\/p>\n Ajoutons un bruit (en coordonn\u00e9es monde) \u00e0 la fr\u00e9quence: sinus((fr\u00e9quence+bruit(xz))*v + vitesse*temps)+v;<\/strong>\u00a0o\u00f9\u00a0xz<\/strong> sont les coordonn\u00e9es monde horizontales. Certaines zones se retrouvent ainsi avec plus de vagues que d’autres.<\/em><\/p>\n Ces vagues proc\u00e9durales ont l’air d’\u00eatre une bonne base, mais je trouve qu’il manque quelques \u00ab\u00a0connections\u00a0\u00bb entre les diff\u00e9rentes lignes, et, si je veux les rajouter, je dois exploiter les coordonn\u00e9es \u00ab\u00a0monde\u00a0\u00bb. Je pourrai aussi utiliser un bruit pour les g\u00e9n\u00e9rer, mais j’ai envie d’essayer une approche un peu plus \u00ab\u00a0contr\u00f4l\u00e9e\u00a0\u00bb en y superposant une texture d’\u00e9cume peinte \u00e0 la main.<\/p>\n M\u00e9lange des vagues proc\u00e9durales (\u00e0 base de sinus) et de texture peinte \u00e0 la main.<\/em><\/p>\n Mais si j’utilise une texture binaire, je n’ai aucun contr\u00f4le sur son att\u00e9nuation progressive. Je vais donc utiliser des textures de \u00ab\u00a0transformation en distance\u00a0\u00bb (\u00ab\u00a0distance transform\u00a0\u00bb en anglais).<\/p>\n Une image de transform\u00e9e en distance est habituellement cr\u00e9\u00e9e \u00e0 partir d’un motif noir et blanc. Chaque pixel de l’image \u00ab\u00a0distance transform\u00a0\u00bb repr\u00e9sente la distance \u00e0 un pixel blanc dans le motif original, comme ceci:<\/p>\n Bon, en fait, j’utilise une transform\u00e9e en distance invers\u00e9e ici, car c’est plus pratique pour l’\u00e9tape de clipping, mais vous saisissez l’id\u00e9e. Et oui, j’ai utilis\u00e9 un motif diff\u00e9rent de celui du d\u00e9but de cet article.<\/em><\/p>\n Les images de transform\u00e9e en distance sont juste une mani\u00e8re de voir les donn\u00e9es. On peut aussi les interpr\u00e9ter comme des \u00ab\u00a0cartes de hauteur\u00a0\u00bb (m\u00eame si la signification est un peu diff\u00e9rente, mais \u00e7a aide \u00e0 saisir le concept). L’id\u00e9e de base est d’avoir une image qui incorpore une forme d’ \u00ab\u00a0\u00e9volution\u00a0\u00bb \/ \u00ab\u00a0animation\u00a0\u00bb du motif initial.<\/p>\n Les images de transform\u00e9e en distance sont g\u00e9n\u00e9ralement cr\u00e9\u00e9e au travers de filtres, mais g\u00e9n\u00e9ralement ces filtres ne g\u00e8rent pas tr\u00e8s bien (voire pas du tout) les images r\u00e9p\u00e9tables. Une approche pour cr\u00e9er ce genre d’images consiste \u00e0 les peindre directement. Bien s\u00fbr elles sont rarement exactes math\u00e9matiquement dans ce cas l\u00e0, mais en contrepartie, on peut cr\u00e9er des animations plus vari\u00e9es\/originales. Une m\u00e9thode que j’ai fini par adopter dans Krita (le logiciel de peinture num\u00e9rique que j’utilise) est la suivante:<\/p>\n Voil\u00e0 ce que \u00e7a donne en cours d’utilisation:<\/p>\n Peinture directe d’une image de transform\u00e9e en distance. Le motif en croix au niveau de l’intersection est typique d’une image transform\u00e9e en distance.<\/em><\/p>\n <\/p>\n Bien s\u00fbr, ceci est une mani\u00e8re assez \u00ab\u00a0math\u00e9matique\u00a0\u00bb d’aborder la chose. On peut \u00e9videmment utiliser une brosse douce par d\u00e9faut et obtenir quelque chose de tout \u00e0 fait correct (et s\u00fbrement plus naturel), mais il faut toujours garder \u00e0 l’esprit que l’on \u00ab\u00a0peint l’animation\u00a0\u00bb (je ne pensais pas qu’on pouvait dire \u00e7a…)<\/p>\n Maintenant, j’ai un peu plus de contr\u00f4le sur ma texture faite \u00e0 la main:<\/p>\n tex(xz)<\/strong>; clipp\u00e9<\/strong> \u00e0 un certain seuil s<\/strong>; Maintenant, je peux choisir la largeur des vagues en changeant le seuil de clipping.<\/em><\/p>\n De plus, j’ai utilis\u00e9 quelques trucs pour rendre le visuel un peu plus int\u00e9ressant:<\/p>\nI – Probl\u00e8me<\/h3>\n
<\/a><\/p>\nII – Objectif<\/h3>\n
\n
<\/a><\/p>\nIII – Texture de base et coordonn\u00e9es dans le rep\u00e8re monde<\/h3>\n
<\/a> <\/a><\/div>\n<\/a> <\/a><\/div>\nIV – Vagues proc\u00e9durales sur la coordonn\u00e9e v<\/h3>\n
<\/a><\/p>\n<\/a> <\/a><\/div>\n<\/a><\/p>\n<\/a><\/p>\n<\/a> <\/a><\/div>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\nV – Texture \u00ab\u00a0Distance transform\u00a0\u00bb<\/h3>\n
<\/a><\/p>\n\n
<\/a><\/p>\nVI – M\u00e9lange des textures et r\u00e9glages<\/h3>\n
<\/a><\/p>\n\n