2 Digital grafik 5 - Institutionen för data
Ett kompendium om grundläggande teorier och tekniker kring ämnet digital grafik Kursmaterial för Institutionen för Data- och Systemvetenskap, Stockholms universitet. Aware Mustafa Taher, 2012 v. 1.5 Index 1 Lagring av digital media 1 1.1 Bitar och Bytes 1.2ASCII 1.3Enhetsbeteckningar 1 2 4 2 Digital grafik 5 2.1Pixlar 5 2.2Upplösning 5 2.3 Skärmdumpar (Screen shots)6 2.4 Bildskärmar och uppdateringsfrekvenser 6 2.5 Bildförhållanden och synfält 7 2.6 Pixelarea 7 2.7 Pixel- och punktdensitet (PPI och DPI) 8 3Färg 3.1 Ögats uppfattning 3.2 Additiv färgblandning (RGB) 3.3Sub-pixlar 3.4 Subtraktiv färgblandning (CMYK) 3.5Färgdjup 4Bildteknik 16 16 17 18 18 19 21 4.1Lager 21 4.2Bitmap 22 4.3 Vektorer 22 4.4 Rendering 25 4.5Pivotpunkter 27 4.6Transformeringar 28 4.7Transparens 30 4.8 Alpha värden 30 4.9 Maskning och friläggning 31 4.10 Aliasing och Anti-Aliasing 32 4.11 Aliasing och Anti-Aliasing - Fördjupning 34 4.12Bildformat (work in progress)35 Kursmaterial för Institutionen för Data- och Systemvetenskap, Stockholms universitet. Aware Mustafa Taher, 2012 v. 1.5 1 Lagring av digital media Nedan följer en kort och förenklad text om bitar och Bytes. Texten ämnar ge en snabb inblick kring begrepp som kommer att förekomma senare i kompendiumet. 1.1 Bitar och Bytes I ett binärt (digitalt) system hanteras data i sin minsta beståndsdel i form av bits, eller bitar på svenska. En bits uppgift är att hålla reda på ett av två lägen, oftast beskrivna som ”1” eller ”0”, “på” eller ”av”. I bilden till höger kan ni se en reprensentation av en bits olika tillstånd. Genom att sätta ihop flera bitar, så att de hamnar i följd efter varandra, kan dessa bitar läsas som en s.k. bitsträng. Vilket tillstånd de individuella bitarna har i strängen utgör vad hela strängen har i värde. Bitsträngars värden kan i sin tur nyttjas av en datorer för att utfärda olika instruktioner. Om man t ex. kombinerar två bits i en sekvens kan man totalt producera fyra möjliga värden: ”00”, ”01”, ”10” och ”11”. Man kan se det som fyra olika koder som ett system, beroende på ändamål, kan nyttja till utfärda olika saker. Exempel på användningsområde följer. Exempel 1 - Att räkna decimalt med binära system Då datorsystem baseras på bitkoder, som gärna blir långa och komplexa vid mer avancerade instruktioner, har man funnit värde i att standardisera vissa koder så att de lättare kan användas av användare. En sådan standard, dvs. ett sätt att tolka bitkoder, är vid vid räkneskap av det decimala talsystemet. Se nedan. Vi börjar med att räkna från talet “noll”. I detta fall räcker det med att man har en bit, då en bit kan utgöra ett av två värden: (0 eller 1). En binär “0” motsvarar noll decimalt och således är “1” binärt ett decimalt. Om man vill räkna till två eller mer, då får man kombinera flera bitar i sekvens. Genom att t ex. kombinera två bitar kan man fortsätta räkna upp till tre. I detta fall skulle talet två bli “10” binärt och talet tre skulle då bli “11”. Fortsättningsvis skulle talet fyra kräva tre bitar och det skulle få bitsträngskoden “100“. Se tabellen til höger för fler exempel. Binärt 0 1 10 11 100 ... 1111 1110 1111 1111 Decimalt värde Bitar i sekvens 0 1 2 3 4 ... 254 255 1 1 2 2 3 ... 8 8 För lättare hantering av flera bits brukar man kombinera bitsekvenser i strängar om 8bits för att skapa en s.k. ”Byte”. En byte ger oss möjligheten att hålla reda på 256 olika värden. Fler exempel och förklaringar följer. Trivia: bit står för binary digit. 1 Kursmaterial för Institutionen för Data- och Systemvetenskap, Stockholms universitet. Aware Mustafa Taher, 2012 v. 1.5 Exempel 2: I bilden nedan har man slagit samman åtta stycken bitar för att bilda Byte-strängen ”0110 0001”, detta motsvarar i decimal talform talet “97”. Notera att talet behöver minst sju bitar, då sju bitar kan rymma upp till 128 möjliga olika värden (0 till 127). Sex bitar skulle i kontrast inte räcka till, då det endast håller reda på 64 möjliga värden. Antal bits i sekvens: Antal möjliga kombinationer: 1.2 ASCII ASCII är en teckenkodstandard som nyttjas för att skapa bokstäver och andra tecken. Detta fungerar genom att ASCII mappar (tolkar) olika bitsträngar till bokstäver och andra tecken. ASCII nyttjar 7st bits (128 olika värden) i enlighet med en tidig Amerikansk teckenkods-standard. Då andra länder behövt fler olika tecken har andra variationer av ASCII uppkommit, som t.ex. en svensk ASCIIstandard på 7bit där vi bl.a. inkluderar ”å”, ”ä” och ”ö”. Det finns även många andra teckenkods-standarder som t.ex. UTF-8 (åtta-bitars Unicode transformationsformat) eller UTF-16. Unicode är designad för att försöka binda ihop alla världsliga språk under en teckenkodning och med UTF-16 har man med 16bits möjlighet att lagra upp till 65’536 olika värden/tecken. Vad som är viktigt att notera är att de sju första biten i UTF-standarden mappar exakt mot ASCII-standarden. Det vill säga att en text som är skriven i ASCII kan läsas av UTF. Olika system stödjer olika teckenkodstandarder, men genom att de flesta system idag hanterar multipla teckenkodsstandarder kan en text som är skriven på en PC med windows visas upp på en MAC eller mobiltelefon mm. Detta förutsätter dock att rätt teckenkodning finns inom systemet och är vald vid uppvisningstillfället. Trivia: ASCII står för American Standard Code for Information Interchange. I de flesta systemsammanhang, kan en Byte refereras till som ”ett tecken”. Förenklat sätt, menar man på att det är den ungefärliga lagringsplatsen som ett specifikt tecken tar upp. Om man säger att en byte motsvarar ett tecken, då skulle en megabyte motsvara en miljon tecken. 2 Kursmaterial för Institutionen för Data- och Systemvetenskap, Stockholms universitet. Aware Mustafa Taher, 2012 v. 1.5 Exempel 3: När vi trycker ned tangenten “a” (lilla a) på tangentbordet, skickas instruktioner till datorn om vilken bokstav som blivit vald. Detta är möjligt genom att de olika tangenterna skickar signaler, som via ett operativsystem, mappas för bla. ASCIIs teckenkodning. Den valda tangenten, blir i ASCII bokstaven “a”, vilket i binär form, blir strängen ”0110 0001”. Skulle man läsa samma sträng i decimal form får man talet ”97”. binär bitsträng (8 bits) Med ASCII tolkas bitsträngen till vänster som ett “a“. a Notera att bilden och exemplet är en förenkling av en mer omfattande process. Observera! ASCII inte mappar 0-9 på samma vis som vid vanlig decimal inläsning. Siffran “tre” i ASCII har bitsträngen “00110011”, skulle man läsa samma bitsträng decimalt skulle man få ut talet “51”. I korthet. Olika digitala system läser bitsträngar som koder. Dessa kan, beroende på hur ett system är designat, tolkas av datorer, mobiltelefoner eller andra digitala enheter för att utfärda olika saker. 3 Kursmaterial för Institutionen för Data- och Systemvetenskap, Stockholms universitet. Aware Mustafa Taher, 2012 v. 1.5 1.3 Enhetsbeteckningar Nedan följer en tabell på några dataenheters mått och storlek. Enhet bit byte kilobyte megabyte gigabyte terabyte beteckning b B kB MB GB TB Värde 1b 1B 1024B 10242B 10243B 10244B Exakt värde 1b (innehåller värdet 1 eller 0) 1B (8bits) 1 024B 1 048 576B 1 073 741 824B 1 099 511 627 776B Trivia: SI enheterna ”kilo”, ”mega”, ”giga” etc. stämmer inte in exakt för den digitala användningen av enheterna. ”kilo” betyder värdet ”1000” men en ”kilobyte” har värdet ”1024” (bytes). I detta fall har man valt att göra ett undantag. Andra standarder, som ”IEC 60027” (IEC, International Electronical Commisions) har angivelsen ”Ki” (kibi) för värdet ”1024”, ”Mi” (mebi) för värdet ”10242” och Gi (gibi) med värdet ”10243” etc. Detta medför att IEC 60027 är mer korrekt men SI vinner fortfarande i popularitet. Enligt en prognos från det stora nätverksföretaget “Cisco” (1 jun, 2011) kommer den globala Internettraffiken nå upp till ca en zettabyte per år, år 2015. CISCO, “Entering the Zettabyte Era” Hämtat från http://www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns827/ VNI_Hyperconnectivity_WP.1 Åtkomst 6 augusti 2012 En zettabyte har ett värde av 1021, vilket betyder 1’000’000’000’000’000’000’000 bytes eller tusen, miljoner, miljoner, miljoner tecken. I en annan kontext skulle denna mängd information motsvara ca 4,7 miljarder kopior av hela Blu-Ray “HD-extended versionen av Sagan om Ringen triologin” som ligger på ca 212,5GB, utan extra material. 4 Kursmaterial för Institutionen för Data- och Systemvetenskap, Stockholms universitet. Aware Mustafa Taher, 2012 v. 1.5 2 Digital grafik 2.1 Pixlar För att kunna rita ut en bild på en bildskärm, nyttjar dagens datorsystem en teknik där tätt intilliggande fyrkantiga punkter “pixlar” täcker upp ett två-dimensionellt plan (en bildskärmyta). Genom att manipulera färgen hos varje enskild pixel kan man via denna teknik bilda olika enkla mönster och/ eller rita ut komplexa bilder som t ex. fotografier. I huvudsak kan man definera detaljrikedom i en bild efter, antalet pixlar som gör upp bilden samt vilket färgdjup som pixlarna nyttjar. En vanlig bildskärm ritar ut pixlar genom att tillsätta ljus vid varje pixelposition. Vid fullt ljus utgör pixelns färg vitt, avsaknad av ljus gör pixel svart. Skärmar utgår således från svart som grund, dvs. avsaknad av ljus enligt en s.k. additiv färgmodell (se avsnitt 3.2 för mer information om hur man tillsätter färg per pixel). I en enkel bildfil kan två särskilda värden tas i beaktning. 1: Varje pixels position på bildskärmsytan. 2: Varje pixels individuella färgnyans. Lagring av denna information nyttjar en egen bitsträngs-tolkning som är förklarad för systemet via data i en bildfil. Vid uppläsning av en given bildfil behöver systemet i fråga kunna ha stöd för att läsa upp filen, vilket i vanligast fall görs av något bildläsningsprogram installerat på operativsystemet. Pixlars enhetsbetäckning anges enligt följande: PX, 1000px = tusen pixlar. 2.2 Upplösning Inom datorgrafik definieras upplösning som ett mått för att mäta detaljrikedom. Med detaljrikedom menas det antal pixlar som nyttjas på ett givet område. Det finns flera enhetsbegrepp för att definera upplösning. En vanlig måttangivelse för upplösning anges enligt: bildens bredd (W för width) följt av bildens höjd (H för Height) definerat i pixlar. Ett alternativt sätt att utrycka W och H är genom att ange X och Y. I kommande avsnitt anges flera exempel på olika upplösningsstandarder. Trivia: Man kan fråga sig varför olika upplösningar har så ”konstiga” mått. Som t.ex. 1024x768 som kan tyckas, kunde varit ”1000x700” för lättare ihågkommande. Men precis som med lagring av digital media hanteras data i binära system bäst (i det här fallet som 1024 och 768) då det är en multipel av talbasen 2. 1024 är densamma som 210 och 768 är 3/4 av 1024 vilket ger en upplösning som är anpassad efter ett 4:3 förhållande (se bildförhållande för mer information). De flesta upplösningsstandarder har definerats av VESA som står för “Video Electronics Standards Assocition”. VESA är en interationell standardform för datorgrafik som grundades 1989 av flera stora grafikkortstillverkare. 5 Kursmaterial för Institutionen för Data- och Systemvetenskap, Stockholms universitet. Aware Mustafa Taher, 2012 v. 1.5 2.3 Skärmdumpar (Screen shots) När en användare t ex. nyttjar ett användargränssnitt som windows eller MAC OS, kan den visuella presentationen av gränssnittet fylla upp en bildyta med ett flertal olika grafiska objekt. Den bild som en användare ser vid ett givet tillfälle på en bildskärm, utrycks som skärmdump eller skärmbild (screen shot, ENG). En skärmdump kan ses som ett fotografi, taget vid ett specifikt tillfälle. När grafik skickas från en dator till en bildskärm, skickas den i form av en bild. Oavsett hur mycket olika grafiska objekt en skärmdump innehåller, hanteras denna bild, när den skickas till en uppvisningsenhet som en sammansatt bild. 2.4 Bildskärmar och uppdateringsfrekvenser När en uppvisningsenhet som t ex. en bildskärm tar emot en bild, kommer enheten att uppdatera bilden ett antal gånger per tidsenhet, detta mått utrycks som uppdateringsfrekvens. Uppdateringen möjliggör att ett innehåll kan förändras över tid och denna föränderlighet är en avgörande grundfaktor för att visa upp rörlig media samt interaktivitet bland digitala system. Bland tidiga TV-apparater, nyttjade dessa en elektronrörs-teknik (katodstrålrör) för att visa upp bild. Begränsningar med tekniken medförde att TV-apparaters uppdateringsfrekvenser behövde anpassas till elnätens uppdateringsfrekvenser. I Europa Innebar det att TVn behövde anpassa sig till en uppdateringsfrekvens på 50Hz medan det i t ex. USA innebar en frekvens på 60Hz. Hz eller Hertz är ett mått som utrycker ett antal händelser per sekund. När en bild skickas från en dator till en bildskärm, kommer bildskärmen, om den är inställd på 50hz, att uppdatera bilden 50 gånger per sekund. För att uppnå föränderlighet i bilden måste en ny bild/ skärmdump, med förändring i bilden, skickas ut till bildskärmen. Genom att skicka ut förändringar i bildmaterialet över tid kan illusionen om rörlighet uppnås. För TV-sändningar inom de olika regionerna (50Hz och 60Hz), standardiserades sändningen efter deras uppdateringsfrekvenser. Enligt den Europiska TV-sändnings-standarden PAL, sändes TV med 25 bilder per sekund medan det i USA sändes efter standarden NTSC som ligger på ca. 30 bilder per sekund. Generellt sätt har PALsändningar med sina färre antal bilder per sekund, högre upplösning än NTSC sändningar. PAL- sändningar sänds generellt med 576 s.k. linjers upplösning medan NTSC sände runt 480 linjer. Varje linje motsvarar ett enhetsmått där man enbart räknar den vertikala upplösningen. Istället för att räkna bredden gånger höjden, utrycker man breddens upplösning uttryckt som en linje och höjden avgör hur många horisontella linjer det finns vertikalt. Enhetsbegreppet för att utrycka ett antal-bilder-per-sekund är: “fps” (frames per second, Eng). bland 3D-applikationer används fps ofta som en måttangivelse för prestanda. se avsnitt 4.4 Rendering, för mer information. Trivia: Utvecklingen av de äldre uppdateringsstandarderna överträffas idag med andra frekvenser som 100hz, 120hz eller flera hundra Hertz. Även bildmaterial från t ex. datorer och andra sändningar börjar pressa det antal bilder per sekund som sänds ut till våra bildskärmar. 6 Kursmaterial för Institutionen för Data- och Systemvetenskap, Stockholms universitet. Aware Mustafa Taher, 2012 v. 1.5 2.5 Bildförhållanden och synfält Då vi normalt ser mer i sidled än vad vi gör i höjdled anpassas bildskärmar och således bildmaterial efter detta fenomen. Vårt synfält sträcker sig till ca. 180° i bredd och ca. 100° i höjdled. Bland tidiga bildförhållandestandarder nyttjades ett s.k. ”4:3” förhållande. Vilket betyder att: om en bild var ”4” enheter bred så var den också ”3” enheter hög. Nyare standarder eftersträvar att vara mer ergonomiskt anpassade efter vårt synfält. För bildskärmar, TVn och projektorer blir det mer vanligt att dessa enheter anpassas efter 16:9 standarden. Mobila enheter kan däremot tendera att ha många olika typer av upplösningar och bildförhållanden och således avviker de ibland från 16:9 standarden. Användningsområdet som en uppvisningsenhet har tenderar att påverka dess funktionella utseende. Med mobila enheter, skilt från många stationära uppvisningsenheter, kan andra ergonomiska faktorer spela roll för enhets bildskärm. Saker som interaktion direkt mot bildskärmen, att den får plats i en byxficka, hur en enhet sitter i handen, kan alla påverka enhetens funktionella utseende och således bildförhållandet på enheten. 2.6 Pixelarea Pixelarea är ett enhetsbegrepp där man förenklat upplösning till ett värde. Skillt från utrycket “bredden gånger höjden” har man med pixelarea räknat ut vad resultatet av “bredden gånger höjden” blir. Bland enheter som t ex. digitalkameror uppkommer ofta angivelsen MegaPixels “MP“ (miljoner pixlar). Detta är ett enhetsmått som anger den totala mängden pixlar som förekommer i en bild, i detta fall utryckt i formen, antal miljoner pixlar. Pixelarea: PA = W x H Trivia: Angivelsen MP kan ses som extra praktisk bland digitalkameror då upplösningar tenderar att överstiga miljoner pixlar. Ett värde (MP), kan upplevas som lättare att minnas och således vara lättare att marknadsföra istället för att ange bredd x höjd i långa sifferföljder. Exempel: 1920x1080 eller 2MP. 7 Kursmaterial för Institutionen för Data- och Systemvetenskap, Stockholms universitet. Aware Mustafa Taher, 2012 v. 1.5 2.7 Pixel- och punktdensitet (PPI och DPI) Om man anger en upplösning endast via en bredd gånger en höjd i pixlar, kan man inte veta hur stora pixlarna är mätta med fysiska mått. En pixel på en skärm kan vid ett sammanhang ha storleken en kvadratmillimeter och vid ett annat vara minst dubbelt så stor. Detta skulle ske om man t ex. hade en upplösning på två olika stora skärmar. Ett alternativt sätt att utrycka upplösning är att utrycka antalet pixlar som får plats på en bestämd yta. Se nedan. PPI Pixels Per Inch, ”pixlar per tum” på svenska, används primärt vid angivelse av pixeldensitet för digitala bilddokument, bildskärmar, mobila enheter och projektorer m.m. Att ha högre PPI innebär att man har högre upplösning, dvs. fler pixlar, på en specifik yta. Fler pixlar på en yta betyder alltså att pixlarnas fysiska storlek minskar. En tum motsvarar 2.54cm. Ett relevant exempel för att beskriva användningsområdet för PPI kan vara mellan olika mobila enheter. Nyare versioner av en mobiltelefonserie kan många gånger öka upplösningen men ändå behålla samma storlek på skärmen. Detta medför att den senare modellen får högre PPI. Nedan följer några exempel på skillnaden mellan hög och låg PPI. I bilderna kan vi se flera, lika “fysiskt“ stora, bilder på ett motiv som gradvist ökar i upplösning. Varje bild får således fler pixlar per yta dvs. högre PPI. 16x16px 32x32px 64x64px 128x128px 256x256px 512x512px Triva: Det har skett försök till att omvandla pixlar-per-tum standarden till/ efter SI-enheter dvs. pixlar-percentimeter men detta har ännu inte blivit någon utspridd standardisering. 8 Kursmaterial för Institutionen för Data- och Systemvetenskap, Stockholms universitet. Aware Mustafa Taher, 2012 v. 1.5 Att beräkna fram PPI Nedan följer ett vanligt förekommande och relativt nogrant räknesätt för att få fram ett PPIvärde. För att ta reda på en bildskärms PPI, behöver man först ta reda på två primära punkter: 1) Uppvisningsenhetens upplösning. 2) Uppvisningsenhetens storlek, dvs. den fysiska storleken på enhetens bildyta. För att kunna genomföra uträkningen behöver vi först ta fram två stycken s.k. diagonala värden för vardera punkt. När man har båda dessa “diagonala“-värden kan man dela dessa med varandra för att få fram PPIn. Storleken på en bildskärms bildyta definieras oftast via dess diagonala längd angivet i tum, “di“ (diagonal inches). Exempel: Med en 40“s skärm, (fyrtio tums skärm), menas att den är 40” räknat från ett hörn i en diagonal linje över till nästa hörn. Detta ger oss ett värde som uppfyller punkt 2 (se ovan). Om vi vet storleken på en skärm kvarstår det att räkna ut vad den diagonala värdet i pixlar är för en upplösning. Detta kan enkelt göras genom att utnyttja Pythagoras sats. En detaljerad beskrivning följer nedan. På nästa sida kan ni se exempel på hur man löser hela uppgiften. Pythagoras sats Pythagoras sats dikterar att kvadraten av kateterna har lika stor area som kvadraten av hypotenusan (se bild nedan). Med tanke på att en kvadrat alltid har lika stora sidor medför detta att om man mäter längden på en av hypotenusans kvadrats sidor motsvarar den, den diagonala linje som vi behöver för att uträtta punkt 1 (se ovan). Formeln: Vi börjar med att multiplicerat bredden med bredden och sedan adderar vi det med höjden multiplicerat med höjden. Dra sedan roten ur det utvunna värdet och detta kommer att ge oss det önskade enskilda värdet (hypotenusan). Area 3 = Area 1 + 2 Man kan nyttja denna formel för att få fram värden till båda punkterna (se ovan). Däremot kräver det att vi vet bredden och höjden per punkt, oavsett om det är pixlar eller tum. Area 1 Area 2 9 Kursmaterial för Institutionen för Data- och Systemvetenskap, Stockholms universitet. Aware Mustafa Taher, 2012 v. 1.5 Exempel: Om vi har en bildskärm som är 24” och den har upplösningen 1080p, dvs. 1920x1080, vad blir då PPIn? Uträkning ser ut så här: (19202 + 10802) √ = ger oss ett enskilt upplösningsvärde, 2202. Man kan också utrycka den i text på följande vis: Bredden “1920” gånger bredden “1920” plus höjden “1080” gånger höjden “1080“. Dra sedan roten ur det värdet och ni får fram det diagonala upplösningsvärdet 2202. Fortsättning: Då vi redan har ett enskilt fysiskt storleksvärde, dvs. 24” kan vi direkt dela detta med det diagonala upplösningsvärdet. 2202 delat i 24 och resultatet blir 91,75. Man kan säga att bildskärmen har en upplösning på ca 92PPI. Alternativa räknesätt: Det finns flera sätta att räkna ut PPI. Ett alternativt, mer förenklat sätt, är att direkt dela den fysiska bredden med upplösningsbredden och genom detta få ut ett PPIvärde. Exempel: upplösningensbredd 1920 delat med bildskärmens bredd 21” = ~91 (21” motsvarar den ungifärliga bredden på en 24”s bildskärm). Detta förutsätter dock att bildskärmen kör en upplösningsstandard som nyttjar kvadratiskt formade pixlar. Om du t ex. nyttjar en upplösning där bildförhållandet inte stämmer överens med bildförhållandet för bildskärmen kommer pixlarna på bildskärmen inte vara kvadratiska och därmed kommer inte PPIvärdet stämma. Formler: Pythagoras sats: X = √ (W2 + H2) Pixels Per Inch (PPI): Dela det diagonala värdet för pixlar med det diagonala värdet för en bildytas storlek. Antal cm i en tum: 2,54 10 Kursmaterial för Institutionen för Data- och Systemvetenskap, Stockholms universitet. Aware Mustafa Taher, 2012 v. 1.5 Nedan följer några olika upplösningsstandarder som är anpassade för webb och bildskärmar. Exempel: baserat på 15”s bildskärm. Upplösning 640x480 800x600 1024x768 1280x720 1920x1080 Bildförhållande 4:3 4:3 4:3 16:9 16:9 Pixelarea (MP) ~0.3 0.48 0.78 ~0.92 ~2.07 PPI ~53 ~67 ~85 ~98 ~147 Pixelarea (MP) ~0.3 0.48 0.78 ~0.92 ~2.07 PPI ~33 ~42 ~53 ~61 ~92 Exempel: baserat på en 24”s bildskärm. Upplösning 640x480 800x600 1024x768 1280x720 1920x1080 Bildförhållande 4:3 4:3 4:3 16:9 16:9 Trivia: 1280x720 är en s.k. HD-Ready standardupplösning och 1920x1080 är Full-HD standardupplösning. Det kan lätt bli oergonomiskt (för litet) att läsa texter när man har hög PPI. Av den anledningen kan det vara lämpligt att anpassa PPIn i t ex. ett operativsystem, så att den bättre matchar PPIn som bildskärmen kör. Detta betyder att operativsystemet lägger till fler pixlar, så att kompenserar för den mindre storleken av varje pixel. Fonter får således fler pixlar på skärmen men detta ändrar inte fontstorleken vid utskrifter. Med andra ord är en fontstorlek på 12punkter alltid lika stor vid utskrift oberoende av vad du har för inställning i t ex. windows. En vanligt förekommande storleksinställning för text och ikoner är 96 PPI. Om du t ex. kör 130 PPI på en bildskärm betyder det att den fysiska storleken på fonter och ikoner utgör ca: 73,8% mot vad de är designade för. 11 Kursmaterial för Institutionen för Data- och Systemvetenskap, Stockholms universitet. Aware Mustafa Taher, 2012 v. 1.5 DPI Dots Per Inch, eller ”punkter per tum”, används för att beskriva upplösning vid utskrifter. Varje DPI-punkt har en egen färg och genom att kombinera flera punkter tätt intill varandra kan sammansättningen av dessa punkter representera pixlar i ett dokument. DPI-punkter kan ses som en typ av sub-pixlar (se avsnitt 3.3 sub-pixlar). Förhållandet mellan PPI och DPI är således inte 1:1 då det ofta, beroende på utskriftsteknik mm., behövs fler punkter för att korrekt representera varje given pixel. Det finns ett flertal faktorer som styr kvalitén vid utskrift. Nedan följer ett par exempel på saker som kan styra kvalitén. Hur hög DPI respektive PPI man behöver beror, i ergonomiska avseenden, primärt på hur pass nära man vill stå från det utskrivna materialet. En standardiserad upplösning är 300PPI/dokument, denna upplösning har ansetts fungera som en s.k. fotorealistisk standard. Detta mått överträffas idag av kameror, skrivare och scanners. Trotts detta designas vissa större affischer med lägre PPI. Detta fungerar just för att betraktningsavstånden för stora affischer ofta är längre bort än vid mindre utskrifter. Lägre upplösningar ställer även färre krav på materialet som t ex. storlek på bildfil, vilket fortfarande kan vara en tung prestandakrävande faktor för många datormiljöer idag. Användandet av fler punkter, dvs ökad DPIvärde, ökar även färgåtergivningen och således kvaliten på utskriften, detta sker dock upp till en gräns. Flera andra aspekter som t ex. papperskvalite spelar också roll för kvaliten. Normalt är en vanlig bläckstråleskrivare utrustad med minst fyra unika färger i bläck enligt tryckstandarden CMYK som står för: Cyan, Magenta, Yellow (gul) och Key-Color (svart) och det är genom att man blanda dessa färger tätt intill varandra som illusionen av flera färgnyanser uppnås. (se avsnitt 3.4 subtraktiv färgblandning för mer information). Olika papperstyper har olika kvalitativa egenskaper. Allt papper har inte tillräckligt bra yta för att korrekt återge den önskade kvalitén från höga DPI-utskrifter. Det kan också vara så att visst papper är särskilt anpassat till bläckstråleskrivare medan annat är anpassat för laserskrivare. Kvalitetsbenämningen på olika papperstyper brukar defineras i dels, namn på papperstyp och i, vikt per blad. Nedan följer några kända och vanligt förekommande papperstyper: • Vanligt kontorspapper Billigast av följande alternativen, det är ett tunnare, lättare i vikt, typ av papper. Utskrift kan ske på båda sidor av pappret. Detta papper klarar generellt av att korrekt återge upp till 300dpi. • Inkjet papper Ett relativt tunt papper som har finare fiberdensitet än föregående papper och är således bättre på att återge färger). Pappret har en specifik sida för utskrift. Pappret klarar generellt över 600dpi. • Fotopapper Ett tjockare typ av papper som finns med både glatt och matt utförande, denna papperstyp är generellt bäst på att återge färger. Pappret har en specifik sida för utskrift. Detta papper klarar generellt över 600dpi. 12 Kursmaterial för Institutionen för Data- och Systemvetenskap, Stockholms universitet. Aware Mustafa Taher, 2012 v. 1.5 Triva: Det förekommer ofta felaktiga utryck i och utanför branchen, där det sägs att ett dokument är på 300DPI istället för 300PPI. I realitet behöver inte mycket tanke läggas på vad skrivaren klarar för upplösning då de flesta skrivare idag, klarar av att återge dokument som är inställda på 300PPI. I ett fyrfärgssystem (CMYK) är utblandningen av färger begränsat när man vill eftersträva stort spektrum av olika färgnyanser. Detta har således lett till att olika printertillverkare utvecklat skrivare med fler färgpatroner utöver de fyra standardfärger som finns normalt. Högre DPI förbrukar mer färg vid utskrift. Det kan med andra ord ibland bli billigare att köpa papper med högre kvalité. Finare papper kan även öka kvalitén rejält. Fortsättning DPI, Tryck Vid tillfällen då man vill arbeta med tryck, dvs. utskrifter av digitalt material, behöver man ta hänsyn till olika aspekter för att uppnå ett optimalt resultat. Med optimalt resultat menas att man med ett dokument, uppnår vissa ergonomiska beprövade standarder. Dokumentets PPI, utskriftens DPI, val av papper, färgmättnad och ljusvärden i dokumentet mm. är alla faktorer som kan påverka utskriftskvalitén. Det kan vara svårt att veta exakt vad man ska tänka på per given situation. I Sverige finns dock organisationer som t ex. TU (Tidningsutgivarna), de är ett förbund som samlat ihop kunskap och erfarenhet från flera utgivare av olika slag. De har slagit samman sina erfaranheter och skapat dokument och böcker som innehåller fakta och tips kring tryckstandarder som är relevanta i Sverige. Fördelaktikligen är mycket av materialet gratis. Triva: När man jobbar mot tryckerier som sysslar med t ex. tidningstryck kan andra upplösningsmått komma på tal, som t ex. LPI (Lines per inch) dvs. linjer per tum på svenska. Normalt brukar man vilja eftersträva 1.5 till 2 gånger högre PPIvärde än LPIvärde för att få ut ett önskvärt resultat. Nyare standarder som t ex. DPCM eller LPCM, dvs. centimeter enhet istället för tum, eftersträvar att ersätta DPI och LPI men användningen av tum-angivelse är fortfarande ledande som standard. Bland skrivare är det inte helt ovanligt att det de kör med två olika DPIvärden. Nämligen ett DPIvärde för bredden och ett för höjden. Detta är dock ingenting som direkt behöver påverka eller märkas av, av användaren. 13 Kursmaterial för Institutionen för Data- och Systemvetenskap, Stockholms universitet. Aware Mustafa Taher, 2012 v. 1.5 Att beräkna fram PPI inför utskrift: Antag att vi vill skriva ut en bild som är tagen med en specifik upplösning och att vi vill skriva ut bilden på ett A4- samt ett A3papper. I nedanstående exempel tar vi reda på hur hög PPI vi får ut, per utskrift. Vi börjar med att ta reda på alla relevanta mått: Bilddokument: Bredd: 3456px Höjd: 2304px Pixelarea: ~8MP Liggande A4: Bredd: 29,7cm (~11.693”) (~7.795”) Höjd: 21,0cm Liggande A3: Bredd: 42,0cm (~16.535”) (~11.024”) Höjd: 29,7cm Fortsättningsvis nyttjar vi formeln som vi använde vid uträkning av PPI (se avsnitt: Att beräkna fram PPI). Genom att ta papprets dimensioner kan vi ta reda på vad det enskilda diagonala värdet av pappret är (hypotenusan för pappret). Därefter kan vi dela detta med det enskilda värdet som vi tar fram från upplösningen av bilddokumentet. Bild: √ ( 34562 + 23042) = 4153.595 dp (Antal pixlar på diagonala längden) A4: √ ( 11.6932 + 7.7952) = 14.0530 di (Antal tum på diagonala längden) A3: √ ( 16.5352 + 11.0242) = 19.8729 di (Antal tum på diagonala längden) A4: 4153px (dp) / 14” (di) = ~296.64Svar A4: ca: 297 PPI A3: 4153px (dp) / 20” (di) = ~207.65 Svar A3: ca: 208 PPI Resultat: En utskrift med en upplösning på ca. 8MP motsvarar nästan en hel A4 i fotokvalite (dvs. 300PPI) medan en utskrift med samma dokumentstorlek i A3storlek skulle ge en utrskrift på ca. 200PPI. Notera att den lägre upplösningen kan vara försumbar då den ökade storleken i A3 också lättare möjligör att betraktar kan stå på ett längre avstånd från utskriften. Trivia: Upplösningsmåttet är hämtat från systemkameran “Canon EOS 350D (~8MP)”. 14 Kursmaterial för Institutionen för Data- och Systemvetenskap, Stockholms universitet. Aware Mustafa Taher, 2012 v. 1.5 Nedan kan ni se ett några olika mått på pappersstandarder baserat för fotokvalitativa utskrifter. Exempel: Ett stående dokument i 300PPI. Pappersstorlek A6 A5 A4 A3 A2 A1 A0 Bredd papper (mm) 105 148 210 297 420 594 841 Höjd papper (mm) 148 210 297 420 594 841 1189 Bredd (pixlar) 1240 1748 2480 3508 4961 7016 9933 Höjd (pixlar) 1748 2480 3508 4961 7016 9933 14043 Trivia: Notera att det gärna blir väldigt höga upplösningar vid större storlekar på pappret när man kör 300PPI. I detta fall kan lägre PPI vara föredraget då det möjligen inte behöver vara fotokvalité på en sådan utskrift. Avståndet och användningsområdet är faktorer som man får ta i beräkning. Tänk också på att en arbetsfil i 300PPI och A0 storlek kan med ev. multipla lager och andra effekter bli extra tung att hantera. Genom att sänka DPIn på en utsrkift och istället höja kvalitén på papperstyp kan man spara in på färgförbrukning. Detta kan bli billigare samt ge bättre resultat i längden. Detta är dock något som måste optimeras fram vid utskriftstillfället och bör göras olika från fall till fall. 15 Kursmaterial för Institutionen för Data- och Systemvetenskap, Stockholms universitet. Aware Mustafa Taher, 2012 v. 1.5 3 Färg 3.1 Ögats uppfattning Våra ögon uppfattar färg genom att tolka olika våglängder av ljus. Ljus som projiceras från solen, lampor och andra källor kan producera olika våglängder av ljus. Vanligtvis uppfattar ett mänskligt öga våglängder mellan 400nm till 700nm (detta refreras till som synligt ljus) och vi uppfattar dessa våglängder genom våra ögon via två olika typer av synreceptorer: Stavar: Ljuskänsliga pigment som möjligör uppfattning av svagt ljus (mörkerseende). Stavar har dock dålig synskärpa, dvs. att de är dåliga på att uppfatta detaljrikedom vilket är anledningen till att de inte kan urskilja mellan olika färger. Detta medför att vi har svårt att uppfatta färger i mörker. Tappar: Vi har tre olika typer av synceller som ger oss vårt färgseende. Färger uppfattas genom att de tre typerna reagerar på olika våglängder av ljus, huvudsakligen: lång (560 - 580 nm), mellan (530 - 540 nm) och kort (420 - 440nm). Dessa våglängder kan även refereras till färgerna Röd (lång), Grön (mellan) och Blå (kort) och de kallas primärfärger. Nedan kan ni se en tabell på hur våra ögon uppfattar olika våglängder av ljus. Högre frekvenser leder till bland annat Infrarött ljus och i det lägre spektrummet finner vi ultravioletta frekvenser. Allt utanför nedanstående spektrum betraktas som ej synligt ljus. Färg Infraröd (utanför synfältet) Våglängd (ljus) ~ 3000 - 700 nm* Röd ~ 700 - 635 nm Orange Gul Grön Blå Violet Ultraviolett (utanför synfältet) ~ 635 - 590 nm ~ 590 - 560 nm ~ 560 - 490 nm ~ 490 - 450 nm ~ 450 - 400 nm ~ 400 - 10 nm* Trivia: Det uppskattas att ett mänskligt öga kan uppfatta runt tio miljoner olika färgnyanser vilket våra digitala system och enheter har anpassats efter. Vid fel hos någon av tapptyperna bildas olika typer av färgblindhet. De olika våglängderna av ljus som uppfattas av våra tappar (kort, mellan och lång) skrivs i engelskan ut som S M L (Short, Medium and Long). 16 Kursmaterial för Institutionen för Data- och Systemvetenskap, Stockholms universitet. Aware Mustafa Taher, 2012 v. 1.5 3.2 Additiv färgblandning (RGB) Enligt den trikromatiska färgteorin tolkar våra ögon färger genom att våra olika tappar stimuleras till olika grader. Stimulans av samtliga tre ljustyper (röd, grön och blå) uppfattas av våra hjärnor som vitt medan ingen stimulans uppfattas som svart. När tapparna stimuleras olika uppfattar vi olika nyanser av färger. Den additiva färgblandningsmodellen RGB (Red, Green, Blue) är särskilt anpassad efter den trikromatiska färgteorin. I enlighet med teorin utgår RGB-modellen från tre olika färgkanaler (en per primärfärg). Vid ingen styrka i någon av färgkanalerna syns svart medan full styrka på samtliga kanaler producerar vitt. Bilden nedan föreställer en grafisk reprensentation av RGBmodellen. Röd (Full styrka) Full styrka i samtliga färgkanaler: Vitt Ingen styrka i någon färgkanal: Svart Blå (Full styrka) Grön (Full styrka) RGB används främst vid hantering av digitala bilder eller vid projektion av bilder via elektroniska enheter som t ex. datorskärmar, tvn etc. Faktorer som påverkar hur vi uppfattar en bild (exkludera subjektiva värderingar), styrs av information i bildfilen, uppvisningsprogrammet och bildskärmen. Det finns ingen direkt definitiv säkerhet vid uppvisning av grafik mellan olika enheter. Olika bildskärmar producerar RGBskalan med varierande kvalité. Det finns flera olika standarder och s.k. färgprofiler på RGB, bla. “adobe RGB” eller den vanligare och bredare standarden “sRGB“ som står för “standard Red Green Blue”. Färgstandarden sRGB är anpassad efter normal kontors- och hemanvändning. Angivelse av färgprofil kan ställas in på dokument eller vid utmatningsenhet, som t ex. bildskärm eller genom en skrivare. 17 Kursmaterial för Institutionen för Data- och Systemvetenskap, Stockholms universitet. Aware Mustafa Taher, 2012 v. 1.5 3.3 Sub-pixlar Inom datorgrafik är pixlar ofta ansedda som den minsta relevanta beståndsdelen för att rita ut grafik mot bildskärmar. Det finns dock i vissa fall, beroende på teknik, en bakomliggande teknik för att producera färger på pixlar. Varje pixel som projiceras mot t ex. en bildskärm är i sin tur uppdelad i tre stycken s.k. sub-pixlar i färgerna röd, grön och blå, detta i enlighet med den trikromatiska färgteorin. Då dessa sub-pixlar sitter tätt ihop, uppfattar våra ögon, kombinationen av dessa tre sub-pixlar till en pixel med en färgnyans i enlighet med den additiva färgmodell RGB. Trivia: Det finns olika tekniker för att producera sub-pixlar. Olika bildvisningsenheter kan således ha olika mönster på sina sub-pixlar. Bildexemplet är designat efter en LCD-skärm. 3.4 Subtraktiv färgblandning (CMYK) Subtraktiv färgblandning används främst vid hantering av utskrifter. Då färgen i en utskrift består av små punkter av färgpigment som inte avger något ljus, måste ljus från en annan källa träffa utskriften innan ljuset kan studsa (reflektera) rätt färg till våra ögon. Detta till skillnad från en bildskärm där varje pixel avger ljus som direkt kan uppfattas av våra ögon. Detta medför att CMYK och RGB får något motsatta egenskaper. I motsatts till RGB utgår CMYKs färgmodell utifrån vitt som grundfärg (tänk papper) och genom att applicera färg kan man nå mörkare toner. CMYK står för: Cyan, Magenta, Yellow (Gul) och Key-Color (Nyckelfärg = Svart). Som en subtraktiv färgmodell utgår CMYKs primära färger från RGBs sekundära färger, se nedan: CMYK- Cyan är en blandning av RGB-blå och RGB-grön. CMYK- Magenta är en blandning av RGB-blå och RGB-röd. CMYK- Yellow är en blandning av RGB-Grön och RGB-röd. Se CMYK-modellen på nästa sida. 18 Kursmaterial för Institutionen för Data- och Systemvetenskap, Stockholms universitet. Aware Mustafa Taher, 2012 v. 1.5 Nedan kan ni se en grafisk reprensentation av CMYK-modellen. Det finns tydliga kvalitétsskillnader mellan RGB och CMYK. RGB-standarden har bla. ett mycket högre färgspektrum än CMYK-standarden (se 3.5 färgdjup). Detta sker pga. skillnader mellan teknikerna. Notera att Röd, Grön och Blå inte har samma färgnyanser som de har i RGB-modellen på sidan 17. Blå (CMYK) Cyan (100%) Key Color (100%) Magenta (100%) Grön (CMYK) Yellow (100%) Röd (CMYK) Trivia: CMYKs färgvärden anges i procent till skillnad från RGB som ofta anges i värden som korrelerar med bitvärden. 3.5 Färgdjup I tidigare kapitel (Kap:1.1) nämner vi hur en byte (8bits) kan innehålla 256 olika värden. Inom digitala färgsammanhang kan en sådan värdestyp hanteras som antal färgnyanser i en bildfil. Denna värdestyp, dvs. antal färger (blandning av färgnyanser) har benämningen färgdjup. Färgdjup har olika enhetsutryck men ett vanligt förkommande begrepp är antal färger utryckt i bits. Exempel: 8bits färgdjup innebär 256 tillgängliga färger och denna notation kan även hänvisas till som en palett med 256 olika färgnyanser. Beroende på sammanhang kan 256 färgnyanser upplevas som otillräckligt, detta är särskild tydligt när man försöker arbeta med s.k. ”fotorealistiska” bilder. Detta har att göra med att våra ögon vanligtvis kan uppfatta upp till flera miljoner färgnyanser samtidigt. Därför har man anpassat våra system till att klara mer. En vanlig standard är att man nyttjar: 8bits per färgkanal, enligt RGB-modellen, så att man får 24bits färgdjup. Detta resulterar i “16 777 216” (224) möjliga färgnyanser och det är således tillräckligt för vad våra mänskliga ögon klarar av. 19 Kursmaterial för Institutionen för Data- och Systemvetenskap, Stockholms universitet. Aware Mustafa Taher, 2012 v. 1.5 RGB I bilden nedan kan ni se en visualisering av olika RGBvärden i 24bitar. Varje färgruta har en färg som korrelerar med det värde som står i rutan. Exempel: R:128 är alltså vad man får om man väljer en RGB färgen: R:128, G:0, B:0. R: G: B: R+G+B: CMYK I bilden nedan kan ni se en visualisering av olika CMYKvärden angivet i procent. C: M: Y: K: 20 Kursmaterial för Institutionen för Data- och Systemvetenskap, Stockholms universitet. Aware Mustafa Taher, 2012 v. 1.5 4 Bildteknik Kapitel 4. går igenom flera grundläggande begrepp, teorier och tekniker för att skapa och manipulera digital grafik. 4.1 Lager Lager är inom grafiken, en teknik som möjlighör hantering av bildmaterial så att man kan placera/ projicera den “över och under” annat bildmaterial. Bland operativsystem som nyttjar grafiska användargränssnitt, som t ex. windows eller MAC OS, kan det vid flera tillfällen uppstå olika typer av grafiska objekt som fyller upp en bildskärmsyta. Exempel: När en musmarkör ritas ut, över en skrivbordsbakgrund, behöver ett system kunna räkna ut vart musmarkören ska ritas ut. Systemet behöver med andra ord hålla isär objekten innan den kan slå de samman till en skärmdump. Musmarkören har med andra ord isolerats från bakgrunden innan den visats upp mot bildskärmen. En musmarkör i eget lager kan hanteras som ett individuellt grafiskt objekt. Bakgrunden i ett eget lager. Den sammansatta bilden blir en skärmdump som skickas till bildskärmen. Skärmdumpen innehåller en musmarkör som ritas ut över en bakgrund. I ett system som nyttjar lager behöver ett djupled defineras, dvs. ett index (en ordning) som definerar vart ett lager ska ritas ut. Indexet avgör om ett lager ska ritas ut framför eller bakom ett annat lager. Ordningen defineras via ett s.k. Z-index, vars uppgift är att hålla reda på ordningen för ala individuella objekt i en lista. Ett annat tillämpningsområde för användandet av lager är bildprogram som t ex. Photoshop, där användandet av lager kan ses som en nyckelfaktor för programmets olika användningsområden. 21 Kursmaterial för Institutionen för Data- och Systemvetenskap, Stockholms universitet. Aware Mustafa Taher, 2012 v. 1.5 4.2 Bitmap En bitmappad bild tillhör den grafiktyp som är den vanligast förekommande inom digitala sammanhang. Det är den grafik som bygger på olika längder av pixlar som inom ett två-dimensionellt plan bildar en bild eller s.k. rastergrafik. (Se även Kap 2: Digitala grafik). En bitmappad bild har ingen fysisk storlek (förutsatt att den inte är inställd efter en specifik PPI). Bitmappad grafik lämpar sig i kontrast till vektorgrafik extra bra till att lagra komplexa motiv med mycket detaljer som t ex. fotografier. Normala tillämpningsområden kan vara: inskanning av bilder eller lagring av digitala foton, ikoner mm. Det finns flera olika typer av bildformat som lagrar bitmappad grafik. I senare avsnittet (4.12 Bildformat) kan ni läsa mer om några vanligt förekommande format. Notera att det avsnittet ännu inte är komplett. 4.3 Vektorer En vektor är en matematisk form som ritas ut via linjer kopplade till punkter. Föreställ er en kvadratisk form, denna kan delas upp i fyra hörn och fyra väggar. I en vektorreprensentation av formen skulle varje hörn vara uppbyggt av en s.k. “ankarpunkt” och väggarna skulle representeras av raka linjer mellan ankarpunkterna. Skulle man istället vilja rita ut en cirkel skulle denna form också kunna utryckas med fyra punktern, däremot skulle man behöva ersätta de raka linjerna mot krökta linjer för att skapa bågar. Bland krökta bågar finner man ytterligare en komponent s.k. “viktningspunkter, dessa anger hur mycket en linje ska vara krökt. Se bildexempel nedan. Det kan vara värt att notera att det finns flertalet olika metoder och tekniker för att hantera kurvor. Däremot kommer vi i det här dokumentet inte att gå på djupet och förklara hur de teknikerna fungerar. 22 Kursmaterial för Institutionen för Data- och Systemvetenskap, Stockholms universitet. Aware Mustafa Taher, 2012 v. 1.5 Fortsättning vektorer, Innehåll Innehållet i en vektorform kan fyllas upp på olika sätt. En vektor fyllas med en färg, en skiftande färgtoning (mellan två eller flera färger) eller ha ett mönster (en textur) mm. Nedan följer några exempel på olika utfyllnader i en kvadratisk form. Solid färg (rött). En färgton (grönt till blått). Ett mönster (Textur) Via användandet av särskilda verktyg/ program kan olika former skapas, bland enklare former finns cirklar, tre- och fyrkantiga former. I mer komplexa former kan flera punkter respektive linjer uppdagas för att skapa mer avancerad geometri, detta kan även kombineras med mönster och effekter. Genom att rita flera vektorformer kan man producera relativt komplexa bilder. Fördelarna med vektorer i kontrast till bitmappad grafik är bland annat att vektorer är skalbara utan kompromiss på kvalite. Däremot tappar vektorer sin effektivitet bland riktigt komplexa bilder som t ex. fotografier då detaljrikedommen i den typen av bild ofta blir väldigt hög och således optimal för vektorer. Se bildexempel på nästkommande sida. Triva: Ett vanligt förekommande tillämpningsområde för vektorer är bland logotyper som ofta har enklare former och färger. Logotyper kan även ofta vara beroende av skalbarhet för t ex. trycktillämpningar. 23 Kursmaterial för Institutionen för Data- och Systemvetenskap, Stockholms universitet. Aware Mustafa Taher, 2012 v. 1.5 Nedan kan ni se två bilder, den första bilden är ett fotografi taget med digital-kamera, medan den andra bilden är en vektoriserad version av första bilden. Vektorbilden innehåller många olika vektorer i enkla former och genom att kombinera många olika ytor med olika effekter, som ljussättning och skuggning kan motivet i bilden uppnå en relativt hög komplexitet. Exempel 1. Bitmappad grafik: Foto tagen i DSVs lokaler. Exempel 2. Vektor-grafik: Bilden är skapad med olik -färgade vektorer i programverktyget Photoshop. 24 Kursmaterial för Institutionen för Data- och Systemvetenskap, Stockholms universitet. Aware Mustafa Taher, 2012 v. 1.5 4.4 Rendering En renderingsprocess är den process som beräknar fram pixeldata. I det enklaste fallet kan det handla om att rita ut en pixel i en färg, medan det i mer komplexa fall kan finnas behov av att räkna ut mer avancerade beräkningar per pixel, för att skapa mer avancerade bilder. Vid utritning av t ex. vektorer måste varje pixel som tänkt representera ytan av vektorn renderas fram. I processen inkluderas vart varje pixel ska positioneras på skärmen samt vilket RGBvärde varje given pixel ska ha. Beroende på om vektorobjektet ska ha en solid färg, en färgtoning eller om det är ett mönster som ska renderas fram, blir beräkningen olika komplex. Det finns två huvudsakliga faktorer som påverkar renderingsprocessen, användandet av s.k. effekter samt transformeringar (beskrivs mer i kommande avsnitt). Användandet av någon av dessa faktorer bidrar till ökad komplexitetsgraden i renderingsprocessen och det kräver således mer prestanda från våra datorer. Generellt sätt kräver 3D-beräkningar ofta mycket mer prestanda än 2D-beräkningar, däremot anpassas olika hårdvaror ständigt för att hantera komplexare beräkningar, särskilt inom 3D. Terminologin “Rendering” kan delas upp i två kategorier: 1) Realtids-rendering (realtime, Eng). Realtids-rendering är en metod för att beräkna fram ett antal bilder per “kort” tidsenhet. Generellt sätt använder man enhetsbegreppet fps, frames per second (bilder per sekund). Metoden appliceras gärna inom spel och andra interaktiva miljöer. Exempel: Den visuella reprensentationen av en 3D-miljö uppstår när en kamera i 3D-världen fångar upp innehållet inom dess synfält skickar den datan vidare för beräkning. När beräkningen är klar, skickas det renderade materialet i form av en skärmdump till skärmen och det är genom att upprepa denna process flera gånger per sekund, som har möjlighet att uppleva “god rörlighet” i 3D-världen. Det betyder att samtliga beräkningar som görs på en bild, inte får ta så lång tid på sig att de hämmar en ergonomiskt tilltalande upplevelse. Hur många bilder som behövs per sekund är en fråga om applikation och ibland subjektivitet. 25 Kursmaterial för Institutionen för Data- och Systemvetenskap, Stockholms universitet. Aware Mustafa Taher, 2012 v. 1.5 2) För-rendering (pre-rendering, Eng). Nyttjas mycket inom filmindustrin, där särskild fokus läggs på kvalité, per varje given bild (frame). I kontrast till realtids-rendering kan för-renderingen ta flera minuter om inte timmar för att framställa en enskild bild. När en komplex och tidskrävande bild renderats klart, kan bilden sparas och sättas ihop som en bild/frame ti ll filmen. Trivia: Både spel- och filmindustrin pressar konstant gränserna för komplexa grafiska beräkningar. I en intervju med Scott Farrar (VFXs chef för filmen Transformers 3 “Dark of the Moon”) berättar han för “The hollywood Reporter“: “It took a staggering 288 hours per frame to render the Driller along with the photoreal CG building that includes all those reflections in its glass.”. Giardina, Carolyn. 2011. “Transformers: Dark of the Moon’s’ Powerful Visual Effects...” Intervju hämtad från: http://www.hollywoodreporter.com/news/transformers-dark-moons-power ful-visual-208967 Åtkomst 3 augusti 2012. Rendering, fortsättning Olika individuella effekter och transformeringar, räknas ut som olika s.k. “uppgifter” av datorn. Exempel: I en komplex renderingsprocess kan flera uppgifter stå på tur, en sådan uppgift kan t ex. vara att gradvist öka ljuset i en bild med 10%, I det fallet behöver alltså varje pixel, oavsett färg, i bilden öka 10% från sitt tidigare värde. Om vi då har en pixel som är svart och vi vill öka ljuset så att pixeln blir lite ljusare, kan följande beräkning tillämpas. Från RGB: 0,0,0 (svart) till 10% av 255 = ca. 25, dvs. RGB: 25,25,25 (mörk grått). För att digitalt producera en bild, kan flera olika renderingsprocesser nyttjats för olika delar i bilden. Den skärmdump vi ser på skärmen kan t ex. var en sammansatt bild som krävt olika typer av 2D- och 3D-beräkningar. Det är viktigt att poängtera att oavsett vad vi ser på skärmen är slutresultatet alltid i form av s.k. rastrerad grafik. Det betyder att all grafik som ritas ut på skärmen (varje given frame/bild) är rastrerad, i form av en skärmdump, vid uppvisningstillfället. 26 Kursmaterial för Institutionen för Data- och Systemvetenskap, Stockholms universitet. Aware Mustafa Taher, 2012 v. 1.5 4.5 Pivotpunkter En pivotpunkt är en centerpunkt som är specifikt kopplat till ett objekt. Pivotpunkten har kordinater inom en rymd (t ex. bildskärmsyta) och varje objekt har kordinater som är relativa till sin pivotpunkt. I bilderna nedan kan ni se hur pivotpunkten befinner sig på olika positioner relativt till motivet. Pivotpunkten sitter i den översta vänstra kanten av det grafiska objektet. Pivotpunkten sitter i mitten av det grafiska objektet. Fortsättningsvis kan vi i bilderna nedan se hur samma motiv ritas ut på olika vis. Om vi förutsätter att motivet ritas ut efter dess pivotpunkter kommer motivet i de två nedre bilderna ritas ut på olika platser. I nästa avsnitt (4.6 Transformeringar) får ni se mer om hur man kan utnyttja pivotpunkter för att manipulera objekt på olika vis. 27 Kursmaterial för Institutionen för Data- och Systemvetenskap, Stockholms universitet. Aware Mustafa Taher, 2012 v. 1.5 4.6 Transformeringar I enlighet med tidigare exempel (4.1 Lager) kan behovet om att manipulera olika grafiska objekt uppstå, inte minst bland interaktiva system, som t ex. vid användandet av ett grafiskt bildprogram som photoshop eller bland spel. Manipuleringar som: “förflyttning”, “rotation” och “skalning” benämns i de flesta sammanhang som olika transformeringstekniker. Det finns även andra transformeringstekniker men dessa är de vanligast förekommande. För att man ska kunna utföra någon transformering behöver minst två värden anges till transformeringen, ett startvärde och ett slutvärde. Startvärdet anger vart transformeringen ska inleda (börja) och slutvärdet anger målet. Nedan följer några exempel. Förflyttning I bilden nedan ser vi exempel på en förflyttning som sker mellan två positioner, bildskärmsytan (rymden) har upplösningen 1920x1080. Förflyttningen sker mellan startvärdet “A” och avslutas på slutvärdet “B“. Startpunkten: “A” har kordinaterna (värdet) “0, 0”. Slutpunkten: “B” har kordinater “1280, 720”. Man kan sammanfatta att transformeringshandlingen skett mellan position A “Start“ till position B “Slut“. Vid transformering av ett grafiskt objekt kopplas det objektets pivotpunkt till start- och slutpunkterna i transformeringen. Beroende på hur motivet i det grafiska objektet förhåller sig till pivotpunkten blir utritningen av transformeringen annorlunda. Pivotpunkten sitter i mitten av det grafiska objektet. Pivotpunkten sitter i den vänstra översta delen av det grafiska objektet. 28 Kursmaterial för Institutionen för Data- och Systemvetenskap, Stockholms universitet. Aware Mustafa Taher, 2012 v. 1.5 Rotation I bilderna nedan kan vi se hur rotation-transformeringen påverkas av att ha olika pivotpositioner på de grafiska objekten. I första bilden har objektet sin pivotpunkt i mitten av motivet, således roterar motivet runt sin egen axel, medan det, i den andra bilden så har objektet sin pivotpunkten i översta vänstra hörnet, detta medför att objektet roterar i en bredare båge. Trivia: En liknelse till sammanhanget skulle kunna hämtas från vårt solsystem. Där solen, som har en centerpunkt i mitten av solsystemet roterar efter sin egen axel medan jorden och de andra planeterna roterar en längre bit ifrån centerpunkten, vilket skapar en anorlunda rotationsaxel. Skala Precis som i tidigare transformeringsexempel visar nedanstående bilder hur transformeringen fungerar på objekt vars pivotpunkter förhåller sig olika, i detta fall ser vi två exempel på hur en skalning ökar från 100% till 200%. 29 Kursmaterial för Institutionen för Data- och Systemvetenskap, Stockholms universitet. Aware Mustafa Taher, 2012 v. 1.5 4.7 Transparens Transparens eller “genomskinlighet“ används för att definera olika grader av synlighet på t ex. grafiska objekt. Vanligtvis hanteras transparensvärdet inom grafiska program i form av procent, där 0% betyder fullt transparent (genomskinligt) och 100% betyder att något är helt solid (fullt synligt). Allting mellan 0% och 100% defineras som s.k. semi-transparens. Texten syns delvis igenom det semi-transparenta äppellagret. 4.8 Alpha värden För att beräkna och rita ut transparenta respektive solida pixlar behövs metadata (extra information) som anger hur pass transparent eller solid som en pixel ska vara. Som i fallet vid utritning av vanlig grafik ritas även transparensvärden i bilder på en “per pixelnivå”. I standarden RGBA har ytterligare en kanal “A“ (Alpha) lagts till för att hantera just denna metadata. Exempel: I en 32bits RGBA-bild har 24bits dedikerats till färg (8 per färgkanal) medan de resterande 8 bitsen hanterar transparensvärden via en gråskala. Precis som RGB-standarden beräknas transparensvärden i en skala från 0 (ingen styrka/ fullt transparent) till 255 (full styrka/ fullt synligt). Se bild. Fullt synlig (solid) R:255, G:0, B:0, A:255 Semi-transparent R:255, G:0, B:0, A:128 Transparent (genomskinlig) R:255, G:0, B:0, A:0 30 Kursmaterial för Institutionen för Data- och Systemvetenskap, Stockholms universitet. Aware Mustafa Taher, 2012 v. 1.5 4.9 Maskning och friläggning Inom digital bildhantering, kan det ibland vara önskvärt att klippa ut eller kopiera ut en del ur en bild. En liknelse till sammanhanget skulle vara att klippa ut en figur från ett papper så att figuren separeras från bakgrunden (resten av pappret). Det finns flera olika tillvägagångssätt och verktyg för att separera olika delar ur en digital bild. Däremot härleder samtliga separeringsprocesser till en särskild teknik som heter Alpha-lager. Tekniken kan först utnyttjas när man applicerat ett s.k. Alpha-lager till en bild. Alpha-lagret har en svartvit skala (oftast på 8bit) som definerar hur de olika pixlarna i en bild sk projiceras (se 4.8 alphavärden). Detta görs genom att alphalagret innehåller olika värden av svart till vitt i en “per pixel nivå”. I bilden nedan kan vi se hur ett alpha-lager kopplat till en bild s.k. “frilägger” eller “maskar ut” delar av motiven från den gråa bakgrunden. Exempel 1. Originalbild, ett vanligt fotografi. Applicera “Alphalager” till orginalbilden med vit färg runt äpplena och svart färg för att märka ut bakgrunden. Resultatet, äpplen är frilagda från bakgrunden. Exempel 2. Originalbild, ett vanligt fotografi. Ett nytt Alpha-lager med nytt motiv. 31 En stjärnformad del av orginalbilden har klippts ut. Detta sker i enlighet med alphalagrets motiv. Kursmaterial för Institutionen för Data- och Systemvetenskap, Stockholms universitet. Aware Mustafa Taher, 2012 v. 1.5 4.10 Aliasing och Anti-Aliasing Aliasing är ett begrepp som utrycker att en pixelformation är kantig. Då pixlar är uppbyggda efter en fyrkantig form så är de naturligt dåligt anpassade för att skapa runda former. Exempel följer. Bild 1. Bilden nedan nyttjar inte Anti-Aliasing och pixelkanterna är således aliased. 32px 128px 512px Anti-Aliasing eller “AA” är i motsatts till Aliasing en teknik som försöker motverka pixelkantighet genom tona intilliggande pixelfärger mellan olika grafiska objekt och bakgrunders kanter. Genom att tona pixelfärgen mellan angränsande ytor (t ex. ett objekt och en bakgrund) kan en mjukare övergång upplevas då de angränsande pixlarna mellan objektet kan dela en jämnare färgövergång. Se bilden nedan. Bild 2. Bilden nedan nyttjar Anti-Aliasing och pixelkanterna får således en till synes jämnare övergång. 32px 128px 512px Bild 3. Bilden till höger visar hur Anti-Aliasing påverkas av färg. 32 Kursmaterial för Institutionen för Data- och Systemvetenskap, Stockholms universitet. Aware Mustafa Taher, 2012 v. 1.5 En annan metod för att försöka motverka Aliasing (synligheten av kantiga pixelformationer) är att försöka öka upplösning. Nedan kan ni se exempel på ett vanligt förekommande problemområde, utritning av text. Bilderna visar vilka skillnader som uppstår när text ritas ut i olika upplösningar i samband med anti-aliasingtekniken på eller av. Bilderna är på 300 PPI. Ingen AA, uppskalad text Teckentorlek 12 Zoom +400% Zoom +1600% Med AA, uppskalad text Teckentorlek 12 Zoom +400% Zoom +1600% Ingen AA, ökad textstorlek (högre upplösning) Teckentorlek 12 Teckentorlek 48 Teckentorlek 196 Med AA, ökad textstorlek (högre upplösning) Teckentorlek 12 Teckentorlek 48 Teckentorlek 196 Notera att användandet av AA inte blir lika tydligt utmärkt vid högre upplösningar. 33 Kursmaterial för Institutionen för Data- och Systemvetenskap, Stockholms universitet. Aware Mustafa Taher, 2012 v. 1.5 4.11 Aliasing och Anti-Aliasing - Fördjupning Anti-Aliasing går att applicera på både 2D- och 3Dgrafik. Olika verktyg och miljöer hanterar AA olika beroende på situation. Bland 2D-bildprogram kan det vara önskvärt att nyttja AA på enstaka grafiska- eller textuella objekt. I kontrast till det kan det vid rendering i 3D-program vara önskvärt att rendera AA på flera delar eller tom. på hela bilden. Uträkningen av AA sker nästan alltid i slutskedet av renderingsprocessen, efter det att andra beräkningar som effekter och transformeringar beräknats på bilden. Detta görs så att man får AA beräknat på resultatet av hela bildinnehållet dvs. att uträkning av AA sker på samtliga objekt samt dess effekter. Ibland kan de dock vara önskvärt att inte rendera AA på en given effekt. Ett sådant exempel kan vara vid användandet av effekten “oskärpa”, denna effekt interpolerar pixlar (blandar och jämnar ut färger på intilliggande pixlar) och detta medför att det kan det bli redundant att beräkna AA i det oskärpta lagret då AA också är en form av, men mer precis pixel-interpolering. Det kan med andra ord vara lämpligt att exkludera AA när oskärpa renderas då man potentiellt har väldigt lite att tjäna visuellt samtidigt som det blir mer beräkningskrävande. Notera att det fortfarande finns en poäng med att rendera AA på ett objekt (lager) som ritas ut över ett oskärpt lager då det objektets kanter kan tjäna på att få en mjukare övergång mot det oskärpta lagret. Det är viktigt att notera att Anti-Aliasing kräver extra beräkningskraft. Det är inte alltid lämpligt att använda AA då det kan innebära stora prestandaförluster. Inom realtidsrendering som t ex. spel kan användandet av AA kräva för mycket prestanda. I kontrast till detta kan det vara mer försumbart med prestanda när man arbetar i 2D-verktyg då man i detta fall hanterar grafiken i stilla form. I andra fall kan användandet av AA förkomma när man ser på text i ett operativsystem eller i en webbläsare. 34 Kursmaterial för Institutionen för Data- och Systemvetenskap, Stockholms universitet. Aware Mustafa Taher, 2012 v. 1.5 Bildformat (work in progress) BMP: Bmp är ett av standardformaten för bitmappad grafik inom Windowsmiljö. Formatet är designat av Microsoft och är ett okomprimerat format, vilket således gör att en bmp-fil kan bli väldigt stor i datastorlek. BMP är kort för bitmap. Då bmp innehåller en hel del redundant information fungerar extra bra att packa ner filerna med ickeförstörande (ej destruktiva) komprimeringsmetoder. JPG: I en standard RGB-bild har den additiva informationen, per pixel, delats upp i tre olika kanaler (röd, grön och blå) och genom att addera styrka till samtliga kanaler producerar man ljusare nyanser. Detta gör att en standard RGB-bild är beroende av data inom tre kanaler för att hantera färg och ljus. Se kap 3. Färg. JPG-formatets huvudsakliga funktion är att den delar upp data i två områden, ljus och färg. Anledningen till detta är att man genom att separera datan kan uttnytja våra ögons svagheter skillt från dess styrkor. Då våra ögon lättare ser skillnader på olika nivåer av ljusstyrka, separeras ljus datan till en egen kanal medan färgmättnad hanteras via två sammansatta kanaler. Genom att dela upp innehållet kan formatet utnyttja en s.k. kvantifieringsmetod för att samla ihop flera likfärgade pixelblock till större 2D områden (normalt förekommande är pixelblock om 8*8px), dessa färgblock komprimeras via en sammanställning av färgen till en färg per färgblock utan att ljusdatan påverkas. Formatet är således särskilt designat för att utnyttja våra ögons brister i att urskilja tätt intilliggande och närliggande likartade färgade pixlar. Den ger ofta hög kompressionsgrad med bibehållen god kvalitét när den används på bilder som inte innehåller höga kontraster eller långa raka linjer (subjektiv tolkning). Det vanligaste förekommande tillämpningsområdet är bland fotografier. Ni kan även fördjupa er kring ämnet och användandet av “HSL” (Hue, Saturation and Lightning) som kan ge en tydligare beskrivning om hur man i detalj utnyttjar färg skillt från ljus för att uppnå kompressioner. “jpg” eller “jpeg” som det ibland kallas, kommer från (Joint Photographic Experts Group) 35
© Copyright 2024