{"id":39053,"date":"2019-10-31T22:27:36","date_gmt":"2019-10-31T19:27:36","guid":{"rendered":"https:\/\/prohoster.info\/blog\/kak-osveshhenie-vliyaet-na-gejmdizajn-i-igrovoj-opyt\/"},"modified":"2019-10-31T22:27:36","modified_gmt":"2019-10-31T19:27:36","slug":"kak-osveshhenie-vliyaet-na-gejmdizajn-i-igrovoj-opyt","status":"publish","type":"post","link":"https:\/\/prohoster.info\/fr\/blog\/news\/kak-osveshhenie-vliyaet-na-gejmdizajn-i-igrovoj-opyt","title":{"rendered":"Comment l'\u00e9clairage influence le game design et l'exp\u00e9rience de jeu","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

\"Comment
\n
\nEn attendant la PS5 et le Project Scarlett, qui prendront en charge le ray tracing, je me suis pench\u00e9 sur l'\u00e9clairage dans les jeux. J'ai trouv\u00e9 un article o\u00f9 l'auteur explique ce qu'est la lumi\u00e8re, comment elle influence le design, modifie le gameplay, l'esth\u00e9tique et l'exp\u00e9rience. Tout est accompagn\u00e9 d'exemples et de captures d'\u00e9cran. Lors d'une partie, on ne fait pas toujours attention \u00e0 cela.
\n<\/a><\/noindex><\/p>\n

Introduction<\/h2>\n

\nL'\u00e9clairage est n\u00e9cessaire non seulement pour que le joueur puisse voir la sc\u00e8ne (bien que cela soit tr\u00e8s important). La lumi\u00e8re influence les \u00e9motions. De nombreuses techniques d'\u00e9clairage utilis\u00e9es au th\u00e9\u00e2tre, au cin\u00e9ma et dans l'architecture servent \u00e0 renforcer la composante \u00e9motionnelle. Pourquoi ne pas emprunter ces principes aux concepteurs de jeux ? Le lien entre l'image et la r\u00e9ponse \u00e9motionnelle offre un autre puissant outil qui aide \u00e0 travailler sur les personnages, la narration, le son, les m\u00e9caniques de jeu, etc. De plus, l'interaction de la lumi\u00e8re avec les surfaces permet d'influer sur la luminosit\u00e9, la couleur, le contraste, les ombres et d'autres effets. Tout cela constitue une base que chaque designer doit ma\u00eetriser.<\/p>\n

L'objectif de ce document est de d\u00e9terminer comment le design de l'\u00e9clairage influence l'esth\u00e9tique du jeu et l'exp\u00e9rience utilisateur. Nous examinerons la nature de la lumi\u00e8re et comment elle est utilis\u00e9e dans d'autres domaines artistiques pour analyser son r\u00f4le dans les jeux vid\u00e9o.<\/p>\n

\"Comment
\n\u00abLe Lac des cygnes\u00bb, Alexander Ekman<\/i><\/p>\n

I \u2014 Nature de la lumi\u00e8re<\/h2>\n

\n\u00abEspace, lumi\u00e8re et ordre. Ce sont les choses dont les gens ont besoin tout autant qu'ils ont besoin d'un morceau de pain ou d'un abri\u00bb, \u2014 Le Corbusier.<\/p>\n

La lumi\u00e8re naturelle nous guide et nous accompagne depuis notre naissance. Elle est essentielle, elle \u00e9tablit notre rythme naturel. La lumi\u00e8re r\u00e9gule les processus de notre organisme et influence notre horloge biologique. Analyserons ce qu'est le flux lumineux, l'intensit\u00e9 de la lumi\u00e8re, la couleur et les points focaux. Ainsi, nous comprendrons de quoi se compose la lumi\u00e8re et comment elle se comporte.<\/p>\n

1 \u2014 Ce que l'\u0153il humain voit<\/h3>\n

\nLa lumi\u00e8re est une partie du spectre \u00e9lectromagn\u00e9tique, per\u00e7ue par l'\u0153il. Cette partie a des longueurs d'onde dans la plage de 380 \u00e0 780 nm. Pendant la journ\u00e9e, nous distinguons les couleurs gr\u00e2ce aux c\u00f4nes, tandis que la nuit, l'\u0153il utilise les b\u00e2tonnets et nous ne voyons que des nuances de gris.<\/p>\n

Les principales propri\u00e9t\u00e9s de la lumi\u00e8re visible sont la direction, l'intensit\u00e9, la fr\u00e9quence et la polarisation. Sa vitesse dans le vide est de 300 000 000 m\/s, et c'est l'une des constantes physiques fondamentales.<\/p>\n

\"Comment
\nLe spectre \u00e9lectromagn\u00e9tique visible<\/i><\/p>\n

2 \u2014 Direction de propagation<\/h3>\n

\nDans le vide, il n'y a pas de mati\u00e8re, et la lumi\u00e8re se propage en ligne droite. Cependant, son comportement change lorsqu'elle rencontre l'eau, l'air et d'autres mati\u00e8res. Au contact d'une substance, une partie de la lumi\u00e8re est absorb\u00e9e et se transforme en \u00e9nergie thermique. Lorsqu'elle heurte un mat\u00e9riau transparent, une partie de la lumi\u00e8re est \u00e9galement absorb\u00e9e, mais le reste passe \u00e0 travers. La lumi\u00e8re se refl\u00e8te sur des objets lisses, comme un miroir. Si la surface d'un objet est irr\u00e9guli\u00e8re, la lumi\u00e8re est diffus\u00e9e.<\/p>\n

\"Comment\"Comment
\nDirection de la propagation de la lumi\u00e8re<\/i><\/p>\n

3 \u2014 Caract\u00e9ristiques de base<\/h3>\n

\nFlux lumineux. Quantit\u00e9 de lumi\u00e8re \u00e9mise par une source lumineuse.
\nUnit\u00e9 de mesure : lm (lumen).<\/p>\n

\"Comment
\n
\nIntensit\u00e9 lumineuse.<\/b> Quantit\u00e9 de lumi\u00e8re transport\u00e9e dans une direction donn\u00e9e.
\nUnit\u00e9 de mesure : cd (candela).<\/p>\n

\"Comment
\n
\n\u00c9clairement. <\/b>Quantit\u00e9 de flux lumineux tombant sur une surface.
\n\u00c9clairement = flux lumineux (lm) \/ surface (m\u00b2).<\/p>\n

Unit\u00e9 de mesure : lx (lux).<\/p>\n

\"Comment
\n
\nBrillance.<\/b> C'est la seule caract\u00e9ristique de base de la lumi\u00e8re per\u00e7ue par l'\u0153il humain. D'une part, elle prend en compte la luminosit\u00e9 de la source lumineuse, d'autre part, celle de la surface, ce qui la rend fortement d\u00e9pendante du degr\u00e9 de r\u00e9flectivit\u00e9 (selon la couleur et la texture).
\nUnit\u00e9 de mesure : cd\/m\u00b2.<\/p>\n

\"Comment
\n <\/p>\n

4 \u2014 Temp\u00e9rature de couleur<\/h3>\n

\nLa temp\u00e9rature de couleur est mesur\u00e9e en Kelvin et repr\u00e9sente la couleur d'une source lumineuse sp\u00e9cifique. Le physicien britannique William Kelvin a chauff\u00e9 un morceau de charbon. Il s'est mis \u00e0 briller, changeant de couleurs correspondant \u00e0 diff\u00e9rentes temp\u00e9ratures. Au d\u00e9but, le charbon a brill\u00e9 d'un rouge fonc\u00e9, mais \u00e0 mesure qu'il chauffait, la couleur est pass\u00e9e \u00e0 un jaune vif. \u00c0 la temp\u00e9rature maximale, la lumi\u00e8re \u00e9mise est devenue bleu-blanc.<\/p>\n

\"Comment\"Comment
\nLumi\u00e8re naturelle, 24 heures, Simon Leaky<\/i><\/p>\n

II \u2014 Techniques de design lumineux<\/h2>\n

\nDans cette section, nous examinerons les sch\u00e9mas d'\u00e9clairage que l'on peut utiliser pour influencer l'expressivit\u00e9 du contenu\/visuel. Pour cela, nous d\u00e9finirons les similitudes et les diff\u00e9rences dans les techniques d'\u00e9clairage utilis\u00e9es par les artistes et les designers lumi\u00e8re.<\/p>\n

1 \u2014 Clair-obscur et t\u00e9n\u00e8bre<\/h3>\n

\nLa clair-obscur est l'un des concepts de la th\u00e9orie de l'art, qui se rapporte \u00e0 la r\u00e9partition des illuminations. Gr\u00e2ce \u00e0 elle, on repr\u00e9sente les transitions de tonalit\u00e9 pour transmettre volume et ambiance. Georges de La Tour est connu pour ses \u0153uvres sur le clair-obscur nocturne et ses sc\u00e8nes \u00e9clair\u00e9es par la flamme d'une bougie. Aucun de ses pr\u00e9d\u00e9cesseurs artistes n'a ma\u00eetris\u00e9 ces transitions de fa\u00e7on aussi magistrale. La lumi\u00e8re et l'ombre jouent un r\u00f4le essentiel dans ses \u0153uvres et font partie de la composition dans de nombreuses variations, souvent alternatives. \u00c9tudier les tableaux de La Tour aide \u00e0 comprendre l'utilisation de la lumi\u00e8re et de ses propri\u00e9t\u00e9s.<\/p>\n

\"Comment
\nGeorges de La Tour \u00ab Marie Madeleine en p\u00e9nitence \u00bb, 1638-1643.<\/i><\/p>\n

a \u2014 Haute contraste<\/h4>\n

\nDans cette peinture, le visage et les v\u00eatements clairs se d\u00e9tachent sur un fond sombre. Gr\u00e2ce \u00e0 la forte contrastivit\u00e9 des tons, l'attention du spectateur est concentr\u00e9e sur cette partie de l'image. En r\u00e9alit\u00e9, un tel contraste n'existerait pas. La distance entre le visage et la bougie est plus grande que celle entre la bougie et les mains. Cependant, compar\u00e9 au visage, nous constatons que la tonalit\u00e9 et le contraste sur les mains sont att\u00e9nu\u00e9s. Georges de La Tour utilise diff\u00e9rents niveaux de contraste pour attirer l'attention de l'observateur.<\/p>\n

\"Comment
\n <\/p>\n

b \u2014 Contour et rythme de la lumi\u00e8re<\/h4>\n

\nEn raison de la grande diff\u00e9rence de tons, des contours apparaissent dans certaines zones aux bords de la figure. M\u00eame dans les parties sombres de la toile, l'artiste aimait utiliser des tons vari\u00e9s pour souligner les limites de l'objet. La lumi\u00e8re n'est pas concentr\u00e9e dans une seule r\u00e9gion, elle glisse vers le bas : du visage vers les pieds.<\/p>\n

\"Comment
\n<\/p>\n

c \u2014 Source de lumi\u00e8re<\/h4>\n

\nDans la plupart des \u0153uvres de Georges de La Tour, il utilise des bougies ou des lampes comme source de lumi\u00e8re. Sur la peinture, une bougie allum\u00e9e est repr\u00e9sent\u00e9e, mais nous savons d\u00e9j\u00e0 que le clair-obscur ici ne d\u00e9pend pas de celle-ci. Georges de La Tour a plac\u00e9 le visage sur un fond sombre et a positionn\u00e9 la bougie pour cr\u00e9er un passage net entre les tons. Pour un fort contraste, les tons clairs c\u00f4toient les sombres, atteignant un effet optimal.<\/p>\n

\"Comment
\n<\/p>\n

d \u2014 Clair-obscur comme composition de figures g\u00e9om\u00e9triques<\/h4>\n

\nSi l'on simplifie la lumi\u00e8re et l'ombre dans cette \u0153uvre, nous verrons des figures g\u00e9om\u00e9triques de base. L'unit\u00e9 des tons clairs et sombres forme une composition simple. Elle sugg\u00e8re indirectement une sensation d'espace, o\u00f9 la position des objets et des figures indique le premier et l'arri\u00e8re-plan, cr\u00e9ant tension et \u00e9nergie.<\/p>\n

\"Comment
\n<\/p>\n

2 \u2014 Techniques d'\u00e9clairage cin\u00e9matographique de base<\/h3>\n

<\/p>\n

2.1 \u2014 \u00c9clairage en trois points<\/h4>\n

\nL'une des m\u00e9thodes les plus populaires et r\u00e9ussies pour \u00e9clairer n'importe quel objet est l'\u00e9clairage en trois points, un sch\u00e9ma classique d'Hollywood. Cette technique permet de donner du volume \u00e0 l'objet.<\/p>\n

Lumi\u00e8re principale (Key Lighting)<\/b>
\nEn g\u00e9n\u00e9ral, c'est la lumi\u00e8re la plus puissante de chaque sc\u00e8ne. Elle peut provenir de n'importe o\u00f9, son origine peut \u00eatre sur le c\u00f4t\u00e9 ou derri\u00e8re l'objet (Jeremy Birn, \u00ab \u00c9clairage num\u00e9rique et rendu \u00bb).<\/p>\n

\"Comment
\n
\nLumi\u00e8re de remplissage (Fill Lighting)<\/b>
\nComme son nom l'indique, elle est utilis\u00e9e pour \"remplir\" et \u00e9liminer les zones sombres cr\u00e9\u00e9es par la lumi\u00e8re principale. La lumi\u00e8re de remplissage est visiblement moins intense et plac\u00e9e sous un angle par rapport \u00e0 la source principale.<\/p>\n

\"Comment
\n
\nLumi\u00e8re d'arri\u00e8re-plan (Backlighting)<\/b>
\nElle est utilis\u00e9e pour donner du volume \u00e0 la sc\u00e8ne. Elle s\u00e9pare l'objet de l'arri\u00e8re-plan. Comme la lumi\u00e8re de remplissage, la lumi\u00e8re d'arri\u00e8re-plan est moins intense et couvre une plus grande surface de l'objet.<\/p>\n

\"Comment
\n<\/p>\n

2.2 \u2014 Par en bas<\/h4>\n

\nEn raison du mouvement du soleil, nous sommes habitu\u00e9s \u00e0 voir les gens \u00e9clair\u00e9s sous tous les angles, sauf par en bas. Cette m\u00e9thode semble tr\u00e8s inhabituelle.<\/p>\n

\"Comment
\n\u00ab Frankenstein \u00bb, James Whale, 1931<\/i><\/p>\n

2.3 \u2014 Par derri\u00e8re<\/h4>\n

\nL'objet est plac\u00e9 entre la source de lumi\u00e8re et le spectateur. De ce fait, une lueur entoure l'objet, tandis que les autres parties restent dans l'ombre.<\/p>\n

\"Comment
\n\u00ab E.T. l'extra-terrestre \u00bb, Steven Spielberg, 1982<\/i><\/p>\n

2.4 \u2014 Sur le c\u00f4t\u00e9<\/h4>\n

\nCet \u00e9clairage est utilis\u00e9 pour illuminer la sc\u00e8ne sur le c\u00f4t\u00e9. Il cr\u00e9e un contraste marqu\u00e9, affichant les textures et mettant en valeur les contours de l'objet. Cette m\u00e9thode est proche de la technique de clair-obscur.<\/p>\n

\"Comment
\n\u00ab Blade Runner \u00bb, Ridley Scott, 1982<\/i><\/p>\n

2.5 \u2014 \u00c9clairage pratique<\/h4>\n

\nC'est l'\u00e9clairage r\u00e9el de la sc\u00e8ne, c'est-\u00e0-dire des lampes, des bougies, de l'\u00e9cran de t\u00e9l\u00e9vision et d'autres sources. Une telle lumi\u00e8re suppl\u00e9mentaire peut \u00eatre utilis\u00e9e pour intensifier l'\u00e9clairage.<\/p>\n

\"Comment
\n\u00ab Barry Lyndon \u00bb, Stanley Kubrick, 1975<\/i><\/p>\n

2.6 \u2014 Lumi\u00e8re r\u00e9fl\u00e9chie<\/h4>\n

\nLa lumi\u00e8re d'une source puissante est diffus\u00e9e \u00e0 l'aide d'un r\u00e9flecteur ou d'une surface quelconque, comme des murs ou des plafonds. Ainsi, la lumi\u00e8re couvre une plus grande surface et se r\u00e9partit plus uniform\u00e9ment.<\/p>\n

\"Comment
\n\u00ab The Dark Knight Rises \u00bb, Christopher Nolan, 2012<\/i><\/p>\n

2.7 \u2014 Lumi\u00e8re dure et douce<\/h4>\n

\nLa principale diff\u00e9rence entre la lumi\u00e8re dure et la lumi\u00e8re douce r\u00e9side dans la taille de la source lumineuse par rapport \u00e0 l'objet. Le soleil est la plus grande source de lumi\u00e8re du syst\u00e8me solaire. Cependant, il est \u00e0 90 millions de kilom\u00e8tres de nous, ce qui en fait une petite source lumineuse. Il cr\u00e9e des ombres dures et, par cons\u00e9quent, une lumi\u00e8re dure. Lorsque des nuages apparaissent, tout le ciel devient une immense source de lumi\u00e8re, rendant les ombres plus difficiles \u00e0 distinguer. Cela g\u00e9n\u00e8re donc une lumi\u00e8re douce.<\/p>\n

\"Comment
\nExemples 3D avec LEGO, Jo\u00e3o Prada, 2017<\/i><\/p>\n

2.8 \u2014 High key et low key<\/h4>\n

\nL'\u00e9clairage high key est utilis\u00e9 pour cr\u00e9er des sc\u00e8nes tr\u00e8s lumineuses. Il est souvent proche de la surexposition. Toutes les sources de lumi\u00e8re sont \u00e0 peu pr\u00e8s \u00e9gales en puissance.
\nContrairement \u00e0 l'\u00e9clairage high key, avec le low key, la sc\u00e8ne est fortement assombrie, et il peut y avoir une source lumineuse puissante. Le principal r\u00f4le est attribu\u00e9 aux ombres plut\u00f4t qu'\u00e0 la lumi\u00e8re, afin de transmettre une sensation de suspense ou de dramatisation.<\/p>\n

\"Comment
\n\u00abTHX 1138\u00bb, George Lucas, 1971<\/i><\/p>\n

2.9 \u2014 \u00c9clairage motiv\u00e9 (Motivated Lighting)<\/h4>\n

\nCet \u00e9clairage imite la lumi\u00e8re naturelle \u2014 solaire, lunaire, lumi\u00e8res de rue, etc. Il est utilis\u00e9 pour renforcer l'\u00e9clairage pratique. Des techniques sp\u00e9ciales aident \u00e0 rendre l'\u00e9clairage motiv\u00e9 naturel, comme des filtres (gobo) pour cr\u00e9er un effet de fen\u00eatres voil\u00e9es.<\/p>\n

\"Comment
\n\u00abDrive\u00bb, Nicolas Winding Refn, 2011<\/i><\/p>\n

2.10 \u2014 Lumi\u00e8re ext\u00e9rieure<\/h4>\n

\nCela peut \u00eatre de la lumi\u00e8re solaire, lunaire ou des lumi\u00e8res de rue visibles dans la sc\u00e8ne.<\/p>\n

\"Comment
\n\u00abStranger Things, saison 3\u00bb, les fr\u00e8res Duffer, 2019<\/i><\/p>\n

III \u2014 Les bases du rendu<\/h2>\n

\nLes designers de niveaux comprennent l'importance de l'\u00e9clairage et l'utilisent pour atteindre une perception particuli\u00e8re de la sc\u00e8ne. Pour \u00e9clairer le niveau et atteindre les objectifs visuels souhait\u00e9s, ils doivent d\u00e9terminer les sources de lumi\u00e8re statiques, leurs angles de diffusion et leurs couleurs. Ils d\u00e9finissent une atmosph\u00e8re particuli\u00e8re et une visibilit\u00e9 n\u00e9cessaire. Mais ce n'est pas si simple, car l'\u00e9clairage d\u00e9pend de caract\u00e9ristiques techniques \u2014 par exemple, la puissance du processeur. Ainsi, il existe deux types d'\u00e9clairage : l'\u00e9clairage pr\u00e9-calcul\u00e9 et le rendu en temps r\u00e9el.<\/p>\n

1 \u2014 \u00c9clairage pr\u00e9-calcul\u00e9 (Precomputed lighting)<\/h3>\n

\nLes designers utilisent un \u00e9clairage statique pour d\u00e9finir les caract\u00e9ristiques d'\u00e9clairage de chaque source, y compris sa position, son angle et sa couleur. En g\u00e9n\u00e9ral, il est impossible de mettre en \u0153uvre un \u00e9clairage global en temps r\u00e9el en raison des performances. <\/p>\n

L'\u00e9clairage global statique pr\u00e9-calcul\u00e9 peut \u00eatre utilis\u00e9 dans la plupart des moteurs, y compris Unreal Engine et Unity. Le moteur \u00ab cuit \u00bb cet \u00e9clairage dans une texture sp\u00e9ciale, appel\u00e9e \u00ab carte d'\u00e9clairage \u00bb (lightmap). Ces lightmaps sont stock\u00e9es avec d'autres fichiers map, et le moteur y acc\u00e8de lors du rendu de la sc\u00e8ne. <\/p>\n

\"Comment
\nLa m\u00eame sc\u00e8ne : sans \u00e9clairage (\u00e0 gauche), uniquement avec un \u00e9clairage direct (au milieu) et avec un \u00e9clairage global indirect (\u00e0 droite). Illustrations de Unity Learn.<\/i><\/p>\n

En plus des lightmaps, il existe des cartes d'ombres, qui sont utilis\u00e9es pour cr\u00e9er des ombres. D'abord, tout est rendu en tenant compte de la source lumineuse \u2013 elle g\u00e9n\u00e8re une ombre qui refl\u00e8te la profondeur des pixels de la sc\u00e8ne. La carte de profondeur des pixels obtenue est appel\u00e9e carte d'ombres. Elle contient des informations sur la distance entre la source lumineuse et les objets les plus proches pour chaque pixel. Ensuite, un rendu est effectu\u00e9, o\u00f9 chaque pixel de surface est v\u00e9rifi\u00e9 avec la carte d'ombres. Si la distance entre le pixel et la source lumineuse est sup\u00e9rieure \u00e0 celle enregistr\u00e9e dans la carte d'ombres, alors le pixel est dans l'ombre.<\/p>\n

\"Comment
\nL'algorithme d'application de la carte d'ombres. Illustration de OpenGl-tutorial.<\/i><\/p>\n

2 \u2014 Rendu en temps r\u00e9el.<\/h3>\n

\nL'un des mod\u00e8les d'\u00e9clairage classiques pour le temps r\u00e9el est appel\u00e9 mod\u00e8le de Lambert (en l'honneur du math\u00e9maticien suisse Johann Heinrich Lambert). Lors du rendu en temps r\u00e9el, le GPU envoie g\u00e9n\u00e9ralement des objets un par un. Cette m\u00e9thode utilise la repr\u00e9sentation de l'objet (sa position, son angle de rotation et son \u00e9chelle) pour d\u00e9terminer quelle de ses surfaces doit \u00eatre rendue. <\/p>\n

Dans le cas de l'\u00e9clairage de Lambert, la lumi\u00e8re \u00e9mane de chaque point de la surface dans toutes les directions. Certaines subtilit\u00e9s, comme les r\u00e9flexions (article de Chandler Prall), ne sont pas prises en compte. Pour que la sc\u00e8ne paraisse plus r\u00e9aliste, des effets suppl\u00e9mentaires \u2014 comme les reflets \u2014 sont superpos\u00e9s au mod\u00e8le de Lambert.<\/p>\n

\"Comment
\nLe shading de Lambert sur un exemple de sph\u00e8re. Illustration provenant des mat\u00e9riaux de Peter Dyachikhina.<\/i><\/p>\n

La plupart des moteurs modernes (Unity, Unreal Engine, Frostbite et autres) utilisent le rendu physiquement correct (Physically Based Rendering, PBR) et le shading (article de Lucas Orsvarn). Le shading PBR propose des moyens et des param\u00e8tres plus intuitifs et pratiques pour d\u00e9crire une surface. Dans Unreal Engine, les mat\u00e9riaux PBR ont les param\u00e8tres suivants :<\/p>\n