3d avec webgl

Soyez le premier à donner votre avis sur cette source.

Vue 5 895 fois - Téléchargée 455 fois

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.

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 ^^.

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Hakumbaya
Messages postés
41
Date d'inscription
dimanche 10 octobre 2004
Statut
Membre
Dernière intervention
17 décembre 2010

Pour ce qui est des applications, sur la terminologie, une application est multiplateforme à partir du moment ou elle fonctionne sur plus d'une plateforme : "multiplateforme" indique que l'application dispose des éléments pour dialoguer par des appels système à plusieurs OS, et en général pour des raisons pratiques, est compilé un setup d'installation de cette application par noyau d'OS distinct. Quand sa bonne exécution se fait sans tenir compte de l'OS qui la supporte (l'application ne nécessite peu ou pas d'appel à des procédures système), on parle d'une application portable, s’exécutant en général sans installation, et s’adaptant au SGF courant ^^.

Dans le cas de webGL, il est effectivement "multiplateforme" car basé sur OpenGL disposant de nombreuses versions s'adaptant aux OS, voire parfois à du matériel spécifique, mais pas "portable" dans le sens ou il exploite des composants intimement lié au système d’exploitation où son exécution est effectuée ^^.

C'est pour cela que WebGL n'existe pas sous Internet explorer, Microsoft prétextant un manque de sécurité de la nouvelle technologie, mais qui à mon avis à plus tendance à bouder des produits du monde libre. Pour ce qui est de Mac, l'implémentation de cette technologie est prévue sous safari à partir de la version Snow léopard 10.6, mais toujours pas de nouvelles, il semblerai que Mac travaille plutôt sur leur propre composant 3D web dans l'optique de l'adapter aux techno. téléphone (Équivalent de WebGL pour Iphone).
Romano58
Messages postés
120
Date d'inscription
lundi 26 février 2007
Statut
Membre
Dernière intervention
7 octobre 2011

D'accord donc un programme qui ce compile pour windows et linux, mais pas pour mac.... c'est pas un programme cross plate-forme car il ne marche pas sur tout les OS. Ok Ok...

Donc effectivement, la marmotte mais le chocolats dans le papiers d'alu
Hakumbaya
Messages postés
41
Date d'inscription
dimanche 10 octobre 2004
Statut
Membre
Dernière intervention
17 décembre 2010

Cross browser = Techno compatible tout navigateur de manière native
Ce n'est pas le cas pour IE, Safari, Opera, NetScape, (Je vous épargne les plus obscures) ainsi que chrome et FF non récent.

Pour ceux qui cherchent la manipulation pour activer WebGL sous FF :
Rendez vous sur le "about:config" puis rechercher les paramètres suivants :
webgl.force-enabled => à passer à true (Pensez bien à le repasser à false une fois fini, ce paramètres à "true" ouvre des failles de sécurité)
webgl.verbose => true ou false, cela depend des config, mais je n'ai pas encore trouvé l'influence de ce paramètre
webgl.prefer-native-gl => à passer si à true si vous disposez des composants openGL natifs

Je proposerai prochainement une version un peu plus aboutie avec des modèle pré-généré, avec une texturing plus facile.
Romano58
Messages postés
120
Date d'inscription
lundi 26 février 2007
Statut
Membre
Dernière intervention
7 octobre 2011

Une version online serait la bienvenue.

et petite correction rigolote:
[...] elle n'est malheureusement pas cross brother [...]

Et cross sister, elle l'est? :) Bon, et sinon, si elle fonctionne sur firefox et chrome (quelques soit leurs version tant qu'ils prennent en charge webgl), bah si c'est cross BROWSER :)
Hakumbaya
Messages postés
41
Date d'inscription
dimanche 10 octobre 2004
Statut
Membre
Dernière intervention
17 décembre 2010

Pour ceux qui sont sous firefox 5.0 voici la manip pour activer WebGL.
Rendez vous sur l'url "about:config"

Rechercher "webgl" et passez les parametres suivants à "true"
- webgl.force_enabled
- webgl.verbose

Je vous conseille vivement une fois terminé de repasser ces parametres à false, car les activer ouvre une faille de sécurité navigateur.

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.