javascript - framework - three js descargar
¿Cuál es el estado actual del arte en las bibliotecas y frameworks de JavaScript HTML canvas? (15)
Actualmente estoy investigando las opciones para trabajar con el lienzo en una nueva aplicación HTML 5, y me preguntaba cuál es el estado del arte actual en las bibliotecas y frameworks de JavaScript HTML Canvas.
En particular, ¿hay marcos que admitan el tipo de cosas necesarias para el desarrollo del juego: animación compleja, gestión de gráficos de escena, manejo de eventos e interacciones del usuario?
También está dispuesto a considerar productos comerciales y de código abierto.
Acabo de lanzar la primera versión de una nueva biblioteca de dibujo e interpolación orientada a personas con un fondo de desarrollo AS3 / Flash. Si bien mi lib no es compatible con trazados de dibujo o gráficos complejos, por ejemplo, espero que ayude a las personas a dibujar y animar primitivas básicas de forma familiar.
Comentarios y comentarios son bienvenidos. http://www.quietless.com/kitchen/introducing-js3/
Además, el marco de Javascript joven y no malo, (y la animación compleja, la gestión de gráficos de escena, el manejo de eventos y las interacciones del usuario), todo al respecto: jCanvaScript . Puede ser, excepto ''administrar gráficos de escena''.
Aves Engine es realmente genial: http://www.dextrose.com/en/projects/aves-engine
Además, Akihabara parece estar bien: http://www.kesiev.com/akihabara/
CAKE.js ya no se mantiene, pero es un marco bastante potente: http://code.google.com/p/cakejs/
Demos aquí - http://glimr.rubyforge.org/cake/canvas.html , http://glimr.rubyforge.org/cake/missile_fleet.html
Eche un vistazo al framework de processingjs . También la próxima versión mootools 2.0 tiene el proyecto de arte para trabajar con lienzo
Estoy impresionado con Akihabara como motor de juego. Tiene una documentación fantástica en forma de tutoriales y una API. Incluso he visto en algunos tableros de mensajes hablar de una versión de akihabara 2. Desafortunadamente, toda esa charla tiene un año o más de antigüedad. Realmente espero que este motor aún se esté desarrollando.
Hay una biblioteca interesante que tiene como objetivo mejorar algunos de los fundamentos del trabajo con la API canvas llamada canto.js por David Flanagan, autor de Javascript: The Definitive Guide .
He encontrado que dos bibliotecas son extremadamente competitivas y mucho mejores que las telas.
Kinetic.js y easel.js tienen un manejo de eventos extremadamente bueno, agrupación y abstracción general de formas. Encontrarás mucho que amar en ambos; el caballete parece tener más orientación y filtrado de imágenes.
Los pasadores de eventos de Fabric son MUCHO peores que cualquiera de estos; básicamente, trata el lienzo completo como un evento de gran evento y te dice cuándo se ha hecho clic en "Something". No asocia eventos a formas individuales o grupos de formas.
He estado trabajando con bHive para producir gráficos y mover encabezados de sitios, parece impresionante y poderoso, a diferencia de los otros que parecen estar desarrollándose. Adobe Edge también merece un vistazo, aunque no Canvas.
y
KineticJS es una biblioteca prometedora que se jacta de crear y animar "capas" individuales en el lienzo para un alto rendimiento.
Me sorprende que nadie haya mencionado WebGL y los frameworks basados en él. Consideraría que es uno de los primeros en la lista de gráficos 3D acelerados por GPU y animación compleja en HTML canvas / javascript.
WebGL es un estándar web multiplataforma y libre de regalías para una API de gráficos 3D de bajo nivel basada en OpenGL ES 2.0, expuesta a través del elemento Canvas de HTML5 como interfaces de Document Object Model. ...
WebGL trae 3D sin complementos a la web, implementado directamente en el navegador. Los principales proveedores de navegadores Apple (Safari), Google (Chrome), Mozilla (Firefox) y Opera (Opera) son miembros del Grupo de trabajo de WebGL.
WebGL es muy sólido en su soporte para gráficos acelerados por GPU. Eche un vistazo a estas demos shader GLSL. :-) Y vea ChemDoodle como un ejemplo de interacción del usuario.
He estado trabajando en una aplicación utilizando el marco O3D de Google, que gestiona el gráfico de escena, y usa WebGL para renderizar (solía usar su propio complemento). O3D es un trabajo en progreso, y su documentación no está completamente actualizada, pero está en desarrollo activo, y hay algunas buenas demos por ahí . 3D Pool puede ser lo mejor en tu callejón. Los desarrolladores de Google son muy receptivos a las preguntas en el grupo de discusión.
Hay una serie de otros marcos creados en WebGL; mira aquí Los que mencionan desarrollo de juegos y gráficos de escena incluyen Copperlicht, SceneJS, X3DOM.
WebGL se ejecuta en versiones de desarrollo recientes de varios navegadores , pero no de IE. He estado usando Firefox ("Minefield") y Chromium con buenos resultados. Necesitará uno de estos para ejecutar las demostraciones anteriores.
Sin embargo, si sus requisitos son que no debe tener más dependencias que HTML 5 canvas / js, WebGL puede no ser la opción correcta. No parece que IE lo admitirá pronto.
Actualización: después de oponer mucha resistencia, MS decidió soportar WebGL en IE 11 .
Si desea usar Javascript, Dojo es una excelente forma de hacerlo. Tiene una API de gráficos vectoriales compacta, multiplataforma (SVG, VML, Canvas, Silverlight) que es muy poderosa. Puedes encontrarlo en dojo.gfx y dojox.gfx.
Hemos usado esto para crear un tutor de física interactivo que permite a los estudiantes dibujar vectores, elipses, etc. (incluso anexar imágenes) y realizar todo tipo de transformaciones en ellos. Puede ver lo que hemos hecho en http://gideon.eas.asu.edu/web-UI/login.html solo inicie sesión con cualquier nombre de usuario.
He echado un vistazo a fabric.js y dojox.drawing hace muchas de las mismas cosas. Si observa las pruebas en el kit de herramientas (una vez que lo tiene dojox / drawing / tests /) encontrará ejemplos de todo, desde gráficos vectoriales hasta imágenes y sombras creadas mediante programación.
Raphael parece una muy buena biblioteca de lienzos; está basado en SVG (o basado en VML en Internet Explorer) y, por lo tanto, es compatible con muchos eventos de entrada del usuario. Es bastante pequeño (60kb gzip), por lo que no es una dependencia demasiado grande.
Parece tener un buen tweener también: http://raphaeljs.com/reference.html#animate (mira here y here para ver ejemplos).
Para ver un ejemplo de lo que puede hacer, eche un vistazo a esta pequeña demostración inteligente .
¡Espero que esto ayude!
three.js , por mr. doob , es un fantástico motor 3d para javascript que incluye scenegraph (software y WebGL / versiones aceleradas por hardware), sombreado, partículas, animación pelada (creo) y efectos de iluminación. Compruébalo, es un tipo súper talentoso.
Debo añadir que necesitarás el Google Chrome más nuevo o su equivalente para ver la mayoría de las demos, una de mis favoritas es: http://mrdoob.github.com/three.js/examples/webgl_materials_cars.html
He estado trabajando en fabric.js , una biblioteca de lienzos para ayudar con eso exactamente, manipulando objetos sobre lienzo, manejando eventos e interacciones del usuario. Todavía no se ha lanzado, pero eche un vistazo a una demostración preliminar simple.
También puede verlo en acción en este editor de diseño , para el cual fue creado originalmente.
Editar: El proyecto ahora está disponible en github (de fuente abierta bajo la licencia MIT)
Para comenzar, mira:
- Demos (simple y complejo, con código para mostrar cómo se hace)
- Presentación de Fabric.js en FalsyValues (y otra en BK.js )
- Wiki en github (incluidas las FAQ )
- Documentation
- Grupo de Google (haga cualquier pregunta allí)
- Fabric.js en twitter (o preguntas cortas a través de twitter)
- Introducción a Fabric.js: Parte 1 (artículo sobre ScriptJunkie)
- Introducción a Fabric.js: Parte 2 (artículo sobre ScriptJunkie)
¿Cómo se compara Fabric con otras bibliotecas de canvas de Javascript? Aquí hay una tabla de comparación .