Étape 7: Three.js : systèmes de particules en mouvement
Les étoiles pouvaient être animés de plusieurs façons différentes :
- Chaque sommet pourrait être déplacé à chaque image. Ceci offre énorme flexibilité (aucun point n’importe où n’importe quel moment) et est ainsi que la plupart des feux d’artifice / fontaine / neige particule-webgl exemples fonctionnent. Mais avec un grand nombre de points, la performance devient un problème parce que le JavaScript a une boucle sur chaque particule, chaque image. Si vous avez 20 000 points avec 3 dimensions changeant toutes les images et vous voulez maintenir une cadence de 60fps lisse soyeux, c’est de 3,6 millions de calculs par seconde. Il est probable à glisser un peu.
-Utiliser les shaders de vertex à déplacer les vertices directement en webgl. C’est probablement la meilleure solution pour la performance (le JavaScript n’a aucun effet chaque image et tout de l’animation est direct en webgl). Vous faites les déplacement et le bruit des calculs directement sur le GPU, laissant le CPU entièrement libre pour d’autres tâches, telles que l’interaction de l’utilisateur. Voici une excellente démo et un tutoriel pour ce genre de truc. Vous devriez Vérifier la tornade aussi, qui utilise également une stratégie connexe. Cool mais à la recherche, il est donc difficile de gérer les choses comme un utilisateur tapant ou en cliquant sur une étoile. Mesure où JavaScript est concerné, les sommets ont été fixés. Mappage de l’emplacement de webgl à un objet JavaScript était soit au-delà de moi ou il est pratiquement impossible. J’avais besoin d’être en mesure de localiser les étoiles dans l’espace basé sur l’interaction de l’utilisateur, si cette option était sorti.
- Regrouper les points en objets et animer chaque objet indépendamment. Cela fini par être ma solution. Les six anneaux pour six catégories de niveau supérieur des Instructables sont six systèmes de particules indépendantes dans ThreeJS. Pour créer une illusion que la galaxie est constamment en mouvement, je tourner chacune de la particleSystems à des vitesses différentes, dans des directions différentes et autour de différents axes. Cela nécessite JavaScript calculer une nouvelle rotation pour cadre de six objets de chaque, mais la grande majorité du travail se faite sur le GPU qui mappe chaque sommet jusqu'à un point situé sur l’écran. Car une référence JavaScript est maintenue à chaque point, il est possible de comprendre à quel point un utilisateur est touchant quand ils Appuyez sur l’écran.
Chaque image, ce qui se passe :
