Visualización Científica - The Visualization Toolkit (VTK)

Que es VTK?

VTK es una librería open source diseñada para le procesamiento de imágenes, gráficas 3D y visualizaciones de cualquier tipo. Esta librería contiene una gran cantidad de algoritmos encargados de soportar dichas funcionalidades.

VTK se encuentra basada en C++ lo cual implica que es un diseño orientado objetos; sin embargo, también contiene interpretadores para Java, Python y TcL/Tk.

Arquitectura

La arquitectura de esta librería esta dividida en 2:

1. En primer lugar tenemos una arquitectura que instala el minino de librerías necesarias en una instalación binaria la cual esta dentro del núcleo de C++. Para poder interpretar esta instalación en cada uno de los lenguajes soportados se requerirá un mínimo respectivamente.
2. Si ya se quiere una instalación completa (para extender funcionalidades), se instala el código fuente de la librería que también se ubica en el mismo núcleo. Ya para la interpretan tendremos que tener la fuente de cada uno de los lenguajes que queremos interpretar.

Modelo de Objetos

Como se menciono anteriormente, esta librería al estar basada en C++ posee un diseño orientado a objetos y debido a esto encontramos 2 modelos de objetos importantes:

1. Modelo/Objeto Gráfico: Este modelo es el responsable del render y generar las imágenes finales.
2. Modelo/Objeto de Visualización: Es el encargado de generar los objetos gráficos para representar los datos

con esto presente tenemos una primera instancia de lo que es el Pipeline de ejecución

Pipeline de Ejecución

Anteriormente se hizo un primer acercamiento a lo que es el pipeline de ejecución en donde llegan los datos y se pasan al modelo de visualización y este genera los objetos gráficos. A continuación se explicara lo que pasa dentro de cada uno de estos modelos.

1. Source: Este representa la fuente de los datos que entran al sistema
2. Filter: Transforma los datos en geometrías u otros formatos para mostrar.
3. Mapper: Intermediario entre el modelo de visualización y el modelo gráfico; convierte la salida de los filtros en algo que se pueda mostrar.
4. Actor: Son los objetos gráficos (Figuras primitivas)
5. Render: Se encarga de renderizar o mostrar los actores en una ventana

Pero que tiene que ver todo esto con WebGL?

Buscando en la web encontré que un muchacho apodado Jourdain creo una librería en Webgl que pretende ser un subconjunto de VTK y la bautizo como VTK.js (pueden verla en este enlace). Esta librería funciona instalándola en con node.js.

Ejemplo

Lo  primero que se realiza en el código es crear la renderWindow y se le coloca un fondo que en nuestro caso sera de color negro.

const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({ background: [0, 0, 0], });
const renderer = fullScreenRenderer.getRenderer();
const renderWindow = fullScreenRenderer.getRenderWindow();

Posteriormente, se procede a crear las elevaciones del terreno, esto se logra a traves de una nueva instancia de vtkElevationReader. Esta recibe 3 parametros:

• xSpacing: Que tan separados estaran los puntos a lo largo del eje x
• ySpacing: Que tan separados estaran los puntos a lo largo del eje y
• zScaling: La magnitud que deseamos que tenga el punto con respecto a su valor original

const reader = vtkElevationReader.newInstance({
xSpacing: 0.01568,
ySpacing: 0.01568,
zScaling: 0.06666,
});



Adicionalmente podemos observar que se crea tanto el mapper como el actor. Al mapper se le debe pasar por parámetro el puerto de salida y al actor se le pasa el mapper como parámetro. Finalmente al renderer le pasamos el actor y procedemos a renderizar la ventana.

const mapper = vtkMapper.newInstance();
const actor = vtkActor.newInstance();

mapper.setInputConnection(reader.getOutputPort());
actor.setMapper(mapper);

renderer.addActor(actor);
renderer.resetCamera();
renderWindow.render();



Ahora bien procederemos a agregar la textura. En primer lugar se crea una constante la cual va a ser una nueva instancia de imagen y a esta se le pasa la locación de la misma (como se ven en la ultima linea). Ya definida la imagen se procede a crear una función que se llama cuando carga la imagen y se encarga de pasarla como textura de nuestra visualización. Dentro de esta función se crea una constante que representa la instancia de la nueva textura, a esta instancia la interpolamos para así ajustar los puntos a la figura y finalmente colocamos la imagen como textura para ser renderizada.

const img = new Image();
img.onload = function textureLoaded() {
const texture = vtkTexture.newInstance();
texture.setInterpolate(true);
texture.setImage(img);
actor.addTexture(texture);
renderWindow.render();
};

img.src = `${__BASE_PATH__}/data/elevation/dem.jpg`;



Para finalizar el ejercico tenemos que colocar el origen de los datos de los puntos que componen nuestra geografia y luego renderizarlos.

reader.setUrl(`${__BASE_PATH__}/data/elevation/dem.csv`).then(() => {
renderer.resetCamera();
renderWindow.render();
});

En el siguiente link se puede observar un demo interactivo con su respectivo código fuente.

La tabla de tiempo de la actividad se puede encontar en el siguiente link