{"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\/news\/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 cos'\u00e8 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 fa subito caso.
\n<\/a><\/noindex><\/p>\n

Introduzione<\/h2>\n

\nL'illuminazione non serve solo per permettere al giocatore di vedere la scena (anche se \u00e8 molto importante). La luce influenza le emozioni. Molte tecniche di illuminazione nel teatro, nel cinema e nell'architettura vengono utilizzate per intensificare l'aspetto emotivo. Perch\u00e9 non prendere in prestito questi principi dai game designer? Il legame tra l'immagine e la risposta emotiva fornisce un ulteriore strumento potente che aiuta a lavorare con i personaggi, la narrativa, il suono, le meccaniche di gioco e cos\u00ec via. Inoltre, l'interazione della luce con la superficie consente di influenzare luminosit\u00e0, colore, contrasto, ombre e altri effetti. Tutto questo rappresenta una base che ogni designer dovrebbe padroneggiare.<\/p>\n

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

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

I \u2014 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, \u2014 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 organismo e influisce sull'orologio biologico. Approfondiamo cosa sia il flusso luminoso, l'intensit\u00e0 della luce, il colore e i punti focali. Solo allora capiremo 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 le lunghezze d'onda vanno da 380 a 780 nm. Durante il giorno distinguiamo i colori grazie ai coni, mentre di notte l'occhio utilizza i bastoncelli e vediamo solo scale di grigi.<\/p>\n

Le propriet\u00e0 principali della luce visibile sono direzione, intensit\u00e0, frequenza e 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 di propagazione<\/h3>\n

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

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

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

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

\"Come
\n
\nIntensit\u00e0 luminosa.<\/b> La quantit\u00e0 di luce trasportata in una direzione specifica.
\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 (m2).<\/p>\n

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

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

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

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

\nLa temperatura di colore si misura in Kelvin e riflette il colore di una specifica sorgente di luce. Il fisico britannico William Kelvin riscald\u00f2 un pezzo di carbone. Questo si scald\u00f2, mostrando colori diversi corrispondenti a diverse temperature. Inizialmente, il carbone emise una luce rosso scuro, ma man mano che si riscaldava, il colore cambi\u00f2 in giallo brillante. A temperatura massima, la luce emessa divenne blu-bianca.<\/p>\n

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

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

\nIn questa sezione esamineremo quali schemi di illuminazione possono essere utilizzati per influenzare l'espressivit\u00e0 del contenuto \/ della rappresentazione visiva. Per farlo, definiremo somiglianze e differenze nelle tecniche di illuminazione utilizzate da artisti e designer d'illuminazione.<\/p>\n

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

\nLa luce e l'ombra sono uno dei concetti della teoria dell'arte, che si riferisce alla distribuzione delle luminosit\u00e0. Tramite questo strumento si rappresentano le transizioni di tonalit\u00e0, per trasmettere volume e atmosfera. Georges de La Tour \u00e8 noto per le sue opere con ombreggiature notturne e scene illuminate dalla fiamma di una candela. Nessuno dei suoi predecessori artistici ha mai lavorato transizioni simili con tale maestria. Luce e ombra giocano un ruolo fondamentale nelle sue opere e sono parte della composizione in varie e spesso alternative varianti. Lo studio dei dipinti di La Tour aiuta a comprendere l'uso della luce e delle sue propriet\u00e0.<\/p>\n

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

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

\nIn questo dipinto, il volto luminoso e i vestiti si stagliano su uno sfondo scuro. Grazie all'alto contrasto dei toni, l'attenzione dello spettatore \u00e8 focalizzata su questa parte dell'immagine. Nella realt\u00e0, non ci sarebbe tale contrasto. La distanza tra il volto e la candela \u00e8 maggiore rispetto a quella fra la candela e le mani. Comunque, confrontando con il volto, vediamo che il tono e il contrasto delle mani sono attenuati. Georges de La Tour utilizza diversi gradi di contrasto per attrarre l'attenzione dell'osservatore.<\/p>\n

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

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

\nA causa dell'alta differenza di toni, in alcune zone ai bordi della figura emergono contorni. Anche nelle parti scure del dipinto, all'artista piaceva usare diverse tonalit\u00e0 per sottolineare i confini dell'oggetto. La luce non \u00e8 concentrata in un'unica area, scivola verso il basso: dal volto alle gambe.<\/p>\n

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

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

\nNella maggior parte delle opere, Georges de La Tour utilizza candele o lampade come fonte di luce. Nel dipinto \u00e8 raffigurata una candela accesa, ma sappiamo gi\u00e0 che l'ombreggiatura qui non dipende da essa. Georges de La Tour ha posizionato il volto su uno sfondo scuro e ha collocato la candela per creare un passaggio netto tra le tonalit\u00e0. Per ottenere un alto contrasto, i toni chiari si affiancano a quelli scuri, raggiungendo un effetto ottimale.<\/p>\n

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

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

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

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

2 \u2014 Tecniche cinematografiche di illuminazione fondamentali<\/h3>\n

<\/p>\n

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

\nUno dei modi 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 principale di luce)<\/b>
\nDi solito, \u00e8 la luce pi\u00f9 potente di ogni scena. Pu\u00f2 provenire da qualsiasi direzione; la sua sorgente pu\u00f2 essere di lato o dietro l'oggetto (Jeremy Birn, \"Illuminazione digitale e rendering\").<\/p>\n

\"Come
\n
\nLuce di riempimento (Fill Lighting, cio\u00e8 luce per gestire i contrasti)<\/b>
\nDalla denominazione \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 sotto un angolo rispetto alla fonte principale di luce.<\/p>\n

\"Come
\n
\nLuce di sfondo (Backlighting, cio\u00e8 separatore di sfondo)<\/b>
\nViene utilizzata per trasmettere il volume della scena. Separa l'oggetto dallo sfondo. Come la luce di riempimento, la luce di sfondo \u00e8 meno intensa e copre una maggiore superficie 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 qualsiasi angolo, tranne che dal basso. Questo modo di illuminare appare molto insolito.<\/p>\n

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

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

\nL'oggetto \u00e8 posizionato tra la fonte di luce e lo spettatore. Di conseguenza, intorno all'oggetto si crea un alone luminoso, mentre le altre 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 illuminare la scena lateralmente. Crea un forte contrasto che mette in risalto le texture e sottolinea i contorni dell'oggetto. Questo metodo \u00e8 simile alla tecnica chiaro-scuro.<\/p>\n

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

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

\nSi tratta di luce reale nella scena, ovvero lampade, candele, schermo della televisione 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 di una fonte potente viene diffusa tramite un riflettore o qualche superficie, come pareti o soffitti. In questo modo, la luce copre una superficie maggiore e si distribuisce in modo pi\u00f9 uniforme.<\/p>\n

\"Come
\n\u00abIl cavaliere oscuro: il ritorno 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 luminosa pi\u00f9 grande nel sistema solare. Tuttavia, esso si trova a 90 milioni di chilometri da noi, e quindi si presenta come una piccola sorgente di luce. Crea ombre nette e, di conseguenza, una luce dura. Quando ci sono nuvole, tutto il cielo diventa una gigantesca sorgente di luce, e le ombre diventano pi\u00f9 difficili da distinguere. Ne risulta quindi una luce morbida.<\/p>\n

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

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

\nL'illuminazione high key viene utilizzata per creare scene molto luminose, spesso vicine all'overexposure. Tutte le sorgenti luminose hanno una potenza simile.
\nA differenza dell'illuminazione high key, nella low key la scena \u00e8 fortemente ombreggiata e pu\u00f2 avere una sorgente luminosa potente. Il ruolo principale \u00e8 riservato alle ombre piuttosto che alla luce, al fine di 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

\nQuest'illuminazione imita la luce naturale: sole, luna, luci stradali e cos\u00ec via. Viene utilizzata per migliorare l'illuminazione pratica. Tecniche speciali aiutano a rendere l'illuminazione motivata naturale, ad esempio 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, luce lunare o luci stradali visibili nella scena.<\/p>\n

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

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

\nI level designer sono consapevoli dell'importanza dell'illuminazione e, con essa, raggiungono una certa percezione della scena. Per mettere in risalto il livello e raggiungere gli obiettivi visivi desiderati, devono definire sorgenti luminose statiche, i loro angoli di diffusione e colori. Creano un'atmosfera specifica e una visione necessaria. Tuttavia, non \u00e8 cos\u00ec semplice, poich\u00e9 l'illuminazione dipende da caratteristiche tecniche come la potenza della CPU. Pertanto, esistono due tipi di illuminazione: illuminazione pre-calcolata e rendering in tempo reale.<\/p>\n

1 \u2014 Illuminazione pre-calcolata (Precomputed lighting)<\/h3>\n

\nI designer utilizzano l'illuminazione statica per definire le caratteristiche dell'illuminazione per ciascuna sorgente, incluso la sua posizione, angolo e colore. In generale, implementare l'illuminazione globale in tempo reale \u00e8 impossibile a causa delle performance. <\/p>\n

L'illuminazione globale statica pre-calcolata pu\u00f2 essere utilizzata nella maggior parte dei motori, inclusi Unreal Engine e Unity. Il motore 'bake' (prepara) l'illuminazione in una speciale texture, nota come 'mappa di illuminazione' (lightmap). Queste lightmap sono archiviate 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 alle lightmap, esistono mappe delle ombre, utilizzate per creare ombre. Inizialmente, tutto viene disegnato tenendo conto della sorgente luminosa, che genera un'ombra che riflette la profondit\u00e0 dei pixel della scena. La mappa di profondit\u00e0 dei pixel risultante \u00e8 chiamata mappa delle ombre. Essa contiene informazioni sulla distanza tra la sorgente luminosa e gli oggetti pi\u00f9 vicini a essa per ciascun pixel. Successivamente, viene eseguito il rendering in cui ogni pixel della superficie viene confrontato con la mappa delle ombre. Se la distanza tra il pixel e la sorgente luminosa \u00e8 maggiore di quella registrata nella mappa delle ombre, il pixel \u00e8 in ombra.<\/p>\n

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

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

\nUno dei modelli di illuminazione classici 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 gli oggetti uno alla volta. Questo metodo utilizza la rappresentazione dell'oggetto (la sua 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 prese in considerazione alcune sfumature, come i riflessi (articolo di Chandler Prall). Per rendere la scena pi\u00f9 realistica, vengono applicati effetti aggiuntivi sul modello di Lambert, come i riflessi di luce.<\/p>\n

\"Come
\nShading di Lambert su un esempio di sfera. Illustrazione dai materiali di Petr Diatchikhin.<\/i><\/p>\n

La maggior parte dei motori moderni (Unity, Unreal Engine, Frostbite e altri) utilizza il rendering fisicamente corretto (Physically Based Rendering, PBR) e l'ombreggiatura (articolo di Lucas Orsvarn). L'ombreggiatura PBR offre modi e parametri pi\u00f9 intuitivi e pratici per descrivere la superficie. In Unreal Engine, i materiali PBR hanno i seguenti parametri:<\/p>\n