canvas vs. webGL vs. CSS 3d -> ¿cuál elegir?

Question

Para aplicaciones web básicas en 3d, es decir, algunos cubos, rotación y traducción en el espacio en 3D, ¿cuál es mejor elegir?

CSS 3D parece ser el más fácil, pero no es compatible con IE9 ni con la hoja de ruta para IE10, y ofrece menos control que las otras opciones. Canvas & WebGL parece mucho más complicado, pero no sé si son a prueba de futuro.

¿Por qué hay tantas técnicas diferentes para 3D? ¿cual es mejor? que es una prueba de futuro?

Answer 1

La razón por la que hay tantas opciones diferentes para 3D es porque todo sigue en estado de flujo: 3D en el navegador no es un estándar terminado, y de las opciones que enumeró, la única que funciona en todos los navegadores actualmente disponibles es Canvas.

IE en particular es poco probable que le dé mucha alegría, como usted dice, 3D ni siquiera está programado para IE10 en este momento. Una vez dicho esto, SVG se agregó a IE9 bastante tarde en el día, por lo que siempre hay esperanza. Pero la razón por la que es poco probable es que Microsoft haya hecho un punto de solo funciones de soporte que hayan sido formalmente ratificadas como estándares.

De las tecnologías que enumeró, Canvas es con diferencia es la mejor opción, pero Canvas no es una tecnología 3D; es un lienzo en 2D, y si desea tener efectos 3D, debe escribirlos usted mismo, y no serán acelerados por hardware.

Supongo que la respuesta real a su pregunta depende de la importancia de la característica para su sitio. Si solo se trata de ojos dulces, que los usuarios de navegadores no compatibles podrían vivir sin ellos, entonces hágalo con CSS en 3D. Pero si necesita hacerlo coherente en todos los navegadores actuales, hágalo con Canvas.

Tiendo a recomendar no usar WebGL para su caso, porque parece que sería excesivo para lo que está haciendo.

CSS 3D es probablemente la respuesta derecha, pero use Canvas por ahora, hasta que el resto de los navegadores añadan soporte para CSS 3D.

Answer 2

Realmente dependo de lo que intentas hacer. ¿Qué tan simple es simple?

CSS 3D está lejos de ser útil. Solo se ha convertido en Firefox. Tiene errores tanto en Firefox como en Chrome. No funciona en FF9 beta en OSX. También tiene problemas en Chrome hasta al menos 16. Consulte http://greggman.com/downloads/examples/intersecting-elements-3d-css.html y compare Safari en OSX con casi cualquier otro navegador.

three.js (https://github.com/mrdoob/three.js/) solía (y tal vez todavía lo hace) proporcionar algunos 3d simples utilizando lienzos.

De lo contrario, si quieres algo interesante ir WebGL y recoger una biblioteca (three.js, SceneJS, etc ..)

usted tiene que tomar una decisión. Use WebGL y abandone IE, use Flash 11, use Unity3D, use Canvas y obtenga 3d muy limitado, o no haga 3d.

WebGL ya está siendo utilizado por los principales sitios. CNN ahora está usando WebGL http://www.stinkdigital.com/en/work/ecosphere

Answer 3

Sé que esto tiene 2 años, pero creo que publicaría esto aquí para futuros lectores.

Qué elegir depende de lo que necesite.

¿Necesita una forma simple en 3D sin animaciones o con pocas animaciones? Prueba si puedes hacerlo con CSS3, que es el más fácil con diferencia. Para IE probablemente pueda obtener una biblioteca que ofrezca soporte.

¿Necesita algunos dulces modelos en 3D con buenos gráficos y que pueden hacer todo tipo de cosas? Vaya a WebGL, no puede pedir más control y rendimiento para 3d en los navegadores.

¿Necesita formas en 3D que puedan hacer todo tipo de cosas, pero no necesitan texturas y funcionarán en todas partes y no requerirán mucho rendimiento? Ir a la lona.

CSS3 es sólo para los ojos dulces. Puede hacerlo con bastante facilidad, modelarlo de la forma que desee y es muy fácil de mantener. Una vez que quieras hacer algo más que solo echar un vistazo, ponte los guantes, porque eso requerirá un poco de trabajo.

Con 2d Canvas puede hacer cosas en 3D. Si eres nuevo en esto, será muy molesto y complicado (por poner un ejemplo, necesitas saber de las matrices), puedes hacer prácticamente cualquier cosa con 2d canvas que puedas hacer con WebGL, pero algo será más fácil. en WebGL (en serio, si vas a 2d Canvas, no intentes usar texturas, es una pesadilla). WebGL usa OpenGL que, en pocas palabras, significa que siempre superará al 2d Canvas.

Sin embargo, WebGL requiere que el usuario tenga una tarjeta de video compatible.

Answer 4

Todo el mundo está probablemente cansado de escuchar "depende", pero ... ¡depende!

Existe una pequeña "guerra" sobre si es mejor usar Canvas o HTML/CSS3, y es porque Canvas es más lento que DOM en máquinas/dispositivos más antiguos. Yeap, DOM es mucho más rápido en algunos casos, mientras que el lienzo es más rápido en la mayoría de los navegadores/dispositivos modernos.

WebGL: la mejor opción tanto para 2D como 3D, pero como no es lo suficientemente compatible en todos los navegadores y dispositivos, deberá ofrecer el respaldo en lienzo o DOM siempre que sea necesario.

lienzo - Menos adecuado para 3D en comparación con WebGL, pero más adecuado para la compatibilidad, la comunidad, herramientas, etc.

DOM - Más rápido que la mayoría piensa, si se utiliza la derecha, el más alto de apoyo alrededor, pero no se puede ir de animación es demasiado elegante/juego-sabio.

espero que esto ayude