WebGL je standard za rad u web browser-u i kao takav, rad sa njime zavisi od konkretnog browser-a, odnosno od toga da li ga izabrani browser podr?ava. Zato je potrebno, pre po?etka rada, proveriti da li izabrani browser koji ?e se koristiti u radu podr?ava WebGL.
Ve?ina proizvo?a?a web browser-a, kao ?to je navedeno na sajtu Khronos grupe u?estvuje u formiranju WebGL specifikacije tako da poslednje verzije najpopularnijih browser-a podr?avaju rad sa WebGL-om.
Tako?e, potrebno je i da browser podr?ava HTML5 Canvas elemenat.
Canvas je html elemenat koji je namenjen za dinami?ka iscrtavanja na html5 stranicama. O
n sam po sebi predstavlja obi?an container objekat (kao div), ali pozivom funkcije getContext(api-context-name)
obezbe?uje objekat context kroz koji se dobija pristup interfejsu nekog API-ja koji se onda koristi za iscrtavanje po canvas elementu. WebGL je upravo jedan od ovih interfejsa.
Na osnovu prethodnog poglavlja, prvo se na stranicu dodaje canvas elemenat.
Google Chrome
Notepad++
<html>
<head>
<title>Canvas</title>
</head>
<body>
<canvas id="canvas_s1" width="500" height="500">
</canvas>
</body>
</html>
Jedini atributi koje canvas elemenat ima su width i height ?ije su inicijalne vrednosti 300px i 150px.
Ukoliko je potrebno promeniti dimenziju slike potrebno je promeniti i ove vrednosti.
Iako je generalno dobra praksa razdvajati sadr?aj od stilizovanja odnosno izbegavati takozvane in-line stilove, u radu sa WebGL postoji razlog da se ove dimenzije ne postave kroz css pravila. U nastavku ?e biti vi?e re?i o ovome.
Tako?e, jo? jedna dobra praksa je i misliti na korisnike koji eventualno koriste stariji browser bez podr?ke za html5 canvas.
Zbog toga se, obi?no, definicija canvas elementa dopunjuje nekom napomenom koja se ne?e prikazivati kad se izvr?i iscrtavanje na njemu.
<html>
<head>
<title>Working with canvas</title>
</head>
<body>
<canvas id="canvas_s1" width="500" height="500">
Izgleda da browser ne podr?ava HTML5 canvas elemenat.
</canvas>
</body>
</html>
Dalje se, uz pomo? JavaScript-a se, kao ?to smo je ranije napomenuto, defini?e context objekat koji ?e se koristiti.
Na stranici mo?e postojati vi?e canvas elemenata, ali svaki canvas mo?e imati samo jedan context.
<html>
<head>
<title>Working with canvas</title>
</head>
<body>
<canvas id="canvas_s1" width="500" height="500">
Izgleda da browser ne podr?ava HTML5 <canvas> elemenat.
</canvas>
<script>
var canvas = document.getElementById('canvas_s1');
var context = canvas.getContext('webgl');
</script>
</body>
</html>
I ovde je potrebno obezbediti re?enje za situacije kad je tra?eni context nedostupan ?to ovde zna?i bez podr?ke za WebGL.
<html>
<head>
<title>Working with canvas</title>
</head>
<body>
<canvas id="canvas_s1" width="500" height="500">
Izgleda da browser ne podr?ava HTML5 <canvas> elemenat.
</canvas>
<script>
var canvas = document.getElementById('canvas_s1');
if (canvas.getContext)
{
var context = canvas.getContext('webgl');
// crtanje
} else
{
// akcija za fallback
}
</script>
</body>
</html>
Dalje se ova stranica dopunjuje odgovaraju?im kodom aplikacije.
<html>
<head>
<title>Template</title>
</head>
<body>
<canvas id="canvas_s1" width="500" height="500">
Izgleda da browser ne podr?ava HTML5 <code><canvas></code> elemenat.
</canvas>
<script>
var canvas;
var gl;
start();
//VERTEX SHADER
//FRAGMENT SHADER
//GET & COMPILE SHADERS
//CREATE BUFFERS
//DRAW
function start() {
var canvas = document.getElementById("canvas_s1");
initWebGL(canvas);
}
function initWebGL(canvas) {
gl = null;
try {
gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
}
catch (e) { }
if (!gl) {
alert("WebGL nije podr?an.");
}
}
</script>
</body>
</html>
Napomena: O?ekuj praznu stranicu
Svi budu?i primeri u ovom vodi?u ?e imati strukturu fajla kao ?to je navedeno na listingu iznad, a svaki od delova prikazanih komentarom ?e u nastavku biti detaljno obja?njeni.
canvas.getContext(’experimental-webgl’).
To je bio privremeni naziv koji se ranije koristio.