Étape 6: Three.js : systèmes de particules
WebGL et ThreeJS par extension, sont parfaits pour l’affichage des mailles de large et détaillées dans l’espace 3. C’est ce que beaucoup de modèles 3D se composent de, et même si les modèles sont autres choses (« solides » ou « NURBs ») ils sont finalement rendus à votre écran d’ordinateur par tout d’abord transformés en soi-disant « render meshes ».
« Points » ne sont pas vraiment une chose.
Systèmes de particules sont essentiellement un moyen pour gérer la géométrie de maille 3D où vous ne se souciez les bords. Si vous oubliez les arêtes d’un maillage, rendre invisible et puis donnez une sorte de matérialité ponctuelles à l’intersection, vous avez un système de particules. Systèmes de particules permettent de vous déplacer tous les points d’un maillage autour de manière indépendante et peuvent être idéal pour les effets sont généralement rendus sous forme de particules. Oui, vous pourriez modéliser un sablier de cette façon comme des particules individuelles de sable flux passé entre eux, mais vous pourriez aussi faire quelque chose comme les nuages, neige, Oui, stars, auto-organisation folleou un sacré gâchis. Les sommets sont trop puissants par d’autres moyens. Si vous êtes prêt à écrire vous-même un nuanceur vertex, c’est assez rapide pour obtenir une boule chromée agréable.
En fait, je n’utilise des systèmes de particules pendant une bonne partie, mais threejs le rend facile à appliquer des matériaux vertex uniquement à particlesystems. Systèmes de particules vont main dans la main avec des matériaux de système de particules. Ainsi, au lieu de cubegeometry + matériel = cube (d’en haut), nous pouvons dire particleSystem + particleSystemMaterial = Object3D et l’ajouter à la scène. Pour plus de détails sur cette version de base, je recommande le tutoriel de Aerotwist sur les particules. J’ai fini par aller de manière légèrement différente : mes propres shaders de vertex et le fragment laminées sur la coutume.
Le JavaScript est assez simple :
Mais les éléments « vertexshader » et « fragmentshader » mentionnés sont WebGL code d’une planète inconnue :
Écrire ce code shader a été pénible pour moi, parce que je ne sais WebGL et n’ai toujours pas. Ce que j’ai appris sur le chemin, en plus de quelques menus détails qui ne sont pas utiles à partager, était un fait intéressant. Je ne savais pas pourquoi un GPU a été utile. Bien sûr, il est bon d’avoir un deuxième processeur. Mais pourquoi pas deux CPU ? Tout simplement parce qu’un GPU est moins cher ?
La différence est le traitement en parallèle. Pour l’architecture d’un CPU à peindre chaque pixel à l’écran, il a essentiellement à suivre le code qui effectue chaque pixel dans l’ordre :
Le code GPU est différent parce que le GPU pixel en parallèle, pas de séquence. Vous appliquez un effet à la totalité de l’écran à la fois et les effets de calque à l’autre. Cela vous permet de faire des trucs vraiment passionnant avec très peu de code. Voir post-traitement plus tard pour le goûter.