Blend4Web y CittaVR


Blend4Web es una herramienta de código abierto que permite interactuar con modelos 3D a través de internet, utilizando un navegador, y sin necesidad de instalar plugins.

blend4web_scheme

En nuestro caso utilizaremos dicha herramienta para poder acceder al modelo de la ciudad con la que estemos trabajando y, puesto que podemos encontrarnos con algunos problemillas de materiales y texturas, en este post se explica el procedimiento para evitar “muros invisibles” (figura 1) o materiales que aparecen solamente en ciertas caras de los edificios (figura 2).

captura-de-pantalla-de-2016-02-08-192056
Figura 1. Las caras de algunos objetos no son mostradas correctamente
captura-de-pantalla-de-2016-02-08-192137
Figura 2. Los materiales no son aplicados en todas las caras de algunos objetos

Preparando el modelo

Una vez hayamos generado la ciudad podemos exportar el modelo como html o json con el plugin de Blend4Web (que habremos instalado previamente) haciendo clic en File > Export > Blend4Web (.html) o File > Export > Blend4Web (.json).

Si intentamos exportar el modelo tal cual es generado por CittaVR nos encontramos con que algunos edificios no se muestran por completo (figura 1). Para solucionar este problema:

  1. Cambiamos el Render Engine a Blend4Web.
  2. Seleccionamos el objeto buildings.
  3. En las propiedades del objeto pinchamos en material y desmarcamos el checkbox Backface Culling de Rendering Options.

Al exportar de nuevo, aunque ya aparecen los edificios, el material de estos solamente se muestra en alguna de las caras del objeto. Esto ocurre porque la luz de la escena no actúa sobre todas esas caras. Marcaremos el checkbox Double-Sided Lighting que se encuentra en las propiedades de los materiales del objeto, como vimos antes, en el campo Shading.

Ahora la ciudad se ve correctamente (figura 3). Resultado en anarubioruiz.bitbucket.org

captura-de-pantalla-de-2016-02-08-192204
Figura 3. Resultado al seguir los pasos indicados
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s