Farge Modeller RGB HSV HLS CMYK. Grunnleggende Grafikk Våren HSV eller HSB. RGB farge modell

Transkript

1 Farge Modeller Grunnleggende Grafikk Våren 2007 Farge, Lys og Material RGB HSV HLS CMYK Arnt Roald Kristoffersen D3390 ITE 1605 Grunnleggende Grafikk for Spillprogrammering og ITE1530 Datamaskingrafikk RGB farge modell HSV eller HSB Står for Hue, Saturation, Value/Brightness Hue, the color type (such as red, blue, or yellow) Ranges from (but normalized to 0-100% in some applications) Saturation, the "vibrancy" of the color: Ranges from 0-100% Value, the brightness of the color: Ranges from 0-100%

2 HSV eller HSB HSV i RGB Kuben Kan bli visualisert som Farge cone eller hexcone Ikke lineær deformasjon av RGB farge kube HSL CYMK Står for Hue, Saturation, Lightness Også kalt HSI (Intensity) Visualisert som Double cone or double hexcone Ikke linær deformasjon av RGB farge kube based on mixing pigments of the following colors Cyan Magenta Yellow black Blanding av cyan, magenta, og yellow pigmenter Er ikke pure black, men en mørk murky farge.

3 RGB versus CMYK Farge dybde Red, Green, Blue and Alpha 'Additive' farge modell Mikse farger for å få hvit Optimalisert for Monitor, LCD, TV, etc. Cyan, Magenta, Yellow and black 'Subtraktive' farge modell Mikse farger for å få svart Optimalisert for Printing Et bit plan inneholder 1 bit pr piksel f.eks. 8 bit plan 2^8 = 256 forskjellige verdier 24-bit plan gir Som regel 8 bits til hver av rød, grønn og blå. Dette er ikke alltid sant Dette kan man finne ut av glgetintegerv() Tilgjengelige bit plan Med parametere GL_RED_BITS, GL_GREEN_BITS GL_BLUE_BITS, GL_ALPHA_BITS GL_INDEX_BITS Eks. Int redbits;... glgetintegerv(gl_red_bits, redbits);... RGBA mode R(ed), G(reen), B(lue), A(lpha) f.eks. 8-bits for R komponenten Lagret som integer mellom verdiene /255 = 0.0, 1/255,..., 255/255 = 1.0 Uansett antall bit plan 0.0 alltid minimum intensitet 1.0 alltid maksimum intensitet

4 RGBA OpenGL kall glcolor3{b,s,i,f,d,ub,us,ui}(type r, TYPE g, TYPE b); glcolor4{b,s,i,f,d,ub,us,ui}(type r, TYPE g, TYPE b, TYPE a); glcolor3{b,s,i,f,d,ub,us,ui}v(const TYPE *v); glcolor4{b,s,i,f,d,ub,us,ui}v(const TYPE *v); Color-Index Mode OpenGL bruker farge kart Eller oppslags tabell f (float), d(double) Suffix Data Type Min Maps to Max Maps to b 1-byte integer s 2-byte integer -32, , i 4-byte integer -2,147,483, ,147,483, ub Unsigned 1-byte integer us Unsigned 2-byte integer , ui Unsigned 4-byte integer ,294,967, Color-Index OpenGL kall Valg av farge ( tilsvarende f.eks. glcolor3f() ) glindex*(type c) glindex*v(const TYPE *c) Slette skjermen med en farge etter hver frame glclearindex(glfloat cindex) Suffix Data Type Min Maps to Max Maps to b 1-byte integer s 2-byte integer -32, , i 4-byte integer -2,147,483, ,147,483, ub Unsigned 1-byte integer us Unsigned 2-byte integer , ui Unsigned 4-byte integer ,294,967, Kommando Shading modell glshademodel(glenum mode) Mode GL_FLAT Tegnet med en enkel farge GL_SMOOTH Interpolerer mellom fargene Kalt GOURAUD Shading * s, i, f(float), d(double), ub

5 GL_FLAT versus GL_SMOOTH glbegin(gl_triangles); glcolor3f(1.0f, 0.0f, 0.0f); glvertex3f(-1.0f, 0.0f, 0.0f); // A glcolor3f(0.0f, 1.0f, 0.0f); glvertex3f( 1.0f, 0.0f, 0.0f); // B glcolor3f(0.0f, 0.0f, 1.0f); glvertex3f( 0.0f, 1.0f, 0.0f); // C glend(); Lyssetting GL_FLAT GL_SMOOTH Eksempler Lyssetting Inndeling av Lyssetting Tangle Cube x 4 5x 2 y 4 5y 2 z 4 5z =0 Cassini Ovals x 2 y 2 z 2 a 2 2 ca 2 x 2 z 2 b 2 =0 De fire uavhengige komponenter Ambient Diffuse Specular Emissive Håndtert som følgende (av OpenGL) Kalkulert hver for seg Deretter lagt sammen

6 Ambient lys Diffuse lys Sprett rundt Kommer fra en retning Retning umulig å fastsette Samme refleksjon i alle retninger Spredd likt i alle retninger Eksempler Bakgrunns belysning i et rom Stor ambient komponent Reflektert på mange overflater Kule opplyst av mørkerød ambient lys Gir enn 3D effekt Mer skinnende jo mer vinkel rett på flata Kule opplyst av mørkerød diffuse lys Utendørs spotlight Liten ambient komponent Samme retning, lite refleksjoner Ambient og Diffuse lys Specular lys Eksemplet her viser Fra en bestemt posisjon Bruk av ambient og diffuse lys Reflekterer i en bestemt retning Hvordan de skaper en mer Kan tenke den som gjenskinn Realistisk objekter Kule opplyst av mørkerød ambient og diffuse lys Supplerer til 3D effekten Skinnende metall eller plastikk Kule opplyst av mørkerød ambient og diffuse lys, og hvit specular lys Høy specular komponent Kritt eller gulvteppe Nesten ingen specular komponent

7 Emissive Lys Simulerer lys fra objektet Introduserer ingen tilleggs lys Legger intensitet til et objekt Men uavhengig av andre lyskilder Ambient Material Egenskaper Reflektert porsjon av innkommende farger Påvirker slutt fargen til objektet Påvirker intensiteten avhengig av hvor lyset treffer Diffuse Spiller den mest viktigste rolle for hvordan du oppfatter objektets farge å være Specular Avgjør egenskapen til gjenskinnet Shininess Avgjør styrken/intensiteten av gjenskinnet Emission Kula reflekterer grønn emissive lys I stede for mørkerød skinnede kule som tidligere Får objektet til å virke som om den gir fra seg lys med en gitt farge For å simulere lamper og andre lyskilder i en scene (er ingen ordentlig lyskilde) Lys RGB verdier Prosent av full intensitet for hver farge RGB verdiene er alle 1.0 lysest mulig hvit RGB verdiene er alle 0.5 forsatt hvit, men halve intensiteten Ser ut til å være grå RG=1 og B=0 Lyset ser gult ut RGB verdier Material Reflektert porsjon av innkommende farger R=1, G=0.5, B=0 Reflekterer alt innkommende rødt lys Reflekterer halv parten av innkommende grønt lys Reflekterer ingen innkommende blå lys

8 Lys som når øyet Lys og material Lys = (LR, LG, LB) Material = (MR, MG, MB) Resultat = (LR*MR, LG*MG, LB*MB) 2 Lyskilder Lys1 = (R1, G1, B1) Lys2 = (R2, G2, B2) Resultat = (R1+R2, G1+G2, B1+B2) Ingen verdi for bli større enn 1.0 Legge til lyssetting 1.Definer normal vektor, for hver vertex Kalkulere normaler 2.Lyskilder Lag, velg og posisjoner 3.Lyssetting modell Lag og velg Definer nivå av global ambient lys 4.Definer material egenskaper Setting av normaler Beregning av Normaler Kommando glnormal3*(type nx, TYPE ny, TYPE nz) glnormal3*v(const TYPE *n) Normalisering (OpenGL) glenable(...) Finne Vektoren V = P P 0 V = P P 0 Finne Normalen i j k N =V 0 V 1 V = 0 x V 0 y V 0 z V 1 x V 1 y V 1 z P 0 V 0 N P 2 V 1 P 1 GL_NORMALIZE GL_RESCALE_NORMAL Lengden til Normalen N = N x 2 N y 2 N z 2 Normalisere Normalen n= N N

9 Lage lyskilder Lyskilder gllight{if}(glenum light, GLenum pname, TYPE param); gllight{if}v(glenum light, GLenum pname, TYPE *param); Parameter navn (pname) Verdier Beskrivelse GL_AMBIENT (x, y, z, w) Ambient lys intensitet GL_DIFFUSE (x, y, z, w) Diffuse lys intensitet GL_SPECULAR (x, y, z, w) Specular intensitet GL_POSITION (x, y, z, w) Posisjon av lyskilden GL_SPOT_DIRECTION (x, y, z) Spotlight retning GL_SPOT_EXPONENT Glfloat Spotlight eksponent GL_SPOT_CUTOFF Glfloat Spotlight avkuttingsvinkel GL_CONSTANT_ATTENUATION Glfloat Konstant intensitetsreduksjon GL_LINEAR_ATTENUATION Glfloat Linear intensitetsreduksjon GL_QUADRATIC_ATTENUATION Glfloat Kvadratisk intensitetsreduksjon Lyskilder Husk å glenable(gl_lighting); glenable(gl_light0); glenable(gl_light1);... Intensitet tap for Lyskilden Spot Light d k c k l k q = distanse mellom vertex og lyskilde = GL_CONSTANT_ATTENUATION = GL_LINEAR_ATTENUATION = GL_QUADRATIC_ATTENUATION 1 attenuation factor= k c k l d k q d 2 Posisjons bestemt lyskilde GL_SPOT_CUTOFF Begrenset til Spesial vinkel Eksempel gllightf(gl_light0, GL_CONSTANT_ATTENUATION, 2.0); gllightf(gl_light0, GL_LINEAR_ATTENUATION, 1.0); gllightf(gl_light0, GL_QUADRATIC_ATTENUATION, 0.5); gllightf(gl_light0, GL_SPOT_CUTOFF, 45.0); gllightfv(gl_light0, GL_SPOT_DIRECTION, spotdir);

10 Valg av lys modell Kommando gllightmodel{if}(glenum pname, TYPE param) gllightmodel{if}v(glenum pname, TYPE *param) Lys modell GL_LIGHT_MODEL_AMBIENT GL_LIGHT_MODEL_LOCAL_VIEWER GL_LIGHT_MODEL_TWO_SIDE GL_LIGHT_MODEL_COLOR_CONTROL Kommando Face Material egenskap glmaterial{if}(glenum face, Glenum pname, TYPE param) glmaterial{if}v(glenum face, Glenum pname, TYPE *param) GL_FRONT, GL_BACK og GL_FRONT_AND_BACK Parameternavn (pname) Verdi (param) Beskrivelse GL_AMBIENT (x, y, z, w) Ambient material farge GL_DIFFUSE (x, y, z, w) Diffuse material farge GL_AMBIENT_AND_DIFFUSE (x, y, z, w) Ambient og diffuse material farge GL_SPECULAR (x, y, z, w) Specular material farge GL_SHININESS Glfloat Specular eksponent GL_EMISSION (x, y, z, w) Emissive material farge GL_COLOR_INDEXES (a,d,s) ambient,diffuse og specular farge index Eksempel Farge Material Modus void init() { GLfloat mat_specular[] = { 1.0, 1.0, 1.0, 1.0 }; GLfloat mat_shininess[] = { 50.0 }; GLfloat light_position[] = { 1.0, 1.0, 1.0, 0.0 }; } glmaterialfv(gl_front, GL_SPECULAR, mat_specular); glmaterialfv(gl_front, GL_SHININESS, mat_shininess); gllightfv(gl_light0, GL_POSITION, light_position); glenable(gl_lighting); glenable(gl_light0); gldepthfunc(gl_lequal); glenable(gl_depth_test); void display() { glclear(gl_color_buffer_bit GL_DEPTH_BUFFER_BIT); glutsolidsphere(1.0, 20, 5); glutswapbuffer(); Kommando glcolormaterial(glenum face, Glenum mode) Eksemple glenable(gl_color_material); glcolormaterial(gl_front, GL_DIFFUSE); glcolor3f(0.2, 0.5, 0.8); /* tegne noe / glcolormaterial(gl_front, GL_SPECULAR); glcolor3f(0.9, 0.0, 0.2); /* tegne noe*/ gldisable(gl_color_material); }

11 Fragment Blending Rasteriseringssteget Deler opp primitiver til fragmenter Blandingsfunksjoner En fragment er en del av en primitiv blir etter vært blir til piksel etter at fragmentet har blitt glblendfunc(glenum srcfactor, GLenum destfactor) glblendfuncseparate(glenum srcrgb, GLenum destrgb, GLenum srcalpha, GLenum destalpha) Parametrene Depth testet Alpha testet Blended Kombinert med textur Kombinert med andre fragmenter GL_ZERO, GL_ONE, GL_SRC_COLOR, GL_ONE_MINUS_SRC_COLOR, GL_DEST_COLOR, GL_ONE_MINUS_DEST_COLOR, GL_SRC_ALPHA,... Enable blending glenable(gl_blend) Blending Blending Formel for blanding Formel for blanding Srcfactor = (Sr, Sg, Sb, Sa) og Destfactor = ( Dr, Dg, Db, Da) Srcfactor = (Sr, Sg, Sb, Sa) og Destfactor = ( Dr, Dg, Db, Da) RGBA kilde = (Rs, Gs, Bs, As) og RGBA målet = (Rd, Gd, Bd, Ad) RGBA kilde = (Rs, Gs, Bs, As) og RGBA målet = (Rd, Gd, Bd, Ad) Formel = (RsSr + RdDr, GsSg + GdDg, BsSb + BdDb, AsSa + AdDa) Formel = (RsSr + RdDr, GsSg + GdDg, BsSb + BdDb, AsSa + AdDa) Eksempel Eksempel glblendfunc(gl_one, GL_ZERO) glblendfunc(gl_one, GL_ZERO) (RsSr + RdDr, GsSg + GdDg, BsSb + BdDb, AsSa + AdDa) (RsSr + RdDr, GsSg + GdDg, BsSb + BdDb, AsSa + AdDa) (Rs1 + RdDr, Gs1 + GdDg, Bs1 + BdDb, As1 + AdDa )

12 Blending Blending Formel for blanding Formel for blanding Srcfactor = (Sr, Sg, Sb, Sa) og Destfactor = ( Dr, Dg, Db, Da) Srcfactor = (Sr, Sg, Sb, Sa) og Destfactor = ( Dr, Dg, Db, Da) RGBA kilde = (Rs, Gs, Bs, As) og RGBA målet = (Rd, Gd, Bd, Ad) RGBA kilde = (Rs, Gs, Bs, As) og RGBA målet = (Rd, Gd, Bd, Ad) Formel = (RsSr + RdDr, GsSg + GdDg, BsSb + BdDb, AsSa + AdDa) Formel = (RsSr + RdDr, GsSg + GdDg, BsSb + BdDb, AsSa + AdDa) Eksempel Eksempel glblendfunc(gl_one, GL_ZERO) glblendfunc(gl_one, GL_ZERO) (RsSr + RdDr, GsSg + GdDg, BsSb + BdDb, AsSa + AdDa) (RsSr + RdDr, GsSg + GdDg, BsSb + BdDb, AsSa + AdDa) (Rs1 + RdDr, Gs1 + GdDg, Bs1 + BdDb, As1 + AdDa ) (Rs1 + RdDr, Gs1 + GdDg, Bs1 + BdDb, As1 + AdDa ) (Rs+ Rd0, Gs + Gd0, Bs + Bd0, As + Ad0 ) (Rs+ Rd0, Gs + Gd0, Bs + Bd0, As + Ad0 ) (Rs, Gs, Bs, As ) -- Samme effekt som gldisable(gl_blend) Nate Robin's Tutorial