Paso 8: Three.js: un brillo diferente para cada estrella: WebGL Shaders
Estrellas no son uniformes. Son diferentes tamaños, diferentes brillos y colores diferentes. Mi truco con tener seis objetos de antes no parece aplicarse aquí: realmente quería cada estrella sea único y para reflejar la importancia relativa del proyecto. Básicamente, los proyectos que son las "estrellas brillantes" deben brillar. Cada vértice único es un perfecto uso de shaders de WebGL. Recordar el código de sombreado de antes:
Estos shaders trabajan mano a mano con este código de ThreeJS:
Aquí está lo que está sucediendo en Inglés:1. configurar un tres. ShaderMaterial para cada tres. ParticleSystem. Memoria del último paso que hay seis ParticleSystems, uno para cada categoría de Instructables, y que cada ParticleSystem necesita dos cosas para ser instanciada: una geometría y un Material. (ver ThreeJS: Introducción encima)
2. cada tres. ShaderMaterial es esencialmente el mismo en este punto: están configurados para utilizar el fragmento y vertex shaders cargados en las etiquetas de secuencia de comandos anteriores. Incluyen uniformes y atributos pasado en desde el JavaScript. Estas son dos de los tres tipos de variables que se puede enviar a WebGL. Así explicó el html5rocks.com:
-Uniformes no cambian dentro de un marco determinado. Se envían al fragmento y vertex shaders. En este caso, la imagen de color y textura (la imagen estrella brillante agradable) es el mismo para cada estrella.
-Atributos aplican a los vértices. Se envían para sombreadores de vértices sólo. En este caso, los atributos que pueden variar por estrella son color, tamaño y alfa.
-Varyings permiten los sombreadores de vértices pasar valores en el shader del fragmento.
3. con los tres vacíos. ShaderMaterials definido, mis pasos de bloque sobre cada Instructable que aparece en pantalla. Pasa el Instructable para una función auxiliar que determina cómo debe aparecer la estrella, basado en el número de vistas de este Instructable:
En la versión final del código, en realidad yo no varían el color de las estrellas! Alfa hace por mí, ya que cada estrella aparece sobre un fondo coloreado.
4. dentro de este bucle, cada partícula se empuja en una matriz de vértices de la geometría:
y un conjunto correspondiente de "atributos" valores es empujado en el ShaderMaterial correspondiente:
Finalmente, con una gran variedad de geometrías de la partícula y gama correspondiente de partículas materiales, los dos se fusionan en una sola matriz de ParticleSystems y cada ParticleSystem se añade a la escena:
