{"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\/en\/blog\/news\/kak-osveshhenie-vliyaet-na-gejmdizajn-i-igrovoj-opyt","title":{"rendered":"How Lighting Affects Game Design and Gaming Experience","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

\"How
\n
\nWhile waiting for the PS5 and Project Scarlett, which will support ray tracing, I contemplated lighting in games. I found material where the author explains what light is, how it influences design, alters gameplay, aesthetics, and experience\u2014all with examples and screenshots. While playing, one doesn't immediately notice such details.
\n<\/a><\/noindex><\/p>\n

Introduction<\/h2>\n

\nLighting is needed not only for the player to be able to see the scene (though that's very important). Light affects emotions. Many lighting techniques used in theater, cinema, and architecture enhance the emotional aspect. Why not borrow these principles for game designers? The connection between the visuals and emotional responses provides another powerful tool to work with characters, narrative, sound, gameplay mechanics, and so on. Furthermore, the interaction of light with surfaces allows for influencing brightness, color, contrast, shadows, and other effects. All of this forms the foundation that every designer should master.<\/p>\n

The goal of this material is to define how lighting design affects the aesthetics of a game and the user experience. We will explore the nature of light and how it is utilized in other art fields to analyze its role in video games.<\/p>\n

\"How
\nSwan Lake, Alexander Ekman<\/i><\/p>\n

I \u2014 The Nature of Light<\/h2>\n

\n\"Space, light, and order. These are things that people need as much as they need a piece of bread or a roof over their heads,\" \u2014 Le Corbusier.<\/p>\n

Natural light has directed and accompanied us since birth. It is essential, establishing our natural rhythm. Light regulates our body's processes and impacts biological clocks. Let\u2019s understand what light flow, intensity, color, and focal points are, and then we will comprehend the composition of light and its behavior.<\/p>\n

1 \u2014 What the Human Eye Sees<\/h3>\n

\nLight is a part of the electromagnetic spectrum perceptible by the eye. This section of the wavelength ranges from 380 to 780 nm. During the day, we perceive colors thanks to cones, while at night our eyes use rods, and we only see shades of gray.<\/p>\n

The main properties of visible light are direction, intensity, frequency, and polarization. Its speed in a vacuum is 300,000,000 m\/s, which is one of the fundamental physical constants.<\/p>\n

\"How
\nThe Visible Electromagnetic Spectrum<\/i><\/p>\n

2 \u2014 Direction of Propagation<\/h3>\n

\nIn a vacuum, there is no matter, and light propagates straight. However, it behaves differently when interacting with water, air, and other substances. Upon contact with a material, some light is absorbed and converted into heat energy. When hitting a transparent material, part of the light is also absorbed, but the rest passes through. From smooth objects, like mirrors, light is reflected. If the surface of the object is uneven, light is scattered.<\/p>\n

\"How\"How
\nDirection of Light Propagation<\/i><\/p>\n

3 \u2014 Basic Characteristics<\/h3>\n

\nLuminous Flux. The amount of light emitted by a light source.
\nUnit of measurement: lm (lumen).<\/p>\n

\"How
\n
\nLuminous Intensity.<\/b> The amount of light carried in a specific direction.
\nUnit of measurement: cd (candela).<\/p>\n

\"How
\n
\nIlluminance. <\/b>The amount of luminous flux falling on a surface.
\nIlluminance = luminous flux (lm) \/ area (m\u00b2).<\/p>\n

Unit of measurement: lx (lux).<\/p>\n

\"How
\n
\nBrightness.<\/b> This is the only basic characteristic of light perceived by the human eye. On one hand, it considers the brightness of the light source, and on the other, the surface, meaning it significantly depends on the degree of reflection (from color and surface).
\nUnit of measurement: cd\/m\u00b2.<\/p>\n

\"How
\n <\/p>\n

4 \u2014 Color Temperature<\/h3>\n

\nColor temperature is measured in Kelvins and reflects the color of a specific light source. British physicist William Kelvin heated a piece of coal. It glowed, shimmering in various colors corresponding to different temperatures. Initially, the coal glowed dark red, but as it was heated, the color changed to bright yellow. At maximum temperature, the emitted light became blue-white.<\/p>\n

\"How\"How
\nNatural Light, 24 hours, Simon Lahey<\/i><\/p>\n

II \u2014 Techniques of Light Design<\/h2>\n

\nIn this section, we will explore the lighting patterns that can be used to influence the expressiveness of content\/visuals. For this, we will determine the similarities and differences in lighting techniques used by artists and lighting designers.<\/p>\n

1 \u2014 Light and Shadow, and Tenebrism<\/h3>\n

\nChiaroscuro is one of the concepts in art theory related to the distribution of lights and shadows. It is used to depict tonal transitions in order to convey volume and mood. Georges de La Tour is renowned for his works featuring night chiaroscuro and scenes illuminated by candlelight. None of his predecessor artists explored such transitions with such mastery. Light and shadow play a crucial role in his works and are integral to the composition in various and often alternative variations. Studying de La Tour's paintings helps to understand the use of light and its properties.<\/p>\n

\"How
\nGeorges de La Tour \"The Repentant Mary Magdalene,\" 1638-1643.<\/i><\/p>\n

a \u2014 High contrast<\/h4>\n

\nIn this painting, the bright face and clothing stand out against a dark background. Due to the high contrast of tones, the viewer\u2019s attention is focused on this part of the image. In reality, such contrast would not exist. The distance between the face and the candle is greater than between the candle and the hands. However, compared to the face, we see that the tone and contrast on the hands are subdued. Georges de La Tour uses varying contrast to attract the observer's attention.<\/p>\n

\"How
\n <\/p>\n

b \u2014 Outline and rhythm of light<\/h4>\n

\nDue to the high tonal difference, outlines emerge in some areas along the edges of the figure. Even in the dark parts of the painting, the artist liked to use different tones to emphasize the boundaries of the object. Light is not concentrated in one area; it glides downwards: from the face to the feet.<\/p>\n

\"How
\n<\/p>\n

c \u2014 Light source<\/h4>\n

\nIn most of Georges de La Tour's works, candles or lamps serve as the light source. The painting depicts a burning candle, but we already know that the chiaroscuro here does not depend on it. Georges de La Tour placed the face against a dark background and set the candle to create a sharp transition between tones. For high contrast, light tones are adjacent to dark, achieving an optimal effect.<\/p>\n

\"How
\n<\/p>\n

d \u2014 Chiaroscuro as a composition of geometric shapes<\/h4>\n

\nIf we simplify light and shadow in this work, we will see basic geometric shapes. The unity of light and dark tones forms a simple composition. It indirectly sets a sense of space, where the positioning of objects and figures conveys the foreground and background, creating tension and energy.<\/p>\n

\"How
\n<\/p>\n

2 \u2014 Basic Cinematographic Lighting Techniques<\/h3>\n

<\/p>\n

2.1 \u2014 Three-Point Lighting<\/h4>\n

\nOne of the most popular and effective ways to illuminate any object is with three-point lighting, a classic Hollywood setup. This technique allows for depth to be conveyed.<\/p>\n

Key Light (Key Lighting)<\/b>
\nThis is usually the most powerful light in any scene. It can come from anywhere, with its source potentially located to the side or behind the object (Jeremy Birn, \"Digital Lighting and Rendering\").<\/p>\n

\"How
\n
\nFill Light (Fill Lighting)<\/b>
\nAs the name suggests, it is used to 'fill in' and eliminate the dark areas created by the key light. The fill light is noticeably less intense and positioned at an angle to the main light source.<\/p>\n

\"How
\n
\nBack Light (Backlighting)<\/b>
\nThis is used to convey the depth of the scene. It separates the object from the background. Like the fill light, the back light is less intense and covers a larger area of the object.<\/p>\n

\"How
\n<\/p>\n

2.2 \u2014 From Below<\/h4>\n

\nDue to the movement of the Sun, we are accustomed to seeing people illuminated from various angles, but not from below. This method looks very unusual.<\/p>\n

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

2.3 \u2014 From Behind<\/h4>\n

\nThe object is placed between the light source and the viewer. This causes a glow around the object while the rest remains in shadow.<\/p>\n

\"How
\n\"E.T. the Extra-Terrestrial,\" Steven Spielberg, 1982<\/i><\/p>\n

2.4 \u2014 From the Side<\/h4>\n

\nThis lighting is used to illuminate the scene from the side. It creates a clear contrast, showcasing textures and highlighting the contours of the object. This approach is similar to chiaroscuro lighting.<\/p>\n

\"How
\n\"Blade Runner,\" Ridley Scott, 1982<\/i><\/p>\n

2.5 \u2014 Practical Lighting<\/h4>\n

\nThis is actual lighting within the scene, such as lamps, candles, TV screens, and more. Such additional light can be used to enhance the intensity of illumination.<\/p>\n

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

2.6 \u2014 Reflected Light<\/h4>\n

\nLight from a strong source is diffused using a reflector or some surface, such as walls or ceilings. This spreads the light over a larger area and makes it more even.<\/p>\n

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

2.7 \u2014 Hard and Soft Light<\/h4>\n

\nThe main difference between hard and soft light is the size of the light source in relation to the subject. The sun is the largest light source in the solar system. However, it is 90 million kilometers away from us, making it a small light source. It creates harsh shadows and, accordingly, hard light. When clouds appear, the entire sky becomes a huge light source, and it's harder to distinguish shadows. Thus, soft light emerges.<\/p>\n

\"How
\n3D examples with LEGO, Jo\u00e3o Prada, 2017<\/i><\/p>\n

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

\nHigh key lighting is used to create very bright scenes. It is often close to being overexposed. All light sources are approximately equal in power.
\nIn contrast to high key lighting, low key scenes are heavily shadowed, and there may be a powerful light source. The main emphasis is on shadows rather than light, to convey a sense of suspense or drama.<\/p>\n

\"How
\n\u2018THX 1138\u2019, George Lucas, 1971<\/i><\/p>\n

2.9 \u2014 Motivated Lighting<\/h4>\n

\nThis type of lighting mimics natural light\u2014sunlight, moonlight, streetlights, and so on. It is used to enhance practical lighting. Special techniques help to make motivated lighting look natural, such as filters (gobos) to create the effect of draped windows.<\/p>\n

\"How
\n\u2018Drive\u2019, Nicolas Winding Refn, 2011<\/i><\/p>\n

2.10 \u2014 Outdoor Light<\/h4>\n

\nThis can be sunlight, moonlight, or streetlights that are visible in the scene.<\/p>\n

\"How
\n\u2018Stranger Things, Season 3\u2019, the Duffer Brothers, 2019<\/i><\/p>\n

III \u2014 Basics of Rendering<\/h2>\n

\nLevel designers recognize the importance of lighting and use it to achieve a specific perception of the scene. To illuminate the level and achieve desired visual goals, they need to define static light sources, their spread angles, and colors. They set the required atmosphere and necessary visibility. But it's not that simple, because lighting depends on technical specifications\u2014such as CPU power. Thus, there are two types of lighting: precomputed lighting and real-time rendering.<\/p>\n

1 \u2014 Precomputed Lighting<\/h3>\n

\nDesigners use static lighting to define the characteristics of each light source, including its position, angle, and color. Generally, implementing global illumination in real-time is impossible due to performance constraints. <\/p>\n

Pre-computed static global illumination can be utilized in most engines, including Unreal Engine and Unity. The engine 'bakes' this illumination into a special texture known as a 'lightmap.' These lightmaps are stored along with other map files, and the engine refers to them when rendering the scene. <\/p>\n

\"How
\nThe same scene: without lighting (on the left), with direct lighting only (in the middle), and with indirect global illumination (on the right). Illustrations from Unity Learn.<\/i><\/p>\n

In addition to lightmaps, there are shadow maps, which are used to create shadows. First, everything is rendered considering the light source \u2014 it generates a shadow that reflects the pixel depth of the scene. The resulting pixel depth map is called a shadow map. It contains information about the distance between the light source and the nearest objects for each pixel. Then, rendering occurs, where each surface pixel is checked against the shadow map. If the distance between the pixel and the light source is greater than that recorded in the shadow map, the pixel is in shadow.<\/p>\n

\"How
\nShadow map application algorithm. Illustration from OpenGl-tutorial.<\/i><\/p>\n

2 \u2014 Real-time rendering.<\/h3>\n

\nOne of the classic lighting models for real-time rendering is the Lambert model (named after the Swiss mathematician Johann Heinrich Lambert). When rendering in real-time, the GPU typically processes objects one at a time. This method uses the object's transformation (its position, rotation, and scale) to determine which of its surfaces should be rendered. <\/p>\n

In the Lambert lighting model, light emanates from each point on the surface in all directions. However, certain nuances, such as reflections, are not considered (as discussed in Chandler Prall's article). To make the scene appear more realistic, additional effects are added to the Lambert model \u2014 such as specular highlights.<\/p>\n

\"How
\nLambert shading illustrated on a sphere. Illustration from materials by Petr Dyachikhin.<\/i><\/p>\n

Most modern engines (Unity, Unreal Engine, Frostbite, and others) use Physically Based Rendering (PBR) and shading (article by Lucas Orsvarn). PBR shading offers more intuitive and user-friendly ways and parameters for describing surfaces. In Unreal Engine, PBR materials have the following parameters:<\/p>\n