Canvas i3d : 3d sous javascript sans weggl

Soyez le premier à donner votre avis sur cette source.

Vue 6 384 fois - Téléchargée 642 fois

Description

D'ici quelques mois devrais bientôt sortir la prochaine évolution sous différents navigateur : WebGL.
WebGL ne sera rien de plus qu'un composant permettant à canvas d'utiliser la puissance de la carte graphique pour les calcul de 3D.

Donc petit challenge : Et-il possible de faire de la 3D en javascript sous Canvas sans WebGL....et bien oui ! Voici un petit code de démonstration afin que les petit curieux s'y retrouve.
Dans ce code, pas de programmation objet, pas de super matrice de transformation pour la 2D et la 3D, les formules mathématiques barbantes sont réduite à leur formes trigonométriques.

Ce petit moteur permet d'afficher un ou plusieurs objets 3D composée de facette (petit triangle 3D) qui peuvent être texturé. Pour une question de faible puissance des navigateurs actuels, le "map texturing" ne se fait que par approximation affine sans sous division, mais pour les plus fondus, il est tout à fait possible d'utiliser un système de sous division avec Ray tracing. Dans un soucis de clarté de code, je me suis limité à l'essentiel, et n'ai pas embourbé le code dans les diverses optimisations de moteurs existantes.

Ce script comprend également un écouteur d'évènement pour pouvoir se déplacer dans l'environnement 3D. utilisez les fleches directionnelles du clavier pour déplacer la camera. Pour faire tourner la camera, maintenez le clic gauche de la souris enfoncée et déplacez la souris horizontalement et verticalement (rotation relative 3D sous X et Z). Maintenez le clic droit pour obtenir une Rotation statique sur l'axe des Z (ne depend pas pas d'orientation de la camera). La molette vous permettra de monter et descendre la camera.

Ce petit script n'a pas pour but de supporter un grand nombre d'élément, mais n'a été fait qu'a titre de démonstration à ceux qui s'intéresse à WebGL sans trop savoir à quoi s'attendre, il ne respecte pas les regles strictes d'un moteur graphique et deviens très rapidement gourmand en ressources, donc soyez indulgents !

Fonctionne à pleine capacité uniquement sous Mozilla Firefox à partir de la version 3.4

Source / Exemple :


Tout dans le ZIP.

Conclusion :


Les moteurs graphiques semble être une oeuvre lourde et mystérieuse...détrompez vous ! WebGL intègrera nativement la plupart des fonction mathématiques barbares utilisées dans code, la représentation 3D, gestion de scène, les textures, le rendu, et effet de matériaux et les lumières.

La version actuelle de canvas permet tout de même de créer des moteurs 3D isométriques tout à fait convenables pour des petits jeu, on même justes quelques animations sur des sites Web pour les développeur les plus repoussé par flash.

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
-
Les "parseInt" n'ont en soi aucune utilité, que le calcul soit entier ou flottant, la différence ne se fait pas vraiment sentir, c'est uniquement fait pour de l'affichage en console soit lisible ^^.

Pour ce qui est du code en commentaire, il est présent uniquement pour donner des pistes d'optimisation, mais n'ont eux aussi aucune utilisé. Enfin la restriction fait pour ne pas afficher les objets dans le dos de la camera est que si on retire cette restriction, étant donné que les facettes n'ont pas de vecteur normal d'affichage (affichage des 2 cotés de la facette), et les formules trigonométriques réduites, un objet dans le dos de la camera est affiché dans son champs de vision à l'envers, un peu comme le ferai une symétrie centrale ^^.

Pour ce que qui est du tri bulle, effectivement, j'avoue que je suis passé très très vite dessus, et que ce code aurait mérite plutôt un vrai quick sort, mais la encore, ce n'est qu'un exemple qui n'aura plus aucune valeur des que WebGL sera disponible sous les principaux navigateurs ^^
LeFauve42
Messages postés
239
Date d'inscription
vendredi 20 octobre 2006
Statut
Membre
Dernière intervention
20 avril 2009
-
C'est pas mal, mais c'est dommage que certaines parties du code restent un peu baclees, comme ton tri a bulles (tu as oublie le "--nbobjects;" avant la fin de la boucle while).
Dans RanderRedraw(), on dirait que tu as essaye de ne pas traiter les objets derriere la camera, mais la moitie du code est commentee. Dans ce cas, tu devrais commenter aussi les lignes 227 a 230 qui ne sont plus utiles et consomment du temps.

J'ai du mal a voir l'interet des parseInt() dans Projection2D. Est-ce que c'est pour convertir des floats en int ? Est-ce que Math.floor() ne marcherait pas mieux dans ce cas ? (ou alors j'ai tout faux :o) )

Malgre ces petits defauts, ton code est tres clair et plaisant a lire.
Merci de le partager avec nous !
MangaII
Messages postés
129
Date d'inscription
dimanche 9 décembre 2001
Statut
Membre
Dernière intervention
12 janvier 2009
-
Génial !
vraiment un super boulot ...

A titre info, ça fonctionne très bien sous Linux (testé avec Firefox et Chrome) ...
Vivement que WebGL soit implémenté partout ... on va pouvoir se lâcher !

Merci pour cette source.
Nazgul59
Messages postés
2
Date d'inscription
lundi 18 septembre 2006
Statut
Membre
Dernière intervention
27 mai 2010
-
Excellent script et bon exemple de ce que Javascript a dans le ventre !

Un petit détail, pour faire marcher le script chez moi j'ai du renommer la variable "console" qui était apparemment un mot réservé en "console2" pour que ça fonctionne.
Hakumbaya
Messages postés
41
Date d'inscription
dimanche 10 octobre 2004
Statut
Membre
Dernière intervention
17 décembre 2010
-
Et pour ceux qui se demande ce qui cloche avec le texturing "affine", vous trouverez ici un exemple plus parlant ^^ : http://en.wikipedia.org/wiki/Texture_mapping

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.