Explicacion Ejemplo WebGL - Solar System in WebGL

En este post hablaremos acerca de una aplicación en WebGL que utiliza la librería de Tree.js y e sun sistema solar personalizado.
Enlace del repositorio
Demo

Este proyecto aparte de utilizar la libreria de Tree.js maneja 3 archivos JS sumamente importantes que son:

Main.js

En este archivo quiero destacar 2 partes importantes del codigo:

• La creacion de la perspectiva de la camara se hacer por medio de un metodo que ofrece la lbreria llamado PerspectiveCamera donde se recibe como parametros el taamao del frustum, el radio del frustum, el valor mas lejano y el valor mas cercano. Posterior a eso, se decide la pocicion en la que esta camara se ubicara para finalmente rederizar todo el universo.
  
• En segunda instancia se arma en formato JSON lo que es el sistema solar por medio de una funcion llamada generateMap y esta a su vez invoca un metodo que se explicara espues llamado SolarSystem.
  

SolarSystem.js

En este archivo, despues de definir el contenido del Sistema Solar, aca ya se empieza a hacer la creacion de cada uno de los planetas y estrellas que lo componen. En este archivo cabe destacar una serie de funciones:

• Acá encontramos la funcion SolarSystem de la que hablábamos en el archivo anterior. Como primer paso debemos pasárle un parámetro (el cual llaman o) que es donde va a estar toda la información del JSON del sistema solar. Se define una variable la cual va a ser nuestro sistema solar y por medio de llamados comunes definimos los atributos a partir de la información del JSON. Cabe resaltar que ss.star sera el arreglo de cada uno de los planetas y estrellas que componen el sistema solar y que con el ss.parent = new THREE.Object3D(); se le daran una serie de métodos y propiedades que permitirán la manipulación del objeto en un espacio 3D.
  
• Después vemos como se empieza a prototipar lo que es el centro del sistema Solar Se define una estrella "Sun" y sus atributos os podemos encontrar en el JSON de planetas.
  
• Dejando lo mejor para el final esta la definicion de la matriz de elementos y aca vale la pena acalarar diferentes puntos.
  • La variable de material le va a dar una textura a las lineas que compondrán la matriz de proyección. THREE.LineBasicMaterial le dará un color metálico grisáceo que nos permitirá crear contraste con el fondo del sistema.
    
  A Partir de acá crearemos las lineas que se mencionaron anteriormente
  
  
  • A la variable geometry, definida como una geometría gracias a THREE.js, le agregamos un par de vértices (un vértice es el origen y el otro va del origen al radio de la matriz). ¿De que sirve esa variable AXIS? Como se puede apreciar, luego se realizara un ciclo en donde estaremos pintando una circunferencia dividida en AXIS partes iguales, estas son las lineas que salen del origen de nuestra visualización. Ahora bien, también existe una variable llamada ROUND que, con el mismo funcionamiento del ciclo anterior, acá pintaremos son círculos concéntricos de radio igual a SystemaSolar.radio/ROUND. Cabe destacar que esta matriz estará expandida en el plano XZ únicamente.
    

Globe.js

Finalmente en esta ultima parte vamos a dibujar y stablecer las rotaciones de cada uno de los planetas y satelites del sistema solar que queremos crear., para esto contamos un una sere de funciones importantes:

• La primera funcion nos va a permitir definir el codigo que representa cada planeta y sus satelites. Aca cabe la pena destacar 3 Object3D importantes:
  • axis_one: eje jerarquico de los planetas
  • pivot: eje de rotacion del centro del sistema
  • axis_two: eje jerarquico de los satelites
  Todos los parametros funcionan del mismo modo que la estrella central definida en el SolarSystem.js con la unica diferencia de que dependiendo si es satelite o planeta se agrega al axis_one o axis_two.
  
  
• La funcion buildSatellites como su nombr elo indica sera la encargada de crear os satelites definidos en cada uno de los axis:two correspondientes a los planetas padre.
  
  
• Una de las funciones mas importantes es fuseAnimationWithObject en donde se establece tanto la rotacion como la translacion de cada uno de los componentes del sistema solar. Aqui vemos que, como en el JSON se definio el valor del tiempo de rotacion, este se utilizara para establecer el tiempo que durara en dar una vuelta en torno al pivot.
  
  
• El drawRevolutionCircle nos permitira pintar la elipse en la cual el planeta se estara trasadando al rededor de la estrella central del sistema. ¿Como saber que es un circulo? Primero se define una variable que representara la forma de la trayectoria, esta invoca una funcion de la libreria de TREE llamado Shape la cual la define como una figura plana en 2D. al tenr definida esta figura como un shape se procede a darle forma con la funcion .absarc la cual recibe como parametros las coordenadas X Y del centro, el radio, el angulo de inicio y el angulo final en radianes y si se pinta en el sentido de las manecillas del reloj o no. La variable points que se ve representada por el metodo createPointsGeometry nos dira cuantos segmentos se requeriran para completar la geometria propuestam en nuetro caso esta trayectoria se lograra con 100 segmentos. Para finalizar se le agrega un valor al tipo de textura que queremos para este circulo de trayectoria y tambn se le coloca un valor de rotacion estandar.
  
  
• Como ultimo y no menos importante, por fin se dibuja cada planeta o satelite gracias a drawGlobe. Aca en ese metodo tenemos 2 variables sumamente importantes
  • geometry: indica la geometria del planeta que en nuestro caso seran esferas con 16 meridianos y 16 longitudes.
  • material: indica cual sera e material que le daremos a las linas de nuestra esfera, este material (meshBasicMaterial) es muy basico y no refleja luces.
  Una ves tenemos definidas esas 2 variables procedemos a combinarlas con la funcion THREE.Mesh y asi creamos cada uno de los planetas y satelites.