12 juin 2011

WebGL avec Three.js

Développement No Comments

Avec l’arrivée de WebGL dans les derniers navigateurs, il était temps de faire quelques essais. N’ayant aucune connaissance en programmation 3D, je me suis aidé de Three.js, une librairie permettent de proposer un API « simple ». La documentation est inexistante, mais les exemples fournis sont nombreux et permettent rapidement d’obtenir quelques résultats, à condition d’avoir de bonnes connaissances en JavaScript et de savoir se débrouiller !

Pour commencer, il me fallait quelque chose de simple, jouant à Minecraft depuis quelques mois, je me suis dit, qu’utiliser des cubes serait un bon moyen de tester les possibilités, sans entrer dans des formes complexes. De ce constat est né l’idée de Minecraft Blueprint, un service qui permettrait de créer des formes en ligne, composées des matériaux disponibles dans Minecraft, et proposant aux visiteurs de pouvoir recréer ces plans avec facilité.

Je n’avais pas prévu au départ d’ouvrir le site publiquement avant d’avoir un éditeur complet et stable, mais la version de développement ayant été relayé sur LearningWebGL, il en a été autrement !

Finalement, j’ai réussi rapidement à avoir quelques rendus sympathiques, mais mes connaissances restent trop limitées pour arriver à optimiser mon code pour les différentes versions de Firefox et de Chrome.
Aujourd’hui les dernières versions de ces deux navigateurs proposent WebGL activé par défaut, et sont plutôt bien introduites. De plus Three.JS proposent aussi un moteur de rendu en Canvas et en SVG, bien que les performances en sont bien moindres.

Malgré cela, je pense qu’il y a de bonnes applications pour les jeux par navigateur, et pour des applications en ligne. On peux tout à fait imaginer des plateaux de jeux en 3D, des cartes, des interfaces, des pages d’accueil…

Il me reste encore quelques ajustements à faire pour sortir l’éditeur publiquement, mais le travail est en bonne voie ! Actuellement j’ai réussi à implémenter une grande majorité des blocs du jeu, et je dois m’attaquer aux objets avec une orientation, ainsi qu’à plusieurs travaux d’optimisations, surtout sur des constructions de plus de 2000 blocs.

No Responses to “WebGL avec Three.js”

Leave a Reply