{"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\/hr\/blog\/news\/kak-osveshhenie-vliyaet-na-gejmdizajn-i-igrovoj-opyt","title":{"rendered":"Kako osvjetljenje utje\u010de na dizajn igara i iskustvo igranja","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

\"Kako
\n
\nU i\u0161\u010dekivanju PS5 i Project Scarlett, koji \u0107e podr\u017eavati ray tracing, razmi\u0161ljao sam o osvjetljenju u igrama. Prona\u0161ao sam materijal gdje autor obja\u0161njava \u0161to je svjetlost, kako utje\u010de na dizajn, mijenja gameplay, estetiku i iskustvo. Sve to uz primjere i screenshotove. Tijekom igranja na to se ne obra\u0107a pa\u017enja odmah.
\n<\/a><\/noindex><\/p>\n

Uvod<\/h2>\n

\nOsvjetljenje nije potrebno samo da bi igra\u010d mogao vidjeti scenu (iako je to vrlo va\u017eno). Svjetlost utje\u010de na emocije. Mnogi osvjetljiva\u010dki trikovi u kazali\u0161tu, kinu i arhitekturi koriste se za poja\u010davanje emocionalnog sadr\u017eaja. Za\u0161to ne bi posudili te principe game dizajneri? Veza izme\u0111u slike i emocionalnog odgovora daje jo\u0161 jedan mo\u0107an alat koji poma\u017ee u radu s likovima, naracijom, zvukom, mehanikama igre i tako dalje. Pritom, interakcija svjetlosti s povr\u0161inom omogu\u0107uje utjecaj na svjetlinu, boju, kontrast, sjene i druge efekte. Sve to postaje osnova koju bi trebao savladati svaki dizajner.<\/p>\n

Cilj ovog materijala je odrediti kako dizajn osvjetljenja utje\u010de na estetiku igre i korisni\u010dko iskustvo. Analizirat \u0107emo prirodu svjetlosti i njenog kori\u0161tenja u drugim podru\u010djima umjetnosti kako bismo analizirali njezinu ulogu u video igricama.<\/p>\n

\"Kako
\n\u201eLabudovo jezero\u201c, Aleksandar Ekman<\/i><\/p>\n

I \u2014 Priroda svjetlosti<\/h2>\n

\n\u201eProstor, svjetlo i red. To su stvari kojima su ljudi potrebni jednako kao \u0161to su potrebni komad kruha ili skloni\u0161te\u201c, \u2014 Le Corbusier.<\/p>\n

Prirodna svjetlost nas usmjerava i prati od trenutka ro\u0111enja. Ona je potrebna, uspostavlja na\u0161 prirodni ritam. Svjetlost kontrolira procese na\u0161eg tijela i utje\u010de na biolo\u0161ke satove. Razmotrit \u0107emo \u0161to je svjetlosni tok, intenzitet svjetlosti, boja i fokusne to\u010dke. Tako \u0107emo razumjeti od \u010dega se sastoji svjetlost i kako se pona\u0161a.<\/p>\n

1 \u2014 \u0160to vidi ljudsko oko<\/h3>\n

\nSvjetlost je dio elektromagnetskog spektra koji oko mo\u017ee percipirati. Na ovom dijelu valne duljine nalaze se u rasponu od 380 do 780 nm. Tijekom dana razlikujemo boje zahvaljuju\u0107i \u010dunji\u0107ima, dok no\u0107u oko koristi \u0161tapi\u0107e i vidimo samo nijanse sive.<\/p>\n

Osnovne karakteristike vidljive svjetlosti su smjer, intenzitet, frekvencija i polarizacija. Njihova brzina u vakuumu iznosi 300 000 000 m\/s, i to je jedna od osnovnih fizi\u010dkih konstanti.<\/p>\n

\"Kako
\nVidljivi elektromagnetski spektar<\/i><\/p>\n

2 \u2014 Smjer \u0161irenja<\/h3>\n

\nU vakuumu nema materije, a svjetlost se \u0161iri ravno. Ipak, pona\u0161a se razli\u010dito kada se sudara s vodom, zrakom i drugim tvarima. Kada do\u0111e u kontakt s materijom, dio svjetlosti se apsorbira i pretvara u toplinsku energiju. Kada se sudara s prozirnim materijalom, dio svjetlosti se tako\u0111er apsorbira, ali ostatak prolazi kroz njega. Svjetlost se odbija od glatkih objekata poput ogledala. Ako je povr\u0161ina objekta neravna, svjetlost se raspr\u0161uje.<\/p>\n

\"Kako\"Kako
\nSmjer \u0161irenja svjetlosti<\/i><\/p>\n

3 \u2014 Osnovne karakteristike<\/h3>\n

\nSvjetlosni protok. Koli\u010dina svjetlosti koju izvor svjetlosti isijava.
\nJedinica mjere: lm (lumeni).<\/p>\n

\"Kako
\n
\nSila svjetlosti.<\/b> Koli\u010dina svjetlosti koja se prenosi u odre\u0111enom smjeru.
\nJedinica mjere: cd (kandela).<\/p>\n

\"Kako
\n
\nOsvijetljenost. <\/b>Koli\u010dina svjetlosnog protoka koja pada na povr\u0161inu.
\nOsvijetljenost = svjetlosni protok (lm) \/ povr\u0161ina (m2).<\/p>\n

Jedinica mjere: lx (luksi).<\/p>\n

\"Kako
\n
\nSvjetlina.<\/b> To je jedina osnovna karakteristika svjetlosti koju ljudsko oko percipira. S jedne strane, uzima u obzir svjetlinu izvora svjetlosti, a s druge strane povr\u0161inu, \u0161to zna\u010di da je u velikoj mjeri ovisna o stupnju refleksije (o boji i povr\u0161ini).
\nJedinica mjere: cd\/m2.<\/p>\n

\"Kako
\n <\/p>\n

4 \u2014 Bojna temperatura<\/h3>\n

\nBojna temperatura mjeri se u Kelvinima i pokazuje boju odre\u0111enog izvora svjetlosti. Britanski fizi\u010dar William Kelvin zagrijao je komad ugljena. Postao je u\u017earen, prelijevaju\u0107i se raznim bojama koje odgovaraju razli\u010ditim temperaturama. U po\u010detku je ugljen zasjao tamnocrvenom bojom, ali kako se zagrijavao, boja se promijenila u svijetlu \u017eutu. Na maksimalnoj temperaturi, emitirano svjetlo postalo je plavo-bijelo.<\/p>\n

\"Kako\"Kako
\nPrirodno svjetlo, 24 sata, Simon Leaky<\/i><\/p>\n

II \u2014 Tehnike dizajna svjetla<\/h2>\n

\nU ovom odjeljku raspraviti \u0107emo koje se sheme osvjetljenja mogu koristiti kako bi utjecale na izra\u017eajnost sadr\u017eaja\/ vizualnog prikaza. Za to \u0107emo definirati sli\u010dnosti i razlike tehnika osvjetljenja koje su koristili umjetnici i dizajneri svjetla.<\/p>\n

1 \u2014 Svjetlo i sjena, tenebrizam<\/h3>\n

\nSvjetlo i sjena su jedan od pojmova umjetni\u010dke teorije koji se odnosi na raspodjelu osvjetljenja. Pomo\u0107u njih prikazuju se prijelazi tonova kako bi se prenio volumen i atmosfera. Georges de La Tour poznat je po svojim radovima s no\u0107nim svjetlom i scenama osvijetljenim plamenom svije\u0107e. Ni jedan od njegovih prethodnika nije toliko majstorski obradio takve prijelaze. Svjetlo i sjena igraju klju\u010dnu ulogu u njegovim radovima i sastavni su dio kompozicije u raznim i \u010desto alternativnim varijacijama. Istra\u017eivanje La Tourovih slika poma\u017ee u razumijevanju kori\u0161tenja svjetla i njegovih svojstava.<\/p>\n

\"Kako
\nGeorges de La Tour \u201ePokajna Marija Magdalena\u201c, 1638-1643.<\/i><\/p>\n

a \u2014 Visoka kontrastnost<\/h4>\n

\nNa ovoj slici svijetlo lice i odje\u0107a isti\u010du se na tamnoj pozadini. Zahvaljuju\u0107i visokoj kontrastnosti tonova, pa\u017enja gledatelja usmjerena je na ovaj dio slike. U stvarnosti takva kontrastnost ne bi postojala. Udaljenost izme\u0111u lica i svije\u0107e ve\u0107a je nego izme\u0111u svije\u0107e i ruku. Me\u0111utim, uspore\u0111uju\u0107i s licem, mo\u017eemo vidjeti da su ton i kontrastnost na rukama prigu\u0161eni. Georges de La Tour koristi razli\u010ditu kontrastnost kako bi privukao pa\u017enju promatra\u010da.<\/p>\n

\"Kako
\n <\/p>\n

b \u2014 Kontura i ritam svjetlosti<\/h4>\n

\nZbog velike razlike u tonovima, u nekim podru\u010djima uz rubove figure pojavljuju se konture. \u010cak i u tamnim dijelovima slike, umjetniku se svi\u0111alo koristiti razli\u010dite tonove kako bi naglasio granice objekta. Svjetlost nije koncentrirana na jednom podru\u010dju, klizi prema dolje: od lica do nogu.<\/p>\n

\"Kako
\n<\/p>\n

c \u2014 Izvor svjetlosti<\/h4>\n

\nU ve\u0107ini radova Georges de La Tour koristi svije\u0107e ili lampe kao izvor svjetlosti. Na slici se prikazuje goru\u0107a svije\u0107a, ali ve\u0107 znamo da svjetlosna sjena ovdje ne ovisi o njoj. Georges de La Tour postavio je lice na tamnu pozadinu i postavio svije\u0107u kako bi stvorio o\u0161tar prijelaz izme\u0111u tonova. Za visoku kontrastnost, svijetli tonovi su u susjedstvu tamnih, posti\u017eu\u0107i optimalan u\u010dinak.<\/p>\n

\"Kako
\n<\/p>\n

d \u2014 Svjetlost i sjena kao kompozicija geometrijskih oblika<\/h4>\n

\nUkoliko pojednostavimo svjetlost i sjenu u ovom djelu, vidjet \u0107emo osnovne geometrijske oblike. Jedinstvo svijetlih i tamnih tonova stvara jednostavnu kompoziciju. Ona neizravno postavlja osje\u0107aj prostora, pri \u010demu polo\u017eaj objekata i figura pokazuje prednji i stra\u017enji plan, stvaraju\u0107i napetost i energiju.<\/p>\n

\"Kako
\n<\/p>\n

2 \u2014 Osnovne kinematografske tehnike osvjetljenja<\/h3>\n

<\/p>\n

2.1 \u2014 Osvjetljenje s tri to\u010dke<\/h4>\n

\nJedan od najpopularnijih i naju\u010dinkovitijih na\u010dina osvjetljavanja bilo kojeg objekta je osvjetljenje s tri to\u010dke, klasi\u010dna holivudska shema. Ova tehnika omogu\u0107uje preno\u0161enje volumena objekta.<\/p>\n

Crtaju\u0107i svjetlost (Key Lighting, odnosno glavni izvor svjetlosti)<\/b>
\nObi\u010dno je to najja\u010de svjetlo u svakoj sceni. Mo\u017ee dolaziti s bilo kojeg mjesta, njegov izvor mo\u017ee biti sa strane ili iza objekta (Jeremy Birn \u201eDigitalno osvjetljenje i renderiranje\u201c).<\/p>\n

\"Kako
\n
\nIspunjavaju\u0107e svjetlo (Fill Lighting, odnosno svjetlo za upravljanje kontrastima)<\/b>
\nIz naziva je o\u010dito da se koristi za 'ispunjavanje' i uklanjanje tamnih podru\u010dja koja stvara crtaju\u0107i svjetlost. Ispunjavaju\u0107e svjetlo je zna\u010dajno manje intenzivno i smje\u0161teno je pod kutom prema glavnom izvoru svjetlosti.<\/p>\n

\"Kako
\n
\nPozadinsko svjetlo (Backlighting, odnosno razdjelnik pozadine)<\/b>
\nKoristi se za preno\u0161enje volumena scene. Odvaja objekt od pozadine. Kao i ispunjavaju\u0107e svjetlo, pozadinsko je manje intenzivno i pokriva ve\u0107u povr\u0161inu objekta.<\/p>\n

\"Kako
\n<\/p>\n

2.2 \u2014 S doljnje strane<\/h4>\n

\nZbog kretanja Sunca navikli smo vidjeti ljude osvijetljene iz bilo kojeg kuta, osim iz donjeg. Ova metoda djeluje vrlo neobi\u010dno.<\/p>\n

\"Kako
\n\u201eFrankenstein\u201c, James Whale, 1931.<\/i><\/p>\n

2.3 \u2014 Straga<\/h4>\n

\nObjekt se nalazi izme\u0111u izvora svjetlosti i gledatelja. Zbog toga se oko objekta javlja svjetlost, dok ostali dijelovi ostaju u sjeni.<\/p>\n

\"Kako
\n\u201eStranac\u201c, Steven Spielberg, 1982.<\/i><\/p>\n

2.4 \u2014 Sa strane<\/h4>\n

\nOvo osvjetljenje koristi se za osvjetljavanje scene sa strane. Stvara jasne kontraste, prikazuju\u0107i teksture i isti\u010du\u0107i konture objekta. Ova metoda je bliska tehnici svjetlodijele.<\/p>\n

\"Kako
\n\u201eTrka\u010d u labirintu\u201c, Ridley Scott, 1982.<\/i><\/p>\n

2.5 \u2014 Prakti\u010dno osvjetljenje<\/h4>\n

\nOvo je stvarno osvjetljenje u sceni, odnosno \u2014 lampe, svije\u0107e, ekran televizora i drugo. Ovu dodatnu svjetlost mo\u017eete koristiti za poja\u010davanje intenziteta osvjetljenja.<\/p>\n

\"Kako
\n\u201eBarry Lyndon\u201c, Stanley Kubrick, 1975.<\/i><\/p>\n

2.6 \u2014 Odbijeno svjetlo<\/h4>\n

\nSvjetlost iz sna\u017enog izvora se raspr\u0161uje pomo\u0107u reflektora ili bilo koje povr\u0161ine, kao \u0161to su zidovi ili strop. Na taj na\u010din, svjetlost pokriva ve\u0107u povr\u0161inu i ravnomjernije se postavlja.<\/p>\n

\"Kako
\n\u201eMra\u010dni vitez: Obnova legende\u201c, Christopher Nolan, 2012.<\/i><\/p>\n

2.7 \u2014 Tvrdo i mekano svjetlo<\/h4>\n

\nGlavna razlika izme\u0111u tvrde i meke svjetlosti je veli\u010dina izvora svjetlosti u odnosu na objekt. Sunce je najve\u0107i izvor svjetlosti u Sun\u010devom sustavu. Me\u0111utim, udaljeno je od nas 90 milijuna kilometara, \u0161to ga \u010dini malim izvorom svjetlosti. Stvara tvrde sjene i, samim tim, tvrdu svjetlost. Kada se pojave oblaci, cijelo nebo postaje ogroman izvor svjetlosti, a sjene je te\u017ee razlikovati. Stoga nastaje meka svjetlost.<\/p>\n

\"Kako
\n3D primjeri s LEGO-om, Jo\u00e3o Prada, 2017. godina<\/i><\/p>\n

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

\nHigh key osvjetljenje se koristi za stvaranje vrlo svijetlih scena. \u010cesto je blizu prenasi\u0107enoj ekspoziciji. Svi izvori svjetlosti pribli\u017eno su jednaki po snazi.
\nZa razliku od high key osvjetljenja, kod low key scena je jako zasjenjena, i mo\u017ee imati sna\u017ean izvor svjetlosti. Glavna uloga pripada sjenama, a ne svjetlosti, kako bi se prenio osje\u0107aj napetosti ili dramati\u010dnosti.<\/p>\n

\"Kako
\n\u00abTHX 1138\u00bb, George Lucas, 1971. godina<\/i><\/p>\n

2.9 \u2014 Motivirano osvjetljenje (Motivated Lighting)<\/h4>\n

\nTakvo osvjetljenje imitira prirodnu svjetlost \u2014 sun\u010devu, mjese\u010devu, uli\u010dne lampione itd. Koristi se za poja\u010davanje prakti\u010dnog osvjetljenja. Posebne tehnike poma\u017eu da motivirano osvjetljenje izgleda prirodno, kao \u0161to su filtri (gobo) za stvaranje efekta zastrtih prozora.<\/p>\n

\"Kako
\n\u00abDrive\u00bb, Nicolas Winding Refn, 2011. godina<\/i><\/p>\n

2.10 \u2014 Vanjsko svjetlo<\/h4>\n

\nTo mo\u017ee biti sun\u010deva, mjese\u010deva svjetlost ili uli\u010dne lampione koje su vidljive u sceni.<\/p>\n

\"Kako
\n\u00abStranger Things. 3. sezona\u00bb, bra\u0107a Duffer, 2019. godina<\/i><\/p>\n

III \u2014 Osnove renderiranja<\/h2>\n

\nLevel dizajneri svjesni su va\u017enosti osvjetljenja i koriste ga za postizanje odre\u0111enog do\u017eivljaja scene. Kako bi osvijetlili razinu i postigli \u017eeljene vizualne ciljeve, moraju odrediti stati\u010dne izvore svjetlosti, njihove kutove rasprostranjenja i boje. Oni postavljaju odre\u0111enu atmosferu i potrebne poglede. No, sve nije tako jednostavno, jer osvjetljenje ovisi o tehni\u010dkim karakteristikama \u2014 na primjer, o snazi procesora. Stoga postoje dvije vrste osvjetljenja: unaprijed izra\u010dunato osvjetljenje i renderiranje u stvarnom vremenu.<\/p>\n

1 \u2014 Unaprijed izra\u010dunato osvjetljenje (Precomputed lighting)<\/h3>\n

\nDizajneri koriste stati\u010dko osvjetljenje za definiranje karakteristika osvjetljenja za svaki izvor \u2014 uklju\u010duju\u0107i njegovu poziciju, kut i boju. U pravilu je implementacija globalnog osvjetljenja u realnom vremenu nemogu\u0107a zbog performansi. <\/p>\n

Prebaku\u010deno stati\u010dko globalno osvjetljenje mo\u017ee se koristiti u ve\u0107ini motora, uklju\u010duju\u0107i Unreal Engine i Unity. Motor \"peka\" takvo osvjetljenje u posebnu teksturu, poznatu kao \"karta osvjetljenja\" (lightmap). Ove lightmap-e \u010duvaju se zajedno s drugim map-fajlovima, a motor se na njih oslanja prilikom renderiranja scene. <\/p>\n

\"Kako
\nIsta scena: bez osvjetljenja (lijevo), samo s direktnim osvjetljenjem (u sredini) i s indirektnim globalnim osvjetljenjem (desno). Ilustracije s Unity Learn<\/i><\/p>\n

Osim lightmap-a, postoje i karte sjena, koje se koriste za stvaranje sjena. Prvo se sve prikazuje s obzirom na izvor svjetlosti \u2014 on generira sjenu koja odra\u017eava pikselnu dubinu scene. Doga\u0111ena mapa pikselne dubine naziva se kartom sjena. U njoj se nalazi informacija o udaljenosti izme\u0111u izvora svjetlosti i najbli\u017eih objekata za svaki piksel. Nakon toga se izvr\u0161ava renderiranje, u kojem se svaki piksel povr\u0161ine uspore\u0111uje s kartom sjena. Ako je udaljenost izme\u0111u piksela i izvora svjetlosti ve\u0107a od one koja je zabilje\u017eena u karti sjena, tada je piksel u sjeni.<\/p>\n

\"Kako
\nAlgoritam primjene karte sjena. Ilustracija s OpenGl-tutorial<\/i><\/p>\n

2 \u2014 Renderiranje u realnom vremenu<\/h3>\n

\nJedan od klasi\u010dnih modela osvjetljenja za real-time zove se Lambertova modela (po \u0161vicarskom matemati\u010daru Johannu Heinrichu Lambertu). Prilikom renderiranja u realnom vremenu GPU obi\u010dno \u0161alje objekte jedan po jedan. Ova metoda koristi projekciju objekta (njegovu poziciju, kut rotacije i skaliranje) kako bi odredila koju od njegovih povr\u0161ina treba renderirati. <\/p>\n

U slu\u010daju Lambertovog osvjetljenja svjetlost izlazi iz svake to\u010dke povr\u0161ine u svim smjerovima. Pri tome se ne uzimaju u obzir neke suptilnosti, kao \u0161to su refleksije (\u010dlanak Chandler Pralla). Da bi scena izgledala realisti\u010dnije, na Lambertov model dodaju se dodatni efekti \u2014 refleksije, na primjer.<\/p>\n

\"Kako
\nLambertovo sjen\u010denje na primjeru sfere. Ilustracija iz materijala Petra Dja\u010dikhina<\/i><\/p>\n

Ve\u0107ina modernih motora (Unity, Unreal Engine, Frostbite i drugi) koristi fizi\u010dki ispravno renderiranje (Physically Based Rendering, PBR) i sjen\u010danje (\u010dlanak Luke Orsvana). PBR sjena nudi intuitivnije i lak\u0161e na\u010dine i opcije za opisivanje povr\u0161ine. U Unreal Engine, PBR materijali imaju sljede\u0107e parametre:<\/p>\n