Representación En tiempo real I (Interactividad)

Representación En tiempo real I (Interactividad)

Qué es una representación en tiempo real (RT)?

En infografía, cuando hablamos de “tiempo real” nos referimos a algo que se hace sobre la marcha y obedeciendo a las intenciones del usuario.

Hasta ahora todo lo que hemos analizado nos ayuda a conseguir una buena representación final (render) que pasa por un proceso de espera, por todos conocido, una vez que se ha preparado el escenario con geometría, materiales e iluminación.

Una película de animación, por ejemplo, pàsa por un proceso de muchas horas de render antes de salir a la pantalla. Los beneficios son que se puede obtener una calidad cinematográfica y gracias a eso podemos apreciar verdaderas obras de arte digital.

Pero actualmente está de moda el intentar que los usuarios que contemplan los resultados de nuestro trabajo también se vean involucrados  y empaticen con  la idea o el producto que queremos presentar. De ahí surgen los conceptos de realidad virtual o presentaciones interactivas, con las que los espectadores pueden ser parte de la forma en la que se presenta algo.

El beneficio es que podemos hacer cosas más cercanas al cliente, por ser menos automáticas como una foto o un vídeo. A cambio remplazamos las horas de espera de render por algunas horas más de trabajo humano, porque necesita un tratamiento especial. Además que exige conocimientos de otras herrmientas además de la aplicación de 3D o del motor de render.

Digamos que va por niveles. El primero serían nuestras visualizaciones estática o animadas con el render de “foto” o el video. Luego vienen las presentaciones interactivas, con las que, mediante el uso de algunas aplicaciones híbridas dotamos a los espectadores de control sobre la escena. Por último está la realidad virtual en la que se pueden ver verdaderas experiencias de inmersión involucrando los cinco sentidos (aquí entran los videojuegos y los paseos virtuales). El tiempo real lo encontramos en la segunda y tercera forma. En esta ocasión hablaremos de la segunda forma.

Con esta interactividad intermedia no necesitaremos de saber programar, pero si trabajremos en otras áreas de preparación y software.

Para ejemplo tenemos la presentación de un juguete de colección en homenaje a la obra de Antoine de Saint-Exupéry: “El principito”

El render final es este:

lepetit_web

También Hemos preparado una pequeña compilación del resultado total en Este video

Una vista rápida al proceso de creación de los elementos principales:

El Zorro.

La  primera vista del  primer  modelo de la escena .

La primera vista del primer modelo de la escena .

 El principito.

Los otros elementos fuerón mucho más simples en construcción por lo que no les ocuparemos tiempo.

 

Iluminación.-

Iluminar la escena en este caso fué trabajo de dos luces: Un domo y una  luz plana de vray. El domo se encarga de la iluminación integra de la escena (mediante IBL) y el plano nos ayuda a mantener el brillo que hemos logrado con nuestros materiales para que siga teniendo la sensación de ser de juguete.

No olvidemos que para que la luz haga su trabajo todo tiene que estar a la escala correcta. un objeto más grande tienen sombras y reacicones a a luz distintas por lo que este objeto tiene que poder recibir la luz como un objeto pequeño.

No olvidemos que para que la luz haga su trabajo todo tiene que estar a la escala correcta. un objeto más grande tienen sombras y reacciones a luz distintas por lo que este objeto tiene que poder recibir la luz como un objeto pequeño.

 

 

Lo que hemos hecho hasta el momento es preparar una escena de forma de que pueda ser renderizada. El render final que encabeza el artículo tardó poco más de una hora en hacerse. Para hacerlo un poco más llamativo lo haremos interactivo. El ususario podrá acercar y alehjar el modelo e incluso jugar un poco con la iluminación. Así podremos aprovechar de todos los detalles en los que trabajamos. Observen que en el render final el zorro no muestra de forma tan evidente sus detalles de material, cosa que si apreciamos cuando lo tneemos de forma individual.

En este artículo haremos referencia a una herramienta “offline” o de escritorio que me permite generar esa interactividad. Se llama Marmoset Toolbag.

Marmoset Toolbag nos permite apreciar el trabajo en tiempo real sin necesidad de saber programar código.

Marmoset Toolbag nos permite apreciar el trabajo en tiempo real sin necesidad de saber programar código.

Para verla en acción con nuestra escena tenemos Este video de muestra  de cinco minutos.

En el artíuclo siguiente (continuación a este) hablaremos de una herrmeinta que nos permite colgar nuestro trabajo en internet sólo teniendo una suscripción. Sólo para ir adelantando pueden visitar la página de Sketchfab.

Respecto al toolbag de Marmoset. es un software que nos permite aprovechar las técnicas y tecnología de los motores de videojuegos para crear un turntable interactivo, una vista de 360 grados, de nuestro producto. Los beneficios son que no dependemos de conexión a internet para crear nuestras vistas y que teóricamente no tenemos limitación de polígonos, así que podemos crear las vistas con mallas bastante complejas. Además que tiene soporte para multi sub objetos en los materiales. El software es muy completo ya que nos permite incluso crear un visor “marmoset viewer” para colgar nuestro trabajo en nuestra web mediante javascript.

En el futuro se planea poder ser compatible con todas las webs sociales y de galerías de artistas, de momento sólo Artstation es compatible para subir directamente el trabajo del visor. Sólo que allí sólo se permite una archivo de como máximo 15 megas. Modelos más grandes no entran. El principito tiene 15,5 megas y no estaba listo para Artstation.

Preparación para Marmoset Toolbag.

Si el proceso de render es largo, es porque la máquina tiene que calcular como afecta la luz sobre cada uno de los aspectos de cada material (color, relfejos, refracciones,brilllos,etc.).

Para el tiempo real es necesario tener “pistas” que simplifiquen ese cálculo. Esas pistas son mapas (recuerden que los mapas son imágenes) que irán en determinados canales del material para ahorrar el trabajo de calcular el resultado. Marmoset toolbag o cualquier otra aplicación sabe leer esas pistas ya que se encuentran impresas en el mapa de coordenadas  de cada elemento de nuestra escena.

El resultado sería algo como la siguiente galería.

Mapas usados para el zorro.

El proceso para extraer esta información y plasmarla en el mapa de coordenadas del objeto puede venir de varias vias porque hemos utilizado varios programas. Pero si nos limitamos a MAX tenemos que las fuentes son las utilidades “render to texture” y “Render Surface map”

frommax

Render to texture.

Hasta este punto puede que la pregunta sea: “porqué nos hemos molestado en preparar todo para un rnder si luego haremos trampa” y es que para plasmar toda la información sobre el mapa, necesitamos que haya algúna forma de calcular esos valores. Por eso es importante el motor de render. A pesar de que no se aprecie en la presentación interactiva, es gracias al motor que obtenemos los mapas de textura para cada canal. En este artículo sólo diremos que se transfiere la información de l cálculo de luces a un mapa. En realidad la teoría detrás de esto es muy amplia y las perosnas que hacen videojuegos y realidad virtual la estudian muy a conciencia. Si quieren informarse más sobre este tema busquen el término “texture baking” (textualemtne se traduce como jorneado de textura).

El beneficio de extraer esta información en forma de mapas es que luego en el motor de render no sería necesario iluminar nada porque el objeto ya sabría que presentarnos. y así nos evitasmos tener que renderizar para cada fotograma. El contra tenemos que hay que hacer el trabajo de extracción de mapas por cada elemento que querramos que funcione de esa forma.

Ejemplo de cómo se plasmaría el difuso del cuerpo del principito sobre las UV's.

Ejemplo de cómo se plasmaría el difuso del cuerpo del principito sobre las UV’s.

Con el objeto seleccionado entramos al menú de “render to texture” y nos encontramos con su menú de configuración.

Hay varias cosas que podemos hacer desde esta menú. Sólo mencionaremos lo que nos sea importante para este caso.

Hay varias cosas que podemos hacer desde esta menú. Sólo mencionaremos lo que nos sea importante para este caso.

Describimos las partes del menú a continuación.

La primera parte  es dispensable porue sólo sirve para elegir que tipo de render se va a hacer (si es que se tiene uno configurado de froma especial para el efecto) y da una ruta de salida de archivos que no solemos usar poque luego se peude espcificar a dónde irá cada mapa que extraigamos.

La primera parte es dispensable porque sólo sirve para elegir que tipo de render se va a hacer (si es que se tiene uno configurado de froma especial para el efecto) y da una ruta de salida de archivos que no solemos usar poque luego se peude especificar a dónde irá cada mapa que extraigamos.

 

La segunda parte "objects to bake" nos lista los objetos que intervendrásn en la extracción de mapas. En teoría se pueden hacer extracciones de varios objetos al mismo tiempo, pero es conveniente ir con cuidado porque dependiendo de la capacidad de nuestra máquina esto puede colgar al programa. aunque resulte algo tedioso y si no es abolutamente necesario es mejor ir objeto por objeto. En nuestro caso elegimos el cuerpo. Lacasilla "enabled" nos dice que en efecto ese objeto va a ser calculado. Solo ns queda la parte de projection mapping y Mapping coordinates. Sasegudna es la nuestra y nos debemos asegurar que esté elegida la opción "use existing channel" junto con el número uno. En lka mayoría de casos no tendremos más de un canal (el primero) sobre el que habrmoes mapeado. En este apartado se elige el mapa de coordenadas al que hay que dirigir la infromación extraída.

La segunda parte “objects to bake” nos lista los objetos que intervendrásn en la extracción de mapas. En teoría se pueden hacer extracciones de varios objetos al mismo tiempo, pero es conveniente ir con cuidado porque dependiendo de la capacidad de nuestra máquina esto puede colgar al programa. aunque resulte algo tedioso y si no es abolutamente necesario es mejor ir objeto por objeto. En nuestro caso elegimos el cuerpo. La casilla “enabled” nos dice que en efecto ese objeto va a ser calculado. Solo ns queda la parte de projection mapping y Mapping coordinates. Sasegudna es la nuestra y nos debemos asegurar que esté elegida la opción “use existing channel” junto con el número uno. En la mayoría de casos no tendremos más de un canal (el primero) sobre el que habremos mapeado. En este apartado se elige el mapa de coordenadas al que hay que dirigir la infromación extraída.

Si bien no podremos hacer el cálcul de varios objetos, si podremos sacar la infromación de todos los canales necesarios de una sola tirada. Perimeo elegismo añadir canales con el botón "Add" (1) para que nos abra la lista de canales disponibles (2) Como usamos vray tendremos que elegir sólo los canales que llevan vray como prefijo. Los mapas que extrajimos de aquí fueron: Vray DiffuseFilterMap (para el color) VrayReflectionmap (para la información de reflejos) VrayCompleteMap (para el color con todo el resto de información añadido). VrayReflectioGlossines (para los brillos)

Si bien no podremos hacer el cálculo de varios objetos, si podremos sacar la infromación de todos los canales necesarios de una sola tirada. Primero elegismo añadir canales con el botón “Add” (1) para que nos abra la lista de canales disponibles (2) Como usamos vray tendremos que elegir sólo los canales que llevan vray como prefijo. Los mapas que extrajimos de aquí fueron: Vray DiffuseFilterMap (para el color) VrayReflectionmap (para la información de reflejos) VrayCompleteMap (para el color con todo el resto de información añadido). VrayReflectioGlossines (para los brillos). Luego en la parte inferior elegimos el tamaño de salida (generalmente lo más grande que se pueda) y en la casilla “file name and Type” le decimos donde guarda el mapa y en que formato.

 

En esta parte se define que hacer cuando se termine de el "baking". Las dos opciones son 1.- reemplazar el material qctivo con la nueva versión o 2.- crear un material cominado (shell) para mostrar los dos materiales.. En nuestro caso no haremos nada. Así que este menú no tiene efecto para nosotros.

En esta parte se define que hacer cuando se termine de el “baking”. Las dos opciones son 1.- reemplazar el material activo con la nueva versión o 2.- crear un material cominado (shell) para mostrar los dos materiales.. En nuestro caso no haremos nada. Así que este menú no tiene efecto para nosotros. Para obligarle a omitir este paso activaremos la casilla “render to files only”.

Esta parte sólo es válida si se ha elegido en el segudno apartado la opción de "use automatic unwrap" que es la solución rápida pero poco adecuada cuadno no se quiere invertir el tiempo en un desplegado de UV's correcto.

Esta parte sólo es válida si se ha elegido en el segundo apartado la opción de “use automatic unwrap” que es la solución rápida pero poco adecuada cuando no se quiere invertir el tiempo en un desplegado de UV’s correcto.

Después de configurar todo, lanzamos el render desde el botón del mismo menú. Si lanzamos el render desde el menú de render no tendremos la extracción sino un render normal.

Una vez extraídos los mapas procedemos a exportar un modelo especial de nuestra escena para que sea legible en Marmoset. El software acepta dos extensiones muy conocidas: FBX y OBJ.

La segunda suele ser una elección acertada para la mayoría de los casos.

Render surface map.

Este menú nos permite extraer información en escala de grises en base a la topología del objeto y no a su cálculo de luces. Suele ser bastante rápido y es adecuado para obtener variada información de la geometría.

surfacemapPrimero tenemos el selector de medidas (1). Elegiremos siempre dimensiones iguales para que el mapa sea siempre cuadrado. Para que todos los mapas sean congruentes renderizaremos mapas de 2048.

El map channel (2) hace referencia a lo mismo que en el “render to texture” el canal en el que se ha desplegado la malla. Si no se ha hecho de forma específica todo se suele desplegar en el canal 1

El “cavity map” (3) es el equivalente al mapa de bump porque señala las diferencias de  relieve en una superficie.

El “density map” (4) indica donde se encuentra la mayor y menor concentración de polígonos.

El “dust map” (5) indica aquellos polígonos que son totalmente paralelos a al plano z en blanco y hacia el negro para los que llegan a ser paralelos al plano XY o perpendiculares al Z).

El mapa de subsuperficie “subsurface map” (6) nos informa de la densidad relativa del modelo. Zonas más finas y suceptibles a la translucidéz son señaladas en blanco mientras que las zonas oscuras son más gruesas. Cuadno se quiere tener piel o tneer materiales translúcidos esta es la infromación adecuada.

Por último en (7)  tenemos al “occlusion map” Mapa de oclusión. que nos muestra las zonas de la geometría que chocan con algo  o que se aislan de la luz (ocluyen).

No todos los mapas son útiles ni obligatorios. Es nuestro criterio el que nos permitirá saber cuando aplicar uno u otro.

En el siguiente artículo analizaremos la estructura de marmoset toolbag y como temrinar de cargar nuestro modelo.

 

Escribe un comentario