Il y a maintenant quelques semaines, j'ai soumis ici un codes sources de moteur 3D sans webGL, à qui manquait de nombreuses fonctionnalités, était peu performant, et dont la méthode de texturing etait approximative est difficile à prendre en main.
Donc comme promis, voici un aperçu de la 3D AVEC webGL. Pour comprendre ce code sources, vous devrez deja avoir quelques acquis sur le fonctionnement des moteurs 3D, et bien maitriser les expressions vectorielles et matricielles. Cette technologie etant récentes, elle n'est malheureusement pas cross brother (Firefox à partir de 5.0 pour toutes les fonctionnalités, Chrome à partir de la version 9.0). Cette source fonctionne bien entendu toujours mieux sous chrome. Vous aurez également besoin d'un serveur local HTTP, comme un Wamp ou un easy PHP car l'accès aux ressources comme les textures sont sont pas autorisées localement.
Vous trouverez dans cette sources :
- un fichier index.htm : Il regroupe les appels à l'objet WebGL que j'ai crée pour cette démonstration et lance l’aperçu
- un fichier webgl.js : contient les objets utilisé par la classe webGL (Telle quel la classe de gestion du FPS, ou le gestionnaires de vecteur/matrice minifié => pour ceux qui se le demande, c'est un juste milieu entre sylvesterJS et glMatrix 0.9.5).
- un dossier contant les textures.
Ce code source n'est pas très commenté car tout expliqué serai très long en un seul bloc, mais pour ceux qui veulent apprendre pas à pas, ce que je conseille fort, voici un tutorials très bien fait qui vulgarise assez bien les mécaniques de WebGL : http://learningwebgl.com/blog/?page_id=1217
Je me suis bien aidé de ce dernier pour comprendre plus en profondeur comment fonctionne webGL.
Pour ces question de performances, les fonctionnalités de "specular" (brillance des textures) et de render-to-texture (rendu sur une texture) ne sont pas implémentées. J'ai également la peine de limiter à 16 le nombreux de sources lumineuses ponctuelle sur une texture afin d'eviter des débordement de memoire, et du clipping à l'affichage.
Cette source à pour unique but de faire la démonstration de webGL, mais n'est pas une références. WebGL est encore une technologie récente qui est vouée à évoluer, et donc il n'est pas diffusé de manuel officiel, il est possible que certaines notions soit erronées faut de compréhension.
Pour déplacer le point de vue, voici les commandes (azerty) :
R : avancer
F : reculer
D : pas à gauche
G : pas à droite
Q : aller vers le bas
E : aller vers le haut
Pour changer l'angle du point de vue :
Maintenez le clic souris enfoncée et déplacez le souris pour une rotation relative sur l'axe Y et Z.