example - lienzo vs. webGL vs. CSS 3d-> cuál elegir?

webgl mozilla

Question

Para aplicaciones web 3d básicas, es decir, algunos cubos, rotación y traducción en el espacio 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 y 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 un estado de flujo: 3D en el navegador no es un estándar terminado, y de las opciones que enumeró, la única que funciona en todo el mundo actualmente. los navegadores disponibles es Canvas.

IE, en particular, es poco probable que te genere mucha alegría, como dices, 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 por mucho el mejor soporte, 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.

3D CSS es probablemente la respuesta correcta , pero use Canvas por ahora, hasta que el resto de los navegadores agreguen soporte para CSS 3D.

Answer 2

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

3D CSS 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 por lo menos 16. Consulte http://greggman.com/downloads/examples/intersecting-elements-3d-css.html y compare Safari en OSX con prácticamente cualquier otro navegador.

three.js ( https://github.com/mrdoob/three.js/ ) solía (y tal vez todavía lo hace) proporcionar algo de 3D simple utilizando canvas.

De lo contrario, si quiere algo interesante, vaya a WebGL y elija una biblioteca (three.js, SceneJS, etc.)

Tienes que hacer una elecció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á utilizando WebGL http://www.stinkdigital.com/en/work/ecosphere

Answer 3

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

Qué elegir depende de lo que necesita.

¿Necesita una forma simple en 3D sin 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.

¿Necesitas algunos modelos 3d dulces 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 solo 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 puedes 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!

Hay 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 para 3D, pero como no es lo suficientemente compatible en todos los navegadores y dispositivos, deberá ofrecer respaldo en lienzo o DOM siempre que sea necesario.

Lienzo: menos adecuado para comparar en 3D con WebGL, pero más adecuado para compatibilidad, comunidad, herramientas, etc.

DOM: más rápido que la mayoría, si se usa correctamente, es el soporte más completo, pero no se puede usar una animación demasiado sofisticada.

Espero que esto ayude