HGC = Hercules Graphic Card

CGA = Color Graphic Adapter

EGA = Enhanced Graphic Adapter

VGA = Video Graphic Array

SVGA = Super Video Graphic Array

Współczesna karta graficzna nVidia

Przypomnijmy:

Karta graficzna (ang. graphic card) jest urządzeniem, które tworzy obraz wyświetlany na monitorze komputera. Karta jest wsuwana w odpowiedni slot na płycie głównej komputera. Począwszy od mikroprocesorów 64-bitowych firma Intel integruje karty graficzne z procesorem głównym. Zintegrowana karta nie ma specjalnie dużych osiągnięć, niemniej zwykle wystarcza do typowych zastosowań: grafika biurowa, wyświetlanie filmów, prostsze gry komputerowe, itp. Wymagający użytkownicy muszą się zaopatrzyć w dedykowane karty graficzne o wysokich parametrach. Ale nie o tym będziemy tutaj rozprawiać.

Zwykle karta posiada własną pamięć na grafikę, VRAM (ang. Video-RAM). W pamięci tej przechowywana jest treść wyświetlanego obrazu w postaci tzw. bufora ekranowego (ang. frame buffer). Obraz zbudowany jest z siatki pikseli zwanej rastrem. Raster posiada określoną liczbę linii oraz liczbę pikseli w linii, np. 1024 piksele na 768 linii. W buforze ekranu przechowywana jest informacja o kolorach pikseli w poszczególnych liniach obrazu (od strony lewej do prawej). Taka organizacja odpowiada kolejności przesyłania pikseli do monitora. Układ graficzny karty cyklicznie (np. 60 razy na sekundę) odczytuje zawartość bufora ekranowego bajt po bajcie, zamienia tą informację na informację o kolorze pikseli i przesyła szeregowo do monitora poprzez złącze graficzne.

Zwykle pamięć VRAM jest większa niż wielkość bufora ekranowego. Nadmiar pamięci karta może wykorzystywać do przechowywania dodatkowych danych graficznych, tzw. tekstur. Tekstura (ang. texture) to obrazek, który znajduje się w pamięci karty graficznej. Czasem chcemy przetwarzać obrazki za pomocą programu, wtedy umieszczamy je w pamięci RAM procesora. Obrazek w pamięci RAM będziemy nazywali bitmapą (ang. bitmap) lub powierzchnią (ang. surface).

W dzisiejszych kartach graficznych zwykle nie wykonuje się operacji bezpośrednio na buforze ekranu, lecz na osobnym obszarze. Gdy operacja się zakończy, zawartość obszaru zostaje przesłana do bufora ekranowego w chwili,, gdy obraz nie jest generowany (np. w przerwie pomiędzy dwoma ramkami). W ten sposób wyświetlany obraz nie jest zakłócany zmianami częściowymi. W trakcie tego kursu tak właśnie będziemy robić.

Akcelerator graficzny (ang. graphic accelerator) jest specjalizowanym układem, który sprzętowo (zatem bardzo szybko) wykonuje różne operacje graficzne na teksturach i buforze ekranowym. Zaletą jest to, iż operacje te są wykonywane setki razy szybciej od procesora głównego i jednocześnie ich wykonanie odciąża procesor, który w tym czasie może zająć się czymś innym. Współczesne akceleratory są bardzo skomplikowane i potrafią wykonywać operacje trójwymiarowe. SDL2 korzysta z usług akceleratora.

Pierwszą taką strukturę już poznałeś w poprzednim rozdziale:

struct SDL_Window
{
    const void *magic;
    Uint32 id;
    char *title;
    SDL_Surface *icon;
    int x, y;
    int w, h;
    int min_w, min_h;
    int max_w, max_h;
    Uint32 flags;
    Uint32 last_fullscreen_flags;
    SDL_Rect windowed;
    SDL_DisplayMode fullscreen_mode;
    float brightness;
    Uint16 *gamma;
    Uint16 *saved_gamma;
    SDL_Surface *surface;
    SDL_bool surface_valid;
    SDL_bool is_hiding;
    SDL_bool is_destroying;
    SDL_WindowShaper *shaper;
    SDL_HitTest hit_test;
    void *hit_test_data;
    SDL_WindowUserData *data;
    void *driverdata;
    SDL_Window *prev;
    SDL_Window *next;
};

Często będziemy musieli określać obszary prostokątne. Do tego celu w SDL2 mamy odpowiednią strukturę:

struct SDL_Rect
{
  Sint16 x, y;
  Uint16 w, h;
};

Kolory pikseli w SDL również definiowane są odpowiednią strukturą:

struct SDL_Color
{
  Uint8 r;
  Uint8 g;
  Uint8 b;
  Uint8 unused;
};

Do definiowania punktów służy struktura:

struct SDL_Point
{
  int x;
  int y;
};

Karty graficzne mogą posiadać różne sposoby kodowania kolorów pikseli. W prostszych urządzeniach stosowane są tryby paletowe (biblioteka SDL2 może być używana nie tylko na komputerach IBM PC). W rozdziale o grafice rastrowej opisaliśmy zasadę działania trybów paletowych. Tryby te były również stosowane w starszych kartach graficznych. Krótko mówiąc w trybie paletowym piksel w buforze ekranu nie zawiera bezpośrednio informacji o kolorze, lecz numer koloru palety, Takie rozwiązanie pozwala zaoszczędzić pamięci. Na przykład, jeśli każdy piksel jest reprezentowany przez 4 bity, to może przyjmować wartości od 0 do 15, a zatem na ekranie jednocześnie może się pojawić 16 różnych kolorów. Dla każdej wartości piksela w palecie zdefiniowany jest odpowiedni kolor, który zostanie wyświetlony dla danego piksela. Paleta może być zdefiniowana sprzętowo (kolory są ustalone na stałe) lub definiowana przez program użytkownika. Do przechowywania używanej palety kolorów SDL posiada specjalną strukturę:

struct SDL_Palette
{
  int ncolors;
  SDL_Color *colors;
};

W trybach bezpośrednich informacja o kolorze zawarta jest w kodzie piksela. Np. dla trybu 24 bitowego RGB dla każdej składowej koloru przydzielone jest 8 bitów piksela. Piksel zajmuje w buforze 3 bajty, lecz może być w ponad 16 milionach kolorów.

Informacja o sposobie kodowania kolorów w pikselach przechowywana jest w specjalnej strukturze:

struct SDL_PixelFormat
{
  SDL_Palette *palette;
  Uint8  BitsPerPixel;
  Uint8  BytesPerPixel;
  Uint8  Rloss, Gloss, Bloss, Aloss;
  Uint8  Rshift, Gshift, Bshift, Ashift;
  Uint32 Rmask, Gmask, Bmask, Amask;
  Uint32 colorkey;
  Uint8  alpha;
};

Rmask = 00000000000000000000000011111111 = 0x000000ff
Gmask = 00000000000000001111111100000000 = 0x0000ff00
Bmask = 00000000111111110000000000000000 = 0x00ff0000
Amask = 11111111000000000000000000000000 = 0xff000000

Kolejne dwie struktury odnoszą się do obrazów. Przez obraz rozumiemy tutaj dowolną grafikę zbudowaną z pikseli.

struct SDL_Surface
{
  Uint32 flags;
  SDL_PixelFormat* format;
  int w, h;
  int pitch;
  void * pixels;
  void * userdata;
  int locked;
  void * lock_data;
  SDL_Rect clip_rect;
  SDL_BlitMap * map;
  int refcount;
};

struct SDL_Texture
{
    const void *magic;
    Uint32 format;
    int access;
    int w;
    int h;
    int modMode;
    SDL_BlendMode blendMode;
    Uint8 r, g, b, a;
    SDL_Renderer *renderer;
    SDL_Texture *native;
    SDL_SW_YUVTexture *yuv;
    void *pixels;
    int pitch;
    SDL_Rect locked_rect;
    void *driverdata;
    SDL_Texture *prev;
    SDL_Texture *next;
};

Ostatnią strukturą, o której tutaj wspomnimy, jest struktura SDL_Renderer przechowująca informacje o sposobie tworzenia grafiki na teksturze. Angielskie słowo renderer oznacza w tym kontekście obiekt tworzący, rysujący grafikę. W strukturze SD_Renderer biblioteka SDL2 umieszcza wszystkie niezbędne informacje wykorzystywane przez funkcje graficzne operujące na teksturach, czyli obrazach w pamięci akceleratora graficznego. W systemie Windows nazywane jest to kontekstem graficznym. Definicja tej struktury jest dosyć skomplikowana, lecz program użytkownika nie musi mieć bezpośredniego dostępu do jej pól.

struct SDL_Renderer
{
  const void *magic;
  void (*WindowEvent) (SDL_Renderer * renderer, const SDL_WindowEvent * event);
  int (*CreateTexture) (SDL_Renderer * renderer, SDL_Texture * texture);
  int (*SetTextureColorMod) (SDL_Renderer * renderer,
                             SDL_Texture * texture);
  int (*SetTextureAlphaMod) (SDL_Renderer * renderer,
                             SDL_Texture * texture);
  int (*SetTextureBlendMode) (SDL_Renderer * renderer,
                              SDL_Texture * texture);
  int (*UpdateTexture) (SDL_Renderer * renderer, SDL_Texture * texture,
                        const SDL_Rect * rect, const void * pixels,
                        int pitch);
  int (*LockTexture) (SDL_Renderer * renderer, SDL_Texture * texture,
                      const SDL_Rect * rect, void **pixels, int * pitch);
  void (*UnlockTexture) (SDL_Renderer * renderer, SDL_Texture * texture);
  int (*SetRenderTarget) (SDL_Renderer * renderer, SDL_Texture * texture);
  int (*UpdateViewport) (SDL_Renderer * renderer);
  int (*RenderClear) (SDL_Renderer * renderer);
  int (*RenderDrawPoints) (SDL_Renderer * renderer, const SDL_FPoint * points,
                           int count);
  int (*RenderDrawLines) (SDL_Renderer * renderer, const SDL_FPoint * points,
                          int count);
  int (*RenderFillRects) (SDL_Renderer * renderer, const SDL_FRect * rects,
                          int count);
  int (*RenderCopy) (SDL_Renderer * renderer, SDL_Texture * texture,
                     const SDL_Rect * srcrect, const SDL_FRect * dstrect);
  int (*RenderCopyEx) (SDL_Renderer * renderer, SDL_Texture * texture,
                     const SDL_Rect * srcquad, const SDL_FRect * dstrect,
                     const double angle, const SDL_FPoint * center,
                     const SDL_RendererFlip flip);
  int (*RenderReadPixels) (SDL_Renderer * renderer, const SDL_Rect * rect,
                           Uint32 format, void * pixels, int pitch);
  void (*RenderPresent) (SDL_Renderer * renderer);
  void (*DestroyTexture) (SDL_Renderer * renderer, SDL_Texture * texture);
  void (*DestroyRenderer) (SDL_Renderer * renderer);
  int (*GL_BindTexture) (SDL_Renderer * renderer, SDL_Texture * texture,
                         float * texw, float * texh);
  int (*GL_UnbindTexture) (SDL_Renderer * renderer, SDL_Texture * texture);
  SDL_RendererInfo info;
  SDL_Window *window;
  SDL_bool hidden;
  SDL_bool resized;
  int logical_w;
  int logical_h;
  int logical_w_backup;
  int logical_h_backup;
  SDL_Rect viewport;
  SDL_Rect viewport_backup;
  SDL_FPoint scale;
  SDL_FPoint scale_backup;
  SDL_Texture *textures;
  SDL_Texture *target;
  Uint8 r, g, b, a;
  SDL_BlendMode blendMode;
  void *driverdata;
};

Uruchom CodeBlocks i utwórz z szablonu nowy projekt sdl2.

Pierwszy program pokazuje, jak programowo można tworzyć grafikę przy wykorzystaniu obrazu w pamięci RAM. Przekopiuj do edytora poniższy program, skompiluj go i uruchom (w Linuxie użyj dyrektywy: #include <SDL2/SDL.h>):

// Grafika programowa
//----------------------

#include <SDL.h>
#include <iostream>

using namespace std;

int main(int argc, char * args[])
{
  if(SDL_Init(SDL_INIT_VIDEO))
  {
    cout << "SDL_Init Error: " << SDL_GetError() << endl;
    return 1;
  }

  // Tutaj umieszczamy kod dla SDL2

  SDL_Window * w = SDL_CreateWindow("Grafika", SDL_WINDOWPOS_CENTERED, SDL_WINDOWPOS_CENTERED, 480, 640, 0);

  if(!w)
  {
    cout << "SDL_CreateWindow Error: " << SDL_GetError() << endl;
    SDL_Quit();
    return 1;
  }

  // Powierzchnia graficzna okna
  SDL_Surface * s = SDL_GetWindowSurface(w);

  // Blokujemy dostęp do powierzchni graficznej innym procesom
  SDL_LockSurface(s);

  // Kolejne linie obrazu wypełniamy stopniami szarości
  for(int i = 0; i < s->h; i++) SDL_memset((Uint8 *) s->pixels+i*s->pitch,i+i,s->pitch);

  // Odblokowujemy dostęp do powierzchni
  SDL_UnlockSurface(s);

  // Uaktualniamy zawartość okna
  SDL_UpdateWindowSurface(w);

  // Czekamy 5 sekund
  SDL_Delay(5000);

  // Usuwamy okno
  SDL_DestroyWindow(w);

  // Koniec pracy z SDL2
  SDL_Quit();

  return 0;
}

Początek i koniec programu jest taki sam, jak w programie z poprzedniego rozdziału.

Reszta programu jest taka sama jak w przykładzie z poprzedniego rozdziału, więc nie muszę powtarzać opisu.

Program pokazuje sposób pracy z powierzchnią graficzną okna. Zasada jest następująca:

1. Z okna pobierasz do RAM powierzchnię graficzną za pomocą funkcji SDL_GetWindowSurface().
2. Powierzchnię rezerwujesz za pomocą funkcji SDL_LockSurface().
3. Zmieniasz w dowolny sposób zawartość obszaru pikseli.
4. Powierzchnię odblokowujesz za pomocą funkcji SDL_UnlockSurface().
5. Uaktualnisz w VRAM treść okna za pomocą funkcji SDL_UpdateWindowSurface().

Tworzenie grafiki za pomocą mikroprocesora jest niestety wolne. Dlatego opracowano układy wspomagające, czyli akceleratory grafiki. Logicznie są one dużo prostsze niż procesor, lecz potrafią wykonywać jednocześnie tysiące operacji. W rezultacie grafika tworzona jest setki razy szybciej, niż potrafiłby to zrobić mikroprocesor. Biblioteka SDL2 współpracuje intensywnie z akceleratorami i preferowanym sposobem tworzenia grafiki jest wykorzystanie akceleratora. Dlatego strukturę SDL_Surface wykorzystuje się tylko w niektórych przypadkach, np. przy odczycie obrazków z plików, gdzie akcelerator nie poradzi. Częściej wykorzystywane będą dwie struktury: SDL_Texture do definicji obrazu w pamięci VRAM oraz SDL_Renderer do tworzenia grafiki na teksturach w VRAM.

Następny program wykonuje to samo zadanie, jednak za pomocą akceleratora grafiki z wykorzystaniem kontekstu graficznego, czyli struktury SDL_Renderer.

Skopiuj do edytora poniższy program, skompiluj i uruchom go (w Linuxie użyj dyrektywy: #include <SDL2/SDL.h>):

// Grafika sprzętowa
//------------------

#include <SDL.h>
#include <iostream>

using namespace std;

const int W_W = 480;
const int W_H = 640;

int main(int argc, char * args[])
{
  if(SDL_Init(SDL_INIT_VIDEO))
  {
    cout << "SDL_Init Error: " << SDL_GetError() << endl;
    return 1;
  }

  // Tutaj umieszczamy kod dla SDL2

  SDL_Window * w = SDL_CreateWindow("Grafika", SDL_WINDOWPOS_CENTERED, SDL_WINDOWPOS_CENTERED, W_W, W_H, 0);

  if(!w)
  {
    cout << "SDL_CreateWindow Error: " << SDL_GetError() << endl;
    SDL_Quit();
    return 2;
  }

  // Tworzymy strukturę SDL_Renderer do operacji graficznych wykonywanych za pomocą akceleratora
  SDL_Renderer * r = SDL_CreateRenderer(w, 0, 0);

  if(!r)
  {
     cout << "SDL_CreateRenderer Error: " << SDL_GetError() << endl;
     SDL_DestroyWindow(w);
     SDL_Quit();
     return 3;
  }

  // Rysujemy grafikę

  for(int i = 0; i < W_H; i++)
  {
      SDL_SetRenderDrawColor(r,i+i,i+i,i+i,255);
      SDL_RenderDrawLine(r,0,i,W_W-1,i);
  }

  // Uaktualniamy obraz
  SDL_RenderPresent(r);

  // Czekamy 5 sekund
  SDL_Delay(5000);

  // Usuwamy kontekst graficzny
  SDL_DestroyRenderer(r);

  // Usuwamy okno
  SDL_DestroyWindow(w);

  // Koniec pracy z SDL2
  SDL_Quit();

  return 0;
}

Opiszmy poszczególne elementy składowe programu:

SSDL_SetRenderDrawColor(r,i*8,255-i/3,0,255);

Reszta programu jest taka sama jak w poprzednich przykładach. Usuwamy okno, zamykamy SDL2 i kończymy poleceniem return 0.

w – wskaźnik struktury SDL_Window

SDL_LockSurface(s) – blokuje dostęp do powierzchni graficznej okna innym procesom.

s – wskaźnik struktury SDL_Surface

SDL_Memset(a,v,n) – ustawia bajty zadanego obszaru na podaną wartość.

a – adres obszaru
v – wartość, którą zostaną wypełnione bajty w obszarze
n – liczba bajtów w obszarze

SDL_UnlockSurface(s) – odblokowuje dostęp do powierzchni graficznej.

s – wskaźnik struktury SDL_Surface

SDL_UpdateWindowSurface(w) – uaktualnia bufor ekranu w VRAM treścią powierzchni graficznej. Innymi słowy wyświetla w okienku zawartość tej powierzchni.

w – wskaźnik struktury SDL_Window

SDL_CreateRenderer(w,n,f) – tworzy dla okna kontekst graficzny (strukturę SDL_Renderer), który jest później wykorzystywany do wykonywania operacji graficznych w SDL2. W pamięci VRAM przydziela dla tego kontekstu odpowiednią teksturę. Jako wynik zwraca wskaźnik do struktury SDL_Renderer.

w – wskaźnik struktury SDL_Window, która opisuje okno
n – numer sterownika grafiki, który zostanie użyty do operacji w oknie. 0 oznacza standardowy sterownik.
f – znaczniki

SDL_SetRenderDrawColor(r,cr,cg,cb,ca) – ustawia kolor dla operacji graficznej.

r – wskaźnik struktury SDL_Renderer
cr – składowa czerwona
cg – składowa zielona
cb – składowa niebieska
ca – przezroczystość koloru

SDL_RenderDrawLine(r,x1,y1,x2,y2) – rysuje odcinek

r – wskaźnik struktury SDL_Renderer
x1,y1 – współrzędne punktu początkowego odcinka
x2,y2 – współrzędne punktu końcowego odcinka

SDL_RenderPresent(r) – przesyła teksturę przydzieloną kontekstowi graficznemu do bufora ekranu.

r – wskaźnik struktury SDL_Renderer

SDL_DestroyRenderer(r) – usuwa z pamięci kontekst graficzny wraz z przydzieloną mu teksturą w VRAM.

r – wskaźnik struktury SDL_Renderer