{"id":51,"date":"2014-01-13T09:04:00","date_gmt":"2014-01-13T08:04:00","guid":{"rendered":"http:\/\/oneiricworlds.com\/en\/index.php\/2014\/01\/13\/waterfalls-and-sleeping-water\/"},"modified":"2016-03-02T19:40:17","modified_gmt":"2016-03-02T18:40:17","slug":"waterfalls-and-sleeping-water","status":"publish","type":"post","link":"https:\/\/oneiricworlds.com\/fr\/2014\/01\/waterfalls-and-sleeping-water\/","title":{"rendered":"Chute d&rsquo;eau et lacs"},"content":{"rendered":"<p>Salut!<\/p>\n<p>Aujourd&rsquo;hui, ce sera un article (presque) rapide sur le travail de la semaine: cr\u00e9er une apparence convenable pour les chutes d&rsquo;eau et les lacs (c&rsquo;est-\u00e0 dire <strong>pas<\/strong> l&rsquo;oc\u00e9an principal du jeu).<\/p>\n<div style=\"clear: both; text-align: center;\"><a style=\"margin-left: 1em; margin-right: 1em;\" href=\"http:\/\/1.bp.blogspot.com\/-lteLjUJ-4UQ\/UtOj95u0RWI\/AAAAAAAAHkI\/nE30l3MzaB0\/s1600\/20140109_155413.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/1.bp.blogspot.com\/-lteLjUJ-4UQ\/UtOj95u0RWI\/AAAAAAAAHkI\/nE30l3MzaB0\/s1600\/20140109_155413.png\" alt=\"\" width=\"400\" height=\"220\" border=\"0\" \/><\/a><\/div>\n<div style=\"text-align: center;\"><i>Le look final des chutes d&rsquo;eau<\/i><\/div>\n<p>&nbsp;<\/p>\n<p>En effet, je veux cr\u00e9er un monde avec des \u00eeles flottant\/suspendues dans les airs. Peut-\u00eatre l&rsquo;avez vous d\u00e9j\u00e0 remarqu\u00e9, mais il y a d\u00e9j\u00e0 de l&rsquo;eau dans le jeu. J&rsquo;ai d\u00e9j\u00e0 travaill\u00e9 sur l&rsquo;Oc\u00e9an principal, et \u00e7a n&rsquo;a pas \u00e9t\u00e9 facile de trouver un look correct. J&rsquo;ai finalement choisi d&rsquo;avoir une eau purement r\u00e9flective (pas de r\u00e9fraction). Le probl\u00e8me principal est que l&rsquo;affichage de cet oc\u00e9an est tr\u00e8s lourd en temps de calcul (\u00e0 cause du reflet, qui demande d&rsquo;afficher 2 fois la sc\u00e8ne en r\u00e9alit\u00e9).<\/p>\n<p>Si j&rsquo;ai envie de rajouter d&rsquo;autres plans d&rsquo;eau (par exemple un lac sur une \u00eele) ou des chutes d&rsquo;eau, je ne peux pas utiliser la m\u00eame approche, car \u00e7a ralentirait beaucoup trop le jeu. En plus, calculer la r\u00e9flexion de l&rsquo;environnement pour un plan est \u00ab\u00a0assez\u00a0\u00bb facile, mais pour des formes complexes (comme une chute d&rsquo;eau), les calculs sont autrement plus ardus, et l&rsquo;architecture des cartes graphiques n&rsquo;est pas (encore) tr\u00e8s adapt\u00e9e pour ce genre d&rsquo;approche. Donc je dois trouver une alternative si je ne veux pas passer des jours \u00e0 essayer de cr\u00e9er un mat\u00e9riau\/shader incroyablement complexe que personne ne remarquera de toutes fa\u00e7ons.<\/p>\n<p>Finalement, j&rsquo;ai choisi une combinaison de plusieurs techniques assez utilis\u00e9es dans les jeux vid\u00e9os.<\/p>\n<h3>I &#8211; Texture environmentale (environment\/cube map)<\/h3>\n<p>Une texture environnementale est une sorte de texture \u00ab\u00a0sph\u00e9rique\u00a0\u00bb (en r\u00e9alit\u00e9, elle est souvent repr\u00e9sent\u00e9e sur les faces d&rsquo;un cube) qui est appliqu\u00e9e sur un maillage en fonction de l&rsquo;orientation de la normale de chaque face. L&rsquo;id\u00e9e est de simuler une r\u00e9flexion du monde sur l&rsquo;objet.<\/p>\n<div style=\"clear: both; text-align: center;\"><a style=\"margin-left: 1em; margin-right: 1em;\" href=\"http:\/\/2.bp.blogspot.com\/-Iyblp9g5R-E\/UtOdHYzshaI\/AAAAAAAAHjU\/j-gTihPvsfk\/s1600\/20140112_material1.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/2.bp.blogspot.com\/-Iyblp9g5R-E\/UtOdHYzshaI\/AAAAAAAAHjU\/j-gTihPvsfk\/s1600\/20140112_material1.jpg\" alt=\"\" width=\"400\" height=\"251\" border=\"0\" \/><\/a><\/div>\n<div style=\"text-align: center;\"><i>Une texture environnementale simule une r\u00e9flexion parfaite de l&rsquo;environnement. Ca marche bien sur une sph\u00e8re, mais ce n&rsquo;est pas toujours aussi convaincant sur d&rsquo;autres primitives.<\/i><\/div>\n<div style=\"text-align: center;\"><\/div>\n<p>Techniquement, il est possible de calculer cette texture environnementale en temps r\u00e9el pour obtenir une r\u00e9flexion \u00ab\u00a0r\u00e9elle\u00a0\u00bb de l&rsquo;environnement. Mais en pratique, c&rsquo;est tr\u00e8s lourd en temps de calcul (il faut faire 6 rendus de la sc\u00e8ne pour cr\u00e9er la texture en question). Et m\u00eame dans ce cas l\u00e0, le mapping (la mani\u00e8re de plaquer la texture sur le maillage) est toujours approximatif, ce qui ne trompera pas un \u0153il averti.<\/p>\n<p>C&rsquo;est pourquoi j&rsquo;ai choisi d&rsquo;utiliser une texture environnementale pr\u00e9-calcul\u00e9e: celle du ciel (que j&rsquo;ai d\u00e9j\u00e0 d\u00e9crite dans un <a href=\"https:\/\/oneiricworlds.com\/fr\/index.php\/2013\/06\/30\/skybox-and-art-improvement\/\">post pr\u00e9c\u00e9dent<\/a>).<\/p>\n<h3>II &#8211; Des \u00ab\u00a0normal maps\u00a0\u00bb mouvantes pour les vagues<\/h3>\n<p>Ensuite, afin de casser l&rsquo;aspect lisse et plat de la r\u00e9flexion parfaite, je rajoute 2 \u00ab\u00a0normal maps\u00a0\u00bb qui bougent \u00e0 2 vitesses diff\u00e9rentes. Cela permet de cr\u00e9er un effet de vagues assez convaincant (car les \u00ab\u00a0normal maps\u00a0\u00bb, comme leur nom l&rsquo;indique, viennent alt\u00e9rer la normale de chaque surface et donc la r\u00e9flexion calcul\u00e9e). C&rsquo;est la m\u00eame technique que j&rsquo;utilise sur l&rsquo;oc\u00e9an principal.<\/p>\n<div style=\"clear: both; text-align: center;\"><a style=\"margin-left: 1em; margin-right: 1em;\" href=\"http:\/\/4.bp.blogspot.com\/-Hy4N9cwM5EY\/UtOdHZEipzI\/AAAAAAAAHjQ\/NCwkRDt2TO0\/s1600\/20140112_material2.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/4.bp.blogspot.com\/-Hy4N9cwM5EY\/UtOdHZEipzI\/AAAAAAAAHjQ\/NCwkRDt2TO0\/s1600\/20140112_material2.jpg\" alt=\"\" width=\"400\" height=\"251\" border=\"0\" \/><\/a><\/div>\n<div style=\"text-align: center;\"><i>La texture environnementale avec des normal maps pour simuler les vagues<\/i><\/div>\n<div style=\"text-align: center;\"><\/div>\n<div style=\"text-align: center;\"><\/div>\n<h3>III &#8211; Texture d&rsquo;\u00e9cume<\/h3>\n<p>Celle-ci est une texture tout ce qu&rsquo;il y a de plus classique que je rajoute par dessus les vagues. Pour garder une certaine coh\u00e9rence graphique avec l&rsquo;oc\u00e9an principal, j&rsquo;utilise un blanc pur pour l&rsquo;\u00e9cume, et je joue avec le canal de transparence pour moduler l&rsquo;impact visuel.<\/p>\n<div style=\"clear: both; text-align: center;\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/1.bp.blogspot.com\/-Cr3Cbfc9tfc\/UtOdHuc4DdI\/AAAAAAAAHjM\/1i6jj_TYvjI\/s1600\/20140112_material3.jpg\" alt=\"\" width=\"400\" height=\"251\" border=\"0\" \/><\/div>\n<div style=\"text-align: center;\"><i>L&rsquo;\u00e9cume au dessus de l&rsquo;eau.<\/i><\/div>\n<div style=\"text-align: center;\"><\/div>\n<div style=\"text-align: center;\"><\/div>\n<h3>IV &#8211; Distortion de l&rsquo;\u00e9cume<\/h3>\n<p>Comme je ne veux pas que l&rsquo;\u00e9cume reste statique, j&rsquo;y ajoute une distorsion en alt\u00e9rant les coordonn\u00e9es de texture via une texture de bruit (en r\u00e9alit\u00e9 c&rsquo;est la \u00ab\u00a0normal map\u00a0\u00bb que j&rsquo;utilise pour g\u00e9n\u00e9rer les vagues, mais avec une \u00e9chelle et une vitesse diff\u00e9rente).<\/p>\n<div style=\"clear: both; text-align: center;\"><a style=\"margin-left: 1em; margin-right: 1em;\" href=\"http:\/\/2.bp.blogspot.com\/-awHPh8o2BFU\/UtOdH1545KI\/AAAAAAAAHjo\/Wl8NeDUYsNs\/s1600\/20140112_material4.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/2.bp.blogspot.com\/-awHPh8o2BFU\/UtOdH1545KI\/AAAAAAAAHjo\/Wl8NeDUYsNs\/s1600\/20140112_material4.jpg\" alt=\"\" width=\"400\" height=\"251\" border=\"0\" \/><\/a><\/div>\n<div style=\"text-align: center;\"><i>De l&rsquo;\u00e9cume qui bouge!<\/i><\/div>\n<p>&nbsp;<\/p>\n<h3 style=\"clear: both; text-align: left;\">V &#8211; Gestion du cycle jour\/nuit<\/h3>\n<div style=\"clear: both; text-align: left;\"><\/div>\n<div style=\"clear: both; text-align: left;\">La derni\u00e8re \u00e9tape est de prendre en compte le cycle jour\/nuit d\u00e9j\u00e0 pr\u00e9sent dans le jeu. En effet, le ciel\/l&rsquo;environnement changent en fonction du temps de jeu, et je ne peux pas laisser un ciel de nuit qui se r\u00e9fl\u00e9chit dans l&rsquo;eau alors qu&rsquo;on est au beau milieu de la journ\u00e9e par ailleurs, \u00e7a casserait totalement l&rsquo;immersion du joueur. Je dois donc faire un \u00ab\u00a0mix\u00a0\u00bb des diff\u00e9rentes textures d&rsquo;environnement (jour\/nuit) en fonction de l&rsquo;heure (virtuelle) du jeu.<\/div>\n<p>&nbsp;<\/p>\n<div style=\"clear: both; text-align: center;\"><a style=\"margin-left: 1em; margin-right: 1em;\" href=\"http:\/\/2.bp.blogspot.com\/-sQFl7Oc-T9c\/UtOdId9AT0I\/AAAAAAAAHjk\/59Xrhc28CJA\/s1600\/20140112_material6.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/2.bp.blogspot.com\/-sQFl7Oc-T9c\/UtOdId9AT0I\/AAAAAAAAHjk\/59Xrhc28CJA\/s1600\/20140112_material6.jpg\" alt=\"\" width=\"400\" height=\"251\" border=\"0\" \/><\/a><\/div>\n<div style=\"text-align: center;\"><i>R\u00e9flexion en plein jour<br \/>\n<\/i><\/div>\n<p>&nbsp;<\/p>\n<div style=\"clear: both; text-align: center;\"><a style=\"margin-left: 1em; margin-right: 1em;\" href=\"http:\/\/3.bp.blogspot.com\/-TbP4GZ3piVc\/UtOdI1FzI6I\/AAAAAAAAHjw\/tz56uBzPtGg\/s1600\/20140112_material7.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/3.bp.blogspot.com\/-TbP4GZ3piVc\/UtOdI1FzI6I\/AAAAAAAAHjw\/tz56uBzPtGg\/s1600\/20140112_material7.jpg\" alt=\"\" width=\"400\" height=\"251\" border=\"0\" \/><\/a><\/div>\n<div style=\"text-align: center;\"><i>R\u00e9flexion au cr\u00e9puscule<br \/>\n<\/i><\/div>\n<div style=\"text-align: center;\"><\/div>\n<div style=\"text-align: center;\"><\/div>\n<h3>VI &#8211; R\u00e9glages et particules<\/h3>\n<p>La dernier point difficile est le param\u00e9trage de ce mat\u00e9riau de \u00ab\u00a0fausse eau\u00a0\u00bb (r\u00e9flexions simul\u00e9es). Il faut que son apparence soit le plus proche possible de l&rsquo;oc\u00e9an principal. En toute rigueur, ceci est \u00e9videmment impossible car les 2 m\u00e9thodes d&rsquo;affichage diff\u00e8rent totalement, mais je dois r\u00e9duire au maximum l&rsquo;\u00e9cart visuel.<\/p>\n<div style=\"clear: both; text-align: center;\"><a style=\"margin-left: 1em; margin-right: 1em;\" href=\"http:\/\/2.bp.blogspot.com\/-BEkyWF3Y_vk\/UtOmA8cD03I\/AAAAAAAAHkU\/XnPqCoFy5CE\/s1600\/20140113_092514.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/2.bp.blogspot.com\/-BEkyWF3Y_vk\/UtOmA8cD03I\/AAAAAAAAHkU\/XnPqCoFy5CE\/s1600\/20140113_092514.png\" alt=\"\" width=\"400\" height=\"262\" border=\"0\" \/><\/a><\/div>\n<div style=\"text-align: center;\"><i>L&rsquo;oc\u00e9an principal avec de vraies r\u00e9flexions.<\/i><\/div>\n<div style=\"text-align: center;\"><\/div>\n<div style=\"clear: both; text-align: center;\"><a style=\"margin-left: 1em; margin-right: 1em;\" href=\"http:\/\/3.bp.blogspot.com\/-B13CiEWPuRk\/UtOmBlE9j1I\/AAAAAAAAHkc\/MCDQ0rytIog\/s1600\/20140113_092534.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/3.bp.blogspot.com\/-B13CiEWPuRk\/UtOmBlE9j1I\/AAAAAAAAHkc\/MCDQ0rytIog\/s1600\/20140113_092534.png\" alt=\"\" width=\"400\" height=\"262\" border=\"0\" \/><\/a><\/div>\n<div style=\"text-align: center;\"><i>L&rsquo;eau d&rsquo;un lac avec des r\u00e9flexions simul\u00e9es.<\/i><\/div>\n<div style=\"text-align: center;\"><\/div>\n<p>Comme vous pouvez le voir sur les images ci-dessus, pour les lacs et les \u00e9tendues d&rsquo;eau, la diff\u00e9rence avec l&rsquo;oc\u00e9an principal peut \u00eatre assez flagrante en fonction de l&rsquo;angle de la cam\u00e9ra. Mais pour le moment, je ne peux pas faire mieux.<\/p>\n<p>Peut-\u00eatre que plus tard je modifierai le shader de l&rsquo;oc\u00e9an principal pour le rendre structurellement plus proche de celui des lacs, en esp\u00e9rant que \u00e7a me permette de r\u00e9duire encore l&rsquo;\u00e9cart visuel de ces 2 mat\u00e9riaux (sans perdre la r\u00e9flexion sur l&rsquo;oc\u00e9an principal \u00e9videmment). Ou peut-\u00eatre que je trouverai un autre moyen d&rsquo;avoir des r\u00e9flexions temps r\u00e9el sur les lacs sans mettre \u00e0 genoux la carte graphique (j&rsquo;ai d\u00e9j\u00e0 essay\u00e9, mais sans succ\u00e8s pour l&rsquo;instant).<\/p>\n<p>Pour les chutes d&rsquo;eau en revanche, l&rsquo;effet est assez satisfaisant. Bon, j&rsquo;imagine que c&rsquo;est d\u00fb au fait que toutes les chutes d&rsquo;eau ont le m\u00eame mat\u00e9riau. Au passage, j&rsquo;ai du ajouter des particules pour cr\u00e9er les \u00e9claboussures.<\/p>\n<div style=\"clear: both; text-align: center;\"><a style=\"margin-left: 1em; margin-right: 1em;\" href=\"http:\/\/3.bp.blogspot.com\/-HmDP8zm1r4w\/UtOmcc_3OyI\/AAAAAAAAHkk\/LieUKP1WU_Y\/s1600\/20140113_092556.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/3.bp.blogspot.com\/-HmDP8zm1r4w\/UtOmcc_3OyI\/AAAAAAAAHkk\/LieUKP1WU_Y\/s1600\/20140113_092556.png\" alt=\"\" width=\"400\" height=\"262\" border=\"0\" \/><\/a><\/div>\n<div style=\"text-align: center;\"><i>Une chute d&rsquo;eau avec des \u00e9claboussures<\/i><\/div>\n<div style=\"text-align: center;\"><\/div>\n<p>Et voil\u00e0 pour aujourd&rsquo;hui! J&rsquo;esp\u00e8re que ce post assez d\u00e9taill\u00e9 vous aura int\u00e9ress\u00e9.<\/p>\n<p>Et, je n&rsquo;en parle pas ici, mais j&rsquo;ai corrig\u00e9 beaaaaaucoup de bugs depuis la derni\u00e8re d\u00e9mo. Merci \u00e0 tous les testeurs qui m&rsquo;ont fait des retours!<\/p>\n<p>A+<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Salut! Aujourd&rsquo;hui, ce sera un article (presque) rapide sur le travail de la semaine: cr\u00e9er une apparence convenable pour les chutes d&rsquo;eau et les lacs (c&rsquo;est-\u00e0 dire pas l&rsquo;oc\u00e9an principal du jeu). Le look final des chutes d&rsquo;eau &nbsp; En effet, je veux cr\u00e9er un monde avec des \u00eeles flottant\/suspendues dans les airs. Peut-\u00eatre l&rsquo;avez [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":222,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-51","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/oneiricworlds.com\/fr\/wp-json\/wp\/v2\/posts\/51","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oneiricworlds.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/oneiricworlds.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/oneiricworlds.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/oneiricworlds.com\/fr\/wp-json\/wp\/v2\/comments?post=51"}],"version-history":[{"count":5,"href":"https:\/\/oneiricworlds.com\/fr\/wp-json\/wp\/v2\/posts\/51\/revisions"}],"predecessor-version":[{"id":393,"href":"https:\/\/oneiricworlds.com\/fr\/wp-json\/wp\/v2\/posts\/51\/revisions\/393"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oneiricworlds.com\/fr\/wp-json\/wp\/v2\/media\/222"}],"wp:attachment":[{"href":"https:\/\/oneiricworlds.com\/fr\/wp-json\/wp\/v2\/media?parent=51"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oneiricworlds.com\/fr\/wp-json\/wp\/v2\/categories?post=51"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oneiricworlds.com\/fr\/wp-json\/wp\/v2\/tags?post=51"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}