Como a iluminação afeta o design e a experiência de jogo

Em antecipação ao PS5 e ao Projeto Scarlett, que oferecerão suporte ao traçado de raios, pensei em iluminação nos jogos. Encontrei material onde o autor explica o que é a luz, como ela afeta o design, muda a jogabilidade, a estética e a experiência. Tudo com exemplos e capturas de tela. Durante o jogo, você não presta atenção imediatamente a isso.

1. Introdução

A iluminação é necessária não apenas para que o jogador possa ver a cena (embora isso seja muito importante). A luz afeta as emoções. Muitas técnicas de iluminação no teatro, cinema e arquitetura são usadas para aprimorar o componente emocional. Por que não emprestar esses princípios dos designers de jogos? A conexão entre a imagem e a resposta emocional fornece outra ferramenta poderosa que ajuda você a trabalhar com o personagem, a narrativa, o som, a mecânica do jogo etc. Nesse caso, a interação da luz com a superfície permite afetar o brilho, a cor, o contraste, a sombra e outros efeitos. Tudo isso se traduz em uma base que todo designer deve dominar.

O objetivo deste material é determinar como o design da iluminação afeta a estética do jogo e a experiência do usuário. Analisaremos a natureza da luz e como ela é usada em outras áreas da arte para analisar seu papel nos videogames.


Lago dos Cisnes, Alexander Ekman

I - A natureza da luz

“Espaço, luz e ordem. Essas são as coisas que as pessoas precisam tanto quanto precisam de um pedaço de pão ou de uma pernoite ”- Le Corbusier.

A luz natural nos guia e nos acompanha desde o momento do nascimento. É necessário, define nosso ritmo natural. A luz controla os processos do nosso corpo e afeta o relógio biológico. Vamos entender o que é fluxo luminoso, intensidade da luz, cor e pontos focais. E então entenderemos em que consiste a luz e como ela se comporta.

1 - O que o olho humano vê

A luz faz parte do espectro eletromagnético percebido pelo olho. Nesta área, os comprimentos de onda variam de 380 a 780 nm. Durante o dia, distinguimos cores graças aos cones, e à noite o olho usa paus, e vemos apenas gradações de cinza.

As principais propriedades da luz visível são direção, intensidade, frequência e polarização. Sua velocidade no vácuo é de 300.000.000 m / s, e essa é uma das constantes físicas fundamentais.


Espectro eletromagnético visível

2 - Direção da distribuição

Não existe substância no vácuo, e a luz viaja diretamente. No entanto, ele se comporta de maneira diferente quando exposto à água, ar e outras substâncias. Em contato com a substância, parte da luz é absorvida e convertida em energia térmica. Em uma colisão com um material transparente, parte da luz também é absorvida, mas o restante passa. De objetos suaves, como um espelho, a luz é refletida. Se a superfície do objeto for irregular, a luz será dispersa.


Direção da luz

3 - Recursos básicos

Fluxo luminoso. A quantidade de luz emitida pela fonte de luz.
Unidade de medida: lm (lúmen).



O poder da luz. A quantidade de luz transportada em uma direção específica.
Unidade de medida: cd (candela).



Iluminação A quantidade de fluxo luminoso incidente na superfície.
Iluminação = fluxo luminoso (lm) / área (m2).

Unidade de medida: lx (lux).



Brilho. Essa é a única característica básica da luz que o olho humano percebe. Por um lado, leva em consideração o brilho da fonte de luz, por outro lado, a superfície, o que significa que depende fortemente do grau de reflexão (cor e superfície).
Unidade de medida: cd / m2.

4 - Temperatura de cor

A temperatura da cor é medida em Kelvin e exibe a cor de uma fonte de luz específica. O físico britânico William Kelvin aqueceu um pedaço de carvão. Ele brilhava, brilhando em cores diferentes que correspondiam a diferentes temperaturas. A princípio, o carvão brilhava em vermelho escuro, mas quando aqueceu, a cor mudou para amarelo brilhante. Na temperatura máxima, a luz emitida ficou azul-branca.


Luz natural, 24 horas, Simon Lakey

II - Técnicas de Design Leve

Nesta seção, analisaremos quais padrões de iluminação podem ser usados ​​para influenciar a expressividade do conteúdo / alcance visual. Para isso, identificaremos as semelhanças e diferenças nas técnicas de iluminação usadas por artistas e designers de iluminação.

1 - Cliaroscuro e Shadebism

O claro-escuro é um dos conceitos da teoria da arte, relacionada à distribuição da iluminação. Use-o para exibir transições de tom para transmitir volume e humor. Georges de Latour é conhecido por seu trabalho com claro-escuro e cenas iluminadas à luz de velas. Nenhum de seus artistas predecessores trabalhou tão bem com essas transições. Luz e sombra desempenham um papel crucial em suas obras e fazem parte da composição nas variações mais variadas e frequentemente alternativas. O estudo das pinturas de De Latour ajuda a entender o uso da luz e suas propriedades.


Georges de Latour "A Penitente Maria Madalena", 1638-1643

a - Alto contraste

Nesta foto, um rosto brilhante e roupas se destacam contra um fundo escuro. Devido ao alto contraste de tons, a atenção do espectador é focada nesta parte da imagem. Na realidade, não haveria esse contraste. A distância entre o rosto e a vela é maior do que entre a vela e as mãos. No entanto, comparando com o rosto, vemos que o tom e o contraste nas mãos são abafados. Georges de Latour usa diferentes contrastes para atrair a atenção de um observador.

b - Contorno e ritmo da luz

Devido à grande diferença de tons, os contornos aparecem em algumas áreas ao redor das bordas da figura. Mesmo nas partes escuras da imagem, o artista gostava de usar tons diferentes para enfatizar os limites do objeto. A luz não está concentrada em uma área, ela desliza para baixo: do rosto às pernas.

c - fonte de luz

Na maioria dos trabalhos, Georges de Latour usa velas ou lâmpadas como fonte de luz. A imagem mostra uma vela acesa, mas já sabemos que o claro-escuro não depende dela. Georges de Latour colocou o rosto em um fundo escuro e acendeu uma vela para criar uma transição nítida entre tons. Para alto contraste, os tons claros são adjacentes ao escuro, alcançando o efeito ideal.

d - claro-escuro como composição de formas geométricas

Se simplificarmos a luz e a sombra neste trabalho, veremos as formas geométricas básicas. A unidade de tons claros e escuros forma uma composição simples. Indica indiretamente a sensação de espaço em que a posição dos objetos e figuras mostra o primeiro plano e o fundo, criando tensão e energia.

2 - Técnicas básicas de iluminação cinematográfica

2.1 - Iluminação a partir de três pontos

Uma das maneiras mais populares e bem-sucedidas de destacar qualquer objeto é a iluminação a partir de três pontos, um esquema clássico de Hollywood. Essa técnica permite transmitir o volume de um item.

Luz de desenho (iluminação principal, ou seja, a principal fonte de luz)
Geralmente é a luz mais poderosa em todas as cenas. Pode vir de qualquer lugar, sua fonte pode estar do lado ou atrás do objeto (Jeremy Byrne Digital Lighting and Rendering).



Iluminação de preenchimento (iluminação de preenchimento, ou seja, luz para controlar contrastes)
Pelo nome, é óbvio que é usado para "preencher" e remover as áreas escuras criadas pela luz da pintura. A luz de preenchimento é visivelmente menos intensa e está localizada em ângulo com a fonte de luz principal.



Luz de fundo (luz de fundo, ou seja, separador de fundo)
É usado para transmitir o volume da cena. Ele separa o objeto do plano de fundo. Como a luz de preenchimento, o fundo é menos intenso e cobre uma grande área do objeto.

2.2 - Inferior

Devido ao movimento do sol, estamos acostumados a ver pessoas iluminadas de qualquer ângulo, mas não de baixo. Este método parece muito incomum.


Frankenstein, James Whale, 1931

2.3 - Voltar

O objeto está localizado entre a fonte de luz e o visualizador. Por esse motivo, um brilho aparece ao redor do objeto e o restante de suas partes permanece na sombra.


"Alien", Steven Spielberg, 1982

2.4 - Lateral

Essa iluminação é usada para iluminar a cena de lado. Ele cria um contraste claro, exibindo texturas e enfatizando os contornos do objeto. Este método está próximo da técnica do claro-escuro.


Blade Runner, Ridley Scott, 1982

2.5 - Iluminação prática

Isso é iluminação real na cena, isto é - lâmpadas, velas, tela de TV e outros. Essa luz adicional pode ser usada para aumentar a intensidade da luz.


Barry Lyndon, Stanley Kubrick, 1975

2.6 - Luz Refletida

A luz de uma fonte poderosa é espalhada por um refletor ou superfície, como uma parede ou teto. Assim, a luz cobre uma área grande e fica mais uniforme.


O Cavaleiro das Trevas: O Renascimento da Lenda, Christopher Nolan, 2012

2.7 - Luz dura e suave

A principal diferença entre luz dura e luz suave é o tamanho da fonte de luz em relação ao objeto. O sol é a maior fonte de luz do sistema solar. No entanto, está a 90 milhões de quilômetros de distância, o que significa que é uma pequena fonte de luz. Cria sombras duras e, consequentemente, luz dura. Se as nuvens aparecerem, o céu inteiro se torna uma enorme fonte de luz e as sombras são mais difíceis de distinguir. Então, luz suave surge.


Exemplos 3D de LEGO, Juan Prada, 2017

2.8 - Chave alta e baixa

A iluminação alta das teclas é usada para criar cenas muito vívidas. Muitas vezes, é perto de exposição superexposta. Todas as fontes de luz são aproximadamente iguais em potência.
Ao contrário da iluminação com teclas altas, com a tecla baixa, a cena é muito escura e pode haver uma fonte de luz poderosa. O papel principal é dado às sombras, não à luz, para transmitir uma sensação de suspense ou drama.


THX 1138, George Lucas, 1971

2.9 - Iluminação motivada

Essa iluminação imita a luz natural - solar, luar, luzes da rua e assim por diante. É usado para melhorar a iluminação prática. Técnicas especiais ajudam a tornar natural a iluminação motivada, como filtros (gobos), para criar o efeito de janelas com cortinas.


"Drive", Nicholas Winding Refn, 2011

2.10 - Luz externa

Pode ser luz do sol, luar ou luzes da rua que são visíveis na cena.


Coisas muito estranhas. Temporada 3, Duffer Brothers, 2019

III - Conceitos básicos de renderização

Os projetistas de níveis reconhecem a importância da iluminação e a utilizam para obter uma certa percepção da cena. Para destacar o nível e alcançar os objetivos visuais desejados, eles precisam determinar as fontes de luz estáticas, seus ângulos de propagação e cores. Eles estabelecem uma certa atmosfera e a visão geral necessária. Mas nem tudo é tão simples, porque a iluminação depende de tais características técnicas - por exemplo, da potência do processador. Portanto, existem dois tipos de iluminação: iluminação pré-calculada e renderização em tempo real.

1 - Iluminação pré-computada

Os designers usam iluminação estática para definir as características de iluminação de cada fonte - incluindo sua posição, ângulo e cor. Como regra, a iluminação global em tempo real não é possível devido ao desempenho.

A iluminação global estática pré-calculada pode ser usada na maioria dos mecanismos, incluindo o Unreal Engine e o Unity. O mecanismo “transforma” essa iluminação em uma textura especial, o chamado “mapa da iluminação” (mapa de luz, mapa de luz). Esses mapas de luz são armazenados junto com outros arquivos de mapa e o mecanismo os acessa ao renderizar a cena.


A mesma cena: sem iluminação (esquerda), apenas com iluminação direta (no meio) e com iluminação global indireta (direita). Arte-final com o Unity Learn

Além dos mapas de luz, existem cartões de sombra que, respectivamente, são usados ​​para criar sombras. Primeiro, tudo é desenhado levando em consideração a fonte de luz - produz uma sombra que reflete a profundidade de pixel da cena. O mapa de profundidade de pixel resultante é chamado de mapa de sombra. Ele contém informações sobre a distância entre a fonte de luz e os objetos mais próximos a ela para cada pixel. Em seguida, a renderização é realizada, onde cada pixel da superfície é verificado com um mapa de sombras. Se a distância entre o pixel e a fonte de luz for maior que a registrada no mapa de sombras, o pixel estará na sombra.


O algoritmo para aplicar o mapa de sombra. Ilustração com o OpenGl-tutorial

2 - Renderização em tempo real

Um dos modelos clássicos de iluminação em tempo real é chamado de modelo Lambert (em homenagem ao matemático suíço Johann Heinrich Lambert). Na renderização em tempo real, a GPU geralmente envia objetos um de cada vez. Este método usa a exibição de um objeto (sua posição, ângulo de rotação e escala) para determinar qual de suas superfícies precisa ser desenhada.

No caso da iluminação Lambert, a luz emana de todos os pontos da superfície em todas as direções. Isso não leva em consideração algumas sutilezas, por exemplo, reflexão (artigo de Chandler Prall). Para tornar a cena mais realista, efeitos adicionais são sobrepostos ao modelo Lambert - brilho, por exemplo.


Lambert sombreado no exemplo de uma esfera. Ilustração dos materiais de Peter Dyachikhin

Os mecanismos mais modernos (Unity, Unreal Engine, Frostbite e outros) usam renderização fisicamente correta (Renderização com base física, PBR) e sombreamento (artigo de Lucas Orsvarn). O sombreamento PBR oferece métodos e parâmetros mais intuitivos e convenientes para descrever a superfície. No Unreal Engine, os materiais PBR têm os seguintes parâmetros:

• Cor base - a textura da superfície real.
• Rugosidade - quão áspera é a superfície.
• Metálico - se a superfície é metálica.
• Especular (especularidade) - a quantidade de brilho na superfície.

Sem PBR (esquerda), PBR (direita). Arte-final com o estúdio Meta 3D

No entanto, existe outra abordagem para renderizar o traçado de raios. Essa tecnologia não foi considerada anteriormente devido a problemas de desempenho e otimização. Foi utilizado apenas nas indústrias de cinema e televisão. Mas o lançamento de uma nova geração de placas gráficas tornou possível pela primeira vez usar essa abordagem em videogames.

O traçado de raios é uma tecnologia de renderização que cria efeitos de iluminação mais realistas. Ela repete os princípios da propagação da luz em um ambiente real. Os raios emitidos por uma fonte de luz se comportam da mesma maneira que os fótons. Eles são refletidos das superfícies em uma direção arbitrária. Ao mesmo tempo, ao entrar na câmera, os raios refletidos ou diretos transmitem informações visuais sobre a superfície da qual são refletidos (por exemplo, comunicam sua cor). Muitos projetos com o E3 2019 suportam essa tecnologia.

3 - Tipos de fontes de luz

3.1 - Luz pontual

Emite luz em todas as direções, como uma lâmpada normal na vida real.


Documentação irreal do mecanismo

3.2 - Destaque

Emite luz a partir de um ponto, enquanto a luz se espalha como um cone. Exemplo da vida real: uma lanterna.


Documentação irreal do mecanismo

3.3 - Luz da área

Emite luz direta de um caminho específico (como um retângulo ou círculo). Essa luz carrega muito o processador, porque o computador calcula todos os pontos que emitem luz.


Documentação do Unity

3.4 - Luz direcional

Simula o sol ou outra fonte de luz distante. Todos os raios se movem em uma direção e podem ser considerados paralelos.


Documentação do Unity

3.5 - Luz emissora

A fonte de luz emissora ou os materiais emissores (Materiais emissivos no UE4) criam de maneira fácil e eficaz a ilusão de que o material emite luz. Há um efeito de desfoque da luz - é visível se você observar um objeto muito brilhante.


Documentação irreal do mecanismo

3.6 - Luz ambiente

A cena de Doom 3 é iluminada por lâmpadas nas paredes, o motor cria sombras. Se a superfície está na sombra, ele a pinta de preto. Na vida real, partículas de luz (fótons) podem ser refletidas nas superfícies. Nos sistemas de renderização mais avançados, a luz é transformada em texturas ou calculada em tempo real (iluminação global). Mecanismos de jogos mais antigos - como o ID Tech 3 (Doom) - consumiam muitos recursos para calcular a iluminação indireta. Para resolver o problema com a falta de iluminação indireta, foi utilizada luz dispersa. E todas as superfícies estavam pelo menos ligeiramente iluminadas.


Motor Doom 3 (motor IdTech 4)

3.7 - Iluminação global

A iluminação global é uma tentativa de calcular o reflexo da luz de um objeto para outro. Esse processo carrega o processador muito mais que a luz difusa.


Documentação irreal do mecanismo

IV - Design de luz em videogames

A composição visual (a posição da luz, seus ângulos, cores, campo de visão, movimento) tem uma grande influência na maneira como os usuários percebem o ambiente de jogo.

O designer Will Wright, da GDC, falou sobre os recursos da composição visual em um ambiente de jogo. Em particular, direciona a atenção do jogador para elementos importantes - isso acontece ajustando a saturação, brilho e cor dos objetos no nível.
Tudo isso afeta a jogabilidade.

A atmosfera certa envolve emocionalmente o jogador. Os designers devem cuidar disso enquanto criam integridade visual.

Maggie Safe El-Nasr realizou várias experiências - convidou usuários que não estão familiarizados com os atiradores de FPS para jogar no Unreal Tournament. Devido ao mau design da iluminação, os jogadores viram inimigos tarde demais e morreram rapidamente. Eles ficaram chateados e na maioria dos casos abandonaram o jogo.

, , , . , , . .


-,

1 —

Uncharted 4
«100 » (100 Things Every Designer Needs to Know About People) .

— , , , . .

Uncharted — . , , , .



Until Dawn
. : « , . , , , . , ».

, , .

2 — /

Resident Evil 2 Remake

RE2 Remake . -, . — . - .



Dark Souls I

(Tomb of the Giants) — . , , . , — .

, . , , . , : .

3 —

Prey

, , , . , , . , . , .



Alien Isolation

«» , . — - .

4 —

Splinter Cell: Blacklist

, .

, . Splinter Cell « » — , .



Mark of the Ninja

Mark of the Ninja . - : «, , , . , , , — » ( Mark of the Ninja's five stealth design rules).

5 — /

Alan Wake

Alan Wake — . . — , . , , . .

, .



A Plague Tale: Innocence

Asobo Studio . , , , .

6 — /

Deus Ex: Mankind Divided

Deus Ex , , . , . , , , . , . , .



Hollow Knight

Team Cherry , .

, , , , . , ( ) . .

7 —

Assassin's Creed Odyssey

«». , .

— . , . .

— , .



Don't Starve

Don't Starve — . , . .

, , . , , . . . , .

V —

, , , , . , — . . .

— . .

. — , .

Referências

1. Seif El-Nasr, M., Miron, K. e Zupko, J. (2005). Iluminação inteligente para uma melhor experiência de jogo. Anais da Interação Computador-Humano 2005, Portland, Oregon.
2. Seif El-Nasr, M. (2005). Iluminação inteligente para ambientes de jogos. Journal of Game Development, 1 (2),
3. Birn, J. (Ed.) (2000). Iluminação e renderização digital. Cavaleiros novos, Indianapolis.
4. Calahan, S. (1996). Contar histórias através da iluminação: uma perspectiva de computação gráfica. Notas do Curso Siggraph.
5. Seif El-Nasr, M. e Rao, C. (2004). Direcionando visualmente a atenção do usuário em ambientes 3D interativos. Siggraph Poster Session.
6. Reid, F. (1992). O Manual de Iluminação de Palco. A&C Black, Londres.
7. Reid, F. (1995). Iluminando o Palco. Focal Press, Boston.
8. Petr Dyachikhin (2017), Tecnologia moderna de videogame: tendências e inovações, tese de bacharel, Universidade de Ciências Aplicadas de Savonia
9. Adorama learning center (2018), Basic Cinematography Lighting Techniques, de (https://www.adorama.com/alc/basic-cinematography-lighting-techniques)
10. Seif El-Nasr, M., Niendenthal, S. Knez, I., Almeida, P. e Zupko, J. (2007), Dynamic Lighting for Tension in Games, a revista internacional de pesquisa de jogos de computador
11. Yakup Mohd Rafee, Ph.D. (2015), Explorando a pintura de Georges de la Tour baseada na teoria do claro-escuro e tenebrismo, University Malaysia Sarawak
12. Sophie-Louise Millington (2016), Iluminação no jogo: a iluminação influencia a interação e a emoção do jogador em um ambiente?, University of Derby
13. Prof. Stephen A. Nelson (2014), Propriedades da luz e exame de substâncias isotrópicas, Universidade de Tulane
14. Licença Creative Commons Attribution-ShareAlike (2019), The Dark Mod, de (https://en.wikipedia.org/wiki/The_Dark_Mod)