Paso 6: Three.js: sistemas de partículas
WebGL y ThreeJS por extensión, son grandes en Mostrar mallas grandes y detallados en 3-space. Consisten en lo que muchos modelos 3D, y aun cuando los modelos son otras cosas ("sólidos" o "NURBs") eventualmente se representan en la pantalla del ordenador por primero convertirse en supuesto "mallas de procesamiento".
"Puntos" no son realmente una cosa.
Sistemas de partículas son básicamente una forma de gestión de geometría 3-dimensional de la malla donde usted no se preocupa por los bordes. Si olvida sobre los bordes de una malla, hacerlos invisibles y luego dar algún tipo de punto de calidad de materiales a las intersecciones, tiene un sistema de partículas. Sistemas de partículas permiten mover todos los puntos de una malla en forma independiente y pueden ser ideales para efectos que típicamente se presentan como partículas. Sí, podría modelo un reloj de arena así como las partículas individuales de arena flujo más allá de unos a otros, pero también se podría hacer algo como las nubes, nieve, sí, estrellas, autoorganización locoo un Santo lío. Vértices son poderosos de otras maneras también. Si estás dispuesto a escribir usted mismo un sombreador de vértices, es bastante rápido para llegar a una bola de buen cromo.
Realmente no utiliza sistemas de partículas para mucho, pero threejs es fácil aplicar materiales sólo de vértice a particlesystems. Sistemas de partículas van mano a mano con materiales de sistema de partículas. Así que en lugar de cubegeometry + material = cubo (desde arriba), podemos decir que particleSystem + particleSystemMaterial = Object3D y añadir que a la escena. Para más detalles sobre esta versión básica, recomiendo tutorial de Aerotwist de partículas. Acabé pasando de una manera ligeramente diferente: mis propia shaders vertex y fragmento rodado custom.
El JavaScript es lo suficientemente hacia adelante:
Pero los elementos "vertexshader" y "fragmentshader" mencionados código WebGL de un planeta alienígena:
Escribir este código de sombreado fue penoso para mí, porque no conozco WebGL y todavía no. Qué aprendido en el camino, además de algunas minucias que no son útiles para compartir, fue un hecho interesante. Nunca supe por qué es útil una GPU. Sin duda, es bueno tener un segundo procesador. Pero ¿por qué no dos CPU? ¿Sólo porque un GPU es más barato?
La diferencia es el procesamiento en paralelo. Para que la arquitectura de la CPU pintar cada pixel en la pantalla, básicamente tiene que seguir el código que hace cada píxel en secuencia:
El código de la GPU se ve diferente porque GPU proceso píxeles en paralelo, no secuencia. Aplicar un efecto a toda la pantalla a la vez y efectos de capa de unos a otros. Esto le permite hacer algunas cosas realmente interesantes con muy poco código. Ver postprocesado más adelante para un gusto.