Z pewnością wszystkie nowoczesne karty graficzne mogą być przeprogramowywane z poziomu procesora centralnego komputera, a więc w komputerze windowsowym przez uruchomienie aplikacji .EXE. Sztukę tę posiedli tylko twórcy silników gier komputerowych i innych zaawansowanych narzędzi graficznych. Jednak ostatnio drzwi do tych tajemnic znacząco się otworzyły za sprawą nowego standardu HTML, a ściślej jej części z grafiką 3D zwaną webGL. Pojawił się tam podobny do C język GCSL nazywany językiem shading służący do pisania programów zwanych szejderami, które działają właśnie na procesorach karty graficznej. Są to programy komputerowe, które umożliwiają tworzenie złożonych efektów wizualnych.
W webGL wyróżnia się dwa rodzaje szejderów: szejder wierzchołków i szejder fragmentów. Ten pierwszy przetwarza wierzchołki obiektów 3D uruchamiając się dla każdego. Zmienne atrybutowe pozwalają przekazać charakterystykę każdego z wierzchołków umożliwiając odpowiednie ich przetworzenie. Z szejderem fragmentów może się połączyć zmienną varying, która przekazuje atrybuty konkretnych fragmentów, które mogą być wyliczane z interpolacji wierzchołków. Szejder fragmentów może również przyjmować dane wprost ze sterującego całością programu Java Script, który w ten sposób może ustalić parametry wyświetlania obowiązujące dla całego rysunku.
Obydwa szejdery to oddzielne moduły, a każdy zbudowany jest podobnie jak program w C. Składa się bowiem z deklaracji zmiennych globalnych i definicji funkcji. Program szejdera musi zawierać dokładnie jedną deklarację funkcji main() bez parametrów i zwrotnej wartości funkcji - void.
Fragment to piksel wyświetlany na ekranie, jednakowoż technicznie fragment to piksel razem z jego pozycją, kolorem i innymi informacjami. Szejder wierzchołków:
var VSHADER_SOURCE =
'void main() {\n' +
' gl_Position = vec4 (0.0, 0.0, 0.0, 1.0);\n' +
' gl_PointSize = 10.0;\n' +
'}\n';
Powyższa funkcja definiuje pozycję punktu, który ma zostać wyświetlony oraz jego rozmiar. Zmienne gl_Position i gl_PointSize są predefiniowane. Poniżej jest definicja szejdera fragmentów, który za pomocą zmiennej predefiniowanej gl_FragColor nadaje fragmentowi barwę.
var FSHADER_SOURCE =
'void main() {\n' +
' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' +
'}\n';
Wartość koloru jest typu vec4 składających się z czterech wartości RGBA
Czerwony punkt będzie wyświetlany po nadaniu wartości (1.0, 0.0, 0.0, 1.0) zmiennej.
To zaledwie niewielki skrawek możliwości szejderów, które nadają się do programowania wielu zaawansowanych zadań grafiki komputerowej.
Przygotowując artykuł korzystano z książki Kouichi Matsuda i Rodger Lea "WebGL programming guide".