WebGL - Prise en main

Cela fait quelques années que je connais WebGL. J'avais testé cette technologie succintement via des démos techniques au début des années 2010 mais je n'avais jamais approfondi le sujet.

WebGL permet de faire du rendu graphique 2D/3D accéléré par le GPU directement dans le navigateur, via JavaScript. Il expose une API assez bas niveau, proche d’OpenGL ES, avec buffers, textures, matrices et shaders GLSL. En pratique, c’est la brique graphique sur laquelle reposent des bibliothèques plus haut niveau comme Three.js ou Babylon.js.

La specification initiale de WebGL a été publiée en 2011 par le Khronos Group. OpenGL ES a été choisi pour son large support au sein des architectures embarquées et mobiles.

J'ai donc réalisé un petit projet démo en WebGL pour expérimenter la mise en place d'un tel projet, mais aussi pour voir quelles étaient les contraintes liées au navigateur web.

J'en ai profité pour tester des bibliothèques plus évoluées comme Three.js et j'ai ajouté un lecteur de modules musicaux. L'expérience était intéresante mais certaines limitations liées au navigateur m'ont ennuyé: par exemple impossible de démarrer automatiquement la musique et l'animation sans l'accord de l'utilisateur obtenu via une interaction (clic souris).

De plus, la prise en charge des versions OpenGL semble assez limitée et pas de prévisionnel sur ce point.

Je n'ai donc pas poussé plus loin mes essais: concluant mais sans intérêt majeur en l'état.

La démo est visitable en ligne à cet endroit

Le sources sur GitHub demo-webgl

Note: si vous essayez mon projet et que les ressources (musique, objet 3d ont du mal à charger) il peut être nécessaire d'adapter la fonction getFile(name) dans tools.js pour qu'il n'y ait pas de problèmes de Cross-Site reference.