canvas vs webGL vs CSS 3d -> lequel choisir?
Pour une application Web 3D de base, c'est-à-dire quelques cubes, la rotation et la traduction dans l'espace 3D - quel est le meilleur choix?
CSS 3d semble le plus simple, mais n'est pas pris en charge sur IE9 ou sur la feuille de route pour IE10, et offre moins de contrôle que les autres options. Canvas & WebGL semble beaucoup plus compliqué, mais je ne sais pas s'ils sont à l'épreuve du temps.
Pourquoi y a-t-il tant de techniques différentes pour la 3D? ce qui est mieux? qui est à l'épreuve du temps?
La raison pour laquelle il existe tant d'options différentes pour la 3D est que le tout est toujours dans un état de flux - la 3D dans le navigateur n'est pas un standard fini, et parmi les options que vous avez répertoriées, la seule qui fonctionne actuellement les navigateurs disponibles sont Canvas.
Il est peu probable qu'IE en particulier vous donne beaucoup de joie - comme vous le dites, la 3D n'est même pas prévue pour IE10 à ce stade. Cela dit, SVG a été ajouté à IE9 assez tard dans la journée, il y a donc toujours de l'espoir. Mais il est peu probable que Microsoft ait tenu à ne prendre en charge que les fonctionnalités qui ont été officiellement ratifiées en tant que normes.
Parmi les technologies que vous avez répertoriées, Canvas est de loin la meilleure prise en charge, mais Canvas n'est pas une technologie 3D; c'est une toile 2D, et si vous voulez avoir des effets 3D dedans, vous devez les écrire vous-même, et ils ne seront pas accélérés par le matériel.
Je suppose que la vraie réponse à votre question dépend de l'importance de la fonctionnalité pour votre site. Si c'est juste un régal pour les yeux, sans lequel les utilisateurs de navigateurs non pris en charge pourraient vivre, alors faites-le avec un CSS 3D. Mais si vous devez le rendre cohérent dans tous les navigateurs actuels, faites-le avec Canvas.
J'aurais tendance à recommander de ne pas utiliser WebGL pour votre cas, car il semble que ce serait exagéré pour ce que vous faites.
Le CSS 3D est probablement la réponse à droite, mais utilisez Canvas pour l'instant, jusqu'à ce que les autres navigateurs prennent en charge le CSS 3D.
Je sais que cela a 2 ans mais je pense que je posterais ceci ici pour les futurs lecteurs.
Que choisir dépend de ce dont vous avez besoin.
Avez-vous besoin d'une forme 3D simple avec peu ou pas d'animations? Essayez si vous pouvez le faire avec CSS3, c'est de loin le plus simple. Pour IE vous pouvez probablement obtenir une bibliothèque qui offre un support.
Avez-vous besoin de modèles 3D doux avec de jolis graphismes et qui peuvent faire toutes sortes de choses? Allez WebGL, vous ne pouvez pas demander plus de contrôle ET de performances pour la 3D dans les navigateurs.
Avez-vous besoin de formes 3D qui peuvent faire toutes sortes de choses, mais n'ont pas besoin de textures et fonctionneront partout et ne nécessiteront pas beaucoup de performances? Allez Canvas.
CSS3 est juste pour le plaisir des yeux. Vous pouvez le faire assez facilement, le coiffer comme vous le souhaitez et il est très facile à entretenir. Une fois que vous voulez faire plus que du bonbon pour les yeux, mettez vos gants, car cela va nécessiter un peu de travail.
Avec 2d Canvas, vous pouvez créer des trucs en 3D. Si vous êtes nouveau, ce sera très ennuyeux et compliqué (pour ne citer qu'un exemple; vous devez connaître les matrices), vous pouvez à peu près tout faire avec le canevas 2D que vous pouvez faire avec WebGL mais quelque chose sera plus facile dans WebGL (sérieusement, si vous utilisez 2d Canvas, n'essayez pas d'utiliser des textures, c'est un cauchemar). WebGL utilise OpenGL qui, en résumé, signifie qu'il surpassera toujours 2d Canvas.
Cependant, WebGL nécessite que l'utilisateur dispose d'une carte vidéo compatible.
Je dépend vraiment de ce que vous essayez de faire. Comment simple est simple?
Le CSS 3D est loin d'être utilisable. Il vient juste de devenir Firefox. C'est buggy à la fois dans Firefox et Chrome. Cela ne fonctionne pas en version FF9 beta sur OSX. Il y a aussi des problèmes dans Chrome jusqu'à au moins 16. Voir http://greggman.com/downloads/examples/intersecting-elements-3d-css.html et comparer Safari sur OSX à à peu près n'importe quel autre navigateur.
three.js ( https://github.com/mrdoob/three.js/ ) utilisé pour (et peut-être toujours) fournir de la 3D simple à l'aide de canvas.
Sinon, si vous voulez quelque chose d'intéressant, allez sur WebGL et choisissez une bibliothèque (three.js, SceneJS, etc.)
Vous devez faire un choix. Utilisez WebGL et abandonnez IE, utilisez Flash 11, utilisez Unity3D, utilisez Canvas et obtenez une 3D très limitée, ou ne faites pas de 3D.
WebGL est déjà utilisé par les principaux sites. CNN utilise maintenant WebGL http://www.stinkdigital.com/en/work/ecosphere
Tout le monde est probablement fatigué d'entendre "ça dépend", mais ... ça dépend!
Il y a un peu de "guerre" en cours pour savoir s'il est préférable d'utiliser Canvas ou HTML/CSS3, et notamment parce que Canvas est plus lent que DOM sur les machines/appareils plus anciens. Oui, DOM est beaucoup plus rapide dans certains cas, tandis que la toile est plus rapide sur la plupart des navigateurs/appareils modernes.
WebGL - Meilleure option pour la 2D et la 3D, mais comme il n'est pas assez bien pris en charge sur les navigateurs et les appareils, vous devrez proposer un repli sur canvas ou DOM chaque fois que nécessaire.
Canvas - Moins adapté à la 3D que WebGL, mais plus adapté à la compatibilité, à la communauté, aux outils, etc.
DOM - Plus rapide que la plupart des gens pensent, s'il est utilisé correctement, le plus haut support, mais vous ne pouvez pas aller trop loin dans l'animation/le jeu.
J'espère que cela t'aides