lunes, 21 de junio de 2010

Guerrer de Moixent: javascript (3DNP) - I parte

Introducción de elementos tridimensionales en la web sin necesidad de aplicaciones externas

Exvoto de bronce que representa un guerrero a caballo. La Bastida de les Alcusses (Moixent, Valencia).
Este trabajo puede consultarse en su ubicación definitiva en la página oficial del Museu de Prehistòria de València.
Puedes manipular el objeto de tres maneras:
  1. A través de los botones de la interfaz gráfica situada en la parte superior.
  2. Con el ratón, moviendo el cursor sobre la imagen (sin necesidad de hacer clic) y utilizando la rueda del ratón para ampliarla o reducirla.
  3. Por medio del teclado con las teclas W (arriba), S (abajo), A (izquierda), D (derecha).

Hugh Laurie
Ficha Técnica:

A) Guerrer de Moixent:
- Modelado, texturizado y composición: Blender 2.5
- Animación y ejecución del script: Blender 2..49b
- Render: Internal de Blender 2.5
- Postproducción: Blender 2.5 y Gimp 2.6.8

B) Modificación del script "3DNP":
- Gedit y Kompozer 0.8
- Análisis de errores mediante "Developer Tools" de Google Chrome y la "Consola de errores" de Firefox.

C) Diseño de la interfaz gráfica:
- Inkscape 0.47 y Gimp 2.6.8

Algunos Detalles:

La integración de contenidos tridimensionales en Internet siempre me ha parecido una cuestión interesante porque puede ayudar a mejorar la experiencia del visitante en una web, al permitirle la interacción directa con objetos virtuales, proporcionando información de una manera muy dinámica y atractiva.

Durante un tiempo he estado investigando sobre distintos recursos que reunieran alguna de estas tres condiciones:
- No ser necesaria la instalación de "plugins" o aplicaciones externas por parte del usuario.
- Ser compatible con la mayoría de navegadores existentes.
- Ser preferiblemente "Open Source" o "Free".

En este sentido, ya hace algún tiempo había  probado soluciones como 'VRML' o 'QTVR' y había visto algunos ejemplos realizados con 'Papervision 3D' en 'Flash'. Sin embargo, ninguno de estos formatos me satisfacía completamente, ya que era necesaria la instalación de aplicaciones de terceros, en la mayoría de los casos con "software propietario". Además, todas estas reticencias se veían aumentadas por los problemas de instalación en múltiples plataformas, así como por el rechazo de la gente a instalar cosas en su ordenador, hecho bastante comprensible si tenemos en cuenta la cantidad de aplicaciones sospechosas que circulan por la Red.

De este modo, dirigí mi vista a la plataforma 'java': la extensión 'java 3D' y la interfaz 'Java 3D API', para la que existe una comunidad de desarrollo que ha realizado estos interesantes ejemplos o estos otros experimentos en Chrome (sin embargo, muchos otros ejemplos no he podido visualizarlos correctamente). Así pues, aunque creo que en un futuro no muy lejano veremos grandes avances en esta dirección, la falta de ejemplos suficientemente "estables" y fáciles de implementar en una web normal, me llevaron a seguir indagando a la búsqueda de algo más sencillo.

Entre los múltiples recursos encontrados, los que más me llamaron la atención fueron:
- Demicron, un programa para publicar contenidos 3d en java y que tiene algunas versiones de prueba.
- 3DNP, un sencillo pero potente visor 'javascript' desarrollado por Thorsten Schlüter. Esta fue mi elección a la hora de realizar este trabajo, por las razones que expongo a continuación:

Este estupendo script reúne muchas de las cualidades que buscaba: no necesita ningún tipo de instalación, es compatible con la mayoría de navegadores y fue desarrollado bajo una licencia GNU pública (GPL), por lo que su uso es libre. Además, permite realizar modificaciones para implementar nuevas funciones, siempre respetando las condiciones de la Licencia. En mi caso, he añadido  y modificado algunas líneas de código para crear un pequeño "zoom in/out" a las imágenes, así como una interfaz básica para poder controlar también el visor mediante botones.

Otro punto a favor de 3DNP, es su integración en Blender mediante un script (de momento sólo funcional en 2.49, si alguien se anima puede adaptarlo a la versión 2.5) que permite crear la secuencia de imágenes que compondrán la visualización en 3D. Posteriormente el 'javascript' se encarga de capturar esas imágenes y componer una matriz que pueda ser visualizada en en nuestro navegador web.

Blender
Blender
Existe un excelente tutorial de Joaquín Herrera (Joaclint Istgud) en el que explica, paso a paso, cómo utilizar 3DNP en una escena con Blender. En principio, no tiene mayor dificultad puesto que se trata de crear tu objeto, importarlo a una escena predefinida que proporciona el propio Thorsten y ajustar distintos parámetros. En mi caso, di un pasito más allá, ya que "bakeé" la animación de la escena para poder ajustar la iluminación, el postprocesado y el render con Blender 2.5.

Blender Sculpt
Blender
En una próxima entrega y para no alargar mucho esta entrada explicaré algo más sobre el proceso y pondré a disposición pública los archivos modificados.
Saludos a tod@s

1 comentario:

  1. Está genial y muy interesante que haya medios libres para hacer este tipo de presentaciones.
    Estaré atento a la próxima entrada ya que me interesa mucho para una pagina web con mi modelos en blender poner una galeria para poder enseñarlos de esta forma y hacer la web más agil sin tener que estar vinculando o incluyendo pesados videos.

    Saludos y gracias por compartir esta información

    ResponderEliminar

¡Me gusta conocer tu opinión! Pregunta si tienes alguna duda, sugerencia o encuentras algún error.

AddThis