Università degli Studi di Trieste

Corso di Laurea Specialistica in Ingegneria Informatica

Tesina per il corso di Elementi di Grafica Digitale

a.a. 2006/2007

High Dynamic Range Rendering in OpenGL

Studente : Dotta Alberto Matricola : 81700080

Docente: Prof. M. Hmeljak

2

INTRODUZIONE

Al giorno d’oggi, le applicazioni di rendering 3D in real-time sono visivamente più “impressionanti” che in passato. Questo grazie all’evoluzione hardware che permette allo sviluppatore di produrre effetti incredibili.

L’ High Dynamic Range Rendering è un’insieme di tecniche che emerse circa un paio di anni fa in alcuni videogames come ad esempio Half-Life 2. Antecedentemente non era possibile utilizzare rendering HDR reali a causa delle limitazioni GPU (Graphics Processing Unit).

In questa relazione, verrà esposto cosa sia l’HDR e come possa essere utilizzata nel rendering real-time. Il progetto OpenGL associato a questa relazione dimostrerà l’utilizzo dei vari effetti HDR

3

Indice 1. HIGH DYNAMIC RANGE...........................................................................................................6 1.1 DEFINIZIONE...........................................................................................................................6 1.2. ESPOSIZIONE .........................................................................................................................7 1.3. TONE MAPPING.....................................................................................................................8 2. REAL TIME HDR RENDERING ...............................................................................................9 2.1 FILE FORMAT..........................................................................................................................9 2.2 PRINCIPI ...................................................................................................................................9 2.3 HDR IN OpenGL.......................................................................................................................9 2.3.1 Frame Buffer Object ...........................................................................................................9 2.3.2 GLSL.................................................................................................................................10 2.3.3 Buffer formats and limitations ..........................................................................................10 3. ENVIRONMENT MAPPING AND ASSOCIATED SHADERS ............................................11 3.1 PRESENTATION....................................................................................................................11 3.2. REFLECTION ........................................................................................................................13 3.3. REFRACTION .......................................................................................................................16 3.4. EFFETTO FRESNEL .............................................................................................................18 3.5. CHROMATIC DISPERSION ................................................................................................20 3.6. HDR RENDERING PIPELINE..............................................................................................23 4. SCREENSHOTS ..........................................................................................................................26 4.1 ESEMPI DI ESPOSIZIONE....................................................................................................26 4.2. COMPARAZIONE TRA HDR E LDR..................................................................................27 4.3. VARI ESEMPI........................................................................................................................27 CONCLUSIONE..............................................................................................................................29 Bibliografia .......................................................................................................................................30 4

Elenco delle figure Figura 1 – Screenshot di FarCry senza e con HDR .............................................................................7 Figura 2 – 6 esposizioni illustranti i passi per ottenere un’immagine HDR........................................7 Figura 3 – Esempio di Tone Mapped High Dynamic Range...............................................................8 Figura 4 – Spherical Environment Map Shape (source:NVIDIA).....................................................11 Figura 5 – Light Probe from Paul Debevec .......................................................................................12 Figura 6 – Cube Environment Map Shape (source:NVIDIA) ...........................................................12 Figura 7 – Cross probe from Paul Devebec .......................................................................................13 Figura 8 – Texture Images for a Cube Map (source:NVIDIA)..........................................................13 Figura 9 - Calculating the Reflected Ray...........................................................................................14 Figura 10 - HDR and reflection shader..............................................................................................15 Figura 11 - HDR and reflection shader with decal texture ................................................................16 Figura 12 - Snell's Law ......................................................................................................................16 Figura 13 - HDR and refraction shader..............................................................................................18 Figura 14 - HDR and fresnel shader ..................................................................................................19 Figura 15 - Chromatic Dispersion......................................................................................................21 Figura 16 - HDR and chromatic dispersion shader............................................................................23 Figura 17 - HDR rendering process ...................................................................................................25 Figura 18 - Minimum and low exposure............................................................................................26 Figura 19 - Normal and high exposure ..............................................................................................26 Figura 20 - Car and glass with fresnel effect .....................................................................................27 Figura 21 - Reflecting car ..................................................................................................................27 Figura 22 - Reflecting spoon..............................................................................................................28 Figura 23 - Reflecting teapot .............................................................................................................28 5

Capitolo 1. HIGH DYNAMIC RANGE 1.1 DEFINIZIONE L' HDR, acronimo di High Dynamic Range, è una tecnica utilizzata in computer grafica e in fotografia per consentire che i calcoli di illuminazione possano essere fatti in uno spazio più ampio (un high range appunto) e si possano rappresentare valori di illuminazione molto alti o molto bassi.

L'HDR dà la possibilità di immortalare una scena avendo poi il totale controllo sull'immagine finale; ad esempio è possibile esporre nuovamente la foto, correggendo o perfezionando il risultato finale.

Le attuali immagini digitali sono create in modo tale da essere visualizzate su monitos. A causa del limitato sistema di visualizzazione umano, questi monitor supportano fino a 16.7 milioni di colori (24bits). In questo modo, è logico memorizzare immagini numeriche per confrontare il range di colori del display. Per esempio, formati famosi come bmp o jpeg, tradizionalmente utilizzano 16, 24, 32 bits per ciascun pixel. Ciascun pixel è composto da tre colori primari: Rosso, Verde, Blu (ed eventualmente alfa, la trasparenza). Così, se un pixel è memorizzato in 24 bits, il valore di ciascun componente può variare da 0 a 255. Questo è sufficiente nella maggior parte dei casi ma questa immagine può rappresentare solamente un rapporto di contrasto di 256:1, considerando che una scena naturale esposta alla luce del sole può presentare un contrasto di 50,000:1. La maggior parte dei monitor dei computers hanno uno specifico rapporto di contrasto compreso tra il 500:1 e il 1000:1. HDR coinvolge l'uso di una gamma dinamica più larga dell’usuale e questo significa che ciascun pixel può rappresentare un contrasto maggiore ed un range dinamico maggiore. Il range usuale è denominato Low Dynamic Range (LDR).

HDR è tipicamente utilizzato in due tipi di applicazioni: l’imaging e il rendering:

• High Dynamic Range Imaging è usato dai fotografi o dai registi; si focalizza su immagini statiche sulle quali si può avere il pieno controllo e un tempo di processing illimitato.

• Al contrario, High Dynamic Range Rendering si focalizza su applicazioni real-time come ad esempio videogames o simulazioni.

6

Figura 1 – Screenshot di FarCry senza e con HDR 1.2. ESPOSIZIONE Quando si fotografa una scena, si può decidere per quanto tempo il sensore venga esposto alla luce; in questo modo, controllando il tempo di esposizione, i fotografi riescono a creare effetti differenti. Un’immagine HDR possiede tutte le informazioni necessarie per simulare il tempo di esposizione; in questo modo un fotografo può prendere un’immagine HDR e rielaborarla con il computer aggiustando l’esposizione dopo averla fatta. Si può creare un’immagine HDR attraverso la composizione di immagini con differenti tempi di esposizione. Paul Debevec1 ha fatto grandi lavori in questo campo; uno dei suoi famosi scritti spiega come creare sfumature di luce dalle fotografie.

Figura 2 – 6 esposizioni illustranti i passi per ottenere un’immagine HDR

1 http://www.debevec.org

7

Figura 3 – Esempio di Tone Mapped High Dynamic Range 1.3. TONE MAPPING

Tone mapping è un applicativo che procede a fare una mappatura delle diverse aree di densità dell'immagine,individuando ogni area di valore diverso, ed esaltandola separatamente dalle altre, ottenendo a seconda dell'intensità voluta un’iper-saturazione dei colori, un innalzamento del contrasto, con risalto di dettagli prima poco visibili.

I monitors tradizionali hanno dei limiti per cui non possono mostrare i colori HDR; per questo motivo esiste il tone mapping, che permette di mappare un colore HDR ad un range dinamico più basso (LDR), al fine di poter esser visualizzato.

Sono stati introdotti molteplici operatori2 di tone mapping che hanno dato differenti risultati visuali; possono essere semplici ed efficienti per essere utilizzati nel real-time oppure molto complessi per l’editing di immagini. Alcuni operatori di tone mapping utilizzano come parametri, per controllare l’immagine finale, l’esposizione o la gamma.

2 http://www.mpi-inf.mpg.de/resources/tmo/

8

Capitolo 2. REAL TIME HDR RENDERING 2.1 FILE FORMAT

Le immagini HDR contengono dei valori HDR, al contrario delle classiche immagini digitali, che memorizzano valori LDR. Esistono principalmente due formati per manipolare le immagini HDR:

• Radiance: nel 1985 Greg Ward ha creato il radiance file format, che è tutt’ora utilizzato. Questi files utilizzano il formato RGBE, 32bit per pixel e il concetto chiave è quello di utilizzare un’esponente condiviso per rosso, verde e blu. Si possono elaborare pixel molto luminosi, senza perdita di precisione per quelli più scuri;

• OpenEXR: rilasciato nel 2003 come standard libero, sotto una licenza gratuita. Tale formato,

robusto ed efficiente, è prevalentemente utilizzato per la produzione di film, e supporta diverse gamme di colore.

2.2 PRINCIPII Per fare il rendering HDR di una scena, bisogna computare ogni calcolo utilizzando variabili e buffer “capaci”; tutte le pipeline di rendering della GPU devono supportare HDR: illuminazione, textures, effetti di post processing… Il normale processo di rendering tratta i colori a 32bit e ciascun componente in un range tra 0 e 1; tuttavia, in HDR, questi valori possono essere superiori ad 1. Se la GPU non supporta float texture o float render texture, tutti i valori vengono compressi nell’intervallo tra 0 e 1. 2.3 HDR IN OpenGL

Il rendering HDR è supportato in OpenGL 2.0 ma sono necessarie alcune estensioni.

2.3.1 Frame Buffer Object

FBO è un’estensione (GL_EXT_framebuffer_object) per permettere il rendering a speciali framebuffer che possono essere utilizzati come texture. Lo si può utilizzare sia come input che come output, e bisogna specificare il formato del buffer (RGBA: 32bit, RGBA16F: float 64bit…).

L’idea è quella di fare il rendering di una scena utilizzando una texture che conterrà valori HDR; si deve poi fare il render di questa texture a schermo intero, utilizzando il tone mapping per convertire HDR a LDR.

FBO sostituisce l’estensione ormai disapprovata del pBuffer (pixel buffer), in quanto più potente e facile da utilizzare.

9

2.3.2 GLSL Tutti gli effetti di luminosità, sfuocatura, tone mapping, sono realizzati utilizzando GL

Shading Language3 .

2.3.3 Buffer formats and limitations L’estensione FBO è disponibile sulle GPU più recenti ma non è consistente in tutte le

schede. I due maggiori produttori, ATI e NVIDIA, hanno rilasciato GPU con alcune limitazioni nell’utilizzo del rendering delle textures.

1. Il formato FBO GL_RGBA32F (128 bits/color) è supportato ma è attualmente così

lento che non può essere utilizzato per applicazioni real-time. Se si vuole utilizzare HDR nei proprio programmi, bisogna considerare il formato GL_RGBA16F;

2. Alcune schede video non supportano il filtering bilineare mentre si fa il render delle textures. In questo modo, se si vuole realizzare un buon effetto di sfocatura con tali GPU, bisogna filtrare le textures “a mano”;

3. OpenGL 2.0 supporta non-power-of-two textures, che sono molto utilizzate per controllare il rendering delle textures di qualunque dimensione, ma alcune schede non sono conformi e in questo caso bisogna utilizzare la texture rectangle extension.

3 Linguaggio ad alto livello basato sulla programmazione in C.

10

Capitolo 3. ENVIRONMENT MAPPING AND ASSOCIATED SHADERS 3.1 PRESENTATION Il mapping di un’ambiente simula un oggetto che riflette o rifrange quello che gli sta attorno. Questa tecnica è molto efficiente e offre risultati visivi molto convincenti. I due principali metodi di mapping di un’ambiente sono lo Sphere Mapping e il Cube Mapping. Lo sphere mapping rappresenta l’ambiente da un punto di vista fisso ed è stato rimpiazzato gradualmente dal cube mapping, che fornisce risultati ben migliori.

Figura 4 – Spherical Environment Map Shape (source:NVIDIA)

11

Figura 5 – Light Probe from Paul Debevec

Il mapping del cubo è composto da 6 texture, una per ogni faccia del cubo stesso. Le sei immagini formano un’immagine onnidirezionale e si intersecano insieme come le facce di un cubo.

Figura 6 – Cube Environment Map Shape (source:NVIDIA)

12

Figura 7 – Cross probe from Paul Devebec

Il cube mapping ha un punto di vista indipendente e può essere dinamico. Per aver il mapping del cubo, si necessita di un vettore 3D e non più di texture a 2 coordinate, come appunto nel caso 2D. Questo vettore è il raggio che ha origine dal centro del cubo e interseca una delle facce.

Figura 8 – Texture Images for a Cube Map (source:NVIDIA)

3.2. REFLECTION

Quando un raggio di luce colpisce la superficie di un oggetto, può essere riflesso se la superficie è appropriata (metallo, vetro, specchio…). Il vettore di incidenza I, che va dal punto di

13

vista alla superficie dell’oggetto, quando la colpisce viene riflesso in una direzione R, basata su una superficie perpendicolare N.

Figura 9 - Calculating the Reflected Ray

• GLSL reflection fragment program

// color of the material uniform vec4 matColor; // cube map uniform samplerCube env ; // reflection factor uniform float reflectionFactor ; // reflected vector varying vec3 R ; void main () { gl_FragColor = mix (matColor, textureCube(env, R), reflectionFactor) ; }

14

• GLSL reflection vertex program

// position of the view eye in world space uniform vec3 eyePos ; // reflected vector varying vec3 R ; void main () { // create incident vector

vec3 I = normalize (gl_Vertex.xyz – eyePos.xyz) ; // calculate reflected vector R = reflect (I, gl_Normal) ;

// transform vertex gl_Position = ftransform() ;

}

Figura 10 - HDR and reflection shader

15

Figura 11 - HDR and reflection shader with decal texture

3.3. REFRACTION.

Quando un raggio di luce attraversa due materiali di differente densità, la sua direzione cambia. Questo cambiamento è quantificato dal rapporto degli indici di rifrazione dei due materiali

Figura 12 - Snell's Law

16

• GLSL refraction fragment program

// Cube map uniform samplerCube env ; // Refracted vector varying vec3 R ; void main () { gl_FragColor = textureCube(env, R) ; }

• GLSL refraction vertex program // Position of the view eye in world space uniform vec3 eyePos ; // Ratio of indices of refraction uniform float etaRatio ;

// Refracted vector varying vec3 R ;

void main () { // Create incident vector

vec3 I = normalize (gl_Vertex.xyz – eyePos.xyz) ; // Calculate refracted vector R = refract (I, gl_Normal, etaRatio) ;

// Transform vertex gl_TexCoord [0] = gl_MultiTexCoord0 ; gl_Position = ftransform() ;

}

17

Figura 13 - HDR and refraction shader

3.4. EFFETTO FRESNEL Nella realtà, quando un raggio di luce colpisce il contorno tra due materiali, parte della luce viene riflessa sulla superficie e parte della luce viene rifratta attraverso la superficie. L’equazione di Fresnel descrive in maniera precisa questo fenomeno; dato che è un’equazione complessa, ne viene presentata la versione semplificata:

reflectionCoefficient = max 0, min 1, bias scale × 1I⋅N power

18

Figura 14 - HDR and fresnel shader

• GLSL fresnel effect fragment program

//cube map uniform samplerCube env ; //reflected and refracted vectors varying vec3 reflectedVector, refractedVector ; //reflection factor based on fresnel equation varying float refFactor ; void main () { //read cube map vec4 reflectedColor = textureCube(env, reflectedVector) ; vec4 refractedColor = textureCube(env, refractedVector) ; //mix reflected and refracted colors gl_FragColor=mix(refractedColor, reflectedColor, refFactor) ; }

19

• GLSL fresnel effect vertex program

// position of the view eye in world space uniform vec3 eyePos ; // Fresnel parameters uniform float fresnelBias, fresnelScale, fresnelPower ; // ratio of indices of refraction uniform float etaRatio; // reflected and refracted vectors varying vec3 reflectedVector, refractedVector ; // reflection factor based on fresnel equation varying float refFactor ; void main() { // create incident and normal vectors vec3 I = normalize (gl_Vertex.xyz – eyePos.xyz) ; vec3 N = normalize (gl_Normal) ; // calculate reflected and refracted vectors reflectedVector = reflect (I, N) ; refractedVector = refract (I, N, etaRatio) ; // approximation of the fresnel equation refFactor = fresnelBias + fresnelScale * pow (1 + dot (I, N), fresnelPower) ; // transform vertex gl_TexCoord [0] = gl_MultiTexCoord0 ; gl_Position = ftransform() ; }

3.5. CHROMATIC DISPERSION

Quando un raggio di luce è rifratto, la sua direzione non è basata sul rapporto degli indici di rifrazione ma dipende anche dalla lunghezza d’onda della luce incidente. Tale fenomeno è conosciuto come dispersione cromatica.

20

Figura 15 - Chromatic Dispersion

• GLSL chromatic dispersion fragment program

// cube map uniform samplerCube env ; // reflected and refracted vectors varying vec3 R, TRed, TGreen, TBlue ; // reflection factor based on fresnel equation varying float refFactor ; void main () { // read cube map for reflected color vec4 refractedColor ; // read cube map for refracted color (3 times) refractedColor.r=textureCube(env, TRed).r ; refractedColor.g=textureCube(env, TGreen).g ; refractedColor.b=textureCube(env, TBlue).b ; // mix reflected and refracted colors gl_FragColor=mix(refractedColor, reflectedColor, refFactor) ; }

21

• GLSL chromatic dispersion vertex program

// position of the view eye in world space uniform vec3 eyePos ; // ratio of indices of refraction for the 3 colors uniform vec3 etaRatioRGB ; // fresnel parameters uniform float fresnelBias, fresnelScale, fresnelPower ; // reflection vector; varying vec3 R ; // separate refraction vectors varying vec3 TRed, TGreen, TBlue ; // reflection factor based on fresnel equation varying float refFactor ; void main() { // create incident and normal vectors vec3 I = normalize (gl_Vertex.xyz - eyePos.xyz) ; vec3 N = normalize (gl_Normal) ; // reflection vector R = reflect (I, N) ; // separate refraction vectors TRed = refract(I, N, etaRatioRGB.r) ; TGreen = refract(I, N, etaRatioRGB.g) ; TBlue = refract(I, N, etaRatioRGB.b) ; // appoximation of the fresnel equation refFactor = fresnelBias + fresnelScale * pow ( 1 , 0 + dot (I , N) , fresnelPower) ; // transform vertex gl_TexCoord[0] = gl_MultiTexCoord0 ; gl_Position = ftransform() ; }

22

Figura 16 - HDR and chromatic dispersion shader

3.6. HDR RENDERING PIPELINE

1. Si attiva un float FBO per fare il render della scena; 2. Lo sky box è renderizzato utilizzando il cube map, letto da un file .hdr e

memorizzato nel formato GL_RGBA16F in modo da contenere valori HDR; 3. Si disegna la maglia al centro della scena con un solo effetto (riflessione, rifrazione,

effetto Fresnel o dispersione cromatica); 4. Vengono estratte le aree più luminose dell’immagine in un FBO HDR. La texture è

ridotta di dimensioni un numero desiderato di volte tramite filtering bilineare; 5. L’immagine di base viene composta sommando tutte le texture ridotte; 6. Si prende un HDR framebuffer con la scena e gli effetti desiderati; bisogna poi

convertire l’immagine HDR in LDR, applicando un operatore di tone mapping alla texture. L’operatore è il seguente:

Y = exposure x {[(exposure/maxLuminance)+1]/(exposure+1)}

Questo operatore permette all’utente di controllare l’esposizione: con un’esposizione piccola la scena sarà molto scura mentre, dall’altro lato, con una grande esposizione, la scena sarà molto brillante.

23

• GLSL tone mapping fragment program

// render texture and bloom map uniform sampler2D tex, bloom ; // control exposure with this value uniform float exposure ; // how much bloom to add uniform float bloomFactor ; // max bright uniform float brightMax ; void main() { vec2 st = gl_TexCoord[0].st ; vec4 color = texture2D(tex, st) ; vec4 colorBloom = texture2D(bloom, st) ; // add bloom to the image color += colorBloom * bloomFactor ; // perform tone-mapping float Y = dot(vec4(0.30, 0.59, 0.11, 0.0), color) ; float YD = exposure * (exposure/brightMax + 1.0) / (exposure + 1.0) ; color *= YD ; gl_FragColor = color ; }

24

Figura 17 - HDR rendering process

25

Capitolo 4.

SCREENSHOTS

4.1 ESEMPI DI ESPOSIZIONE

Figura 18 - Minimum and low exposure

Figura 19 - Normal and high exposure

26

4.2. COMPARAZIONE TRA HDR E LDR

Figura 20 - Car and glass with fresnel effect

4.3. VARI ESEMPI

Figura 21 - Reflecting car

27

Figura 22 - Reflecting spoon

Figura 23 - Reflecting teapot

28

CONCLUSIONE High Dynamic Range Rendering e Imaging mostrano una scena virtuale in maniera più “reale”, controllando l’immagine con l’esposizione ed altri effetti. HDR è ancora un tecnica giovane e di conseguenza non è utilizzata spesso nell’industria; schede video recenti con shaders e buffer che supportano floating point fanno si che il rendering HDR possa emergere in prodotti commerciali come i videogames. Anche se gran parte degli hardware attuali possono utilizzare immagini HDR, i nostri schermi possono solo rendere colori a 32bit. Questo è il motivo per cui il tone mapping può essere applicato con lo scopo di mappare i valori HDR ai valori limitati di uno schermo Si stanno attualmente sperimentando schermi HDR, ma possiamo sperare, in un futuro non molto lontano, di poter essere equipaggiati con un completo hardware HDR.

29

Bibliografia OpenGL: http://opengl.orghttp://opengl.org/documentation/specs/version2.0/glspec20.pdfhttp://nehe.gamedev.net OpenGL Shading Language: http://oss.sgi.com/projects/ogl-sample/registry/ARB/GLSLangSpec.Full.1.10.59.pdfhttp://www.lighthouse3d.com/opengl/glslhttp://www.mathematik.uni-dortmund.de/~goeddeke/gpgpu/tutorial.html OpenGL Cube Map Texturing: http://developer.nvidia.com/object/cube_map_ogl_tutorial.html The CG tutorial: http://developer.nvidia.com/object/cg_tutorial_home.html Shaders for game programmers and artists: http://www.courseptr.com/downloads/chapterview/00924-ch8prev.pdf High Dynamic Range Rendering: http://www.gamedev.net/reference/articles/article2208.asp Dynamic Range in Digital Photography: http://www.cambridgeincolour.com/tutorials/dynamic-range.htm Tone Mapping: http://en.wikipedia.org/wiki/Tone_mappinghttp://graphics.cs.uni-sb.de/courses/ss02/CG2/folien/12ToneMapping.pdf Paul Debevec home page: http://www.debevec.org GPU sdk: http://www.ati.com/developerhttp://developer.nvidia.com Free 3d models: http://www.turbosquid.com

30