Wat is WebGL?

WebGL is een nieuwe, open standaard voor het weergeven van 3D graphics op het web. Dus geprogrammeerde 3D beelden en animaties gewoon in je webbrowser, zonder dat daar (zoals vroeger) een extra plugin voor nodig is!

Op dit moment zijn er naar mijn weten twee webbrowsers die WebGL ondersteunen:

• Firefox 4
• Google Chrome

Ook Safari zou WebGL ondersteunen in de nightly builds (experimenteel). Internet Explorer 9 ontbreekt echter en met de Microsoft browser kan je op dit moment dus geen WebGL content bekijken. Microsoft heeft ook nog niet de intentie uitgesproken om WebGL in de nabije toekomst te gaan ondersteunen.

De WebGL standaard is uitgedacht door de Khronos group en op hun website vindt je dan ook alle low-level details met betrekking tot de specificaties. WebGL is een afgeleide van OpenGL ES. OpenGL bestaat al ruim 17 jaar als standaard 3D API. ES staat voor Embeded Systems. OpenGL ES is een subset van de complete OpenGL standaard, bedoeld voor embedded systemen. Het is naar mijn mening te verwachten dat ook je telefoon en tablet heel binnenkort WebGL content kunnen tonen.

WebGL is opgezet als een API die je vanuit Javascript kan aanspreken. Aangezien OpenGL vrij low-level (Je moet je bijvoorbeeld bezig houden met shaders en C code) is en niet geschikt voor de eerste de beste web-programmeur, is het te verwachten dat er binnen afzienbare tijd vele high-level frameworks beschikbaar komen, waarmee ook web-programmeurs uit de voeten kunnen. Deze frameworks bouwen een abstractielaag bovenop WebGL, waardoor je je als web-programmeur alleen maar hoeft bezig te houden met je 3D objecten, kleuren en posities. Wel zo makkelijk dus. Het framework zorgt ervoor dat via WebGL het 3D plaatje verschijnt. Er zijn inmiddels tientallen frameworks, maar de meest veelbelovende zijn :

PhiloGL: http://senchalabs.github.com/philogl/ 
GLGE: http://www.glge.org/
Three.js: http://mrdoob.com/blog/post/693
C3DL: http://www.c3dl.org/ – Vrij traag, maar het project is al wel 2 jaar actief

Met Three.JS is ook de Google Search Globe gemaakt die ik in deze post besproken heb.

Van Google is het O3D framework, dit is een WebGL port van de oorspronkelijke O3D plugin. Nu dus ook te gebruiken als framework bovenop WebGL. Als je hier al bekend mee bent, kan je je bestaande applicaties vlot naar WebGL porten en/of nieuwe applicaties mee bouwen.

Als laatse sluit ik af met de WebGL eyecandy, dus hierbij een lijst van wat WebGL demos. De meeste zijn gemaakt met een van de genoemde WebGL frameworks. Zoals hierboven verteld zijn deze dus alleen te bekijken met Firefox 4 en/of Google Chrome. Klik op de screenshots om het betreffende voorbeeld te bekijken:

En uiteraard mogen de eerste WebGL spelletjes (De ene beter uitgewerkt dan de andere) hier niet ontbreken. Het maken van geluid is geen onderdeel van de WebGL standaard. Gelukkig kan dit wel via Flash, maar uiteraard ook via HTML5. Het is niet gek om te denken dat de combinatie HTML5/Canvas/WebGL uiteindelijk dodelijk blijkt te zijn voor Flash.