WebGL je standard za grafički API koji se korisiti za kreiranje interaktivnih 3D i 2D aplikacija u web browseru kreiran od strane Khronos Group organizacije.
Kao što se vidi iz specifikacije WebGL-a, ona se oslanja na specifikaciju za OpenGL ES 2.0 (grafički API za embedded sisteme) koja opet predstavlja podskup specifikacije za OpenGL (grafički API za desktop računare ). Zbog ovoga, svako ko ima iskustva u radu sa OpenGL ili OpenGL ES API-jem može brzo početi razvoj i u WebGL-u.
U nastavku ovog vodiča će se pretpostaviti da čitalac nema zančajnog predznanja iz gore navedenih tehnologija.
Sadržaj za ovaj sajt je kreiran u avgustu 2013. Molim Vas da obratite pažnju na to koja specifikacija je u ovom trenutku validna.
Pre nego se započne programiranje u WebGL-u dve važne stvari treba napomenuti.
Prvo je da programer mora biti svestan da ne postoje funkcije za iscrtavanje gotovih objekata i njihovih transformacija,
što može biti očekivanje nekog ko ima najviše iskustva u radu sa višim jezicima (c#, Java,...).
Programer je u potpunosti odgovoran za obezbeđivanje odgovarajućeg modela koji generiše temena objekata,
funkcija za određivanje boja piksela kao i funkcija koje tranformišu objekat u prostoru kako bi se izvršilo konačno iscrtavanje.
Na primer, ako se pretpostavi da je zadatak da se kreira kocka rotirana u prostoru, u WebGL-u ne postoji ništa slično kao što je DrawCube() ili RotateObject(),
programer obezbeđuje temena kocke i funkciju koja će izvršiti njenu rotaciju.
Iako ovo može delovati kao ograničenje u suštini predstavlja poboljšanje u odnosu na prethodne API-je (koji su imali definisane neke od ovakvih funkcija) s obzirom da se na ovaj način obezbeđuje bolja kontrola iscrtavanja kao i bolja iskorišćenost mogućnosti modernih grafičkih kartica.
Druga stvar koju treba razumeti je da, iako se obično referencira kao API za kreiranje 3D animacija, WebGL je u svojoj suštini 2D API. To znači da se svi željeni objekti koje je potrebno predstaviti moraju, pre iscrtavanja, modelirati i projektovati na konačnu 2D ravan. Na osnovu prethodno rečenog, programer je opet odgovoran za izvršavanje te projekcije.
WebGL programi se sastoje od 2 vrste koda: prvi, pisan u JavaScript jeziku koji se izvršava u browser-u i u kom se kontroliše iscrtavanje i drugi koji se piše u shading jeziku koji se izvršava na GPU (Graphical Processing Unit).
Shading jezici su programski jezici kreirani i adaptirani za potrebe kompjuterske grafike. Postoje različiti shader jezici, a WebGL koristi GLSL, odnosno OpenGL shading jezik. GLSL ima više verzija, a na osnovu specifikacije (glava 4.3) se vidi da WebGL programi moraju biti pisani u skladu sa specifikacijom verzije 1.
Da bi WebGL mogao izvršiti iscrtavanje potrebno je obezbediti model objekta koji sadrži podatke o njegovim temenima i ostalim osobinama (boje, svetlo, transformacije i slično) kao i dva shader programa: vertex i fragment shader.
Okvir jednog izvršavanja programa u WebGL se može opisati sledećim koracima:
[JavaScript] Definiše se objekat (kocka, na primer) preko svojih temena i u određeni bafer se smeštaju podaci o temenima tog objekta.
[JavaScript] Definišu se osobine tog objekta kao što su boja ili transformacija koje se takođe smeštaju u odgovarajuće bafere
[JavaScript] Daje se instrukcija WebGL-u za iscrtavanje uz način na koji se ono vrši (koristeći tačke, linije ili trouglove)
[Shader] Za svako teme iz bafera se poziva vertex shader koji je programiran tako da prebacuje koordinate modela u "prave" koordinate na sceni i ekranu. U većini slučajeva je potrebno transformisati dati objekat na konačnoj sceni (objekat je pomeren u odnosu na ostale na sceni, objekat je rotiran i slično). Takođe, ovde se radi i projekcija 3D koordinata na 2D ravan (ekran).
[Shader] WebGL interpolacijom i zavisno od toga koji objekti se koriste za iscrtavanje (tačke, linije, trouglovi) određuje koje sve piksele je potrebno iscrtati (pored definisanih verteksa). Za svaki od njih se poziva Fragment shader program koji je programiran tako da dodeljuje odgovarajuće boje pikselima.
Naredni korak je postaviti dobro okruženje u kom se razvijaju aplikacije u WebGL-u.
Sledeća lekcijaKao ni OpenGL ES 2.0, WebGL takođe nema fixed-function API koji se koristio u OpenGL 1.0. WebGL koristi Programmable Pipeline. Ovo je u vezi sa gore navedenom napomenom da je programer odgovoran za kompletnu kontrolu iscrtavanja.
Trenutno, na sajtu, nije obrađena ova tema. Oni koji žele više da znaju neka pogledaju pojmove:
Fixed function pipeline, Programmable pipeline, Hardware Acceleration