begin process at 2012 05 28 12:50:03
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Graphique

 > CANVAS I3D : 3D SOUS JAVASCRIPT SANS WEGGL

CANVAS I3D : 3D SOUS JAVASCRIPT SANS WEGGL


 Information sur la source

Note :
9 / 10 - par 1 personne
9,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Graphique Classé sous :Canvas, WebGL, 3D, Moteur Niveau :Expert Date de création :11/10/2010 Vu / téléchargé :3 964 / 387

Auteur : Hakumbaya

Ecrire un message privé
Ce membre participe au partage de revenus publicitaires
Commentaire sur cette source (6)
Ajouter un commentaire et/ou une note


 Description

Cliquez pour voir la capture en taille normale
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


 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.

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Sources du même auteur

Source avec Zip Source avec une capture 3D AVEC WEBGL + MESH
Source avec Zip Source avec une capture 3D AVEC WEBGL
Source avec Zip PLAYER VIDEO HTML À BONDER

 Sources de la même categorie

Source avec Zip JDMATH-MINI.JS : GÉNÉRATION D'EXPRESSION MATHÉMATIQUE par jdmcreator
Source avec une capture SPHERE 3D DÉFORMABLE par phm
Source avec Zip Source avec une capture EFFET DE ROTATION A 360° D'IMAGE AVEC ACCELERATION DECELERAT... par kazma
Source avec Zip Source avec une capture PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS par kazma
Source avec Zip Source avec une capture CALCULATRICE HEURE par m22001111

 Sources en rapport avec celle ci

Source avec une capture SPHERE 3D DÉFORMABLE par phm
Source avec Zip Source avec une capture 3D AVEC WEBGL + MESH par Hakumbaya
Source avec Zip Source avec une capture 3D AVEC WEBGL par Hakumbaya
Source avec Zip DOODLE JUMP EN JAVASCRIPT par Toshy62
Source avec Zip Source avec une capture ACTIONJS - FRAMEWORK JAVASCRIPT (HTML5 CANVAS) par Neoziro

Commentaires et avis

Commentaire de Hakumbaya le 11/10/2010 03:02:29

Ah oui, petit oubli !
Pour le systeme de texturing, il est grandement simplifié, ce qui implique que les facettes doit disposer d'un bonne orientation pour le texturing.

Exemple : Voici un carré
P1-----P2
|     |
|     |
P3-----P4

Le fichier de texture correspond à ce carré. La facette est un triangle donc la texture cera extraite du carré precedent selon les points P1-P2-P4. P1-P2 represente le boird superieur de l'image, le bord P2-P3 represente le bord droit de la texture. La deformation de cette texture pour une facette F1,F2,F3 respectera toujours ce decoupage, le moteur n'integre pas de veritable Map Texturing.

Commentaire de Hakumbaya le 11/10/2010 03:14:12

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

Commentaire de Nazgul59 le 16/10/2010 20:06:41

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.

Commentaire de MangaII le 18/10/2010 08:57:14

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.

Commentaire de LeFauve42 le 18/10/2010 13:17:07 9/10

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 !

Commentaire de Hakumbaya le 18/10/2010 15:37:16

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

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

moteur de recherche+frames [ par poloute ] Bonjour,Comment faire avec le moteur de recherche interne v2 pour que le visiteur saisisse sa demande dans le cadre du haut et obtienne la réponse dan programmation java d'un moteur de recherche [ par calou34 ] voilà je dois programmer un moteur de recherche ou l'utilisateur rentre ces mots clés et une page affiche tous les résultat avec les liens et une desc Moteur de recherche en java [ par spiff79 ] je dois programmer un moteur de recherche type google en java et je n'ai aucune idée sur la question, si qq'un peut m'aider!Merci developper un moteur de recherche dans une base de donnée access [ par foued123 ] Bonjourje doit faire un moteur de recherche dans une base de donnée access en utilisant frontpage comme éditeur de site et en utilisant comme serveur moteur de recherche [ par fvr ] JackJackBonjour à tousEtant débutant, je cherche un javascript pour le problème suivant:J'ai crée une page avec trois cadres:1/cadre haut / sommaire2/ Moteur recherche internet avec fenêtre pop up [ par Krysteen ] Malgré des mois de recherches intenses, je ne parviens pas à trouver de script pour un moteur de recherche interne qui aie les fonctions dont j'ai bes Moteur de calcul sur un formulaire [ par twentyseven ] Bonjour,Je souhaite effectuer des claculs (+, *, % ...) sur des formulaires représentant des devis, factures...Le nombre de calculs étant important, j Problème de gestion de fenetres [ par laurentbalmer ] Voilà,Sur la page principale de mon site, j'ai en "include" le menu avec des rubriques dont une qui est un moteur de recherche qui s'ouvre dans une au Diaporama 3D [ par walimoha ] J'ai installé le diaporama 3D, mais le nombre d'image est limité à 12 et il n'ya pas moyen d'en rajouter! Comment faire pour pouvoir afficher plusieur lecture objet 3D [ par le ptit gob ] Bonjour,bonjour, Je ne connais pas ce langage, alors soyez indulgent merci. Je dois afficher un objet 3D dans ma page web mais je ne sais pas comment


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

Photothèque

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,811 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales