La sortie de La Chute d'Oriath en août dernier fut l'occasion pour nous d'effectuer une refonte du rendu de l'eau dans Path of Exile. Le post d'annonce d'aujourd'hui cède la parole à Alex, notre programmeur graphique : il y raconte comment ces changements importants ont pu être réalisés.

Au fur et à mesure de la croissance de Path of Exile, nous avons investi une quantité grandissante de ressources dans son moteur de rendu. Cela n'empêchait pas certains joueurs de fonder leur opinion sur le moteur en se référant à de vieux assets que nous avions créé il y a des années, comme l'eau, par exemple (l'une des premières choses qu'on peut voir après avoir créé un nouveau personnage). En réalité, nous avons travaillé sans relâche pour garder ce moteur à jour, rapide et extensible, et nous voulons que nos joueurs s'en rendent compte. J'ai reçu un jour la tâche de changer l'apparence de l'eau dans le jeu — j'envisageais alors une multitude d'approche, même si je me doutais que certaines d'entres elles (voire la plupart) devraient être abandonnées par souci de performance ou d'esthétique.

Remplacer toute l'eau dans Path of Exile n'a pas été une chose simple puisque beaucoup d'assets du jeu s'en servaient. Elle devait donc être rétrocompatible à 100%. Faire une jolie flaque d'eau était loin d'être suffisant : elle devait s'adapter au relief et à l'environnement, quelles que soient les conditions. Évidemment, ma plus grande priorité était d'éviter de nuire aux performances du jeu ; les décors environnants ne devant pas être trop gourmands pour le processeur graphique.

Mon travail sur l'eau a principalement consisté en l'écriture d'un shader, c'est-à-dire un programme qui tourne sur le processeur graphique et produit une image de l'eau à l'écran. Dans des cas comme celui-ci, la façon de procéder est la suivante : démonter intégralement ce qui fonctionne pour ensuite le reconstruire petit à petit, à partir du début, dans l'optique d'en faire quelque chose de mieux au final. Je me suis mis à trifouiller notre ancien shader d'eau en générant des debug normals et en lui ajoutant un algorithme de détection des contours en screen space afin d'essayer de rendre de l'écume là où l'eau et des objets se croisent. (Au passage, l'interface des captures d'écran qui vont suivre est une version encore en chantier de celle qui est sortie avec la 3.0.0 et que vous connaissez maintenant)



La détection des contours marchait plutôt bien, mais je me doutais qu'elle risquait d'être trop gourmande : je n'ai pas eu d'autre choix que de m'en débarrasser. Pour l'étape suivante, il me fallait ajouter quelques vagues sur la surface, puis donner un peu de reflets et de couleur à l'eau :



Le rendu de la surface se fait via un algorithme de raytracing en screen space. En d'autres termes, l'eau est en réalité toute plate, mais elle obtient un effet de relief en 3D grâce à des techniques de shading semblables au parallax occlusion mapping. C'est à ce moment-là que je devais faire le tri entre ce qui fonctionnait bien et pouvait être gardé pour la suite du développement, et ce qui devait être jeté et recommencé de zéro. Ce qui est bizarre avec le rendu de l'eau, c'est que la couleur n'est pas si visible que ça : en fait, on remarque plus les trucs qui s'y reflètent et qui s'y réfractent. J'ai alors choisi de concentrer mon travail sur ça, en gardant tel quel tout ce qui touchait au raytracing, puis en refaisant tout le reste.

Pour me rapprocher le plus possible de reflets réalistes, j'ai conçu un algorithme de screen space qui reflétait littéralement tout ce qui se trouvait à l'écran. Voilà à quoi ressemble de "l'eau" (ou plutôt du mercure) quand on lui donne 100% de reflets :



Qu'on trouve ça joli ou non, c'est le genre de truc qu'on ne peut pas se permettre de garder parce qu'il ne justifie pas son coût au final.

Le plus difficile quand on essaye de rendre de l'eau, c'est d'avoir de bons algorithmes de génération d'ondulations et de bons algorithmes de rendu d'écume, tout simplement parce qu'ils demandent une certaine fibre artistique (dont je manque cruellement). Tout le reste relève des domaines de la physique, de l'optique et de la programmation — des domaines beaucoup plus carrés. Je me doutais bien que mes premiers tests sur de l'écume s'avèreraient rudes, mais ça ne m'a pas empêché de m'y essayer :



J'étais sur la bonne voie, mais je devais encore saisir toute l'authenticité de l'écume de mer. Par exemple, ma mousse était beaucoup trop régulière, alors qu'en réalité l'écume est agitée par des courants irréguliers et houleux. J'ai créé en parallèle une appli très simple qui m'a permis d'examiner attentivement le mouvement des particules d'eau dans une coupe transversale de vague en agitation.

Je me suis servi de tout ça dans mes shaders, j'ai un peu corrigé l'éclairage, et... mes vagues commençaient à ressembler à quelque chose :



Je me suis alors penché sur d'innombrables vidéos, j'ai réécrit des tonnes de lignes de code et discuté avec autant de surfers professionnels pour que cette écume soit la plus réaliste et la plus performante possible. J'avais déjà conçu un moteur physique pour les tissus ; le rendu de l'eau était désormais mon plus gros défi. Je n'arrivais pas à penser à quoi que ce soit d'autre. Ma salle de sport a une vue splendide sur une piscine ; mes potes n'arrêtaient pas de me chambrer en me disant que je devais arrêter d'y mater les filles. Pfff, ils comprenaient rien — ce qui me fascinait, c'était les vagues à la surface de l'eau, les caustiques et les effets de la biréfringence. Quand je voyais des nuages, je me demandais comment ils se reflèteraient sur l'eau. Je voyais une plante, et je n'arrêtais pas de me demander comment elle faisait pour diffuser la lumière à travers ses feuilles, un peu comme le fait l'océan.

La prochaine étape du développement servait à garantir le bon fonctionnement de cette technologie dans toutes les zones du jeu ; en plus, il fallait que les vagues longent le littoral de la manière la plus naturelle possible. C'est à ce moment-là qu'un trailer est sorti, montrant quelques extraits de cette nouvelle technologie — les joueurs étaient inquiets, et à juste titre, parce que la houle était bizarrement animée. Les zones les plus complexes visuellement parlant, comme le Récif du Roi des Embruns et son entremêlement de rivages, se sont avérées particulièrement nulles. Je me suis alors attelé à un nouveau projet en parallèle capable de générer des rivages plus plats grâce à une vague simulée.

Avec cet algorithme, nous avons pu lisser la forme des vagues de façon à les rendre aussi naturelles que nous le souhaitions. L'ajout d'environnements en HDR a également contribué à la perception qu'on pouvait se faire de l'eau dans son ensemble. En gros, tout cela nous a permis de faire des patterns qui simulent le scintillement caractéristique du soleil sur les vagues :



À partir de là, il ne nous restait qu'à optimiser le shader, puis à ajouter quelques effets par-ci par-là pour embellir le tout. Par exemple, les rayons du soleil qui se réfractent sur du sable créent des lueurs vives, alors que les rayons qui se reflètent dans des eaux profondes apportent une légère touche lumineuse sur la crête des vagues (que l'on appelle subsurface scattering). Nous avons réussi à rendre les plages et les littoraux plus intéressants en travaillant sur la manière dont l'écume se dissipe sur le sable. Tous ces changements ont fini par nous rapprocher de l'eau que nous connaissons aujourd'hui :



Le Rivage du crépuscule est le premier endroit dans lequel tous les joueurs débutent. L'eau est l'une des premières choses qu'ils remarquent. Quand j'ai mis au point ce nouveau système d'eau, je voulais avant tout qu'ils accrochent à Path of Exile dès ces premières secondes.
Posté par 
le
Grinding Gear Games
C'est vrai que le rendu de l'eau est très joli...

Très bon travail !!!
Article sympa et intéressant. ^^
Si vous souhaitez partager d'autres articles des développeurs du jeu, j'avoue que j'en serais très friand.

En plus, le résultat final est très réussi. Bravo ! ^^
très beau travail j'ai étais accroché des les première seconde... objectif accompli :)

Signaler

Compte à signaler :

Type de signalement

Infos supplémentaires