GLSL + OpenGL shader tutorial

Krenimo jednostavno:

perpixel difuzno sjencanje, bez spekularne komponente. Ovo ce vec biti znatni napredak u odnosu na fixni pipeline, pogotovu kad svjetlo postavite blizu poligona bez puno faceova.

Potrebno je znati da jednom kad krenete u programabilni pipeline, ne mozete vise iskoristiti nista iz fixnog. Primjerice, ako dodamo perpixel fragment shader, to znaci da ako zelite teksture, morate sami dodati tu funkcionalnost. Stalno spominjem fragment shader, sta je to? Postoje dvije vrste programabilnih unita na vasem video adapteru, to su vertex shader i fragment shader.

Program u vertex shaderu se izvrsava za svaki vertex koji prolazi kroz pipeline - njegov posao je da transformira vertex u poziciju na ekranu i prenese u fragment shader informacije koje ondje nisu dostupne.

Program u fragment shaderu se izvrsava za svaki fragment, odnosno podatkovnu jedinicu iz koje se generira boja pixela. Fragment ultimativno zavrsava postavljanjem boje na vidljivi pixel. Da ne bi pomijesali dva termina skupa - pixel je iskljucivo jedinica na ekranu definirana bojom, dok fragment sadrzi dodatne informacije kao sto su alpha, stencil, dubina i slicno.

Dakle, nas vertex shader nema tezak posao: transformirati vertex.

Fragment shader ce imati nesto vise posla, odnosno iskalkulirati Lambertovu jednadzbu difuznog osvijetljenja:

Id = Kd * dot(L, N) * Ld

gdje je

I  = 4D vektor, RGBA osvijetljenost pixela

Kd = 4D vektor, RGBA difuzna refleksija materijala

L  = 3D vektor, jedinicni direkcijski vektor svijetla

N  = 3D vektor, normala

Ld = 4D vektor, difuzna jakost svijetla

Ako vec niste, sad je vrijeme da sredite vasu OpenGL sandbox scenu. Treba nam jedno tockasto svijetlo i jedan objekt - predlazem sferu ili omnipopular teapot, koji ce najbolje prikazati razliku.

...

...

...

Vec smo gotovi? OK.

Svaki shader sadrzi jednu jedinu main funkciju:

void main() {}

Kao sto smo vec napomenuli, najmanji posao koji vertex shader mora odraditi jest odrediti poziciju vertexa na ekranu. To zvuci kompliciranije nego sto jest - matematicki, potrebno je pomnoziti 3D vektor koji predstavlja translaciju vertexa sa projekcijskom matricom i model matricom. Translatirana pozicija vertexa sprema se u predefiniranu varijablu (uniform) gl_Position.

U GLSL-u postoji funkcija nazvana ftransform(), koja taj posao odradjuje za nas. Ta funkcija je bijesno optimizirana u hardwareu, i ne postoji niti jedan razlog zbog kojeg bi rucno isli mnoziti vertex i matricu, sto znaci da se translacija vertexa svodi na jednu liniju koda:

gl_Position = ftransform();

Komplicirano, ha?

Sad je na redu fragment shader.

Pocnimo jednostavno - boja fragmenta bit ce cista ambijentna:

Ia = La * Ka

gdje je

Ia = 4D vektor, ambijentni intezitet svijetla na fragmentu

La = 4D vektor, ambijentna jakost svijetla

Ka = 4D vektor, ambijentni faktor refleksije materijala

Nakon dodavanja obaveznog

void main() {}

unutra dopisujemo:

vec4 globalAmbient = gl_FrontMaterial.ambient * gl_LightModel.ambient;

vec4 lightAmbient  = gl_FrontMaterial.ambient * gl_LightSource[0].ambient;

gl_FragColor = globalAmbient + lightAmbient;

Citatelji koji citaju ovaj kod primjetit ce da je shader hardkodiran da uzme u obzir samo jedno svijetlo u sceni (prvo). To je namjerno, da vam da posla. Nije tako tesko prepraviti kod da radi sa svim svijetlima u sceni, i to vam ostavljam za vjezbu.

Pisanje na predefinirani uniform gl_FragColor je jedini posao fragment shadera - boja koja se ovdje nalazi predstavljat ce boju pixela na ekranu. Ako vam nije jasno, cisto za test, mozete promjeniti liniju u:

gl_FragColor = vec4(1.0, 0.0, 0.0, 0.0);  // Vektor je RGBA jakost svijetla

Kratki FAQ ako vam je ekran crn:

da li je refleksija ambijentnog svijetla na materijalu 0? Ako je to znaci da materijal upija svo ambijentno svijetlo; povisite vrijednost svih komponenti na recimo 0.5, u ne-shader dijelu aplikacije gdje definirate svoje primitive i konfigurirate materijal za iste.

da li je ambijentna jakost svijetlosnog izvora 0? Povisite je.

OK, sad kad to radi (radi li?), vrijeme je da dodamo difuzno svijetlo. Za kalkulaciju potrebno nam je nekoliko stvari iz vertex shadera u fragment shaderu - predat cemo te vrijednosti putem varying varijabli.

Potrebna nam je normala i jedinicni direkcijski vektor svijetla.

Nulto, potrebno je definirati varying varijable koje ce se prenijeti u fragment shader. To znaci da prije main() funkcije pisemo deklaracije:

varying vec3 normal;

varying vec3 lightDirection;

Prvo, treba transformirati vertex u projekcijski prostor:

vec3 transformedVertex = vec3(gl_ModelViewMatrix * gl_Vertex);

onda, iskalkulirati direkcijski vektor

lightDirection = normalize(vec3(gl_LightSource[0].position.xyz) - transformedVertex);

onda treba postaviti normalu:

normal = gl_NormalMatrix * gl_Normal;

i na kraju, obavezno postaviti transformirati vertex u gl_Position

gl_Position = ftransform();

A sad 'komplicirani' fragment shader.

Prije svega, treba definirati varying varijable koje stizu iz vertex shadera:

varying vec3 normal;

varying vec3 lightDirection;

obavezno ih normalizirati (to znaci da ih se pretvara u jedinicne vektore), jer prilikom dolaska u fragment shader, normale se interpoliraju.

vec3 N = normalize(normal);

vec3 L = normalize(lightDirection);

Sada imamo na raspolaganju sve informacije za iskalkulirati Lambertovu difuznu jednadzbu. Dakle, difuzna jakost svijetla je:

vec4 diffuse = gl_FrontMaterial.diffuse * dot(N, L) * gl_LightSource[0].diffuse;

Uz maloprijasnji kod koji se bavio ambijentnim svijetlom, zbroj to dvoje je jakost osvijetljenja na trenutnom fragmentu:

gl_FragColor = globalAmbient + lightAmbient + diffuse;

Eto, to je to!

Slike za usporedbu:

Sfera osvijetljena bez shadera

Ista sfera osvijetljena sa difuznim perpixel shaderom

Dobrodosli u lekciju #2 GLSL tutoriala.
Mozete sjesti.
Danas cemo obraditi Phong spekularno sjencanje. Spajanje tehnike sa prethodnim tutorialom o lambertovom difuznom sjencanju - Brgicu, ne pricaj nego prati, dobit ces keca - dobijamo mogucnost imati sjajne materijale sa realno prikazanim odsjajem.

Zasto? Zato jer mozemo. :-P

Dakle, pocnimo od Phongove jednazdbe spekularne svijetlosti povrsine:
Is = Ks * pow(dot(R, E), a) * Ls)
gdje je
Is = intenzitet spekularnog osvijetljenja na povrsini
Ks = spekularni refleksijski faktor materijala
R  = direkcijski jedinicni vektor zrake koja se odbija od povrsine tocno po normali
E  = direkcijski jedinicni vektor od povrsine prema kameri
Ls = spekularni intenzitet svijetla
a  = faktor sjajnosti materijala (shininess)


Pa krenimo.
Za pocetak, potrebno je znati kako se definira R:
R = 2 * dot(L, N) *  N - L

gdje je
N = normalizirana normala povrsine, definiran u proslom tutorialu
L = direkcijski jedinicni vektor od povrsine prema svijetlu, definiran u proslom tutorialu

Od podataka za razrijesenje jednadzbe, nedostaje nam direkcijski jedinicni vektor od povrsine prema kameri. S obzirom da poziciju kamere ne mozemo dobiti u shaderu, potrebno je predati poziciju kroz uniform varijablu, i jednu varying varijablu koja ce prenijeti iskalkuliranu direkciju u fragment shader. Obecao sam da necu pisati OpenGL kod za definiciju uniforma, tako da nudim samo deklaraciju u vertex shaderu.
Modifikacija prva:
uniform vec3 cameraPos;
varying vec3 cameraDir;

Kalkulacija direkcijskog vektora je jednostavna, transformirani vertex vec imamo u proslom primjeru ali napisat cu ovdje radi cistoce koda.
Modifikacija druga:
vec3 transformedVertex = vec3(gl_ModelViewMatrix * gl_Vertex);
cameraDir = normalize(cameraPos - transformedVertex);


Unutar fragment shadera imamo sve podatke, no potrebno je deklarirati novi varying:
varying vec3 cameraDir;

pa se onda upustiti u rijesavanje Phongove jednadzbe:
vec3 specular = 0.0F;
if(shininess != 0.0) {
    vec3 R = normalize(2 * dot(L, N) *  N - L);
    vec3 E = normalize(cameraDir);
    float s = max(dot(R, E), 0.0); // Cisto za dodatak - nedostatak ovog max-a me gnjavio dobra tri dana
    specular = gl_FrontMaterial.specular * pow(s, gl_FrontMaterial.shininess) * gl_LightSource[0].specular;
}


Boja fragmenta se odredjuje jednostavnim zbrajanjem, pa zadnja linija iz proslog tutoriala postaje:
gl_FragColor = globalAmbient + lightAmbient + diffuse + specular;

Uvjet na shininess postoji da sprijecimo skupocjene kalkulacije ukoliko je sjajnost materijala 0 - to znaci da se aplicira iskljucivo difuzno svijetlo.


Eto, kraj.

Bilo je lakse ovaj put, nadam se. Slike za primjer i stay tuned za normal mapping sutradan ;-):

Lowpoly sfera iz proslog primjera sa perpixel difuznim sjencanjem

Spekularni odsjaj u igri, ista pozicija kamere, svijetla i sfere

Pozicija kamere je promjenjena - gleda na model odozgo

Pozicija kamere je promjenjena - gleda na mode odostraga

Ovo je predobro.

Svaka čast na trudu.

No, imam jedno pitanje.

Vidim ti si ovdje pisao GLSL turorijal (nisam citao sve) - dakle to je OpenGL jezik za shader (Graphics Libray Shading Language) jel tako?

Koliko se to razlikuje od DX-ovog HLSL?

OpenGL ES + GLSL = ?