Space Apps Hackathon Postmortem

Lo primero que necesitábamos conseguir eran los mapas de color (Albedo) y de altura (Heightmap) de la Tierra. El heightmap nos proporciona la altura de cada punto para saber si una zona está inundada o no en función del nivel del mar.

Conseguir el heightmap fue una de las partes más complejas del proyecto, cosa que no esperábamos. Al igual que con el albedo, empezamos usando una imagen proporcionada por la NASA, pero pronto nos dimos cuenta que no tenía la suficiente precisión para lo que necesitábamos. Nuestra intención era la de mostrar al usuario los efectos que causarían subidas de agua en intervalos de 1 metro.

Las imágenes son normalmente representadas con una profundidad de bits que va de los 8 a los 24 bits. En el caso de los JPEG o PNG (sin transparencia) es de 24, el que cada canal sea de 8 bits significa que tienen 256 valores. El heightmap de la NASA comprime la topografía de la Tierra desde el nivel del mar hasta el punto más alto (8850 metros) en estos 256 valores, es decir, solo teníamos una precisión de ~35 metros por nivel (8850 / 256) y teniendo en cuenta que queríamos representar desde los 0 hasta los 70 metros en intervalos de 1 metro, esta precisión no era suficiente.

Esta API proporciona map tiles de 256x256 con la altura codificada en sus canales RGB. La altura iba de los -10916 a los 8848 metros, con el fin de procesar estos datos y generar un mapa a partir de los tiles que nos pudiese servir usamos Python, Jupyter y NumPy.

2. Una vez teníamos la altura decodificada ya la podíamos acotar al rango que necesitábamos y generar la imagen en escala de grises siendo el blanco 100 metros y el negro -100 metros.

Con los mapas y la geometría preparados el siguiente paso fue crear el shader, ya que el proyecto esta basado en WebGL el lenguaje para su desarrollo fue GLSL. En su prototipado utilizamos Unity y su nuevo Shader Graph, esto nos permitió iterar de una manera mucho más rápida con el fin de llegar a un resultado que nos gustase.

Aplicamos varios efectos como color correction, atmospheric scattering y half lambert lighting, todos ellos optimizados con el objetivo de que la aplicación funcionara en la mayor cantidad de dispositivos posibles. En la siguiente animación se puede ver como cambia el modelo con la aplicación de cada uno de ellos.

El desarrollo de la aplicación web se realizó con TypeScript, React, three.js y Popmotion Pure. Con React creamos la interfaz, three.js nos sirvió para manejar WebGL con una API mucho más accesible y con Popmotion Pure añadimos animaciones. Hay varias cosas que nos gustaría mejorar y añadir pero estamos muy contentos con el resultado conseguido en 36 horas.

Al haber sido ganadores en Zaragoza nuestro proyecto ha pasado a la siguiente fase donde el jurado de la NASA decidirá si merecemos estar entre los 30 finalistas mundiales, de estos 30 saldrán los 6 ganadores que serán invitados a visitar el Centro espacial John F. Kennedy.

Related posts:

Calaif and I talk about music frequently. It’s a large part of both our lives. As it is for most people. I enjoy almost every type of music. I could do without the constant drone of holiday pop tunes…

Think back to a time when you were told not to give up; was it at a sporting event? Was it a teacher telling you not to give up on the work you were failing? Was it a motivational video on Youtube…

whether you have already scanned ample of buildings using various technology or you may want to begin the building scan in order to digitize the building and have an as-built 3d model or you may want…