3d avec webgl
Description
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.
Les opportunités que webGL ouvrent sont infinies, mais son avancée et brusque, instables et parfois dangereuse (faille trouvée par un hacker exploitant webGL pour recuperer des screen shot de navigateur ayant un moteur de rendu de type gecko via une simple injection JS...c'est fou non ?!?).
Je vous conseille donc de vous y intéresser car c'est passionnant, mais il est inutile dans l’immédiat de s'y jeter corps et âme tant qu'un vrai outil finalisé n'aura pas vu le jour.
Je suis ouvert à vos question, mais jetez un oeil au tutorial avant, tout les point exploité dans cette sources sont expliqués sur ce tutorial ^^.
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.
Source / Exemple :
Tout est dans le zip
Conclusion :
Les opportunités que webGL ouvrent sont infinies, mais son avancée et brusque, instables et parfois dangereuse (faille trouvée par un hacker exploitant webGL pour recuperer des screen shot de navigateur ayant un moteur de rendu de type gecko via une simple injection JS...c'est fou non ?!?).
Je vous conseille donc de vous y intéresser car c'est passionnant, mais il est inutile dans l’immédiat de s'y jeter corps et âme tant qu'un vrai outil finalisé n'aura pas vu le jour.
Je suis ouvert à vos question, mais jetez un oeil au tutorial avant, tout les point exploité dans cette sources sont expliqués sur ce tutorial ^^.
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.