{"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\/es\/blog\/news\/kak-osveshhenie-vliyaet-na-gejmdizajn-i-igrovoj-opyt","title":{"rendered":"C\u00f3mo la iluminaci\u00f3n afecta al dise\u00f1o de juegos y la experiencia de juego","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

\"C\u00f3mo
\n
\nA la espera de la PS5 y Project Scarlett, que soportar\u00e1n trazado de rayos, he reflexionado sobre la iluminaci\u00f3n en los videojuegos. Encontr\u00e9 un material donde el autor explica qu\u00e9 es la luz, c\u00f3mo afecta al dise\u00f1o, cambia la jugabilidad, la est\u00e9tica y la experiencia. Todo con ejemplos y capturas de pantalla. Durante el juego, no se presta atenci\u00f3n a esto de inmediato.
\n<\/a><\/noindex><\/p>\n

Introducci\u00f3n<\/h2>\n

\nLa iluminaci\u00f3n no solo es necesaria para que el jugador pueda ver la escena (aunque eso es muy importante). La luz influye en las emociones. Muchos trucos de iluminaci\u00f3n en el teatro, cine y arquitectura se utilizan para intensificar el componente emocional. \u00bfPor qu\u00e9 no podr\u00edan estos principios ser adoptados por los dise\u00f1adores de juegos? La conexi\u00f3n entre la imagen y la respuesta emocional proporciona otra poderosa herramienta que ayuda a trabajar con el personaje, la narrativa, el sonido, las mec\u00e1nicas de juego, y as\u00ed sucesivamente. Al mismo tiempo, la interacci\u00f3n de la luz con la superficie permite influir en el brillo, color, contraste, sombras y otros efectos. Todo esto se convierte en la base que cada dise\u00f1ador debe dominar.<\/p>\n

El objetivo de este material es determinar c\u00f3mo el dise\u00f1o de iluminaci\u00f3n influye en la est\u00e9tica del juego y la experiencia del usuario. Analizaremos la naturaleza de la luz y c\u00f3mo se utiliza en otras \u00e1reas del arte para analizar su papel en los videojuegos.<\/p>\n

\"C\u00f3mo
\nEl lago de los cisnes, Alexander Ekman<\/i><\/p>\n

I \u2014 La naturaleza de la luz<\/h2>\n

\n\u00abEspacio, luz y orden. Estas son las cosas de las que las personas necesitan tanto como necesitan un trozo de pan o un refugio\u00bb, \u2014 Le Corbusier.<\/p>\n

La luz natural nos gu\u00eda y acompa\u00f1a desde el momento del nacimiento. Es necesaria, establece nuestro ritmo natural. La luz controla los procesos de nuestro organismo e influye en nuestro reloj biol\u00f3gico. Examinaremos qu\u00e9 es el flujo luminoso, la intensidad de la luz, color y puntos focales. Y entonces comprenderemos de qu\u00e9 est\u00e1 compuesta la luz y c\u00f3mo se comporta.<\/p>\n

1 \u2014 Lo que ve el ojo humano<\/h3>\n

\nLa luz es parte del espectro electromagn\u00e9tico, percibida por el ojo. En esta secci\u00f3n, las longitudes de onda est\u00e1n en el rango de 380 a 780 nm. Durante el d\u00eda, distinguimos colores gracias a los conos, y de noche el ojo utiliza los bastones, por lo que solo vemos gradaciones de gris.<\/p>\n

Las propiedades principales de la luz visible son direcci\u00f3n, intensidad, frecuencia y polarizaci\u00f3n. Su velocidad en el vac\u00edo es de 300 000 000 m\/s, y esta es una de las constantes f\u00edsicas fundamentales.<\/p>\n

\"C\u00f3mo
\nEspectro electromagn\u00e9tico visible<\/i><\/p>\n

2 \u2014 Direcci\u00f3n de propagaci\u00f3n<\/h3>\n

\nEn el vac\u00edo no hay materia y la luz se propaga en l\u00ednea recta. Sin embargo, se comporta de manera diferente al chocar con el agua, el aire y otras sustancias. Al entrar en contacto con una sustancia, parte de la luz se absorbe y se convierte en energ\u00eda t\u00e9rmica. Al colisionar con un material transparente, parte de la luz tambi\u00e9n se absorbe, pero el resto pasa a trav\u00e9s. La luz se refleja en objetos lisos, como un espejo. Si la superficie del objeto es irregular, la luz se dispersa.<\/p>\n

\"C\u00f3mo\"C\u00f3mo
\nDirecci\u00f3n de propagaci\u00f3n de la luz<\/i><\/p>\n

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

\nFlujo luminoso. Cantidad de luz emitida por una fuente de luz.
\nUnidad de medida: lm (l\u00famenes).<\/p>\n

\"C\u00f3mo
\n
\nIntensidad luminosa.<\/b> Cantidad de luz transportada en una direcci\u00f3n espec\u00edfica.
\nUnidad de medida: cd (candela).<\/p>\n

\"C\u00f3mo
\n
\nIluminaci\u00f3n. <\/b>Cantidad de flujo luminoso que incide sobre una superficie.
\nIluminaci\u00f3n = flujo luminoso (lm) \/ \u00e1rea (m2).<\/p>\n

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

\"C\u00f3mo
\n
\nBrillo.<\/b> Esta es la \u00fanica caracter\u00edstica b\u00e1sica de la luz que el ojo humano percibe. Por un lado, considera el brillo de la fuente de luz, y por otro, la superficie, y por lo tanto, depende mucho del grado de reflexi\u00f3n (del color y la superficie).
\nUnidad de medida: cd\/m2.<\/p>\n

\"C\u00f3mo
\n <\/p>\n

4 \u2014 Temperatura de color<\/h3>\n

\nLa temperatura de color se mide en Kelvin y refleja el color de una fuente de luz espec\u00edfica. El f\u00edsico brit\u00e1nico William Kelvin calent\u00f3 un trozo de carb\u00f3n. Se volvi\u00f3 incandescente, brillando en diferentes colores que correspond\u00edan a diferentes temperaturas. Primero, el carb\u00f3n brill\u00f3 en rojo oscuro, pero a medida que se calentaba, el color cambi\u00f3 a amarillo brillante. A la temperatura m\u00e1xima, la luz emitida se volvi\u00f3 blanco-azulada.<\/p>\n

\"C\u00f3mo\"C\u00f3mo
\nLuz natural, 24 horas, Simon Leaky<\/i><\/p>\n

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

\nEn esta secci\u00f3n, examinaremos qu\u00e9 patrones de iluminaci\u00f3n se pueden utilizar para influir en la expresividad del contenido \/ visual. Para ello, definiremos las similitudes y diferencias entre las t\u00e9cnicas de iluminaci\u00f3n utilizadas por artistas y dise\u00f1adores de luz.<\/p>\n

1 \u2014 Claroscuro y tenebrismo<\/h3>\n

\nLa luz y la sombra son uno de los conceptos de la teor\u00eda del arte que se refiere a la distribuci\u00f3n de iluminaciones. Con su ayuda se representan las transiciones de tono para transmitir volumen y estado de \u00e1nimo. Georges de La Tour es conocido por sus obras que exploran la luz y la sombra nocturna, y las escenas iluminadas por la llama de una vela. Ninguno de sus precursores artistas hab\u00eda trabajado las transiciones de esta manera tan magistral. La luz y la sombra desempe\u00f1an un papel fundamental en sus obras y son parte de la composici\u00f3n en una variedad de matices, a menudo alternativos. El estudio de las pinturas de La Tour ayuda a comprender el uso de la luz y sus propiedades.<\/p>\n

\"C\u00f3mo
\nGeorges de La Tour \"Mar\u00eda Magdalena arrepentida\", 1638-1643.<\/i><\/p>\n

a \u2014 Alta contrastaci\u00f3n<\/h4>\n

\nEn esta pintura, el rostro claro y la vestimenta destacan sobre un fondo oscuro. Gracias a la alta contrastaci\u00f3n de tonos, la atenci\u00f3n del espectador se centra en esta parte de la imagen. En realidad, no habr\u00eda tal contraste. La distancia entre el rostro y la vela es mayor que entre la vela y las manos. Sin embargo, comparando con el rostro, vemos que el tono y la contrastaci\u00f3n en las manos est\u00e1n atenuados. Georges de La Tour utiliza diferentes niveles de contrastaci\u00f3n para atraer la atenci\u00f3n del observador.<\/p>\n

\"C\u00f3mo
\n <\/p>\n

b \u2014 Contorno y ritmo de la luz<\/h4>\n

\nDebido a la alta diferencia de tonos, en algunas \u00e1reas en los bordes de la figura se generan contornos. Incluso en las partes oscuras de la pintura, al artista le gustaba usar diferentes tonos para resaltar los l\u00edmites del objeto. La luz no est\u00e1 concentrada en un solo lugar, desciende suavemente: desde el rostro hasta los pies.<\/p>\n

\"C\u00f3mo
\n<\/p>\n

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

\nEn la mayor\u00eda de las obras, Georges de La Tour utiliza velas o l\u00e1mparas como fuente de luz. En la pintura se muestra una vela encendida, pero ya sabemos que la luz y sombra aqu\u00ed no dependen de ella. Georges de La Tour posicion\u00f3 el rostro sobre un fondo oscuro y coloc\u00f3 la vela para crear un marcado contraste entre los tonos. Para una alta contrastaci\u00f3n, los tonos claros coexisten con los oscuros, logrando un efecto \u00f3ptimo.<\/p>\n

\"C\u00f3mo
\n<\/p>\n

d \u2014 Luz y sombra como composici\u00f3n de figuras geom\u00e9tricas<\/h4>\n

\nSi simplificamos la luz y la sombra en esta obra, veremos figuras geom\u00e9tricas b\u00e1sicas. La unidad de tonos claros y oscuros forma una composici\u00f3n sencilla. Indirectamente sugiere una sensaci\u00f3n de espacio, donde la disposici\u00f3n de los objetos y figuras muestra el primer y segundo plano, creando tensi\u00f3n y energ\u00eda.<\/p>\n

\"C\u00f3mo
\n<\/p>\n

2 \u2014 T\u00e9cnicas cinematogr\u00e1ficas b\u00e1sicas de iluminaci\u00f3n<\/h3>\n

<\/p>\n

2.1 \u2014 Iluminaci\u00f3n de tres puntos<\/h4>\n

\nUno de los m\u00e9todos m\u00e1s populares y efectivos para iluminar cualquier objeto es la iluminaci\u00f3n de tres puntos, un esquema cl\u00e1sico de Hollywood. Esta t\u00e9cnica permite transmitir volumen al objeto.<\/p>\n

Luz principal (Key Lighting, es decir, la fuente principal de luz)<\/b>
\nGeneralmente, es la luz m\u00e1s potente en cada escena. Puede venir de cualquier direcci\u00f3n, su fuente puede estar de lado o detr\u00e1s del objeto (Jeremy Birn, \"Iluminaci\u00f3n digital y renderizado\").<\/p>\n

\"C\u00f3mo
\n
\nLuz de relleno (Fill Lighting, es decir, luz para controlar contrastes)<\/b>
\nComo su nombre indica, se utiliza para 'rellenar' y eliminar las \u00e1reas oscuras que crea la luz principal. La luz de relleno es claramente menos intensa y se coloca en un \u00e1ngulo con respecto a la fuente principal de luz.<\/p>\n

\"C\u00f3mo
\n
\nLuz de fondo (Backlighting, es decir, separador de fondo)<\/b>
\nSe usa para dar volumen a la escena. Separa el objeto del fondo. Al igual que la luz de relleno, la luz de fondo es menos intensa y cubre una mayor \u00e1rea del objeto.<\/p>\n

\"C\u00f3mo
\n<\/p>\n

2.2 \u2014 Desde abajo<\/h4>\n

\nDebido al movimiento del sol, estamos acostumbrados a ver a las personas iluminadas desde cualquier \u00e1ngulo, excepto desde abajo. Este m\u00e9todo se ve muy inusual.<\/p>\n

\"C\u00f3mo
\n\u00abFrankenstein\u00bb, James Whale, 1931<\/i><\/p>\n

2.3 \u2014 Desde atr\u00e1s<\/h4>\n

\nEl objeto se sit\u00faa entre la fuente de luz y el espectador. Debido a esto, alrededor del objeto se genera un resplandor, mientras que el resto de sus partes queda en la sombra.<\/p>\n

\"C\u00f3mo
\n\u00abEncuentros Cercanos del Tercer Tipo\u00bb, Steven Spielberg, 1982<\/i><\/p>\n

2.4 \u2014 Desde un lado<\/h4>\n

\nEsta iluminaci\u00f3n se utiliza para iluminar la escena desde un costado. Crea un contraste n\u00edtido que muestra las texturas y resalta los contornos del objeto. Este enfoque es similar a la t\u00e9cnica de claroscuro.<\/p>\n

\"C\u00f3mo
\n\u00abBlade Runner\u00bb, Ridley Scott, 1982<\/i><\/p>\n

2.5 \u2014 Iluminaci\u00f3n pr\u00e1ctica<\/h4>\n

\nEsta es la iluminaci\u00f3n real en la escena, es decir, l\u00e1mparas, velas, pantallas de televisi\u00f3n y otros. Esta luz adicional se puede utilizar para aumentar la intensidad de la iluminaci\u00f3n.<\/p>\n

\"C\u00f3mo
\n\u00abBarry Lyndon\u00bb, Stanley Kubrick, 1975<\/i><\/p>\n

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

\nLa luz de una fuente poderosa se difunde mediante un reflector o alguna superficie, como paredes o techos. De esta manera, la luz cubre una mayor \u00e1rea y se distribuye de manera m\u00e1s uniforme.<\/p>\n

\"C\u00f3mo
\n\u00abEl Caballero Oscuro: La Leyenda Renace\u00bb, Christopher Nolan, 2012<\/i><\/p>\n

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

\nLa principal diferencia entre la luz dura y la luz suave es el tama\u00f1o de la fuente de luz en relaci\u00f3n con el objeto. El sol es la fuente de luz m\u00e1s grande del sistema solar. Sin embargo, est\u00e1 a 90 millones de kil\u00f3metros de nosotros, lo que significa que es una fuente de luz peque\u00f1a. Esto crea sombras duras y, por lo tanto, luz dura. Si aparecen nubes, todo el cielo se convierte en una enorme fuente de luz, lo que dificulta distinguir las sombras. As\u00ed, se genera luz suave.<\/p>\n

\"C\u00f3mo
\nEjemplos en 3D con LEGO, Joao Prada, 2017<\/i><\/p>\n

2.8 \u2014 Luz alta y baja<\/h4>\n

\nLa iluminaci\u00f3n de luz alta se utiliza para crear escenas muy brillantes. A menudo est\u00e1 cerca de la sobreexposici\u00f3n. Todas las fuentes de luz son aproximadamente iguales en potencia.
\nA diferencia de la iluminaci\u00f3n de luz alta, en la luz baja la escena est\u00e1 muy oscurecida, y puede haber una fuente de luz potente. La sombra desempe\u00f1a un papel principal, en lugar de la luz, para transmitir una sensaci\u00f3n de suspense o dramatismo.<\/p>\n

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

2.9 \u2014 Iluminaci\u00f3n motivada (Motivated Lighting)<\/h4>\n

\nEsta iluminaci\u00f3n imita la luz natural: luz solar, luz de luna, luces callejeras, etc. Se utiliza para realzar la iluminaci\u00f3n pr\u00e1ctica. T\u00e9cnicas especiales ayudan a hacer que la iluminaci\u00f3n motivada parezca natural, como filtros (gobo) para crear el efecto de ventanas cubiertas.<\/p>\n

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

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

\nEsto puede ser luz solar, luz de luna o luces callejeras que se ven en la escena.<\/p>\n

\"C\u00f3mo
\n\u00abStranger Things. Temporada 3\u00bb, hermanos Duffer, 2019<\/i><\/p>\n

III \u2014 Fundamentos de renderizado<\/h2>\n

\nLos dise\u00f1adores de niveles son conscientes de la importancia de la iluminaci\u00f3n y, con ella, logran una percepci\u00f3n espec\u00edfica de la escena. Para iluminar el nivel y alcanzar los objetivos visuales deseados, deben determinar las fuentes de luz est\u00e1ticas, sus \u00e1ngulos de propagaci\u00f3n y colores. Estas establecen una atm\u00f3sfera espec\u00edfica y la visibilidad necesaria. Pero no es tan simple, porque la iluminaci\u00f3n depende de especificaciones t\u00e9cnicas, como la potencia del procesador. Por lo tanto, existen dos tipos de iluminaci\u00f3n: iluminaci\u00f3n precomputada y renderizado en tiempo real.<\/p>\n

1 \u2014 Iluminaci\u00f3n precomputada (Precomputed lighting)<\/h3>\n

\nLos dise\u00f1adores utilizan iluminaci\u00f3n est\u00e1tica para establecer las caracter\u00edsticas de iluminaci\u00f3n de cada fuente, incluyendo su posici\u00f3n, \u00e1ngulo y color. Generalmente, implementar iluminaci\u00f3n global en tiempo real es inviable debido al rendimiento. <\/p>\n

La iluminaci\u00f3n global est\u00e1tica precalculada se puede utilizar en la mayor\u00eda de los motores, incluyendo Unreal Engine y Unity. El motor \"hornea\" esta iluminaci\u00f3n en una textura especial, conocida como \"mapa de luz\" (lightmap). Estos lightmaps se almacenan junto a otros archivos de mapa, y el motor los consulta al renderizar la escena. <\/p>\n

\"C\u00f3mo
\nLa misma escena: sin iluminaci\u00f3n (a la izquierda), solo con iluminaci\u00f3n directa (en el medio) y con iluminaci\u00f3n global indirecta (a la derecha). Ilustraciones de Unity Learn.<\/i><\/p>\n

Adem\u00e1s de los lightmaps, existen mapas de sombras, que se utilizan para crear sombras. Primero, se renderiza todo considerando la fuente de luz; esta genera una sombra que refleja la profundidad del p\u00edxel de la escena. El mapa de profundidad del p\u00edxel resultante se llama mapa de sombras. Contiene informaci\u00f3n sobre la distancia entre la fuente de luz y los objetos m\u00e1s cercanos a ella para cada p\u00edxel. Luego se lleva a cabo el renderizado, donde cada p\u00edxel de la superficie se compara con el mapa de sombras. Si la distancia entre el p\u00edxel y la fuente de luz es mayor a la que se registra en el mapa de sombras, el p\u00edxel se encuentra en la sombra.<\/p>\n

\"C\u00f3mo
\nAlgoritmo de aplicaci\u00f3n del mapa de sombras. Ilustraci\u00f3n de OpenGl-tutorial.<\/i><\/p>\n

2 \u2014 Renderizado en tiempo real.<\/h3>\n

\nUno de los modelos cl\u00e1sicos de iluminaci\u00f3n para tiempo real se llama modelo de Lambert (en honor al matem\u00e1tico suizo Johann Heinrich Lambert). Al renderizar en tiempo real, la GPU generalmente env\u00eda los objetos uno por uno. Este m\u00e9todo utiliza la representaci\u00f3n del objeto (su posici\u00f3n, \u00e1ngulo de rotaci\u00f3n y escala) para determinar qu\u00e9 superficie debe ser renderizada. <\/p>\n

En el caso de la iluminaci\u00f3n de Lambert, la luz emana de cada punto de la superficie en todas direcciones. No se toman en cuenta ciertos detalles, como los reflejos (art\u00edculo de Chandler Pralla). Para que la escena se vea m\u00e1s realista, se superponen efectos adicionales al modelo de Lambert, como los destellos.<\/p>\n

\"C\u00f3mo
\nSombreado de Lambert usando una esfera. Ilustraci\u00f3n de los materiales de Petr D'yachikhin.<\/i><\/p>\n

La mayor\u00eda de los motores modernos (Unity, Unreal Engine, Frostbite y otros) utilizan renderizado f\u00edsicamente correcto (Physically Based Rendering, PBR) y sombreado (art\u00edculo de Lucas Orsvarn). El sombreado PBR ofrece formas y opciones m\u00e1s intuitivas y c\u00f3modas para describir superficies. En Unreal Engine, los materiales PBR tienen los siguientes par\u00e1metros:<\/p>\n