Panda3D : ShowBase, The Scene Graph

En construcción...

PANDA3D: Embebido en Web

Es este tuorial aprenderemos a colgar nuestras aplicaciones de Panda3d en la web.

Lo primero que tenemos es bajarnos el software openssl, es para crear nuestro certificado. Este no es mas que un fichero con los datos del autor, para dar mayor confianza a la hora de ejecutar dicho software.

Para crear un certificado (Ms-dos):

openssl genrsa 1024 > mycert.pem

 Para introducir los datos de tu creación y autor (Ms-dos):

openssl req -new -x509 -nodes -sha1 -days 365 -key mycert.pem >> mycert.pem

Con esteo tenemos el fichero mycert.pem, que nos valdrá, para todas las aplicaciones de panda3d que colguemos en la web.

Siguiendo los tutoriales anteriores, crearemos un proyecto o usaremos uno existente.

• Primero que debemos hacer es crear la la raiz de nuestro proyecto un main.py, será por el que pregunte nuestro P3D, y despues tendremos la estructura de carpetas necesarias para arrancar la aplicaciones. Para las imagenes, videos, audio, modelos... la estructura de carpetas y nombres deben de ser iguales que en nuestro PANDA3D_HOME, si dentro hemos metido nuestras imagenes y modelos, los cogerá de ellos, si no lo hemos introducido arrancará con las imagenes del PANDA3D_HOME donde esté ubicado nuestro fichero P3D.

Ahora bien una vez echo la estructura:

Src-
    main.py
    img
    ...

Ejecutamos en siguiente comando:

packp3d -S mycert.pem -o myapp.p3d -d c:/src 

Con el certificado, esto nos creará un fichero lamado myapp.p3d, una vez echo esto abrimos cualquier editor y copiamos y pegamos el siguiente codigo:

<object width="640" height="480"
  type="application/x-panda3d" data="myapp.p3d">
</object>

Guardamos el editor y le ponemos el nombre que queramos .HTML, lo ejecutamos en un navegador y ¡¡¡¡WALAAAA!!!! tenemos nuestra aplicación corriendo en la web. A continuacion hemos creado un ejemplo, para ver como se ejecuta nuestra aplicación en la web.

(Si pareciera quedarse congelado el navegador de internet, cerrad la pestaña o la ventana y volved a acceder al blog, salvo IE que quizás necesitéis reiniciar el PC)

Controles:

• Botón izquierdo del ratón: subir/bajar la vista, deslizar a izquierda/derecha la vista
• Botón derecho del ratón: acercar/alejar la vista
• Botón central del ratón (rueda): girar la vista

Para visualizar este ejemplo, debeis instalar el WebRuntime de Panda3D.

PANDA3D: Modelos para ejemplos

Hemos creado un par de modelos muy simples y cutres (no somos modeladores :D) pero que cubrirán nuestras necesidades para los futuros tutoriales, ya que podremos ver cómo mover el coche sobre el escenario, las colisiones, la física, sonidos, luces, sombras, etc. Para los que tengan interés en seguir los tutoriales, subimos los modelos a Megaupload para que los puedan usar. Los archivos .egg debéis copiarlos a la carpeta models de Panda3D y los .tga en la carpeta maps dentro de models. Listo.

• Modelos y texturas: http://www.megaupload.com/?d=WLXMT9KK (Actualizado con los modelos correctos)

PANDA3D: Exportar modelos desde Blender para usarlos en nuestro juego con Panda3D

Vamos a explicar cómo exportar correctamente desde Blender un modelo que creemos para poder utilizarlo en nuestro juego desarrollado en Panda3D. No voy a explicar cómo usar Blender ni cómo modelar en él, ya que se escapa del alcance del tutorial. Para ello podeis acudir a webs como:

• http://alexv3d.blogspot.com/2007/11/videotutoriales-para-iniciarse-en.html
• http://www.blender.org/education-help/tutorials/

o dando una vuelta por Google, ya que la comunidad es inmensa.

Partamos de la situación en la que tenemos un modelo y queremos añadirle una textura para que el exportador a Panda3D la reconozca correctamente (si no, no se verá la textura al cargar el modelo en nuestra aplicación). El exportador que utilizaremos se llama Chicken Exporter, y en su web podeis descargar la última versión del plugin para Blender.

Para instalar el plugin debéis buscar la carpeta .blender que este crea y es donde se encuentran los plugins y scripts de python que utiliza el mismo. Descomprimiremos lo que descarguemos de la web de Chicken Exporter y copiaremos las carpetas y los .py de su interior directamente en la carpeta scripts dentro de .blender, respondiendo afirmativamente si nos pregunta sobreescribir archivos.

Abrimos Blender y podemos verificar si está correctamente instalado el plugin accediendo a la ventana de Scripts y en el menú Scripts > Export debería de haber una opción llamada Chicken que exporta en .egg

Pasamos a abrir el modelo que queremos texturizar. Para los que sepan manejar Blende, lo que vamos a hacer es crear texturas UV (no se el nombre técnico), desdoblando las caras del modelo y luego con la plantilla de estas colocar la textura como queramos que se vea mediante un programa de manipulación de imágenes. Tras abrir el modelo lo tendremos en pantalla tal que así.

Añadimos una ventana donde visualizaremos la vista UV/Image editor. Tras esto, seleccionaremos el modelo con el botón derecho del ratón y pulsaremos TAB para entrar en modo edición. Pulsaremos la tecla A para seleccionar todos los vértices y aristas si no lo están ya y pulsamos la tecla U. En el menú que aparece seleccionamos Unwrap o Unwrap (smart projections) dependiendo de la complejidad de nuestra figura y de con cual opción dibuje mejor plantilla para luego crear la textura. Quedando una cosa así.

Ahora realizaremos un paso opcional que solo seguiremos si queremos crear una textura detallada de un modelo, por ejemplo si tenemos una puerta y queremos darle distintas texturas a cada parte de esta, los bordes, la puerta, el pomo, etc.

OPCIONAL: En la vista UV/Image editor nos dirigimos al menú UVs > Scripts > Save UV Face Layouts... y pulsamos OK en la ventana que se abre. Seleccionamos en el explorador dónde queremos guardar el fichero .tga que generará la plantilla para crear la textura con cada cara del modelo. Usaremos esta plantilla con un programa de edición de imágenes para crear la textura a nuestro gusto ya que al tener la plantilla, sabremos dónde debe de ir la textura del borde, de la puerta, el pomo, etc. (en el caso que fuera, por ejemplo, una puerta). Guardaremos la textura con la extensión que queramos.

Para cargar nuestra textura iremos al menú Image > Open... y buscaremos la imagen que queremos usar como textura (si seguimos el paso opcional, buscaremos esta imagen que al abrirse se verá debajo de la plantilla y podremos verificar que todo está en su sitio). Obteniendo como resultado algo así.

Ahora debemos decirle a Blender que utilice esa imagen como textura y que sea UV. Para ello salimos del modo edición pulsando en TAB de nuevo. Para acceder a las opciones de los materiales y texturas pulsamos la opción de Shading en el menú de botones teniendo el modelo seleccionado. Apareciendo algo así.

Pulsamos en Add New y nos creará un material para el modelo. Ahora vamos a la derecha del todo (para moverse si las opciones se salen de la pantalla, dejamos pulsado el botón central del ratón y lo movemos) y en la sección de Texture pulsamos en el botón Add new. Debemos indicarle a Blender (para que al exportarlo podamos modificar la ruta de las texturas) que debe tratar las texturas como UV. Para ello vamos a la pestaña Map Input y pulsamos la opción UV (junto a Orco). Ahora accedemos a las opciones de textura, que se vería así.

En Texture Type seleccionamos Image y nos aparecerán más opciones. A la derecha del todo está la opción Load. No la pulsamos, en su lugar le damos al botón con flechas que hay pegado a la izquierda de este botón y en la lista aparecerá la imagen que queremos usar como textura, la seleccionamos.

Pulsamos F12 para ver cómo ha quedado nuestro modelo texturizado.

Ahora procederemos a exportar el modelo. Para ello abrimos una ventana de Script y accedemos al menú Scripts > Export > Chicken (.egg)... Aparecerá una ventana como la siguiente.

Seleccionamos el modelo que queremos importar (botón derecho del ratón) y pulsamos en Update Selection, cada vez que seleccionemos un modelo distinto debemos pulsar ese botón. A continuación en Select indicaremos dónde se almacenará el archivo con el modelo en egg, en nuestro caso podemos ponerlo en la carpeta models de Panda3D. Pulsamos Export y esperamos hasta que nos indique de que esta ha terminado.

Esto nos generará un archivo .egg con nuestro modelo, este no es mas que un archivo de texto plano con los datos que usará Panda3D para mostrarnos este en el entorno 3D. Si lo intentáramos usar ahora mismo, seguramente obtendríamos una figura completamente blanca o si colocamos luces, gris. Esto es porque no está utilizando la textura que le indicamos en Blender, para ello accedemos a la carpeta donde hemos colocado el archivo .egg y lo editamos con cualquier editor de texto (aunque recomiendo Notepad++) y buscamos la etiqueta . Veremos que está indicando una ruta relativa que seguramente será incorrecta (si no lo es, no tocamos nada), algo como “./../../ruta/a/la/textura.png” donde ./ es la carpeta donde se encuentra el archivo .egg . Para solucionarlo debemos indicar una ruta relativa de donde se encuentra la imagen de la textura respecto donde se encuentre el .egg, en nuestro caso hemos copiado la textura a la carpeta maps dentro de models, por lo que sustituiremos la ruta por “./maps/textura.png”

Para ver si todo está correcto, abrimos una consola y en la carpeta donde se encuentra el .egg ejecutamos el comando pview modelo.egg sustituyendo modelo.egg por el tengamos. Debería de abrirse una ventana con nuestro modelo y su textura. Si queremos verlo con iluminación pulsamos L para añadir unas luces a la escena.


Ahora sí podremos usar el modelo en nuestro juego con su textura perfectamente definida.

PANDA3D: Primer contacto

En estos primeros tutoriales de panda, vamos a explicar lo mas basico, para representar  modelos, como animarlos y como mover la camara. En este ejemplo hay que tener en cuenta que los ejes, por defecto en panda estan cambiados, donde la Y es profundidad y Z, es vertical.

En el codigo intentamos explicar los pasos a seguir de este ejemplo basico.

 from math import pi, sin, cos  
 from direct.showbase.ShowBase import ShowBase  
 from direct.task import Task  
 from direct.actor.Actor import Actor  
 from direct.interval.IntervalGlobal import Sequence  
 from panda3d.core import Point3  
   
 class MyApp(ShowBase):  
   def __init__(self):  
     ShowBase.__init__(self)  
     # Cargamos los modelos del fondo  
     self.environ = self.loader.loadModel("models/environment")  
     # Pinta el modelo en la pantalla  
     self.environ.reparentTo(self.render)  
     # Aplicamos una escala y posicion  
     self.environ.setScale(0.25, 0.25, 0.25)  
     self.environ.setPos(-8, 42, 0)  
     # Aplicamos un tarea repetitiva, pasandole como parametro el nombre el metodo y un ID  
     self.taskMgr.add(self.spinCameraTask, "SpinCameraTask")  
     # Cargamos el modelo del panda creando un Actor, con el nombre del EGG para cargar y  
     # un atributo walk para realizar la animacion de andar  
     self.pandaActor = Actor("models/panda-model",{"walk": "models/panda-walk4"})  
     #Le damos una escala al panda y lo pintamos en la pantalla  
     self.pandaActor.setScale(0.005, 0.005, 0.005)  
     self.pandaActor.reparentTo(self.render)  
     # Llamamos a un metodo repetitivo pasandole el ID de los atributos de la animacion  
     self.pandaActor.loop("walk")  
     # Creamos los intervalos donde se ubicara el panda, hasta donde llegara, y que realizara.  
     # un giro de 180 grados, en 13 segundos y 3 segundos el giro.  
     pandaPosInterval1 = self.pandaActor.posInterval(13,Point3(0, -10, 0),startPos=Point3(0, 10, 0))  
     pandaPosInterval2 = self.pandaActor.posInterval(13,Point3(0, 10, 0),startPos=Point3(0, -10, 0))  
     pandaHprInterval1 = self.pandaActor.hprInterval(3,Point3(180, 0, 0),startHpr=Point3(0, 0, 0))  
     pandaHprInterval2 = self.pandaActor.hprInterval(3,Point3(0, 0, 0),startHpr=Point3(180, 0, 0))  
     # Aqui creamos la sequencia en la que utilizara uno u otro  
     # Primero empieza en y=-10 y acaba en y=10 en 13 segundos, da un giro de 180 grados  
     # en 3 segundos y despues empieza en 10 y acaba en -10.  
     self.pandaPace = Sequence(pandaPosInterval1,pandaHprInterval1,pandaPosInterval2,pandaHprInterval2,name="pandaPace")  
     # Llamada al metodo repetitivo de la sequencia de intervalos  
     self.pandaPace.loop()  
     
   # Define el procedimiento de la camara, rotanto sobre el centro de la escena  
   def spinCameraTask(self, task):  
     angleDegrees = task.time * 6.0  
     angleRadians = angleDegrees * (pi / 180.0)  
     self.camera.setPos(20 * sin(angleRadians), -20.0 * cos(angleRadians), 3)  
     self.camera.setHpr(angleDegrees, 0, 0)  
     return Task.cont  
   
 # El Main de la aplicacion.  
 app = MyApp()  
 app.run()  

Este es el resultado:

En los proximos tutoriales explicaremos, como implementar este ejemplo en la Web.