{"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\/it\/blog\/novosti-interneta\/kak-osveshhenie-vliyaet-na-gejmdizajn-i-igrovoj-opyt","title":{"rendered":"Come l'illuminazione influisce sul game design e sull'esperienza di gioco","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

\"Come
\n
\nIn attesa di PS5 e Project Scarlett, che supporteranno il ray tracing, ho riflettuto sull'illuminazione nei giochi. Ho trovato un materiale in cui l'autore spiega cosa sia la luce, come influisce sul design, cambia il gameplay, l'estetica e l'esperienza. Tutto con esempi e screenshot. Durante il gioco, non ci si presta facilmente attenzione a questo.
\n<\/a><\/noindex><\/p>\n

Introduzione<\/h2>\n

\nL'illuminazione non serve solo a permettere ai giocatori di vedere la scena (anche se \u00e8 molto importante). La luce influisce sulle emozioni. Molte tecniche di illuminazione nel teatro, nel cinema e nell'architettura sono utilizzate per intensificare l'aspetto emozionale. Perch\u00e9 non prendere in prestito questi principi dai game designer? Il legame tra l'immagine e la risposta emozionale offre un potente strumento che aiuta a lavorare con il personaggio, la narrazione, il suono, le meccaniche di gioco e cos\u00ec via. Inoltre, l'interazione della luce con le superfici consente di influenzare la luminosit\u00e0, il colore, il contrasto, le ombre e altri effetti. Tutto questo si traduce in una base che ogni designer dovrebbe padroneggiare.<\/p>\n

L'obiettivo di questo materiale \u00e8 determinare come il design dell'illuminazione influisca sull'estetica del gioco e sull'esperienza dell'utente. Esamineremo la natura della luce e come viene utilizzata in altre aree dell'arte per analizzare il suo ruolo nei videogiochi.<\/p>\n

\"Come
\nIl lago dei cigni, Alexander Ekman<\/i><\/p>\n

I \u2014 La natura della luce<\/h2>\n

\n\u00abSpazio, luce e ordine. Queste sono le cose di cui le persone hanno bisogno tanto quanto di un pezzo di pane o di un rifugio\u00bb, \u2013 Le Corbusier.<\/p>\n

La luce naturale ci guida e ci accompagna fin dalla nascita. \u00c8 necessaria, stabilisce il nostro ritmo naturale. La luce controlla i processi del nostro corpo e influisce sull'orologio biologico. Approfondiamo cos'\u00e8 il flusso luminoso, l'intensit\u00e0 della luce, il colore e i punti focali. Cos\u00ec comprenderemo di cosa \u00e8 fatta la luce e come si comporta.<\/p>\n

1 \u2014 Cosa vede l'occhio umano<\/h3>\n

\nLa luce \u00e8 parte dello spettro elettromagnetico percepito dall'occhio. In questo intervallo di lunghezze d'onda si trovano tra 380 e 780 nm. Durante il giorno distinguiamo i colori grazie ai coni, mentre di notte l'occhio utilizza i bastoncelli e vediamo solo toni di grigio.<\/p>\n

Le principali caratteristiche della luce visibile sono la direzione, l'intensit\u00e0, la frequenza e la polarizzazione. La sua velocit\u00e0 nel vuoto \u00e8 di 300.000.000 m\/s ed \u00e8 una delle costanti fisiche fondamentali.<\/p>\n

\"Come
\nSpettro elettromagnetico visibile<\/i><\/p>\n

2 \u2014 Direzione della propagazione<\/h3>\n

\nNel vuoto non ci sono sostanze e la luce si propaga in linea retta. Tuttavia, si comporta in modo diverso quando incontro l'acqua, l'aria e altre sostanze. Quando colpisce una sostanza, parte della luce viene assorbita e si trasforma in energia termica. Quando interagisce con un materiale trasparente, parte della luce viene assorbita, ma il resto passa attraverso. La luce si riflette da oggetti lisci come uno specchio. Se la superficie dell'oggetto \u00e8 irregolare, la luce si disperde.<\/p>\n

\"Come\"Come
\nDirezione della propagazione della luce<\/i><\/p>\n

3 \u2014 Caratteristiche di base<\/h3>\n

\nFlusso luminoso. La quantit\u00e0 di luce emessa da una fonte luminosa.
\nUnit\u00e0 di misura: lm (lumen).<\/p>\n

\"Come
\n
\nIntensit\u00e0 della luce.<\/b> La quantit\u00e0 di luce trasportata in una specifica direzione.
\nUnit\u00e0 di misura: cd (candela).<\/p>\n

\"Come
\n
\nIlluminamento. <\/b>La quantit\u00e0 di flusso luminoso che colpisce una superficie.
\nIlluminamento = flusso luminoso (lm) \/ area (m\u00b2).<\/p>\n

Unit\u00e0 di misura: lx (lux).<\/p>\n

\"Come
\n
\nLuminosit\u00e0.<\/b> Questa \u00e8 l'unica caratteristica fondamentale della luce percepita dall'occhio umano. Da un lato, considera la luminosit\u00e0 della sorgente luminosa, dall'altro, la superficie, il che significa che dipende fortemente dal grado di riflessione (dal colore e dalla superficie).
\nUnit\u00e0 di misura: cd\/m\u00b2.<\/p>\n

\"Come
\n <\/p>\n

4 \u2014 Temperatura di colore<\/h3>\n

\nLa temperatura di colore \u00e8 misurata in Kelvin e rappresenta il colore specifico di una sorgente luminosa. Il fisico britannico William Kelvin riscald\u00f2 un pezzo di carbone. Questo si scald\u00f2, cambiando colore in diverse tonalit\u00e0, corrispondenti a diverse temperature. Inizialmente, il carbone emise una luce rosso scuro, ma man mano che si riscaldava, il colore cambi\u00f2 in un giallo brillante. A temperature massime, la luce emessa divenne blu-bianca.<\/p>\n

\"Come\"Come
\nLuce naturale, 24 ore, Simon Leach<\/i><\/p>\n

II \u2014 Tecniche di design della luce<\/h2>\n

\nIn questa sezione analizzeremo quali schemi di illuminazione possono essere utilizzati per influenzare l'espressivit\u00e0 del contenuto\/immagini. Per fare ci\u00f2, definiremo somiglianze e differenze nelle tecniche di illuminazione utilizzate da artisti e designer della luce.<\/p>\n

1 \u2014 Chiaroscuro e tenebrismo<\/h3>\n

\nChiaroscuro \u00e8 uno dei concetti della teoria dell'arte, che si riferisce alla distribuzione delle luminosit\u00e0. Attraverso di esso si rappresentano le transizioni di tonalit\u00e0 per trasmettere volume ed emozione. Georges de La Tour \u00e8 noto per le sue opere con il chiaroscuro notturno e le scene illuminate dalla fiamma delle candele. Nessuno dei suoi predecessori artistici ha mai elaborato transizioni simili con tale maestria. Luce e ombra svolgono un ruolo cruciale nelle sue opere e fanno parte della composizione in varie e spesso alternative configurazioni. Studiare i dipinti di de La Tour aiuta a comprendere l'uso della luce e delle sue propriet\u00e0.<\/p>\n

\"Come
\nGeorges de La Tour \u00abMaria Maddalena in penitenza\u00bb, 1638-1643.<\/i><\/p>\n

a \u2014 Alta contrasto<\/h4>\n

\nIn questa pittura, il volto luminoso e l'abbigliamento si stagliano su uno sfondo scuro. Grazie all'alta contrasto dei toni, l'attenzione dello spettatore \u00e8 focalizzata su questa parte dell'immagine. In realt\u00e0, un simile contrasto non esisterebbe. La distanza tra il volto e la candela \u00e8 maggiore di quella tra la candela e le mani. Tuttavia, paragonando al volto, vediamo che il tono e il contrasto delle mani sono attenuati. Georges de La Tour utilizza diversi contrasti per attrarre l'attenzione dell'osservatore.<\/p>\n

\"Come
\n <\/p>\n

b \u2014 Contorno e ritmo della luce<\/h4>\n

\nA causa dell'ampia differenza di toni, in alcune aree ai bordi delle figure si creano contorni. Anche nelle parti scure del dipinto, all'artista piaceva usare toni diversi per accentuare i confini dell'oggetto. La luce non si concentra in un'unica area, ma scivola gi\u00f9: dal volto verso le gambe.<\/p>\n

\"Come
\n<\/p>\n

c \u2014 Fonte di luce<\/h4>\n

\nNella maggior parte delle opere di Georges de La Tour, vengono utilizzate candele o lampade come fonte di luce. Nel dipinto \u00e8 rappresentata una candela accesa, ma sappiamo gi\u00e0 che la luce e l'ombra qui non dipendono da essa. Georges de La Tour ha posizionato il volto su uno sfondo scuro e ha messo la candela per creare un passaggio netto tra i toni. Per un elevato contrasto, i toni chiari si accostano ai scuri, raggiungendo un effetto ottimale.<\/p>\n

\"Come
\n<\/p>\n

d \u2014 Ombra e luce come composizione di figure geometriche<\/h4>\n

\nSe semplifichiamo la luce e l'ombra in quest'opera, vedremo forme geometriche di base. L'unit\u00e0 di toni chiari e scuri forma una composizione semplice. Essa suggerisce indirettamente una sensazione di spazio, in cui la posizione degli oggetti e delle figure mostra il primo e il secondo piano, creando tensione ed energia.<\/p>\n

\"Come
\n<\/p>\n

2 \u2014 Tecniche cinematografiche di base per l'illuminazione<\/h3>\n

<\/p>\n

2.1 \u2014 Illuminazione a tre punti<\/h4>\n

\nUno dei metodi pi\u00f9 popolari e riusciti per illuminare qualsiasi oggetto \u00e8 l'illuminazione a tre punti, uno schema classico di Hollywood. Questa tecnica permette di trasmettere il volume dell'oggetto.<\/p>\n

Luce principale (Key Lighting, cio\u00e8 la fonte di luce principale)<\/b>
\nDi solito, questa \u00e8 la luce pi\u00f9 potente in ogni scena. Pu\u00f2 provenire da qualsiasi luogo, la sua sorgente pu\u00f2 essere lateralmente o dietro l'oggetto (Jeremy Birn \u00abIlluminazione e rendering digitale\u00bb).<\/p>\n

\"Come
\n
\nLuce di riempimento (Fill Lighting, ovvero luce per gestire i contrasti)<\/b>
\nDal nome \u00e8 evidente che viene utilizzata per \"riempire\" e rimuovere le aree scure create dalla luce principale. La luce di riempimento \u00e8 notevolmente meno intensa e posizionata con un angolo rispetto alla sorgente principale di luce.<\/p>\n

\"Come
\n
\nLuce di retroilluminazione (Backlighting, cio\u00e8 separatore dello sfondo)<\/b>
\nViene utilizzata per trasmettere volume alla scena. Essa separa l'oggetto dallo sfondo. Come la luce di riempimento, la luce di retroilluminazione \u00e8 meno intensa e copre una superficie pi\u00f9 ampia dell'oggetto.<\/p>\n

\"Come
\n<\/p>\n

2.2 \u2014 Dal basso<\/h4>\n

\nA causa del movimento del sole, siamo abituati a vedere le persone illuminate da ogni angolo, tranne che dal basso. Questo modo appare molto insolito.<\/p>\n

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

2.3 \u2014 Da dietro<\/h4>\n

\nL'oggetto si trova tra la sorgente di luce e lo spettatore. Di conseguenza, attorno all'oggetto si crea un alone luminoso, mentre le altre sue parti rimangono in ombra.<\/p>\n

\"Come
\n\u00abE.T. l'extra-terrestre\u00bb, Steven Spielberg, 1982<\/i><\/p>\n

2.4 \u2014 Di lato<\/h4>\n

\nQuesta illuminazione viene utilizzata per mettere in evidenza la scena da un lato. Crea un chiaro contrasto, mostrando le texture e accentuando i contorni dell'oggetto. Questo metodo \u00e8 simile alla tecnica di luce e ombra.<\/p>\n

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

2.5 \u2014 Illuminazione pratica<\/h4>\n

\nQuesta \u00e8 un'illuminazione reale nella scena, cio\u00e8: lampade, candele, schermi televisivi e altro. Questa luce aggiuntiva pu\u00f2 essere utilizzata per aumentare l'intensit\u00e0 dell'illuminazione.<\/p>\n

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

2.6 \u2014 Luce riflessa<\/h4>\n

\nLa luce proveniente da una potente sorgente viene diffusa tramite un riflettore o una superficie, come pareti o soffitti. In questo modo, la luce copre una superficie pi\u00f9 ampia e si distribuisce in modo pi\u00f9 uniforme.<\/p>\n

\"Come
\n\u00abIl cavaliere oscuro: la rinascita della leggenda\u00bb, Christopher Nolan, 2012<\/i><\/p>\n

2.7 \u2014 Luce dura e morbida<\/h4>\n

\nLa principale differenza tra luce dura e luce morbida \u00e8 la dimensione della sorgente luminosa rispetto all'oggetto. Il sole \u00e8 la sorgente di luce pi\u00f9 grande nel sistema solare. Tuttavia, si trova a 90 milioni di chilometri da noi, il che significa che \u00e8 una piccola sorgente luminosa. Crea ombre nette e, di conseguenza, luce dura. Quando compaiono delle nuvole, tutto il cielo diventa una grande sorgente di luce e le ombre diventano pi\u00f9 difficili da distinguere. Di conseguenza, si ha una luce morbida.<\/p>\n

\"Come
\nEsempi 3D con LEGO, Jo\u00e3o Prata, 2017<\/i><\/p>\n

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

\nL'illuminazione high key \u00e8 utilizzata per creare scene molto luminose. \u00c8 spesso vicina a un'esposizione sovraesposta. Tutte le sorgenti di luce sono approssimativamente uguali in potenza.
\nA differenza dell'illuminazione high key, con la low key la scena \u00e8 fortemente oscurata e pu\u00f2 presentare una sorgente di luce potente. Il focus \u00e8 sulle ombre, non sulla luce, per trasmettere una sensazione di suspense o drammaticit\u00e0.<\/p>\n

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

2.9 \u2014 Illuminazione motivata (Motivated Lighting)<\/h4>\n

\nQuesto tipo di illuminazione imita la luce naturale \u2014 solare, lunare, luci di strada e cos\u00ec via. Viene utilizzata per migliorare l'illuminazione pratica. Tecniche speciali aiutano a rendere l'illuminazione motivata naturale, come filtri (gobo) per creare l'effetto di finestre oscurate.<\/p>\n

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

2.10 \u2014 Luce esterna<\/h4>\n

\nQuesta pu\u00f2 essere luce solare, lunare o luci di strada visibili nella scena.<\/p>\n

\"Come
\n\u00abStranger Things. Stagione 3\u00bb, fratelli Duffer, 2019<\/i><\/p>\n

III \u2014 Fondamenti del rendering<\/h2>\n

\nI level designer riconoscono l'importanza dell'illuminazione e, con essa, raggiungono una certa percezione della scena. Per mettere in evidenza il livello e raggiungere gli obiettivi visivi desiderati, devono definire le sorgenti di luce statiche, i loro angoli di diffusione e colori. Impostano un'atmosfera specifica e la visibilit\u00e0 necessaria. Ma non \u00e8 tutto cos\u00ec semplice, poich\u00e9 l'illuminazione dipende da specifiche tecniche \u2014 ad esempio, dalla potenza della CPU. Pertanto, esistono due tipi di illuminazione: illuminazione precalcolata e rendering in tempo reale.<\/p>\n

1 \u2014 Illuminazione precomputata (Precomputed lighting)<\/h3>\n

\nI designer utilizzano l'illuminazione statica per definire le caratteristiche di illuminazione di ogni sorgente, incluso il suo posizionamento, angolo e colore. In generale, implementare l'illuminazione globale in tempo reale \u00e8 impossibile a causa delle limitazioni delle prestazioni. <\/p>\n

L'illuminazione globale statica precomputata pu\u00f2 essere utilizzata nella maggior parte dei motori, inclusi Unreal Engine e Unity. Il motore 'cotta' tale illuminazione in una texture speciale, chiamata 'mappa di illuminazione' (lightmap). Queste lightmap vengono memorizzate insieme ad altri file di mappa e il motore le utilizza durante il rendering della scena. <\/p>\n

\"Come
\nLa stessa scena: senza illuminazione (a sinistra), solo con illuminazione diretta (al centro) e con illuminazione globale indiretta (a destra). Illustrazioni da Unity Learn<\/i><\/p>\n

Oltre ai lightmap, ci sono le mappe delle ombre che vengono utilizzate per creare ombre. Inizialmente, tutto viene disegnato tenendo conto della sorgente di luce: essa genera l'ombra che riflette la profondit\u00e0 pixel della scena. La mappa di profondit\u00e0 pixel ottenuta \u00e8 chiamata mappa delle ombre. Contiene informazioni sulla distanza tra la sorgente di luce e gli oggetti pi\u00f9 vicini ad essa per ogni pixel. Successivamente, si esegue il rendering, in cui ogni pixel della superficie viene confrontato con la mappa delle ombre. Se la distanza tra il pixel e la sorgente di luce \u00e8 maggiore di quella registrata nella mappa delle ombre, il pixel si trova nell'ombra.<\/p>\n

\"Come
\nAlgoritmo di applicazione della mappa delle ombre. Illustrazione con OpenGl-tutorial<\/i><\/p>\n

2 \u2014 Rendering in tempo reale<\/h3>\n

\nUno dei modelli classici di illuminazione per il tempo reale \u00e8 chiamato modello di Lambert (in onore del matematico svizzero Johann Heinrich Lambert). Durante il rendering in tempo reale, la GPU di solito invia oggetti uno per uno. Questo metodo utilizza la trasformazione dell'oggetto (posizione, angolo di rotazione e scala) per determinare quale delle sue superfici deve essere disegnata. <\/p>\n

Nel caso dell'illuminazione di Lambert, la luce emana da ogni punto della superficie in tutte le direzioni. Non vengono considerati alcuni dettagli, come i riflessi (articolo di Chandler Pralla). Per rendere la scena pi\u00f9 realistica, si applicano effetti aggiuntivi al modello di Lambert, come i riflessi, ad esempio.<\/p>\n

\"Come
\nShading di Lambert con esempio di sfera. Illustrazione dai materiali di Petr Dyachikhin.<\/i><\/p>\n

La maggior parte dei moderni motori (Unity, Unreal Engine, Frostbite e altri) utilizzano il rendering fisicamente corretto (Physically Based Rendering, PBR) e lo shading (articolo di Lucas Orsvarna). Il PBR shading offre metodi e parametri pi\u00f9 intuitivi e pratici per descrivere la superficie. In Unreal Engine, i materiali PBR presentano i seguenti parametri:<\/p>\n