Program komercyjnej gry to w połowie sterowanie kartą graficzną. Takie programowanie zaczyna być dostępne hobbystom. Można już kartą graficzną sterować z internetu.
Język kodowania stron internetowych HTML5 w stosunku do wcześniejszych umożliwia sterowanie pakietem grafiki 3D, który jest adaptacją znanego od lat Open GL 2.0 ES. Ta wersja wymaga używania języka JavaScript zamiast C++. Pozwala to zawrzeć grę czy inny program graficzny w kodzie strony internetowej. JavaScript jest interpretowany przez procesor centralny, a dla sterowania procesorami graficznymi tej karty konieczne jest użycie innego języka zwanego Open GL Shader Language(w skrócie: GLSL).
GLSL jest bardzo podobny do języka C.
Deklarując zmienne musimy pamiętać o wielu dostępnych typach danych. Najprostsze to int i float, które deklarujemy poprzedzajac wprowadzony identyfikator zmiennej jednym z tych słów i kończąc obowiązkowym średnikiem. Można też przypisać zmiennej jej wartość początkową pamiętając, że zmienna typu zmiennoprzecinkowego musi zawierać kropkę lub określenie wykładnika.
int x=461;
float y=12,87;
float z=31e+15;
Wektory zmiennych całkowitych deklarujemy używając ivec2,ivec3,ivec4, a zmiennoprzecinkowych: vec2,vec3,vec4 odpowiednio dla wektorów 2,3 i 4 elementowych.
vec2 punkt=vec2(12.9,-98.24);
ve3 punkt3d=vec3(punkt,43.8);
Wektory o tym samym wymiarze można dodawać i odejmować.. Można do nich również dodawać lub odejmować tę samą wartość do wszystkich komponentów wektora.
Mnożenie wektorów daje iloczyn skalarny. Można też użyć funkcji dot w tym samym celu. Funkcja length liczy długość wektora.
Dostęp do składowych wektora można uzyskać z użyciem aliasów; x,y,z lub r,g,b,a.
vec2 v=vec2(2.4,8.3);
float x = v.x;
float y = v.y;
lub jako elementów tablic:
float x = v[0];
float y = v[1];
Mieszanie umożliwia wyciąganie z dłuższego wektora wybranych składowych:
vec3 v3d=vec3(1.0,2.0,3.0);
vec2 v2d=v3d.xz;
Macierze posiadają również swoje typy danych: mat2,mat3,mat4 dla odpowiednich macierzy kwadratowych.
Na macierzach można wykonywać operacje dodawania, odejmowania i mnożenia. Można również mnożyć macierz przez wektor o tych samych wymiarach.
W kodzie strony deklarujemy dwa shadery: wierzchołków i fragmentów(zwany również pikselami).
Każdy z nich ma podobną strukturę:
deklaracje
void main(void){
obliczenia
zmienna_wynikowa = zwracana wartość;
}
Podstawowy shader wierzchołków wygląda następująco:
attribute vec3 avertex;
void main9void) {
gl_Position = vec4(aVertx,1.0);
}
a shader fragmentów:
void main(void) {
gl_FragColor vec4(1.0,0.0,0.0,1.0);
}
ustawia nieprzezroczysty czerwony.
Aby shadery umieścić na stronie umieszczamy je w podobnych jak przy JavaScript ogranicznikach:
<script id="fragment" type="x-shader/x-fragment">
....
</script>
Gdy mamy do czynienia z płaszczyznami jednolitego koloru używamy zmiennych jednolitych poprzedzając ich deklaracje słówkiem "uniform", a gdy kolory zmieniają się gradientowo zależnie od położenia używamy zmiennych różnorodnych poprzedzając je słowem "varying".
Zanim shadery zaczną działać musimy je skompilować i zlinkować używając odpowiednich funkcji zdefiniowanych w JavaScript.
W języku GLSL programujemy zazwyczaj tylko rzutowanie trójwymiarowych obiektów na płaski ekran reprezentowany w pamięci karty graficznej.