canvas vs. webGL vs. CSS 3d - > que choisir? [fermé]
pour l'application web 3d de base, c'est - à-dire quelques cubes, rotation et traduction dans l'espace 3d-qu'est-ce qui est le mieux à choisir?
CSS 3d semble le plus facile, 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 si elles sont une preuve future.
Pourquoi y a-t-il autant de techniques différentes pour la 3D? qui est le meilleur? qui est l'épreuve de l'avenir?
4 réponses
la raison pour laquelle il y a tant d'options différentes pour la 3D est que l'ensemble est encore dans un État de flux -- 3D dans le navigateur n'est pas une norme terminée, et parmi les options que vous avez énumérées, la seule qui fonctionne dans tous les navigateurs actuellement disponibles est Canvas.
IE en particulier est peu susceptible de vous donner 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, donc il y a toujours de l'espoir. Mais la raison il est peu probable que Microsoft ont fait un point de seulement les caractéristiques de soutien qui ont été officiellement ratifiés en tant que normes.
parmi les technologies que vous avez énumérées, Canvas est loin la meilleure prise en charge, mais la toile N'est pas une technologie 3D; c'est une toile 2D, et si vous voulez y avoir des effets 3D, vous devez les écrire vous-même, et ils ne seront pas accélérés.
je suppose que la vraie réponse à votre question dépend de l'importance de la fonctionnalité pour votre site. Si c'est juste eye candy, que les utilisateurs de navigateurs non pris en charge pourraient vivre sans, alors par tous les moyens le faire avec certains CSS 3D. Mais si vous avez besoin de le faire cohérent dans tous les navigateurs actuels, puis le faire avec Canvas.
j'aurais tendance à recommander de ne pas utiliser WebGL pour votre cas, parce qu'il semble que ce serait exagéré pour ce que vous faites.
3D CSS est probablement le droit réponse, mais utilisez Canvas pour l'instant, jusqu'à ce que le reste des navigateurs ajoute le support pour 3D CSS.
je sais que c'est vieux de 2 ans mais je me suis dit que j'allais poster ça ici pour les futurs lecteurs.
le choix 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 facile. Pour IE, vous pouvez probablement obtenir une bibliothèque qui offre un soutien.
avez-vous besoin de quelques modèles 3d doux avec de beaux graphiques et qui peuvent faire toutes sortes de choses? Allez WebGL, vous ne pouvez pas demander plus de contrôle et la performance 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 vont travailler partout et ne nécessitent pas beaucoup de performance? Go Toile.
CSS3 est juste pour le plaisir des yeux. Vous pouvez le faire assez facilement, le style de n'importe quelle manière que vous voulez et est très facilement maintenable. Une fois que vous voulez faire plus que des bonbons pour les yeux, mettez vos gants parce que ça va nécessiter du travail.
avec 2D Canvas vous pouvez faire des choses 3d. Si vous êtes novice, ce sera très ennuyeux et compliqué (pour ne citer qu'un exemple; vous devez connaître les matrices), vous pouvez faire à peu près n'importe quoi avec une toile 2d que vous pouvez faire avec WebGL mais quelque chose sera plus facile dans WebGL (sérieusement, si vous allez sur une toile 2d, n'essayez pas d'utiliser des textures, c'est un cauchemar). WebGL utilise OpenGL ce qui, en un mot, signifie qu'il sera toujours plus performant que la toile 2d.
cependant, WebGL exige que l'utilisateur ait une carte vidéo compatible.
je dépend vraiment de ce que vous essayez de faire. Comment simple est simple?
CSS 3D est loin d'être utilisable. Il vient juste d'être transformé en firefox. C'est buggy dans firefox et chrome. Ça ne marche pas en FF9 beta sur OSX. Il a également des problèmes dans Chrome up à travers au moins 16. Voir http://greggman.com/downloads/examples/intersecting-elements-3d-css.html et comparez Safari sur OSX à n'importe quel autre navigateur.
trois.js (https://github.com/mrdoob/three.js/) utilisé pour (et peut-être le fait encore) fournir un peu de 3d simple en utilisant la toile.
Sinon si vous voulez quelque chose d'intéressant allez WebGL et choisissez une bibliothèque (trois.js, SceneJS, etc..)
vous devez faire un choix. Utilisez WebGL et abandonnez IE, utilisez Flash 11, utilisez Unity3D, utilisez Canvas et obtenez 3d très limitée, ou ne faites pas 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 une petite "guerre" 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. Yeap, DOM est beaucoup plus rapide dans certains cas, tandis que canvas est plus rapide sur la plupart des navigateurs/appareils modernes.
WebGL-meilleure option pour 2D et 3D, mais comme il n'est pas assez bien pris en charge par les navigateurs et les appareils, vous aurez à offrir repli sur toile ou DOM en cas de besoin.
Canvas - moins adapté à la comparaison 3D avec WebGL, mais plus adapté à la compatibilité, la communauté, les outils etc
DOM-plus rapide que la plupart des gens pensent, si utilisé à droite, le soutien le plus élevé autour, mais vous ne pouvez pas aller trop de fantaisie animation/jeu-sage.
Espérons que cette aide