WebGL (Web Graphics Library) je JavaScript API za prikazivanje interaktivne 3D i 2D grafike u web preglednicima bez korištenja dodataka temeljen na OpenGL ES 2.0. WebGL elementi mogu biti pomiješani s drugim HTML elementima te drugim dijelovima stranice ili pozadinom. WebGL programi se sastoje od kontrolnog koda napisanog u JavaScriptu i koda za sjenčanje (engl. shader) koji se izvršava na grafičkoj jedinici računala (GPU, Graphics Processing Unit). WebGL koristi HTML5 Canvas element i pristupa mu koristeći DOM sučelje. WebGL je podržan u Chrome-u (verzija 8+), Firefox-u (verzija 4+), Safari-ju(verzija 5.1+) i Operi (verzija 12+).

  WebGL (Web Graphics Library) je JavaScript API za prikazivanje interaktivne 3D i 2D grafike u web preglednicima bez korištenja dodataka temeljen na OpenGL ES 2.0. [10]. WebGL elementi mogu biti pomiješani s drugim HTML elementima te drugim dijelovima stranice ili pozadinom. WebGL programi se sastoje od kontrolnog koda napisanog u JavaScriptu i koda za sjenčanje (engl. shader) koji se izvršava na grafičkoj jedinici računala (GPU, Graphics Processing Unit). WebGL koristi HTML5 Canvas element i pristupa mu koristeći DOM sučelje. WebGL je podržan u Chrome-u (verzija 8+), Firefox-u (verzija 4+), Safari-ju(verzija 5.1+) i Operi (verzija 12+).

  U WebGL-u osnovni element od kojeg se rade objekti je trokut, stoga proces crtanja modela u WebGL-u zahtijeva korištenje JavaScript-a za sakupljanje informacija gdje i kako će objekti biti nacrtani.
 Za početak crtanja s WebGL-om potrebno je postaviti WebGL kontekst.
 Nakon što je WebGL kontekst uspješno postavljen, potrebno je postaviti i programe za sjenčanje. Programi za sjenčanje govore WebGL-u gdje i što treba nacrtati. Program za sjenčanje vrhova (eng. vertex shader) poziva se za svaki vrh. Pozicija vrha se množi s matricom transformacije pogleda i projekcijskom matricom, te se dobivaju koordinate vrha u sceni prikaza. Fragment je svaki slikovni element u poligonu. Program za sjenčanje fragmenata određuje boju za svaki slikovni element.

 Za kreiranje objekata potrebni su nam spremnici u kojima će se nalaziti koordinate vrhova i spremnici za boje.
 Dodavanje tekstura zapravo je poseban način postavljanja "boje točke" 3D objekta. Stoga, ukoliko se žele koristiti teksture potrebno je učitati željenu sliku i poslati je programu za sjenčanje fragmenata. Također šalje mu se i podatak koji dio slike iskoristiti za trenutni fragment.

 Nakon što su postavljeni programi za sjenčanje i objekt je konstruiran može se nacrtati scena. Najprije se očisti kontekst u boju pozadine, a zatim odredi perspektiva kamere. Postavi se vidno polje od α° s omjerom širine i visine gl.viewportWidth / gl.viewportHeight (dimenzije canvasa) i odredi da se želi nacrtati predmeti između brmin i brmax jedinica. Nakon toga postavi se pozicija objekta tako da se učita matrica identiteta nad kojom se dalje vrše transformacije po potrebi. Nakon toga se povežu podaci iz spremnika vrhova i boje, te se oni povežu na kontekst i crta se objekt.

  Animiranje scene postiže se primjenom lokalnih transformacija kroz vremenski period. Na primjer, ukoliko se želi pomaknuti objekt, recimo trokut, na njega će se primijeniti odgovarajuća lokalna transformacija koja će odrediti njegov položaj, orijentaciju i veličinu. Tu transformaciju vežemo na objekt svaki puta kada se poziva funkcija koja iscrtava objekt. Kako animacija ne bi bila prespora ili prebrza, te kako bi bila neovisna o ciklusu prikazivanja koristi se funkcija requestAnimFrame i Javascript varijable koje kontroliraju animaciju.

  Prednost korištenja ove funkcije je da se funkciju koju želimo redovito pozivati, tj. ona koja prikazuje sadržaj, poziva samo u slučaju kada je prozor preglednika fokusiran. Time štedi CPU, GPU i memorijske resurse. Također, funkcija za prikazivanje se poziva onoliko brzo koliko to sklopovlje dozvoljava. Pomoću Javascript varijabli kontrolira se animacija i dobiva neovisnost između toga koliko brzo računalo može prikazivati animaciju i onoga koliko brzo se želi da animacija bude prikazivana.

  S obzirom da Javascript nije višedretveni jezik postoji više različitih strategija kako kontrolirati animaciju i upravljati blokiranjem događaja.

Animacijska strategija



  Ovaj način enkapsulira vrijeme koje je prošlo od početka animacije kao varijablu koja kontrolira animaciju. Garantira se da je vrijeme animacije neovisno o tome koliko je puta poziv funkcije zapravo pozvan, a trenutni okvir animacije ovisi o tome koliko je vremena prošlo od početka izvođenja. Nedostatak ove metode je što može doći do izgubljenih okvira (engl. dropped frames). Izgubljeni okvir označava da je objekt trenutno prebačen u novu poziciju na kojoj bi se trebao nalaziti s obzirom na vrijeme koje je prošlo, a međupozicije su zanemarene, pa stoga objekt može skakati po ekranu s jedne pozicije na drugu. Ponekad je ovo ponašanje poželjno, ali na primjer u igrama u kojima trebamo gađati neku pokretnu metu neće se dobiti željeno ponašanje, stoga ova metoda nije dobra u slučajevima kada je, na primjer, potrebno koristiti detekciju sudara.

Simulacijska strategija



 Ovim načinom osigurava se neprekinutost prikaza. To je bitno kod detekcije sudara, simulacija vezanih uz fizikalne procese ili igara koje se temelje na umjetnoj inteligenciji. Svakim novim pozivom funkcije osvježava se pozicija objekta. Nuspojava ovog načina je da može doći do smrznutih okvira (engl. frozen frames) ako je lista blokiranih događaja dugačka pa se nova pozicija objekta ne izračuna na vrijeme.