WebGL: Wat het is en waarvoor het wordt gebruikt

WebGL is een open standaard voor het weergeven van graphics in een webdocument. In de oorspronkelijke opzet was het alleen bedoeld voor 2D-graphics (dus in het platte vlak), en moest je 3D-effecten zelf uitrekenen. In de huidige versie kun je ruimtelijke modellen direct door WebGL laten verwerken.

WebGL is afgeleid van OpenGL ES 2.0, een open standaard die gebruikt wordt door hardware fabrikanten. De syntax van de WebGL-taal lijkt heel veel op de taal van OpenGL. Programmeurs die met OpenGL overweg kunnen, zullen dan ook weinig moeite hebben met WebGL.

Hoewel WebGL breed wordt geaccepteerd als standaard, wordt de standaard niet beheerd door het World Wide Web-consortium (W3C), maar door de Khronos Group, een non-profit organisatie die er nog steeds verder aan ontwikkelt.

De kracht van WebGL is dat het de grafische kaart van je computer direct aanspreekt. Het rekenwerk wordt dus gedaan door de grafische chips in je computer, de CPU wordt daardoor minder belast en blijft beschikbaar voor andere taken.

De ondersteuning van WebGL is heel behoorlijk. Op het moment dat dit wordt geschreven, wordt WebGL volledig ondersteund door Internet Explorer (vanaf versie 11), Chrome (vanaf versie 18) en iOS Safari (vanaf versie 8).
Browsers voor mobiele apparaten die WebGL volledig ondersteunen zijn: Opera Mobile (vanaf versie 24), Blackberry Browser (vanaf versie 10), IE mobile browser (Vanaf versie 11) en UC browser voor Android (vanaf versie 9.9).

De browsers FireFox (vanaf versie 4), Safari (vanaf versie 5.1) en Opera (vanaf versie 12) ondersteunen WebGL gedeeltelijk. Dat is ook het geval bij browsers voor mobiele apparaten: Android Browser (vanaf versie 37), Chrome voor Android (vanaf versie 39) en FireFox (vanaf versie 33).

De ondersteuning voor WebGL verbetert nog steeds.

WebGL werkt in de browser via een API (= Application Programming Interface). Dat is software die in de browser zit ingebakken. Je programmeert die in de taal GLSL in combinatie met JavaScript.
Om op die manier te werken moet je de taal GLSL dus beheersen. Er zullen niet veel webprogrammeurs zijn die dat doen.

Om dit te omzeilen zijn er diverse JavaScript-interfaces geschreven, waarin je alles kunt programmeren in JavaScript. De bekendste hiervan is Three.js.
Op die site kun je alles lezen over Three.js. Er staan ook veel voorbeelden op, van eenvoudig tot heel ingewikkeld. Behalve dat is er ook een uitgebreide documentatieset waarin alle JavaScript-functions van three.js staan beschreven.
Met three.js of een vergelijkbare bibliotheek heb je dus niet meer te maken met WebGL zelf, dat wordt voor je geregeld.

WebGL zelf en bibliotheken als three.js maken gebruik van het HTML5 <canvas>-element om de grahics op het scherm te krijgen.

Als je wilt weten of je browser WebGL ondersteunt, breng je even een bezoek aan get.webgl.org. WebGL werkt in je browser als er een ronddraaiende kubus te zien is, anders niet.

Toepassingen van WebGL vind je in websites met "rijke" graphics, zoals:

 
terug

html-392; Laatste wijziging: 22 april 2020