{"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\/pt\/blog\/news\/kak-osveshhenie-vliyaet-na-gejmdizajn-i-igrovoj-opyt","title":{"rendered":"Como a ilumina\u00e7\u00e3o afeta o design de jogos e a experi\u00eancia do jogador","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

\"Como
\n
\nEsperando pelo PS5 e Project Scarlett, que suportar\u00e3o ray tracing, pensei sobre a ilumina\u00e7\u00e3o nos jogos. Encontrei um material onde o autor explica o que \u00e9 luz, como ela influencia o design, muda a jogabilidade, a est\u00e9tica e a experi\u00eancia. Tudo com exemplos e captures de tela. Durante o jogo, n\u00e3o se presta aten\u00e7\u00e3o a isso imediatamente.
\n<\/a><\/noindex><\/p>\n

Introdu\u00e7\u00e3o<\/h2>\n

\nA ilumina\u00e7\u00e3o n\u00e3o \u00e9 necess\u00e1ria apenas para que o jogador consiga ver a cena (embora isso seja muito importante). A luz impacta as emo\u00e7\u00f5es. Muitas t\u00e9cnicas de ilumina\u00e7\u00e3o no teatro, cinema e arquitetura s\u00e3o utilizadas para intensificar o componente emocional. Por que n\u00e3o fazer os game designers se apropriarem desses princ\u00edpios? A conex\u00e3o entre a imagem e a resposta emocional oferece mais uma poderosa ferramenta que ajuda a trabalhar com personagens, narrativa, som, mec\u00e2nicas de jogo e assim por diante. Al\u00e9m disso, a intera\u00e7\u00e3o da luz com a superf\u00edcie permite influenciar o brilho, a cor, o contraste, as sombras e outros efeitos. Tudo isso resulta em uma base que todo designer deve dominar.<\/p>\n

O objetivo deste material \u00e9 determinar como o design da ilumina\u00e7\u00e3o influencia a est\u00e9tica do jogo e a experi\u00eancia do usu\u00e1rio. Vamos analisar a natureza da luz e como ela \u00e9 usada em outras \u00e1reas da arte, para entender seu papel nos videogames.<\/p>\n

\"Como
\nO Lago dos Cisnes, Alexander Ekman<\/i><\/p>\n

I \u2014 A Natureza da Luz<\/h2>\n

\n\u00abEspa\u00e7o, luz e ordem. Essas s\u00e3o as coisas das quais as pessoas precisam tanto quanto precisam de um peda\u00e7o de p\u00e3o ou abrigo\u00bb, \u2014 Le Corbusier.<\/p>\n

A luz natural nos orienta e nos acompanha desde o nascimento. \u00c9 essencial, estabelece nosso ritmo natural. A luz controla os processos do nosso organismo e influencia os rel\u00f3gios biol\u00f3gicos. Vamos entender o que \u00e9 fluxo luminoso, intensidade da luz, cor e pontos focais. E ent\u00e3o compreenderemos do que a luz \u00e9 composta e como ela se comporta.<\/p>\n

1 \u2014 O que o olho humano v\u00ea<\/h3>\n

\nA luz \u00e9 parte do espectro eletromagn\u00e9tico percebido pelo olho. Nesta faixa, as ondas est\u00e3o na faixa de comprimento de 380 a 780 nm. Durante o dia, diferenciamos cores gra\u00e7as aos cones, e \u00e0 noite o olho utiliza bastonetes, e vemos apenas grada\u00e7\u00f5es de cinza.<\/p>\n

As principais propriedades da luz vis\u00edvel s\u00e3o dire\u00e7\u00e3o, intensidade, frequ\u00eancia e polariza\u00e7\u00e3o. Sua velocidade no v\u00e1cuo \u00e9 de 300.000.000 m\/s, e essa \u00e9 uma das constantes f\u00edsicas fundamentais.<\/p>\n

\"Como
\nEspectro eletromagn\u00e9tico vis\u00edvel<\/i><\/p>\n

2 \u2014 Dire\u00e7\u00e3o da propaga\u00e7\u00e3o<\/h3>\n

\nNo v\u00e1cuo, n\u00e3o h\u00e1 subst\u00e2ncia, e a luz se propaga diretamente. No entanto, ela se comporta de maneira diferente ao colidir com \u00e1gua, ar e outras subst\u00e2ncias. Ao entrar em contato com um material, parte da luz \u00e9 absorvida e transforma-se em energia t\u00e9rmica. Ao atingir um material transparente, parte da luz tamb\u00e9m \u00e9 absorvida, mas o restante passa. Em superf\u00edcies lisas, como espelhos, a luz se reflete. Se a superf\u00edcie do objeto for rugosa, a luz se dispersa.<\/p>\n

\"Como\"Como
\nDire\u00e7\u00e3o da propaga\u00e7\u00e3o da luz<\/i><\/p>\n

3 \u2014 Caracter\u00edsticas b\u00e1sicas<\/h3>\n

\nFluxo luminoso. A quantidade de luz emitida por uma fonte de luz.
\nUnidade de medida: lm (l\u00famen).<\/p>\n

\"Como
\n
\nIntensidade luminosa.<\/b> A quantidade de luz transportada em uma determinada dire\u00e7\u00e3o.
\nUnidade de medida: cd (candela).<\/p>\n

\"Como
\n
\nIlumin\u00e2ncia. <\/b>A quantidade de fluxo luminoso que incide sobre uma superf\u00edcie.
\nIlumin\u00e2ncia = fluxo luminoso (lm) \/ \u00e1rea (m\u00b2).<\/p>\n

Unidade de medida: lx (lux).<\/p>\n

\"Como
\n
\nBrilho.<\/b> \u00c9 a \u00fanica caracter\u00edstica b\u00e1sica da luz que \u00e9 percebida pelo olho humano. De um lado, considera o brilho da fonte de luz, do outro, a superf\u00edcie, o que significa que depende muito do grau de reflex\u00e3o (da cor e da superf\u00edcie).
\nUnidade de medida: cd\/m\u00b2.<\/p>\n

\"Como
\n <\/p>\n

4 \u2014 Temperatura da cor<\/h3>\n

\nA temperatura da cor \u00e9 medida em Kelvin e reflete a cor de uma fonte de luz espec\u00edfica. O f\u00edsico brit\u00e2nico William Kelvin aqueceu um peda\u00e7o de carv\u00e3o. Ele ficou incandescente, exibindo diferentes cores correspondentes a diferentes temperaturas. Primeiro, o carv\u00e3o emitia uma luz vermelha-escura, mas \u00e0 medida que esquentava, a cor mudou para amarelo-brilhante. Com a temperatura m\u00e1xima, a luz emitida tornou-se azul-branca.<\/p>\n

\"Como\"Como
\nLuz natural, 24 horas, Simon Leahy<\/i><\/p>\n

II \u2014 T\u00e9cnicas de design de luz<\/h2>\n

\nNesta se\u00e7\u00e3o, abordaremos quais padr\u00f5es de ilumina\u00e7\u00e3o podem ser utilizados para influenciar a expressividade do conte\u00fado \/ da est\u00e9tica visual. Para isso, definiremos semelhan\u00e7as e diferen\u00e7as nas t\u00e9cnicas de ilumina\u00e7\u00e3o usadas por artistas e designers de luz.<\/p>\n

1 \u2014 Luz e sombra e tenebrismo<\/h3>\n

\nClaridade e sombra \u00e9 um dos conceitos da teoria da arte, que se refere \u00e0 distribui\u00e7\u00e3o de ilumina\u00e7\u00f5es. Com ela, s\u00e3o representadas transi\u00e7\u00f5es de tonalidade para transmitir volume e atmosfera. Georges de La Tour \u00e9 conhecido por suas obras que exploram a claridade noturna e cenas iluminadas pela chama de uma vela. Nenhum de seus artistas predecessores trabalhou essas transi\u00e7\u00f5es com tanta maestria. Luz e sombra desempenham um papel crucial em suas obras e fazem parte da composi\u00e7\u00e3o em variadas e frequentemente alternativas varia\u00e7\u00f5es. Estudar as pinturas de La Tour ajuda a entender o uso da luz e suas propriedades.<\/p>\n

\"Como
\nGeorges de La Tour \"Maria Madalena arrependida\", 1638-1643.<\/i><\/p>\n

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

\nNesta pintura, o rosto claro e as roupas se destacam sobre o fundo escuro. Devido ao alto contraste entre os tons, a aten\u00e7\u00e3o do espectador est\u00e1 focada nessa parte da imagem. Na realidade, tal contraste n\u00e3o existiria. A dist\u00e2ncia entre o rosto e a vela \u00e9 maior do que entre a vela e as m\u00e3os. No entanto, ao comparar com o rosto, vemos que a tonalidade e o contraste nas m\u00e3os est\u00e3o atenuados. Georges de La Tour utiliza diferentes contrastes para atrair a aten\u00e7\u00e3o do observador.<\/p>\n

\"Como
\n <\/p>\n

b \u2014 Contorno e ritmo da luz<\/h4>\n

\nDevido \u00e0 alta diferen\u00e7a de tonalidades, em algumas \u00e1reas nas bordas da figura surgem contornos. Mesmo nas partes escuras da pintura, o artista gostava de usar diferentes tons para enfatizar as bordas do objeto. A luz n\u00e3o est\u00e1 concentrada em uma \u00fanica \u00e1rea; ela desliza para baixo: do rosto at\u00e9 os p\u00e9s.<\/p>\n

\"Como
\n<\/p>\n

c \u2014 Fonte de luz<\/h4>\n

\nNa maioria de seus trabalhos, Georges de La Tour utiliza velas ou l\u00e2mpadas como fonte de luz. Na pintura, uma vela acesa est\u00e1 retratada, mas j\u00e1 sabemos que a claridade e sombra aqui n\u00e3o dependem dela. Georges de La Tour posicionou o rosto sobre um fundo escuro e colocou a vela para criar uma transi\u00e7\u00e3o abrupta entre os tons. Para um alto contraste, os tons claros est\u00e3o adjacentes aos escuros, alcan\u00e7ando um efeito otimizado.<\/p>\n

\"Como
\n<\/p>\n

d \u2014 Claridade e sombra como composi\u00e7\u00e3o de figuras geom\u00e9tricas<\/h4>\n

\nSe simplificarmos a luz e a sombra nesta obra, veremos figuras geom\u00e9tricas b\u00e1sicas. A uni\u00e3o de tons claros e escuros forma uma composi\u00e7\u00e3o simples. Isso indiretamente estabelece uma sensa\u00e7\u00e3o de espa\u00e7o, onde a posi\u00e7\u00e3o dos objetos e figuras indica o primeiro e o segundo plano, criando tens\u00e3o e energia.<\/p>\n

\"Como
\n<\/p>\n

2 \u2014 Principais t\u00e9cnicas cinematogr\u00e1ficas de ilumina\u00e7\u00e3o<\/h3>\n

<\/p>\n

2.1 \u2014 Ilumina\u00e7\u00e3o de tr\u00eas pontos<\/h4>\n

\nUma das maneiras mais populares e eficazes de iluminar qualquer objeto \u00e9 a ilumina\u00e7\u00e3o de tr\u00eas pontos, um esquema cl\u00e1ssico de Hollywood. Essa t\u00e9cnica permite transmitir a profundidade do objeto.<\/p>\n

Luz principal (Key Lighting, ou seja, a fonte de luz principal)<\/b>
\nNormalmente, essa \u00e9 a luz mais poderosa em cada cena. Ela pode vir de qualquer lugar, podendo ser lateral ou atr\u00e1s do objeto (Jeremy Birn, \"Ilumina\u00e7\u00e3o Digital e Renderiza\u00e7\u00e3o\").<\/p>\n

\"Como
\n
\nLuz de preenchimento (Fill Lighting, ou seja, luz para controlar contrastes)<\/b>
\nComo o nome sugere, \u00e9 usada para \"preencher\" e remover \u00e1reas escuras criadas pela luz principal. A luz de preenchimento \u00e9 consideravelmente menos intensa e posicionada em \u00e2ngulo em rela\u00e7\u00e3o \u00e0 fonte de luz principal.<\/p>\n

\"Como
\n
\nLuz de fundo (Backlighting, ou seja, separador de fundo)<\/b>
\n\u00c9 utilizada para transmitir a profundidade da cena. Ela separa o objeto do fundo. Assim como a luz de preenchimento, a luz de fundo \u00e9 menos intensa e cobre uma \u00e1rea maior do objeto.<\/p>\n

\"Como
\n<\/p>\n

2.2 \u2014 De baixo<\/h4>\n

\nDevido ao movimento do Sol, estamos acostumados a ver as pessoas iluminadas de qualquer \u00e2ngulo, exceto de baixo. Essa maneira de iluminar parece muito incomum.<\/p>\n

\"Como
\n\"Frankenstein\", James Whale, 1931<\/i><\/p>\n

2.3 \u2014 De tr\u00e1s<\/h4>\n

\nO objeto est\u00e1 posicionado entre a fonte de luz e o espectador. Por isso, uma aur\u00e9ola se forma ao redor do objeto, enquanto as demais partes permanecem na sombra.<\/p>\n

\"Como
\n\"E.T. - O Extraterrestre\", Steven Spielberg, 1982<\/i><\/p>\n

2.4 \u2014 De lado<\/h4>\n

\nEssa ilumina\u00e7\u00e3o \u00e9 usada para destacar a cena a partir do lado. Ela cria um contraste n\u00edtido, refletindo texturas e acentuando os contornos do objeto. Essa t\u00e9cnica \u00e9 semelhante \u00e0 t\u00e9cnica de luz-sombra.<\/p>\n

\"Como
\n\"Blade Runner: O Ca\u00e7ador de Andr\u00f3ides\", Ridley Scott, 1982<\/i><\/p>\n

2.5 \u2014 Ilumina\u00e7\u00e3o pr\u00e1tica<\/h4>\n

\nEssa \u00e9 a ilumina\u00e7\u00e3o real na cena, ou seja, l\u00e2mpadas, velas, tela de televis\u00e3o e outros. Essa luz adicional pode ser usada para aumentar a intensidade da ilumina\u00e7\u00e3o.<\/p>\n

\"Como
\n\"Barry Lyndon\", Stanley Kubrick, 1975<\/i><\/p>\n

2.6 \u2014 Luz refletida<\/h4>\n

\nA luz de uma fonte poderosa \u00e9 dispersa por meio de um reflexor ou alguma superf\u00edcie, como paredes ou teto. Assim, a luz cobre uma \u00e1rea maior e se distribui de maneira mais uniforme.<\/p>\n

\"Como
\n\"O Cavaleiro das Trevas: A Lenda Renascente\", Christopher Nolan, 2012<\/i><\/p>\n

2.7 \u2014 Luz dura e suave<\/h4>\n

\nA principal diferen\u00e7a entre luz dura e suave \u00e9 o tamanho da fonte de luz em rela\u00e7\u00e3o ao objeto. O sol \u00e9 a maior fonte de luz do sistema solar. No entanto, ele est\u00e1 a 90 milh\u00f5es de quil\u00f4metros de n\u00f3s, fazendo dele uma pequena fonte de luz. Isso cria sombras duras e, consequentemente, luz dura. Quando aparecem nuvens, todo o c\u00e9u se torna uma enorme fonte de luz, tornando mais dif\u00edcil distinguir as sombras. Assim, surge a luz suave.<\/p>\n

\"Como
\nExemplos 3D com LEGO, Jo\u00e3o Prada, 2017<\/i><\/p>\n

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

\nA ilumina\u00e7\u00e3o high key \u00e9 usada para criar cenas muito brilhantes. Ela geralmente se aproxima da superexposi\u00e7\u00e3o. Todas as fontes de luz s\u00e3o aproximadamente iguais em pot\u00eancia.
\nAo contr\u00e1rio da ilumina\u00e7\u00e3o high key, na low key a cena \u00e9 bastante escura e pode haver uma fonte de luz poderosa. A principal \u00eanfase \u00e9 nas sombras, e n\u00e3o na luz, para transmitir uma sensa\u00e7\u00e3o de suspense ou dramaticidade.<\/p>\n

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

2.9 \u2014 Ilumina\u00e7\u00e3o Motivada<\/h4>\n

\nEsse tipo de ilumina\u00e7\u00e3o imita a luz natural \u2014 luz solar, luz lunar, luzes de rua e assim por diante. \u00c9 utilizada para real\u00e7ar a ilumina\u00e7\u00e3o pr\u00e1tica. T\u00e9cnicas especiais ajudam a fazer a ilumina\u00e7\u00e3o motivada parecer natural, como filtros (gobo) para criar o efeito de janelas cobertas.<\/p>\n

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

2.10 \u2014 Luz Externa<\/h4>\n

\nIsso pode ser luz solar, luz lunar ou luzes de rua que s\u00e3o vis\u00edveis na cena.<\/p>\n

\"Como
\n\u00abStranger Things. Temporada 3\u00bb, irm\u00e3os Duffer, 2019<\/i><\/p>\n

III \u2014 Fundamentos da Renderiza\u00e7\u00e3o<\/h2>\n

\nOs designers de n\u00edveis entendem a import\u00e2ncia da ilumina\u00e7\u00e3o e a utilizam para alcan\u00e7ar uma percep\u00e7\u00e3o espec\u00edfica da cena. Para iluminar o n\u00edvel e atingir os objetivos visuais desejados, eles precisam definir fontes de luz est\u00e1ticas, seus \u00e2ngulos de dispers\u00e3o e cores. Eles estabelecem a atmosfera e a vis\u00e3o necess\u00e1rias. Mas n\u00e3o \u00e9 t\u00e3o simples, pois a ilumina\u00e7\u00e3o depende de caracter\u00edsticas t\u00e9cnicas \u2014 por exemplo, da pot\u00eancia do processador. Portanto, existem dois tipos de ilumina\u00e7\u00e3o: ilumina\u00e7\u00e3o pr\u00e9-calculada e renderiza\u00e7\u00e3o em tempo real.<\/p>\n

1 \u2014 Ilumina\u00e7\u00e3o Pr\u00e9-Calcular (Precomputed Lighting)<\/h3>\n

\nOs designers usam ilumina\u00e7\u00e3o est\u00e1tica para definir as caracter\u00edsticas da luz para cada fonte - incluindo sua posi\u00e7\u00e3o, \u00e2ngulo e cor. Geralmente, implementar ilumina\u00e7\u00e3o global em tempo real \u00e9 imposs\u00edvel devido ao desempenho. <\/p>\n

A ilumina\u00e7\u00e3o global est\u00e1tica pr\u00e9-calculada pode ser usada na maioria dos motores, incluindo Unreal Engine e Unity. O motor 'assar' essa ilumina\u00e7\u00e3o em uma textura especial, chamada de 'mapa de ilumina\u00e7\u00e3o' (lightmap). Esses lightmaps s\u00e3o armazenados junto com outros arquivos de mapa, e o motor os utiliza ao renderizar a cena. <\/p>\n

\"Como
\nA mesma cena: sem ilumina\u00e7\u00e3o (\u00e0 esquerda), apenas com ilumina\u00e7\u00e3o direta (no meio) e com ilumina\u00e7\u00e3o global indireta (\u00e0 direita). Ilustra\u00e7\u00f5es do Unity Learn<\/i><\/p>\n

Al\u00e9m dos lightmaps, existem mapas de sombras, que s\u00e3o usados para criar sombras. Primeiro, tudo \u00e9 renderizado levando em conta a fonte de luz - ela gera uma sombra que reflete a profundidade de pixels da cena. O mapa gerado \u00e9 chamado de mapa de sombras. Ele cont\u00e9m informa\u00e7\u00f5es sobre a dist\u00e2ncia entre a fonte de luz e os objetos mais pr\u00f3ximos a ela para cada pixel. Em seguida, a renderiza\u00e7\u00e3o \u00e9 feita onde cada pixel da superf\u00edcie \u00e9 comparado com o mapa de sombras. Se a dist\u00e2ncia entre o pixel e a fonte de luz for maior do que a registrada no mapa de sombras, o pixel est\u00e1 na sombra.<\/p>\n

\"Como
\nAlgoritmo de aplica\u00e7\u00e3o do mapa de sombras. Ilustra\u00e7\u00e3o do OpenGl-tutorial<\/i><\/p>\n

2 - Renderiza\u00e7\u00e3o em tempo real<\/h3>\n

\nUm dos modelos cl\u00e1ssicos de ilumina\u00e7\u00e3o para tempo real \u00e9 chamado modelo de Lambert (em homenagem ao matem\u00e1tico su\u00ed\u00e7o Johann Heinrich Lambert). Ao renderizar em tempo real, o GPU geralmente processa os objetos um a um. Este m\u00e9todo utiliza a representa\u00e7\u00e3o do objeto (sua posi\u00e7\u00e3o, \u00e2ngulo de rota\u00e7\u00e3o e escala) para determinar qual de suas superf\u00edcies deve ser renderizada. <\/p>\n

No caso da ilumina\u00e7\u00e3o de Lambert, a luz emana de cada ponto da superf\u00edcie em todas as dire\u00e7\u00f5es. Algumas sutilezas, como reflexos (artigo de Chandler Pralle), n\u00e3o s\u00e3o consideradas. Para que a cena pare\u00e7a mais realista, efeitos adicionais s\u00e3o aplicados ao modelo de Lambert - como brilhos, por exemplo.<\/p>\n

\"Como
\nSombreamento de Lambert usando uma esfera como exemplo. Ilustra\u00e7\u00e3o do material de Petr D'yachikhin<\/i><\/p>\n

A maioria dos motores modernos (Unity, Unreal Engine, Frostbite e outros) utiliza renderiza\u00e7\u00e3o fisicamente correta (Physically Based Rendering, PBR) e sombreamento (artigo de Lucas Orsvarn). O sombreamento PBR oferece maneiras e op\u00e7\u00f5es mais intuitivas e convenientes para descrever superf\u00edcies. No Unreal Engine, os materiais PBR t\u00eam os seguintes par\u00e2metros:<\/p>\n