Canvas i3d : 3d sous javascript sans weggl
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
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.
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
- Canvas i3d : 3d sous javascript sans weggl
- Police canvas ✓ - Forum Delphi / Pascal
- Video canvas - Conseils pratiques -Javascript
- Canvas arc ✓ - Forum Delphi / Pascal
- Delphi canvas ✓ - Forum Delphi / Pascal
- Canvas supinfo ✓ - Forum Delphi / Pascal
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.