Étape 8: Three.js : une luminosité différente pour chaque étoile : WebGL Shaders
Étoiles ne sont pas uniformes. Ils ont différentes tailles, différentes luminosité et des couleurs différentes. Mon truc avec vu six objets d’avant ne semble pas s’appliquer ici : J’ai vraiment envie de chaque étoile pour être unique et afin de refléter l’importance relative du projet. Fondamentalement, les projets qui sont « brillantes » devraient briller. Rendre chaque sommet unique est une utilisation parfaite pour les shaders de WebGL. Rappelons le code du nuanceur de devant :
Ces shaders travaillent main dans la main avec ce code ThreeJS :
Voici ce qui se passe en langage clair :1. j’ai créé un trois. ShaderMaterial pour chaque trois. ParticleSystem. Rappel de la dernière étape qu’il y a six ParticleSystems, un pour chaque catégorie de Instructables, et que chaque ParticleSystem a besoin de deux choses pour être instancié : une géométrie et un matériau. (voir ThreeJS : Getting Started ci-dessus)
2. chaque trois. ShaderMaterial est essentiellement le même à ce stade : ils sont configurés pour utiliser les fragment et vertex shaders chargés dans les balises de script ci-dessus. Citons, entre autres, uniformes et attributs transmis à partir de JavaScript. Ce sont deux des trois types de variables, que vous pouvez envoyer à WebGL. Ainsi, a expliqué sur html5rocks.com:
-Uniformes ne changent pas dans un cadre donné. Ils sont envoyés au fragment et vertex shaders. Dans ce cas, la couleur et la texture (l’image agréable lumineux semblable à une étoile) est la même pour chaque étoile.
-Attributs s’appliquent aux différents sommets. Ils sont envoyés aux shaders vertex seulement. Dans ce cas, les attributs qui peuvent varier de star sont de couleur, la taille et alpha.
-Varyings autoriser les shaders vertex passer des valeurs dans le nuanceur de fragment.
3. avec les trois vides. ShaderMaterials défini, mes prochaines étapes bloc sur chaque Instructable qui apparaît à l’écran. Il passe l’Instructable à une fonction d’assistance qui détermine comment la star devrait apparaître, basée sur le nombre de vues pour ce Instructable :
Dans la version finale du code, je n’en fait varier la couleur des étoiles ! Alpha qui fait pour moi, étant donné que chaque étoile apparaît sur un fond coloré.
4. à l’intérieur de cette boucle, chaque particule est poussé dans un tableau de sommets dans la géométrie :
et un jeu correspondant des valeurs « attributs » est poussé dans le ShaderMaterial correspondant :
Enfin, avec un tableau des géométries de la particule et le tableau correspondant de particules matières, les deux sont fusionnés en un seul tableau de ParticleSystems, et chaque ParticleSystem est ajouté à la scène :
