Canvas 3D (WebGL) plus facile avec Three.js Nous avons tous déjà vu des sites de grandes marques nous en mettant plein la vue avec des animations 3D interactives, ou des démonstrations technologiques qui font rêver. On pense ici à quelques berlines allemandes parfaitement modélisées qu’il est possible d’inspecter sous tous ses angles avec un simple mouvement de la souris... Bien souvent développées en Flash avec la librairie Papervision3D ces animations en jettent un max, mais restent dépendantes du plug-in d'Adobe qui est de moins en moins populaire et "incompatible" tablette et smartphone. Aujourd’hui la tendance est au HTML5 et CSS3, parsemé d’un peu de JavaScript. Ô chance, le W3C et ses contributeurs ont justement prévu de passer par Canvas (qui permet déjà de dessiner dans une page web en 2D) pour exploiter une scène 3D avec les standards du web. Comment et pour qui ? Pour ceux qui ne le savent pas, il existe deux composants HTML5 pour dessiner : La librairie Three.js <! Démonstration “Tout ça pour ça” me direz-vous ? Et voilà !
WebGL Un article de Wikipédia, l'encyclopédie libre. Fonctionnement[modifier | modifier le code] WebGL permet d'afficher, de créer et de gérer dynamiquement des éléments graphiques complexes en 3D dans la fenêtre du navigateur web d'un client. Il est actuellement implémenté dans la plupart des grands navigateurs modernes, mais cette implémentation est récente, d'où le fait que cette technologie reste assez méconnue du grand public. Lorsqu’un élément graphique de type WebGL est inclus dans une page web, le navigateur exécute un programme en JavaScript utilisant l'interface WebGL. Implémentations[modifier | modifier le code] Si, en septembre 2009, aucun navigateur web ne permettait l'affichage 3D directement dans le navigateur sans greffon, ça n'est plus le cas aujourd'hui[3]: Limitations[modifier | modifier le code] WebGL est basé sur OpenGL ES 2.0 (OpenGL for Embedded Systems), une version d'OpenGL destinée aux systèmes embarqués. Problèmes de jeunesse[modifier | modifier le code]