{"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\/sv\/blog\/news\/kak-osveshhenie-vliyaet-na-gejmdizajn-i-igrovoj-opyt","title":{"rendered":"Hur belysning p\u00e5verkar speldesign och spelupplevelse","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

\"Hur
\n
\nI v\u00e4ntan p\u00e5 PS5 och Project Scarlett, som kommer att st\u00f6dja ray tracing, b\u00f6rjade jag fundera p\u00e5 belysning i spel. Jag hittade ett material d\u00e4r f\u00f6rfattaren f\u00f6rklarar vad ljus \u00e4r, hur det p\u00e5verkar designen, \u00e4ndrar spelupplevelsen, estetik och upplevelse. Allt med exempel och sk\u00e4rmdumpar. Under spelets g\u00e5ng l\u00e4gger man inte genast m\u00e4rke till detta.
\n<\/a><\/noindex><\/p>\n

Introduktion<\/h2>\n

\nBelysning beh\u00f6vs inte bara f\u00f6r att spelaren ska kunna se scenen (\u00e4ven om det \u00e4r mycket viktigt). Ljus p\u00e5verkar k\u00e4nslor. M\u00e5nga belysningstekniker inom teater, film och arkitektur anv\u00e4nds f\u00f6r att f\u00f6rst\u00e4rka den emotionella delen. Varf\u00f6r inte l\u00e5na dessa principer fr\u00e5n speldesigners? Kopplingen mellan bilden och den emotionella responsen ger ett kraftfullt verktyg f\u00f6r att arbeta med karakt\u00e4ren, narrativet, ljudet, spelmekaniken och s\u00e5 vidare. Samtidigt kan ljusets interaktion med ytor p\u00e5verka ljusstyrka, f\u00e4rg, kontrast, skuggor och andra effekter. Allt detta utg\u00f6r grunden som varje designer b\u00f6r bem\u00e4stra.<\/p>\n

Syftet med detta material \u00e4r att fastst\u00e4lla hur ljusdesign p\u00e5verkar spelets estetik och anv\u00e4ndarupplevelse. Vi ska unders\u00f6ka ljusets natur och hur det anv\u00e4nds inom andra konstformer f\u00f6r att analysera dess roll i videospel.<\/p>\n

\"Hur
\nSvansj\u00f6, Alexander Ekman<\/i><\/p>\n

I \u2014 Ljusets natur<\/h2>\n

\n\"Rum, ljus och ordning. Det \u00e4r s\u00e5dana saker som m\u00e4nniskor beh\u00f6ver lika mycket som de beh\u00f6ver ett br\u00f6d eller ett tak \u00f6ver huvudet\", \u2014 Le Corbusier.<\/p>\n

Naturligt ljus f\u00f6ljer och v\u00e4gleder oss fr\u00e5n f\u00f6dseln. Det \u00e4r n\u00f6dv\u00e4ndigt, det st\u00e4ller in v\u00e5r naturliga rytm. Ljus kontrollerar v\u00e5ra kroppsliga processer och p\u00e5verkar v\u00e5r biologiska klocka. Vi ska se vad ljusfl\u00f6de, ljusintensitet, f\u00e4rg och fokuspunkter \u00e4r. D\u00e5 kommer vi att f\u00f6rst\u00e5 vad ljus best\u00e5r av och hur det beter sig.<\/p>\n

1 \u2014 Vad m\u00e4nniskans \u00f6ga ser<\/h3>\n

\nLjus \u00e4r en del av det elektromagnetiska spektrumet som kan uppfattas av \u00f6gat. P\u00e5 detta omr\u00e5de varierar v\u00e5gl\u00e4ngderna fr\u00e5n 380 till 780 nm. Under dagen uppfattar vi f\u00e4rger tack vare tappar, medan \u00f6gat p\u00e5 natten anv\u00e4nder stavar, vilket g\u00f6r att vi endast ser gr\u00e5skalor.<\/p>\n

De grundl\u00e4ggande egenskaperna hos synligt ljus \u00e4r riktning, intensitet, frekvens och polarisation. Dess hastighet i vakuum \u00e4r 300 000 000 m\/s, och detta \u00e4r en av de fundamentala fysiska konstanterna.<\/p>\n

\"Hur
\nSynligt elektromagnetiskt spektrum<\/i><\/p>\n

2 \u2014 Ljusspridning<\/h3>\n

\nI vakuum finns det inget material, och ljus sprider sig rakt fram. Men det beter sig annorlunda n\u00e4r det m\u00f6ter vatten, luft och andra \u00e4mnen. Vid kontakt med ett \u00e4mne absorberas en del av ljuset och omvandlas till v\u00e4rmeenergi. N\u00e4r det kolliderar med ett genomskinligt material, absorberas ocks\u00e5 en del av ljuset, men resterande passerar igenom. Fr\u00e5n sl\u00e4ta objekt, s\u00e5som en spegel, reflekteras ljus. Om ytan \u00e4r oj\u00e4mn, sprids ljuset.<\/p>\n

\"Hur\"Hur
\nLjusspridningens riktning<\/i><\/p>\n

3 \u2014 Grundl\u00e4ggande egenskaper<\/h3>\n

\nLjusfl\u00f6de. M\u00e4ngden ljus som avges av en ljusk\u00e4lla.
\nM\u00e4tenhet: lm (lumen).<\/p>\n

\"Hur
\n
\nLjusintensitet.<\/b> M\u00e6ngden av ljus som transporteras i en viss riktning.
\nM\u00e4tenhet: cd (candela).<\/p>\n

\"Hur
\n
\nBelysning. <\/b>M\u00e4ngden ljusfl\u00f6de som faller p\u00e5 en yta.
\nBelysning = ljusfl\u00f6de (lm) \/ area (m\u00b2).<\/p>\n

M\u00e4tenhet: lx (lux).<\/p>\n

\"Hur
\n
\nLuminans.<\/b> Detta \u00e4r den enda grundl\u00e4ggande egenskapen hos ljus som det m\u00e4nskliga \u00f6gat uppfattar. \u00c5 ena sidan tar den h\u00e4nsyn till ljusk\u00e4llans ljusstyrka, \u00e5 andra sidan ytan, och den beror allts\u00e5 starkt p\u00e5 reflektionsgraden (fr\u00e5n f\u00e4rg och yta).
\nM\u00e4tenhet: cd\/m\u00b2.<\/p>\n

\"Hur
\n <\/p>\n

4 \u2014 F\u00e4rgtemperatur<\/h3>\n

\nF\u00e4rgtemperaturen m\u00e4ts i Kelvin och visar f\u00e4rgen hos en specifik ljusk\u00e4lla. Den brittiske fysikern William Kelvin v\u00e4rmde upp en bit kol. Den blev het och \u00e4ndrade f\u00e4rg, vilket motsvarade olika temperaturer. F\u00f6rst lyste kolet m\u00f6rkr\u00f6tt, men n\u00e4r det v\u00e4rmdes \u00e4ndrades f\u00e4rgen till lysande gult. Vid maximal temperatur blev det utstr\u00e5lande ljuset bl\u00e5vitt.<\/p>\n

\"Hur\"Hur
\nNaturligt ljus, 24 timmar, Simon Leahy<\/i><\/p>\n

II \u2014 Ljusstileringstekniker<\/h2>\n

\nI detta avsnitt kommer vi att g\u00e5 igenom vilka belysningsm\u00f6nster som kan anv\u00e4ndas f\u00f6r att p\u00e5verka uttrycksfullheten hos inneh\u00e5ll\/visuella rutor. F\u00f6r detta kommer vi att definiera likheter och skillnader i de belysningstekniker som anv\u00e4nde konstn\u00e4rer och ljusdesigners.<\/p>\n

1 \u2014 Ljus och skugga samt tenebrism<\/h3>\n

\nSkugga och ljus \u00e4r ett av koncepten inom konstteori som handlar om f\u00f6rdelningen av belysning. Genom detta visas ton\u00f6verg\u00e5ngar f\u00f6r att f\u00f6rmedla volym och st\u00e4mning. Georges de La Tour \u00e4r k\u00e4nd f\u00f6r sina verk med nattligt ljus och scener belysta av ljusets flamma. Ingen av hans f\u00f6reg\u00e5ngare har bem\u00e4strat s\u00e5dana \u00f6verg\u00e5ngar s\u00e5 skickligt. Ljus och skugga spelar en avg\u00f6rande roll i hans verk och \u00e4r en del av kompositionen i oftast olika och alternativa variationer. Att studera de La Tours m\u00e5lningar hj\u00e4lper till att f\u00f6rst\u00e5 anv\u00e4ndningen av ljus och dess egenskaper.<\/p>\n

\"Hur
\nGeorges de La Tour \"Den \u00e5ngerfulla Maria Magdalena\", 1638-1643.<\/i><\/p>\n

a \u2014 H\u00f6g kontrast<\/h4>\n

\nI denna m\u00e5lning framh\u00e4vs det ljusa ansiktet och kl\u00e4derna mot den m\u00f6rka bakgrunden. Tack vare den h\u00f6ga kontrasten i tonerna fokuseras betraktarens uppm\u00e4rksamhet p\u00e5 denna del av bilden. I verkligheten skulle det inte ha funnits en s\u00e5dan kontrast. Avst\u00e5ndet mellan ansiktet och ljuset \u00e4r st\u00f6rre \u00e4n avst\u00e5ndet mellan ljuset och h\u00e4nderna. J\u00e4mf\u00f6rt med ansiktet ser vi dock att tonen och kontrasten p\u00e5 h\u00e4nderna \u00e4r d\u00e4mpade. Georges de La Tour anv\u00e4nder olika kontraster f\u00f6r att dra betraktarens uppm\u00e4rksamhet.<\/p>\n

\"Hur
\n <\/p>\n

b \u2014 Kontur och rytm i ljuset<\/h4>\n

\nP\u00e5 grund av den h\u00f6ga tonkillnaden uppst\u00e5r konturer i vissa delar vid kanterna av figuren. \u00c4ven i de m\u00f6rka delarna av m\u00e5lningen gillade konstn\u00e4ren att anv\u00e4nda olika toner f\u00f6r att framh\u00e4va objektets gr\u00e4nser. Ljuset \u00e4r inte koncentrerat p\u00e5 ett st\u00e4lle, utan glider ner: fr\u00e5n ansiktet till f\u00f6tterna.<\/p>\n

\"Hur
\n<\/p>\n

c \u2014 Ljusk\u00e4lla<\/h4>\n

\nI de flesta av Georges de La Tours verk anv\u00e4nder han ljus ist\u00e4llet av stearinljus eller lampor. I m\u00e5lningen skildras ett brinnande ljus, men vi vet redan att skuggan h\u00e4r inte beror p\u00e5 det. Georges de La Tour placerade ansiktet p\u00e5 en m\u00f6rk bakgrund och satte dit ljuset f\u00f6r att skapa en skarp \u00f6verg\u00e5ng mellan tonerna. F\u00f6r h\u00f6g kontrast gr\u00e4nsar de ljusa tonerna till de m\u00f6rka, vilket uppn\u00e5r en optimal effekt.<\/p>\n

\"Hur
\n<\/p>\n

d \u2014 Skugga och ljus som en komposition av geometriska former<\/h4>\n

\nOm man f\u00f6renklar ljus och skugga i detta verk, ser vi grundl\u00e4ggande geometriska figurer. Enheten mellan ljusa och m\u00f6rka toner bildar en enkel komposition. Den ger indirekt en k\u00e4nsla av rymd d\u00e4r positionen av objekt och figurer visar f\u00f6rgrund och bakgrund, vilket skapar sp\u00e4nning och energi.<\/p>\n

\"Hur
\n<\/p>\n

2 \u2014 Grundl\u00e4ggande filmtekniker f\u00f6r belysning<\/h3>\n

<\/p>\n

2.1 \u2014 Trepunktsbelysning<\/h4>\n

\nEn av de mest popul\u00e4ra och effektiva metoderna f\u00f6r att lysa upp ett objekt \u00e4r trepunktsbelysning, en klassisk Hollywood-schem. Denna teknik g\u00f6r det m\u00f6jligt att f\u00f6rmedla f\u00f6rem\u00e5lets volym.<\/p>\n

Huvudljus (Key Lighting)<\/b>
\nDetta \u00e4r vanligtvis det starkaste ljuset i varje scen. Det kan komma fr\u00e5n vilket h\u00e5ll som helst, dess k\u00e4lla kan vara fr\u00e5n sidan eller bakom objektet (Jeremy Birn \u201cDigital Lighting and Rendering\u201d).<\/p>\n

\"Hur
\n
\nFyllnadsljus (Fill Lighting)<\/b>
\nSom namnet antyder anv\u00e4nds det f\u00f6r att \"fylla\" och ta bort de m\u00f6rka omr\u00e5den som huvudljuset skapar. Fyllnadsljuset \u00e4r avsev\u00e4rt mindre intensivt och ligger i vinkel mot huvudljusk\u00e4llan.<\/p>\n

\"Hur
\n
\nBakgrundsljus (Backlighting)<\/b>
\nDetta anv\u00e4nds f\u00f6r att f\u00f6rmedla scenens volym. Det separerar objektet fr\u00e5n bakgrunden. Precis som fyllnadsljus \u00e4r bakgrundsljuset mindre intensivt och t\u00e4cker en st\u00f6rre del av objektet.<\/p>\n

\"Hur
\n<\/p>\n

2.2 \u2014 Underifr\u00e5n<\/h4>\n

\nP\u00e5 grund av solens r\u00f6relse \u00e4r vi vana vid att se m\u00e4nniskor belysta fr\u00e5n alla vinklar, utom underifr\u00e5n. Denna metod ser mycket ovanlig ut.<\/p>\n

\"Hur
\n\u201cFrankenstein\u201d, James Whale, 1931<\/i><\/p>\n

2.3 \u2014 Bakifr\u00e5n<\/h4>\n

\nObjektet placeras mellan ljusk\u00e4llan och \u00e5sk\u00e5daren. D\u00e4rf\u00f6r uppst\u00e5r en gl\u00f6d kring objektet medan resten av dess delar f\u00f6rblir i skuggan.<\/p>\n

\"Hur
\n\u201cE.T. The Extra-Terrestrial\u201d, Steven Spielberg, 1982<\/i><\/p>\n

2.4 \u2014 Fr\u00e5n sidan<\/h4>\n

\nDenna belysning anv\u00e4nds f\u00f6r att lysa upp scenen fr\u00e5n sidan. Den skapar en tydlig kontrast som visar texturer och framh\u00e4ver objektets konturer. Denna metod liknar teknik f\u00f6r ljus och skugga.<\/p>\n

\"Hur
\n\u201cBlade Runner\u201d, Ridley Scott, 1982<\/i><\/p>\n

2.5 \u2014 Praktisk belysning<\/h4>\n

\nDetta \u00e4r verklig belysning i scenen, allts\u00e5 \u2014 lampor, ljus, TV-sk\u00e4rmar och andra. Denna extra ljusk\u00e4lla kan anv\u00e4ndas f\u00f6r att \u00f6ka belysningens intensitet.<\/p>\n

\"Hur
\n\u201cBarry Lyndon\u201d, Stanley Kubrick, 1975<\/i><\/p>\n

2.6 \u2014 Reflekterat ljus<\/h4>\n

\nLjuset fr\u00e5n en kraftfull k\u00e4lla sprids av en reflektor eller n\u00e5gon yta, s\u00e5som v\u00e4ggar eller tak. P\u00e5 s\u00e5 s\u00e4tt t\u00e4cker ljuset en st\u00f6rre yta och faller mer j\u00e4mnt.<\/p>\n

\"Hur
\n\u201cThe Dark Knight Rises\u201d, Christopher Nolan, 2012<\/i><\/p>\n

2.7 \u2014 H\u00e5rt och mjukt ljus<\/h4>\n

\nDen huvudsakliga skillnaden mellan h\u00e5rt och mjukt ljus \u00e4r storleken p\u00e5 ljusk\u00e4llan i f\u00f6rh\u00e5llande till objektet. Solen \u00e4r den st\u00f6rsta ljusk\u00e4llan i solsystemet. Men eftersom den \u00e4r 90 miljoner kilometer bort fr\u00e5n oss, uppfattas den som en liten ljusk\u00e4lla. Den skapar h\u00e5rda skuggor och d\u00e4rmed h\u00e5rt ljus. N\u00e4r moln dyker upp blir hela himlen en stor ljusk\u00e4lla, vilket g\u00f6r det sv\u00e5rare att skilja skuggor \u00e5t. Det leder till att mjukt ljus uppst\u00e5r.<\/p>\n

\"Hur
\n3D-exempel med LEGO, Jo\u00e3o Prada, 2017<\/i><\/p>\n

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

\nHigh key-belysning anv\u00e4nds f\u00f6r att skapa mycket ljusa scener. Den ligger ofta n\u00e4ra en \u00f6verexponering. Alla ljusk\u00e4llor \u00e4r ungef\u00e4r lika kraftfulla.
\nTill skillnad fr\u00e5n high key-belysning \u00e4r scenen i low key kraftigt nedtonad, och det kan finnas en kraftfull ljusk\u00e4lla. Huvudfokus ligger p\u00e5 skuggorna, snarare \u00e4n ljuset, f\u00f6r att f\u00f6rmedla en k\u00e4nsla av sp\u00e4nning eller dramatik.<\/p>\n

\"Hur
\n\u201eTHX 1138\u201c, George Lucas, 1971<\/i><\/p>\n

2.9 \u2014 Motiverad belysning (Motivated Lighting)<\/h4>\n

\nDenna belysning imiterar naturligt ljus \u2014 soligt, m\u00e5nljus, gatubelysning och s\u00e5 vidare. Den anv\u00e4nds f\u00f6r att f\u00f6rst\u00e4rka praktisk belysning. S\u00e4rskilda tekniker hj\u00e4lper till att g\u00f6ra motiverad belysning naturlig, till exempel filter (gobo) f\u00f6r att skapa effekten av draperade f\u00f6nster.<\/p>\n

\"Hur
\n\u201eDrive\u201c, Nicolas Winding Refn, 2011<\/i><\/p>\n

2.10 \u2014 Utomhusljus<\/h4>\n

\nDet kan vara soligt, m\u00e5nljus eller gatubelysning som syns i scenen.<\/p>\n

\"Hur
\n\u201eStranger Things. S\u00e4song 3\u201c, br\u00f6derna Duffer, 2019<\/i><\/p>\n

III \u2014 Grunderna f\u00f6r rendering<\/h2>\n

\nLevel designers \u00e4r medvetna om vikten av belysning och anv\u00e4nder den f\u00f6r att uppn\u00e5 en viss upplevelse av scenen. F\u00f6r att belysa niv\u00e5n och n\u00e5 \u00f6nskade visuella m\u00e5l beh\u00f6ver de definiera statiska ljusk\u00e4llor, deras spridningsvinklar och f\u00e4rger. De s\u00e4tter en viss atmosf\u00e4r och n\u00f6dv\u00e4ndig \u00f6versikt. Men det \u00e4r inte s\u00e5 enkelt, eftersom belysningen beror p\u00e5 s\u00e5dana tekniska specifikationer \u2014 till exempel processorprestanda. D\u00e4rf\u00f6r finns det tv\u00e5 typer av belysning: f\u00f6rberedd belysning och realtidsrendering.<\/p>\n

1 \u2014 F\u00f6rberedd belysning (Precomputed lighting)<\/h3>\n

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

Precomputed static global illumination can be used in most engines, including Unreal Engine and Unity. The engine 'bakes' this lighting into a special texture, called a 'lightmap'. These lightmaps are stored alongside other map files, and the engine references them when rendering the scene. <\/p>\n

\"Hur
\nThe same scene: without lighting (left), only with direct lighting (middle), and with indirect global lighting (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 with consideration of the light source \u2014 it generates a shadow that reflects the scene's pixel depth. The resulting pixel depth map is called the shadow map. It contains information about the distance between the light source and the nearest objects for each pixel. Then, rendering occurs where each pixel of the surface 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

\"Hur
\nThe algorithm for applying the shadow map. Illustration from OpenGl-tutorial<\/i><\/p>\n

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

\nOne of the classic models for real-time lighting is called 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 attributes (its position, rotation angle, and scale) to determine which of its surfaces should be rendered. <\/p>\n

In the case of Lambert lighting, light emanates from every point on the surface in all directions. However, some nuances, such as reflections, are not taken into account (see Chandler Prall's article). To make the scene appear more realistic, additional effects are applied to the Lambert model \u2014 highlights, for example.<\/p>\n

\"Hur
\nLambert shading illustrated with a sphere. Illustration from the materials of Petr Dyachikhin<\/i><\/p>\n

De flesta moderna motorer (Unity, Unreal Engine, Frostbite och andra) anv\u00e4nder fysikaliskt korrekt rendering (Physically Based Rendering, PBR) och shading (artikel av Lucas Orsvarn). PBR-shading erbjuder mer intuitiva och anv\u00e4ndarv\u00e4nliga s\u00e4tt och alternativ f\u00f6r att beskriva ytor. I Unreal Engine har PBR-material f\u00f6ljande parametrar:<\/p>\n