Grafika: Jak powstają kolory?

Przed opisaniem formatów grafiki rastrowej, chciałbym jeszcze (względnie) szybko wyjaśnić, w jaki sposób powstają kolory na ekranach, oraz w jaki sposób są zapisywane. Ułatwi to później wybór właściwego formatu obrazka.

Kolory podstawowe

Najważniejsze co musisz wiedzieć, to to, że ekrany tworzą różne barwy mieszając ze sobą trzy kolory podstawowe: czerwony, zielony i niebieski. Na całej powierzchni monitora, telewizora czy telefonu są rozłożone miliony malutkich lampek nazywanych subpikselami. Są ich trzy rodzaje, które świecą na czerwono, zielono lub niebiesko. Ekrany manipulują jasnością poszczególnych subpikseli, aby uzyskać różna proporcje barw podstawowych, a tym samym różne kolory. Więcej o tym, oraz o sposobie tworzenia koloru przez drukarki znajdziesz w filmie w tym wpisie: RGB vs CMYK

Subpiksele

Obraz na ekranie komputera, telewizora czy telefonu tworzony jest za pomocą kolorowych kwadracików, czyli pikseli. Każdy piksel jest złożony z trzech mniejszych prostokątów nazywanych subpikselami. Jeden subpiksel jest czerwony, drugi zielony, a trzeci niebieski. Sterując jasnością tych trzech podstawowych barw otrzymuje się kolor całego piksela.

  • Jeżeli żaden subpiksel nie będzie się świecił, otrzymamy kolor czarny.
  • Jeżeli tylko czerwony, to otrzymamy kolor czerwony. Im jaśniejszy subpiksel będzie, tym jaśniejszą czerwień uzyskamy. Tak samo działa to dla zielonego i niebieskiego.
  • Mieszając czerwony z zielonym możemy uzyskać odcień od pomarańczowego do żółtego, w zależności od tego, czy to czerwony będzie jaśniejszy, czy zielony.
  • Mieszając zieleń z niebieskim, otrzymamy błękit.
  • Mieszając czerwień z niebieskim – róż.
  • Jeżeli wszystkie zaświecą z całej siły – dostaniemy biały.
  • Jeżeli wszystkie trzy z podobną mocą – kolor zbliżony do szarego.
R: 0, G: 0, B: 0R: 64, G: 64, B: 64R: 128, G: 128, B: 128R: 192, G: 192, B: 192R: 255, G: 255, B: 255
R: 0, G: 0, B: 0R: 64, G: 0, B: 0R: 128, G: 0, B: 0R: 192, G: 0, B: 0R: 255, G: 0, B: 0
R: 0, G: 0, B: 0R: 0, G: 64, B: 0R: 0, G: 128, B: 0R: 0, G: 192, B: 0R: 0, G: 255, B: 0
R: 0, G: 0, B: 0R: 0, G: 0, B: 64R: 0, G: 0, B: 128R: 0, G: 0, B: 192R: 0, G: 0, B: 255
R: 255, G: 64, B: 0R: 255, G: 160, B: 0R: 255, G: 255, B: 0R: 160, G: 255, B: 0R: 64, G: 255, B: 0
R: 0, G: 255, B: 64R: 0, G: 255, B: 160R: 0, G: 255, B: 255R: 0, G: 160, B: 255R: 0, G: 64, B: 255
R: 64, G: 0, B: 255R: 160, G: 0, B: 255R: 255, G: 0, B: 255R: 255, G: 0, B: 160R: 255, G: 0, B: 64
R: 255, G: 0, B: 0R: 224, G: 32, B: 32R: 192, G: 64, B: 64R: 160, G: 96, B: 96R: 128, G: 128, B: 128

Głębia bitowa

Zmiana jasności subpikseli nie jest płynna, odbywa się małymi skokami. Typowe obrazki i typowe ekrany do określenia jasności używają całkowitych liczb od 0 do 255. 0 = nie świeci w ogóle, 255 = świeci z całą mocą.

Kombinacja trzech subpikseli (czerwonego, zielonego i niebieskiego), z których każdy może świecić na jednym z 256 poziomów, pozwala uzyskać ponad 16 milionów różnych kolorów. Jeżeli zwiększyć liczbę poziomów jasności, można uzyskać jeszcze więcej. Duża liczba barw pozwala uzyskać naturalne kolory i płynne przejścia między nimi (tzw. gradient).

Im więcej bitów, tym więcej kolorów, tym płynniejszy gradient.

Ilość poziomów jasności nazywa się głębią bitową. Standardowe obrazki oraz monitory obsługują 256 poziomów dla każdego z podstawowych kolorów. Nazywamy to głębią ośmiobitową. Wchodzące do sklepów telewizory HDR pozwalają uzyskać 1024 poziomy i mają głębię dziesięciobitową. Skąd się wzięła ósemka i dziesiątka?

Wzięły się ze sposobu, w jaki komputery przechowują liczby. My używamy systemu dziesiętnego, w którym do zapisu dowolnej liczby używamy cyfr od 0 do 9. Komputery używają systemu binarnego, w którym używa się tylko dwóch cyfr: zera i jedynki. Przykładowe liczby zapisane w systemie dziesiętnym (normalnym) i binarnym (komputerowym):

00
11
210
311
4100
5101
6110
7111
81000
91001
101010
151111
1610000
2010100
50110010
1001100100
20011001000
25511111111
10231111111111

Jak widać system binarny wymaga więcej miejsca do zapisania tej samej liczby. 255 w dziesiętnym systemie wymaga trzech miejsc, a w binarnym 8 – stąd mówimy o głębi ośmiobitowej.

Dla dopełnienia obrazu: Graficy często pracują z grafikami mającymi jeszcze większą głębię bitową np. 16 lub 32 bity. Chociaż nie istnieją monitory, które potrafiłby wyświetlić miliony, a nawet miliardy poziomów, to taki nadmiar bardzo przydaje się np. podczas obróbki fotografii. Można dzięki temu zredukować jasność mocno nasłonecznionych miejsc i odkryć nowe szczegóły. Mimo tego, że wyglądały jak prześwietlona biała plama.

Graficy 3D używają takich obrazów jako nieba oraz oświetlenia sceny. Są nakładane na kulistą sferę, dlatego są zniekształcone. Muszą przechowywać informację o bardzo silnym świetle, dlatego używają 32 bitów na kanał (kolor) zamiast 8. Tam gdzie na monitorach wyświetla się biała plama, wciąż jest przechowywanych dużo szczegółów…
… Po zmniejszeniu jasności odkrywamy, że w prześwietlonym miejscu jest obraz małego słońca i chmur.
Tutaj ten sam obrazek, ale przed zmniejszeniem jasności zmniejszyłem głębię z 32 bitów na kanał do standardowych 8. Informacje o tym, co było w jasnej plamie zostały bezpowrotnie stracone. [Oryginalna tekstura została pobrana z hdrihaven.com]

Kanały RGB oraz RGBA

Kanały mówią, jakie informacje zawiera obrazek. Jeżeli obrazek jest kolorowy, to posiada kanały R[red] G [green] B[blue] (chociaż mogą być inne np. CMYK). Można wyodrębnić je ze zdjęcia.

Można powiedzieć, że kolorowe zdjęcie składa się z 3 trzech monochromatycznych nałożonych na siebie.

Oprócz informacji o kolorze, obrazek może przechowywać też informacje o przeźroczystości. Wtedy do kanału RGB dochodzi Alpha. Alpha niekoniecznie musi przechowywać przeźroczystość. Np. tekstura fantastycznego miecza może posiadać w kanale alpha informację o tym, które części emitują światło.

Cały górny prostokąt ma jednolity zielonkawy kolor, tylko staje się coraz mocniej przeźroczysty bliżej prawej strony. Za transparentność odpowiada ostatni kanał, Alpha. Im ciemniejszy kolor na nim, tym bardziej przeźroczysty będzie rysunek w tym miejscu.

Dla dopełnienia: Zapis RGB 24-bit oznacza trzy kanały na wiadome kolory. 24 to głębia kolorów, będąca sumą głębi poszczególnych kanałów. Takie coś spotkamy np. przy popularnych plikach JPG. Z kolei zapis RGBA 32-bit to 4 kanały. Trzy przechowują wiadomo-co, czwarty przeźroczystość. 32 to znowu zsumowana głębia kanałów, ale uwzględniająca przeźroczystość. Spotkamy to głównie przy plikach PNG.

Skala odcieni szarości

Skala odcieni szarości, inaczej grayscale, to po prostu jeden kanał, mówiący tylko o jasności. Może być ośmiobitowy, co da 256 różnych odcieni. Głębia może być większa, może być mniejsza. Obrazy zapisane w skali szarości to nie tylko czarno-białe zdjęcia, ale również informacje wykorzystywane przez grafików. Np. ukształtowanie terenu można zapisać jako obrazek, w którym miejsca wyżej położone są jaśniejsze, niżej – ciemniejsze. Wykorzystują to np. edytory poziomów w grach komputerowych. Innym sposobem na wykorzystanie skali szarości jest tekstura mówiąca, w którym miejscu powierzchnia obiektu jest gładka i odbija światło jak lustro, a w którym chropowata i daje rozmyte odbicie.

Obrazki w skali szarości pozwalają przechowywać informacje nie tylko o kolorze, ale też o wysokości terenu.
[Obraz pochodzi z Wikipedii.]
Tutaj z kolei szary obrazek (w prawym rogu) został nałożony na kulę i wskazuje miejsca, gdzie ta jest gładka lub chropowata. Im jaśniejszy kolor, tym większa chropowatość. Tam gdzie tekstura jest czarna, kula jest gładka i ma ostre odbicia jak w lustrze. Po lewej stronie, na którą nałożony jest ciemniejszy pasek odbicie jest rozmyte. Mimo to, można jeszcze rozpoznać obiekty na nim. Po prawej stronie, gdzie jest jaśniejszy pasek, powierzchnia jest bardziej chropowata, a przez to w odbiciu widać już tylko kolorowe plamy. [Screeny pochodzą z programu Blender]

Kolor indeksowany

To stary system wywodzący się z czasów, kiedy komputery miały za mało pamięci aby przechowywać realistyczne obrazy i w ogóle nie były w stanie wyświetlić prawdziwych kolorów.
W trybie indeksowanym można przechowywać maksymalnie 256 kolorów (minimalnie 2). Podczas zapisywania obrazka generowana jest lista kolorów, a każdemu z nich przypisany numer. Następnie każdy piksel obrazka jest zapisywany jako jeden z tych numerów, w zależności od tego, który kolor najbardziej do niego jest podobny. Dziś jest to spotykane głównie w animowanych gifach.

Ten obrazek ma tylko 5 kolorów.

Ze względu na ograniczoną liczbę kolorów, żeby uzyskać lepsze wrażenia (większej liczby barw, czy płynnego przejścia miedzy nimi) stosuje się dithering. Można to określić jako kropkowanie.

Obrazek z kolorami zapisanymi w formacie RGB-24.
Ten sam obrazek zapisany w 16 kolorach bez ditheringu.
I jeszcze raz 16 kolorów, ale z ditheringiem.

Podsumowanie

  • Kolory na ekranie powstają poprzez mieszanie ze sobą czerwonego, zielonego i niebieskiego.
  • Jasność poszczególnych kolorów (subpikseli) jest regulowana małymi skokami. Ilość możliwych skoków jest określana za pomocą głębi bitowej. Dzisiaj standardem jest 8 bitów na kolor, który pozwala uzyskać 256 poziomów jasności. Ekrany HDR mają głębię co najmniej 10 bitów i pozwalają uzyskać co najmniej 1024 poziomy. Im więcej tych poziomów, tym lepsze odwzorowanie kolorów.
  • Graficy i fotografowie często korzystają z obrazów mających jeszcze większą głębie bitową. Np. 16 lub 32 na kanał. Pozwala to wydobywać więcej szczegółów z jasnych i zacienionych miejsc.
  • Kanały RGB oraz RGBA mówią, jakie informacje przechowują obrazy. Ten pierwszy tylko kolory, ten drugi dodatkowo przeźroczystość.
  • Oprócz modelu RGB/RGBA pozwalającego uzyskać naturalne kolory, istnieje jeszcze skala szarości oraz kolor indeksowany. Istnieją też kanały CMY oraz CMYK, ale o tym w innym wpisie.
  • A jeżeli chcesz zobaczyć, jak dobierać pasujące do siebie barwy, zobacz wpis o kole kolorów.