Paso 7: Three.js: sistemas de partículas en movimiento
Las estrellas podrían ser animadas de varias formas diferentes:
- Cada vértice puede ser movido cada fotograma. Esto ofrece gran flexibilidad (cualquier punto de cualquier lugar cualquier momento) y es cómo la mayoría de los fuegos artificiales de la fuente / nieve partícula webgl ejemplos de trabajo. Pero con un gran número de puntos, rendimiento se convierte en una preocupación porque el JavaScript tiene que bucle sobre cada partícula, cada fotograma. Si tienes 20.000 puntos con 3 dimensiones todo el armazón y desea mantener una velocidad de fotogramas suave sedoso 60fps, es de 3,6 millones de cálculos por segundo. Es probable que resbale un poco.
-Utilizar sombreadores de vértices para desplazar los vértices directamente en webgl. Esta es probablemente la mejor solución para el rendimiento (el JavaScript no hace nada cada fotograma y todo de la animación es directa en webgl). Hacer los cálculos de desplazamiento y el ruido directamente en la GPU, dejando la CPU totalmente libre para otras tareas, como la interacción con el usuario. Aquí está una excelente demostración y tutorial para este tipo de truco. Usted debe comprobar hacia fuera el tornado demasiado, que también utiliza una estrategia relacionada. Aunque frío mirando, esto hace difícil de manejar cosas como un usuario golpeando o haciendo clic en una estrella. En cuanto a JavaScript, los vértices son fijos. Mapeo de la ubicación de webgl a un objeto JavaScript fue más allá de mi o no es prácticamente posible. Necesitaba ser capaz de localizar estrellas en el espacio basado en la interacción con el usuario, así que esta opción era hacia fuera.
- Grupo los puntos en los objetos y animar cada objeto independientemente. Esto terminó siendo mi solución. Los seis anillos para seis categorías de nivel superior de Instructables son seis sistemas de partículas independientes en ThreeJS. Para crear una ilusión que la galaxia está constantemente en movimiento, hacen girar cada uno de los particleSystems a diferentes velocidades, en diferentes direcciones y alrededor de puntos centrales diferentes. Esto requiere JavaScript calcular una nueva rotación para el marco de seis objetos, pero la gran mayoría del trabajo se hace en la GPU que se asigna cada vértice a un punto en la pantalla. Puesto que se mantiene una referencia de JavaScript a cada punto, es posible averiguar en que punto un usuario es aprovechar cuando toque la pantalla.
Cada fotograma, esto sucede:
