Cómo la iluminación afecta el diseño del juego y la experiencia de juego



En previsión de la PS5 y el Proyecto Scarlett, que admitirá el trazado de rayos, pensé en la iluminación en los juegos. Encontré material donde el autor explica qué es la luz, cómo afecta el diseño, cambia la jugabilidad, la estética y la experiencia. Todo con ejemplos y capturas de pantalla. Durante el juego, no prestas atención de inmediato a esto.

Introduccion


La iluminación es necesaria no solo para que el jugador pueda distinguir la escena (aunque esto es muy importante). La luz afecta las emociones. Muchas técnicas de iluminación en teatro, cine y arquitectura se utilizan para mejorar el componente emocional. ¿Por qué no tomar prestados estos principios de los diseñadores de juegos? La conexión entre la imagen y la respuesta emocional proporciona otra herramienta poderosa que te ayuda a trabajar con el personaje, la narrativa, el sonido, la mecánica del juego, etc. En este caso, la interacción de la luz con la superficie le permite afectar el brillo, el color, el contraste, la sombra y otros efectos. Todo esto se traduce en una base que todo diseñador debe dominar.

El propósito de este material es determinar cómo el diseño de iluminación afecta la estética del juego y la experiencia del usuario. Analizaremos la naturaleza de la luz y cómo se usa en otras áreas del arte para analizar su papel en los videojuegos.


Lago de los cisnes, Alexander Ekman

I - La naturaleza de la luz.


“Espacio, luz y orden. Estas son las cosas que las personas necesitan tanto como necesitan un pedazo de pan o pasar la noche ”, - Le Corbusier.

La luz natural nos guía y nos acompaña desde el momento del nacimiento. Es necesario; establece nuestro ritmo natural. La luz controla los procesos de nuestro cuerpo y afecta el reloj biológico. Entenderemos qué son el flujo luminoso, la intensidad de la luz, el color y los puntos focales. Y luego entenderemos en qué consiste la luz y cómo se comporta.

1 - Lo que ve el ojo humano


La luz es parte del espectro electromagnético percibido por el ojo. En esta área, las longitudes de onda varían de 380 a 780 nm. Durante el día, distinguimos los colores gracias a los conos, y por la noche el ojo usa bastones, y solo vemos gradaciones de gris.

Las principales propiedades de la luz visible son dirección, intensidad, frecuencia y polarización. Su velocidad en el vacío es de 300,000,000 m / s, y esta es una de las constantes físicas fundamentales.


Espectro electromagnético visible

2 - Dirección de distribución


No hay sustancia en el vacío, y la luz viaja directamente. Sin embargo, se comporta de manera diferente cuando se expone al agua, el aire y otras sustancias. Al entrar en contacto con la sustancia, parte de la luz se absorbe y se convierte en energía térmica. En una colisión con un material transparente, parte de la luz también se absorbe, pero el resto pasa. Desde objetos lisos como un espejo, se refleja la luz. Si la superficie del objeto es desigual, la luz se dispersa.


Dirección de la luz

3 - Características básicas


Flujo luminoso. La cantidad de luz emitida por la fuente de luz.
Unidad de medida: lm (lumen).



El poder de la luz. La cantidad de luz transportada en una dirección particular.
Unidad de medida: cd (candela).



Iluminación La cantidad de flujo luminoso incidente en la superficie.
Iluminación = flujo luminoso (lm) / área (m2).

Unidad de medida: lx (lux).



Brillo Esta es la única característica básica de la luz que percibe el ojo humano. Por un lado, tiene en cuenta el brillo de la fuente de luz, por otro lado, la superficie, lo que significa que depende en gran medida del grado de reflexión (color y superficie).
Unidad de medida: cd / m2.



4 - Temperatura de color


La temperatura de color se mide en Kelvin y muestra el color de una fuente de luz particular. El físico británico William Kelvin calentó un trozo de carbón. Él brillaba, brillando en diferentes colores que correspondían a diferentes temperaturas. Al principio, el carbón brillaba rojo oscuro, pero a medida que se calentaba, el color cambió a amarillo brillante. A la temperatura máxima, la luz emitida se volvió azul-blanca.


Luz natural, 24 horas, Simon Lakey

II - Técnicas de diseño ligero


En esta sección, analizaremos qué patrones de iluminación se pueden utilizar para influir en la expresividad del contenido / rango visual. Para hacer esto, identificaremos las similitudes y diferencias en las técnicas de iluminación utilizadas por los artistas y diseñadores de iluminación.

1 - Chiaroscuro y Shadebism


El claroscuro es uno de los conceptos de la teoría del arte, que se relaciona con la distribución de la iluminación. Úselo para mostrar transiciones de tono para transmitir volumen y estado de ánimo. Georges de Latour es conocido por su trabajo con claroscuro nocturno y escenas iluminadas con velas. Ninguno de sus artistas predecesores trabajó a través de tales transiciones de manera tan experta. La luz y la sombra juegan un papel crucial en sus obras y son parte de la composición en las variaciones más variadas y, a menudo, alternativas. El estudio de las pinturas de de Latour ayuda a comprender el uso de la luz y sus propiedades.


Georges de Latour "La penitente María Magdalena", 1638-1643

a - Alto contraste


En esta imagen, una cara brillante y la ropa se destacan sobre un fondo oscuro. Debido al alto contraste de tonos, la atención del espectador se centra en esta parte de la imagen. En realidad, no habría tal contraste. La distancia entre la cara y la vela es mayor que entre la vela y las manos. Sin embargo, en comparación con la cara, vemos que el tono y el contraste en las manos están apagados. Georges de Latour utiliza diferentes contrastes para atraer la atención de un observador.



b - Contorno y ritmo de luz.


Debido a la gran diferencia de tonos, los contornos aparecen en algunas áreas alrededor de los bordes de la figura. Incluso en las partes oscuras de la imagen, al artista le gustaba usar diferentes tonos para enfatizar los límites del objeto. La luz no se concentra en un área, se desliza hacia abajo: desde la cara hasta las piernas.



c - Fuente de luz


En la mayoría de las obras, Georges de Latour utiliza velas o lámparas como fuente de luz. La imagen muestra una vela encendida, pero ya sabemos que el claroscuro no depende de ella. Georges de Latour puso su rostro contra un fondo oscuro y una vela para crear una transición nítida entre los tonos. Para un alto contraste, los tonos claros son adyacentes a los oscuros, logrando el efecto óptimo.



d - claroscuro como composición de formas geométricas


Si simplificamos la luz y la sombra en este trabajo, veremos las formas geométricas básicas. La unidad de los tonos claros y oscuros forma una composición simple. Establece indirectamente la sensación de espacio en el que la posición de los objetos y figuras muestra el primer plano y el fondo, creando tensión y energía.



2 - Técnicas básicas de iluminación cinematográfica.


2.1 - Iluminación desde tres puntos


Una de las formas más populares y exitosas de resaltar cualquier objeto es la iluminación desde tres puntos, un esquema clásico de Hollywood. Esta técnica le permite transmitir el volumen de un artículo.

Luz de dibujo (iluminación clave, es decir, la fuente de luz principal)
Esta suele ser la luz más poderosa en cada escena. Puede venir de cualquier parte, su fuente puede ser lateral o detrás del objeto (Jeremy Byrne Digital Lighting and Rendering).



Iluminación de relleno (Iluminación de relleno, es decir, luz para controlar los contrastes)
Por el nombre, es obvio que se usa para "llenar" y eliminar las áreas oscuras que crea la luz de la pintura. La luz de relleno es notablemente menos intensa y se encuentra en ángulo con respecto a la fuente de luz principal.



Luz de fondo (retroiluminación, es decir, separador de fondo)
Se utiliza para transmitir el volumen de la escena. Separa el objeto del fondo. Al igual que la luz de relleno, el fondo es menos intenso y cubre una gran área del objeto.



2.2 - Parte inferior


Debido al movimiento del sol, estamos acostumbrados a ver personas iluminadas desde cualquier ángulo, pero no desde abajo. Este método se ve muy inusual.


Frankenstein, James Whale, 1931

2.3 - Volver


El objeto está ubicado entre la fuente de luz y el espectador. Debido a esto, aparece un resplandor alrededor del objeto, y el resto de sus partes permanecen a la sombra.


"Alien", Steven Spielberg, 1982

2.4 - Lateral


Dicha iluminación se utiliza para iluminar la escena desde un lado. Crea un contraste claro, muestra texturas y enfatiza los contornos del objeto. Este método está cerca de la técnica del claroscuro.


Blade Runner, Ridley Scott, 1982

2.5 - Iluminación práctica


Esta es una iluminación real en la escena, es decir, lámparas, velas, pantalla de TV y otros. Dicha luz adicional se puede utilizar para mejorar la intensidad de la luz.


Barry Lyndon, Stanley Kubrick, 1975

2.6 - Luz reflejada


La luz de una fuente poderosa es dispersada por un reflector o superficie, como una pared o techo. Por lo tanto, la luz cubre un área grande y se extiende de manera más uniforme.


El caballero oscuro: El renacimiento de la leyenda, Christopher Nolan, 2012

2.7 - Luz dura y suave


La principal diferencia entre la luz dura y suave es el tamaño de la fuente de luz en relación con el objeto. El sol es la fuente de luz más grande del sistema solar. Sin embargo, está a 90 millones de kilómetros de nosotros, lo que significa que es una pequeña fuente de luz. Crea sombras duras y, en consecuencia, luz dura. Si aparecen nubes, todo el cielo se convierte en una gran fuente de luz, y las sombras son más difíciles de distinguir. Entonces, surge una luz suave.


Ejemplos 3D de LEGO, Juan Prada, 2017

2.8 - Clave alta y baja


La iluminación de alta intensidad se usa para crear escenas muy vívidas. A menudo está cerca de la exposición sobreexpuesta. Todas las fuentes de luz son aproximadamente iguales en potencia.
A diferencia de la iluminación de clave alta, con la clave baja la escena es muy oscura y puede haber una fuente de luz potente. El papel principal se da a las sombras, no a la luz, para transmitir una sensación de suspenso o drama.


THX 1138, George Lucas, 1971

2.9 - Iluminación motivada


Tal iluminación imita la luz natural: solar, luz de luna, farolas, etc. Se utiliza para mejorar la iluminación práctica. Las técnicas especiales ayudan a que la iluminación motivada sea natural, como los filtros (gobos) para crear el efecto de las ventanas con cortinas.


"Drive", Nicholas Winding Refn, 2011

2.10 - Luz exterior


Puede ser la luz del sol, la luz de la luna o las luces de la calle que son visibles en la escena.


“Cosas muy extrañas. Temporada 3, los hermanos Duffer, 2019

III - Conceptos básicos de renderizado


Los diseñadores de niveles reconocen la importancia de la iluminación y la utilizan para lograr una cierta percepción de la escena. Para resaltar el nivel y lograr sus objetivos visuales deseados, necesitan determinar las fuentes de luz estática, sus ángulos de propagación y colores. Establecen una cierta atmósfera y la visión general necesaria. Pero no todo es tan simple, porque la iluminación depende de tales características técnicas, por ejemplo, de la potencia del procesador. Por lo tanto, hay dos tipos de iluminación: iluminación precalculada y renderizado en tiempo real.

1 - Iluminación precalculada


Los diseñadores usan iluminación estática para establecer las características de iluminación para cada fuente, incluida su posición, ángulo y color. Como regla general, la iluminación global en tiempo real no es posible debido al rendimiento.

La iluminación global estática precalculada se puede utilizar en la mayoría de los motores, incluidos Unreal Engine y Unity. El motor "hornea" dicha iluminación en una textura especial, el llamado "mapa de iluminación" (mapa de luz, mapa de luz). Estos mapas de luz se almacenan junto con otros archivos de mapas, y el motor accede a ellos cuando renderiza la escena.


La misma escena: sin iluminación (izquierda), solo con iluminación directa (en el centro) y con iluminación global indirecta (derecha). Obra de arte con Unity Learn

Además de los mapas de luz, hay cartas de sombra, que, respectivamente, se utilizan para crear sombras. Primero, todo se dibuja teniendo en cuenta la fuente de luz: produce una sombra que refleja la profundidad de píxeles de la escena. El mapa de profundidad de píxeles resultante se denomina mapa de sombras. Contiene información sobre la distancia entre la fuente de luz y los objetos más cercanos para cada píxel. Luego se realiza el renderizado, donde cada píxel de la superficie se verifica con un mapa de sombras. Si la distancia entre el píxel y la fuente de luz es mayor que la registrada en el mapa de sombras, entonces el píxel está en la sombra.


El algoritmo para aplicar el mapa de sombras. Ilustración con OpenGl-tutorial

2 - Representación en tiempo real


Uno de los modelos clásicos de iluminación en tiempo real se llama modelo Lambert (en honor del matemático suizo Johann Heinrich Lambert). En la representación en tiempo real, la GPU generalmente envía objetos de uno en uno. Este método utiliza la visualización de un objeto (su posición, ángulo de rotación y escala) para determinar cuál de sus superficies necesita ser dibujada.

En el caso de la iluminación Lambert, la luz emana de todos los puntos de la superficie en todas las direcciones. Esto no tiene en cuenta algunas sutilezas, por ejemplo, la reflexión (artículo de Chandler Prall). Para hacer que la escena parezca más realista, se superponen efectos adicionales en el modelo de Lambert: deslumbramiento, por ejemplo.


Sombreado de Lambert en el ejemplo de una esfera. Ilustración de los materiales de Peter Dyachikhin

La mayoría de los motores modernos (Unity, Unreal Engine, Frostbite y otros) usan renderizado físicamente correcto (renderizado basado en física, PBR) y sombreado (artículo de Lucas Orsvarn). El sombreado PBR ofrece métodos y parámetros más intuitivos y convenientes para describir la superficie. En Unreal Engine, los materiales PBR tienen los siguientes parámetros:

  • Color base: la textura de la superficie real.
  • Rugosidad: cuán rugosa es la superficie.
  • Metálico: si la superficie es metálica.
  • Especular (especularidad): la cantidad de resplandor en la superficie.


Sin PBR (izquierda), PBR (derecha). Ilustraciones con Meta 3D studio

Sin embargo, hay otro enfoque para el renderizado: el trazado de rayos. Esta tecnología no se había considerado anteriormente debido a problemas de rendimiento y optimización. Fue utilizado solo en las industrias de cine y televisión. Pero el lanzamiento de una nueva generación de tarjetas gráficas hizo posible por primera vez utilizar este enfoque en los videojuegos.

El trazado de rayos es una tecnología de renderizado que crea efectos de iluminación más realistas. Ella repite los principios de propagación de la luz en un entorno real. Los rayos emitidos por una fuente de luz se comportan de la misma manera que los fotones. Se reflejan desde las superficies en una dirección arbitraria. Al mismo tiempo, al ingresar a la cámara, los rayos reflejados o directos transmiten información visual sobre la superficie desde la cual se reflejan (por ejemplo, comunican su color). Muchos proyectos con E3 2019 apoyarán esta tecnología.

3 - Tipos de fuentes de luz


3.1 - Punto de luz


Emite luz en todas las direcciones, como una bombilla normal en la vida real.


Documentación irreal del motor

3.2 - Spotlight


Emite luz desde un punto, mientras que la luz se extiende como un cono. Ejemplo de la vida real: una linterna.


Documentación irreal del motor

3.3 - Luz de área


Emite luz directa desde una ruta específica (como un rectángulo o círculo). Tal luz carga mucho el procesador, porque la computadora calcula todos los puntos que emiten luz.


Documentación de unidad

3.4 - Luz direccional


Simula el sol u otra fuente de luz distante. Todos los rayos se mueven en una dirección y pueden considerarse paralelos.


Documentación de unidad

3.5 - Luz emisiva


La fuente de luz emisora ​​o los materiales emisores (Materiales emisivos en UE4) crean fácil y efectivamente la ilusión de que el material emite luz. Hay un efecto borroso de la luz: es visible si miras un objeto muy brillante.


Documentación irreal del motor

3.6 - Luz ambiental


La escena de Doom 3 está iluminada por lámparas en las paredes, el motor crea sombras. Si la superficie está en sombra, la pinta de negro. En la vida real, las partículas de luz (fotones) pueden reflejarse en las superficies. En sistemas de renderizado más avanzados, la luz se transforma en texturas o se calcula en tiempo real (iluminación global). Los motores de juegos más antiguos, como ID Tech 3 (Doom), usaron demasiados recursos para calcular la iluminación indirecta. Para resolver el problema con la falta de iluminación indirecta, se utilizó luz dispersa. Y todas las superficies estaban al menos ligeramente iluminadas.


Motor Doom 3 (motor IdTech 4)

3.7 - Iluminación global


La iluminación global es un intento de calcular el reflejo de la luz de un objeto a otro. Este proceso carga el procesador mucho más que la luz difusa.


Documentación irreal del motor

IV - Diseño de luces en videojuegos


La composición visual (la posición de la luz, sus ángulos, colores, campo de visión, movimiento) tiene una gran influencia en cómo los usuarios perciben el entorno de juego.

El diseñador Will Wright de GDC habló sobre las características de la composición visual en un entorno de juego. En particular, dirige la atención del jugador hacia elementos importantes; esto sucede ajustando la saturación, el brillo y el color de los objetos en el nivel.
Todo esto afecta la jugabilidad.

La atmósfera adecuada involucra emocionalmente al jugador. Los diseñadores deben ocuparse de esto mientras crean integridad visual.

Maggie Safe El-Nasr realizó varios experimentos: invitó a los usuarios que no están familiarizados con los tiradores de FPS a jugar en el Unreal Tournament. Debido al diseño deficiente de iluminación, los jugadores detectaron enemigos demasiado tarde y murieron rápidamente. Estaban molestos y en la mayoría de los casos abandonaron el juego.

, , , . , , . .


-,

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 —


, , , , . , — . . .

— . .

. — , .

Referencias


  1. Seif El-Nasr, M., Miron, K. and Zupko, J. (2005). Intelligent Lighting for a Better Gaming Experience. Proceedings of the Computer-Human Interaction 2005, Portland, Oregon.
  2. Seif El-Nasr, M. (2005). Intelligent Lighting for Game Environments. Journal of Game Development, 1(2),
  3. Birn, J. (Ed.) (2000). Digital Lighting & Rendering. New Riders, Indianapolis.
  4. Calahan, S. (1996). Storytelling through lighting: a computer graphics perspective. Siggraph Course Notes.
  5. Seif El-Nasr, M. and Rao, C. (2004). Visually Directing User's Attention in Interactive 3D Environments. Siggraph Poster Session.
  6. Reid, F. (1992). El manual de iluminación escénica. A&C Black, Londres.
  7. Reid, F. (1995). Iluminando el escenario. Focal Press, Boston.
  8. Petr Dyachikhin (2017), Tecnología moderna de videojuegos: Tendencias e innovaciones, Tesis de licenciatura, Universidad de ciencias aplicadas de Savonia
  9. Centro de aprendizaje Adorama (2018), Técnicas básicas de iluminación de cinematografía, de (https://www.adorama.com/alc/basic-cinematography-lighting-techniques)
  10. Seif El-Nasr, M., Niendenthal, S. Knez, I., Almeida, P. y Zupko, J. (2007), Dynamic Lighting for Tension in Games, la revista internacional de investigación de juegos de computadora
  11. Yakup Mohd Rafee, Ph.D. (2015), Explorando la pintura de Georges de la Tour basada en el claroscuro y la teoría del tenebrismo, Universidad Malasia Sarawak
  12. Sophie-Louise Millington (2016), Iluminación en el juego: ¿Influye la iluminación en la interacción y la emoción del jugador en un entorno?, Universidad de Derby
  13. Prof. Stephen A. Nelson (2014), Propiedades de la luz y examen de sustancias isotrópicas, Universidad de Tulane
  14. Creative Commons Attribution-ShareAlike License (2019), The Dark Mod, de (https://en.wikipedia.org/wiki/The_Dark_Mod)

Source: https://habr.com/ru/post/471806/


All Articles