La manera más eficiente de dibujar partículas en HTML5 en el iPad 2

Question

Estoy tratando de crear luces móviles con rutas para un sitio web/aplicación HTML5 apuntado al iPad 2. Me pregunto cuál es la mejor manera de hacerlo y si se usa HTML5 es viable en absoluto. Elegí HTML5 porque es más fácil y más barato de desarrollar e implementar que las aplicaciones nativas de iOS con Objetivo C. Por supuesto, si resulta que HTML5 simplemente no ofrece el rendimiento suficiente, es posible que tenga que tragar la píldora amarga.

De todos modos para dar una impresión de lo que estoy hablando, esto es lo que tengo hasta ahora:

screenshot http://devdali.no-ip.org/mathias/test-lights/screenshots/1.jpg

O usted puede verlo en acción here (sólo funciona en navegadores basados ​​en WebKit) .

Al principio traté de usar un lienzo HTML5 y dibujar degradados radiales como partículas de manera similar a la que se ve arriba. ¡Funcionó, pero la velocidad de fotogramas era horrible incluso en mi computadora de escritorio!

Así que después de leerlo descubrí que las transformaciones de CSS3 pueden ser aceleradas por hardware, así que construyo la versión que ves arriba. Cada "partícula" es una imagen de 64x64 png. Para cada luz hay una luz de "cabeza" (una img) seguida de una pista que consta de 115 elementos img. Cada elemento img se transforma utilizando "translate3d" (así como escala y rotación). Además, la opacidad de cada elemento se ajusta dinámicamente.

Al hacerlo de esta manera proporcioné framerates mucho mejores en mi computadora, pero dudo que el iPad 2 lo manejará.

Estaría agradecido si alguien pudiera darme algunas pistas sobre cómo mejorar el rendimiento de esto en general y teniendo en cuenta la plataforma de destino.

¡Gracias por cualquier ayuda con anticipación!

Answer 1

Esto debe construirse en el lienzo. Echa un vistazo a EaselJS y esta demostración.

http://easeljs.com/ http://easeljs.com/demos/MusicVisualizer/index.html

Answer 2

Se puede optimizar el rendimiento de un LOT utilizando WebGL (, que se apoya en el iPad2.) ... lo cual no es compatible con páginas html básicas en ios safari como se indica en Nison Maël ...

Por el momento solo tiene lienzo como solución. Que todavía le dará un mejor rendimiento ...

(se puede comprobar este blog para obtener más información: http://learningwebgl.com/blog/

Con un poco de fe y hora en que se sorprenderá)

Answer 3

Si acepta pequeños cambios en el efecto, algún otro procedimiento pueden trabajar rápido:

• en vez de dibujar caminos de la luz por los medios de muchas partículas, simplemente dibujar las luces en sus posiciones actuales en un elemento Canvas.

• Puede oscurecer toda la imagen al principio de un cuadro llenando un rectángulo negro con una opacidad muy baja en la parte superior. De esta manera los senderos se oscurecen, pero no alterarían su color como lo hacen ahora.

• Sin embargo, la cantidad de operaciones de dibujo se reducirá enormemente. La operación más costosa sería rellenar el rectángulo de desvanecimiento para cada fotograma.