Tercer tutorial: el HolaMundo más simple de Irrlicht (3ª parte)

Finalizamos esta primera ronda de mini-tutoriales alcanzando al fin el tutorial 1 de Irrlicht.
Lo visto hasta ahora nos servirá de base para los próximos tutoriales en los que iremos viendo como dotar de simulación física nuestra aplicación mediante el motor ODE, y otros conceptos más avanzados de Irrlicht a medida que los vamos aprendiendo.

#include <irrlicht/irrlicht.h>

using namespace irr;

using namespace core;
using namespace scene;
using namespace video;
using namespace gui;

int main()
{
    /** INICIALIZACION **/
    
    IrrlichtDevice *device = createDevice(
        video::EDT_OPENGL,
        dimension2d(640, 480), 16,
        false, false, false, NULL );
    
    IVideoDriver* driver = device->getVideoDriver();
    ISceneManager* smgr = device->getSceneManager();
    IGUIEnvironment* guienv = device->getGUIEnvironment();
    

    device->setWindowCaption(L"Hola Mundo - Tutorial 3");

    guienv->addStaticText(L"Esto es texto fijo insertado en el GUI de la aplicacion",
            rect(10,10,260,22), true);
    
    /** CREACION **/
    
    ICameraSceneNode* cameraNode = smgr->addCameraSceneNodeFPS( NULL, 100.0f, 200.0f );    
    IAnimatedMesh* dwarfMesh = smgr->getMesh( "res/dwarf.x" );
    IAnimatedMesh* faerieMesh = smgr->getMesh( "res/faerie.md2" );
    IAnimatedMeshSceneNode* dwarfNode = smgr->addAnimatedMeshSceneNode( dwarfMesh );
    IAnimatedMeshSceneNode* faerieNode = smgr->addAnimatedMeshSceneNode( faerieMesh );
    dwarfMesh->drop();
    faerieMesh->drop();
    
    /** ACTUALIZACION **/
    
    dwarfNode->setScale( vector3d(.5f,.5f,.5f) );
    dwarfNode->setPosition( vector3df(25,0,0) );
    dwarfNode->setMaterialFlag( EMF_LIGHTING, false );
    faerieNode->setPosition( vector3df(-25,15,0) );
    faerieNode->setMaterialFlag( EMF_LIGHTING, false );
    faerieNode->setMD2Animation ( scene::EMAT_STAND );
    faerieNode->setMaterialTexture( 0, driver->getTexture("res/faerie.bmp") );
    cameraNode->setPosition( vector3df(40,30,-50) );
    cameraNode->setTarget( vector3df(0,5,0) );
    
    /** EJECUCION **/
    
    while( device->run() )
    {
        driver->beginScene( true, true, SColor(255,100,101,140) );
        smgr->drawAll();
        guienv->drawAll();
        driver->endScene();
    }
    
    /** FINALIZACION **/
    
    device->drop();
    return 0;
}

Primera novedad: un nuevo objeto extraído del dispositivo Irrlicht principal: GUIEnvironment. Hasta ahora habíamos visto Irrlicht únicamente como un motor gráfico 3D, pero nada más lejos de la realidad. Nuestro engine favorito nos ofrece toda una colección de componentes para implementar interfaces de usuario 2D integradas perfectamente con el entorno tridimensional. Al igual que el SceneManager lo utilizamos para gestionar la escena 3D, disponemos del GUIEnvironment para gestionar los widgets (como les llaman otros APIs) de nuestra aplicación. Tenemos a nuestra disposición: button, checkbox, menu, file dialog, tab, window, scrollbar, etc. Como si de una aplicación de escritorio se tratara, ideal para diseñar nuestros menús en la propia aplicación. Como curiosidad, hay incluso quién ha utilizado Irrlicht exclusivamente como librería GUI para desarrollar alguna aplicación de escritorio.

Un sencillo ejemplo lo tenemos en las instrucciones siguientes, en el que añadimos un mensaje de texto fijo y visible sobre nuestra escena. Además de la cadena de caracteres, se le especifica el tamaño y posición del área rectangular del texto a través del objeto rect. El booleano es para indicar si queremos el área con o sin borde. (Si es la primera vez que ves esa "L" delante de una cadena de caracteres, busca información sobre el uso de wide chars en C/C++)

También le hemos cambiado el título a la ventana a través del device.

En este tutorial hemos sustituido la caja por modelos más complejos como los que utilizaríamos en una aplicación real. Realizamos la carga como ya vimos, con la diferencia de que ahora utilizamos un puntero de tipo "AnimatedMesh" ya que sabemos de antemano que los modelos que vamos a utilizar están animados. Luego los insertamos en la escena también como nodos de malla animada. Y por último liberamos las mallas.

Los modelos utilizados, además de ser más complejos poligonalmente están texturizados. En el modelo "dwarf", el propio formato DirecX (.x) incluye una referencia a la textura utilizada e Irrlicht la carga y aplica automáticamente. En cambio, el modelo "faerie" que está en formato MD2(Quake2) y éste no incluye la referencia a la textura por lo que debemos cargarla y asignarla nosotros manualmente. De esta forma, utilizando el VideoDriver podemos cargar imágenes y transformarlas al formato interno: Texture. Esta nueva textura puede ser aplicada al modelo a través del método "setMaterialTexture" de su nodo.
Como algo excepcional, el formato MD2 contiene un conjunto de animaciones pre-definidas propias del Quake2 (éstas son acciones del personaje: andar, disparar, agacharse, saltar, morir, etc.). Y es posible seleccionar rápidamente una de ellas utilizando el método específico del formato "setMD2Animation" pasándole alguna de las constantes: irr::scene::EMAT_* (Enum Md2 Animation Type).
Por último, como en este tutorial no hemos llegado a tocar el tema de las luces, el material de los modelos (su textura aplicada en este tutorial) se renderizará muy oscuro a causa de la ausencia de iluminación. Una solución rápida es desactivar el efecto de la iluminación sobre el material, y eso se hace a través del conjunto de flags de un material: setMaterialFlag( irr::video::EMF_*, true|false ). Curiosea sobre el conjunto de flags para ver de cuentas maneras puedes modificar el acabado de un material.

Ya solo resta añadir en el bucle de ejecución la pintada de los elementos de interfaces de usuario, y es tan fácil como decirle "drawAll" al GUIEnvironment.
Pon especial atención al orden de los "drawAll" del GUI y del SceneManager, ya que si invirtiéramos su orden estaríamos pintando los modelos encima del mensaje de texto, y a menos que sea el efecto que buscamos provocará extraños resultados.

Sigue leyendo >

Segundo tutorial: el HolaMundo más simple de Irrlicht (2ª parte)

Seguimos con el segundo tutorial ampliando ligeramente la versión del HolaMundo realizada en la primera parte, sin correr demasiado para ir asimilando bien las bases de Irrlicht.

De nuevo, los fuentes y el binario ya compilado están en el box: tutorial_02.zip.

El código sin comentarios quedaría tal que así:

#include <irrlicht/irrlicht.h>

using namespace irr;

using namespace core;
using namespace scene;
using namespace video;

int main()
{
    /** INICIALIZACION **/
    
    IrrlichtDevice *device = createDevice(
            video::EDT_OPENGL, dimension2d(640, 480), 16,                            
            false, false, false, NULL );
    
    IVideoDriver* driver = device->getVideoDriver();
    ISceneManager* smgr = device->getSceneManager();
    
    /** CREACION **/
    
    ICameraSceneNode* cameraNode = smgr->addCameraSceneNodeFPS( 0, 100.0f, 200.0f );
    
    IMesh* boxMesh = smgr->getMesh( "res/box.x" );
    IMeshSceneNode* boxNode = smgr->addMeshSceneNode( boxMesh );
    boxMesh->drop();
    
    /** ACTUALIZACION **/
    
    boxNode->setScale( vector3d(10.0f,10.0f,10.0f) );
    cameraNode->setPosition( vector3df(20,30,-40) );
    cameraNode->setTarget( vector3df(0,5,0) );
    
    /** EJECUCION **/
    
    while( device->run() )
    {
        driver->beginScene( true, true, SColor(255,100,101,140) );
        smgr->drawAll();
        driver->endScene();
    }
    
    /** FINALIZACION **/
    
    device->drop();
    return 0;
}

Un primer cambio es apreciable en la cámara. El SceneManager de Irrlicht contiene un par de cámaras más sofisticadas que la utilizada en el primer tutorial. Estas cámaras destacan principalmente por venir pre-configuradas con eventos de teclado y ratón asociadas a ellas permitiendo manipularlas de forma intuitiva sin ninguna línea de código adicional. Las cámaras son llamadas "FPS" y "Maya". Si eres un jugón o te gusta el diseño gráfico ya te estarás imaginando el tipo de cámaras de las que hablamos.
La cámara FPS imita la configuración de la cámara típica de un Shooter (First Person Shooter) asociando los cursores a un movimiento de traslación horizontal y el ratón a la rotación de la cámara. Eso si, no esperes ningún tipo de colisión por defecto, ni siquiera con el plano horizontal XZ (el "suelo"), imagina más bien la configuración de cámara de un observador del shooter que está en "modo vuelo".
La cámara de tipo Maya tiene una configuración típica de un editor 3D, en el que la pulsación de los distintos botones del ratón y el movimiento del mismo activan las distintas opciones de: traslación, rotación y escalado/zoom de la cámara.
Ambas cámaras aceptan los mismos parámetros, y que interesen hasta el momento son el segundo y el tercero: velocidad de rotación y velocidad de traslación respectivamente.

Pero el verdadero cambio llega en las siguientes instrucciones. En este tutorial no vamos a pintar nosotros la caja explícitamente, en lugar de eso hemos abierto el Blender y la caja que aparece por defecto ha sido exportada a un formato que entienda Irrlicht, como por ejemplo DirectX (ficheros .x en texto plano). En cualquier aplicación gráfica que hagamos vamos a echar mano de modelos pre-diseñados, así que es el momento de enfocar el tutorial en ellos. El primer paso es realizar la carga del modelo y para ello se utiliza el método getMesh del SceneManager que es el encargado de generar una malla de Irrlicht a partir de un objeto almacenado en un archivo. Como se puede observar, tan solo se le proporciona como parámetro el modelo deseado, e Irrlicht internamente utiliza el cargador específico del formato en función de la extensión del fichero. Si le pasáramos una extensión que desconoce o sufriera algún tipo de error en la carga nos los indicará por la salida de consola.
Con nuestro modelo en forma de "Mesh", es el momento de añadirlo a nuestra escena de la misma forma que añadimos la cámara a traves del SceneManager. Hecho esto, la malla ya no la necesitamos y podemos hacer "drop" sobre ella. A partir de ahora, nuestra caja está encapsulada en un objeto llamado "MeshSceneNode" que nos va a proporcionar métodos para su manipulación, lo cual va a ser una gran ventaja comparado al tutorial anterior en el que la caja no la teníamos empaquetada de ninguna forma y nos dedicábamos a re-crearla en tiempo de render. ¿Porqué eso de "SceneNode"? El concepto de "nodo" en Irrlicht es la piedra angular de todo el engine. Ya comentábamos que el elemento SceneManager era la raíz de toda nuestra escena, pues bien, esto hay que tomárselo al pie de la letra ya que la escena está internamente representada en forma de árbol lógico con lo que nuestro SceneManager es literalmente la raíz del árbol. Partiendo de esta idea, es obvio entender como todo aquello que sea añadido a la escena es de forma genérica un nodo o "SceneNode". Iremos poco a poco descubriendo distintas implementaciones de nodos que extienden el SceneNode genérico para tratar con objetos más específicos, como por ejemplo los vistos hasta ahora: CameraSceneNode y MeshSceneNode.

En las últimas nuevas líneas de este tutorial podemos observar como realizar operaciones simples sobre nuestros objetos puestos en escena (la cámara y la caja). A través del puntero al nodo que hemos conservado se ha ajustado el escalado de la caja y la posición y enfoque de la cámara. Y lo mejor de todo, la tarea de render es poco más que un "drawAll" de nuestro gestor de escena.

Para concluir el tutorial, comentar que lo que ha sucedido internamente (respecto al tutorial 1) es que el pintado de la caja ha sido abstraído dentro del SceneNode, ya que es uno de sus método el encargado de acceder al VideoDriver para pintar la caja de forma similar a como lo hicimos en el tutorial anterior, y éste método es invocado automáticamente a través del "drawAll". Con lo cual, si estas pensando en hacer pintadas de forma manual a bajo nivel utilizando directamente el VideoDriver, te interesa implementarte tu propio SceneNode: tan sencillo como heredar de la interfaz "ISceneNode" e implementar sus métodos. Así integrarás limpiamente tu aplicación con Irrlicht.

Sigue leyendo >

Primer tutorial: el HolaMundo más simple de Irrlicht

Nos ponemos las pilas comenzando con una colección de tutoriales que partan desde lo más básico. Empezamos obviamente con Irrlicht, con un HolaMundo más simple si es posible que el tutorial HelloWorld que acompaña al engine.

Antes que nada, el código y demás está disponible en el box de nuestro blog bajo el nombre de "tutorial_01". Su puesta en marcha debería ser tan sencilla como el tener instalado MinGW en el sistema, y ejecutar make sobre el tutorial, ya que han sido incluidas las cabeceras y librerías de Irrlicht necesarias para funcionar, haciendo así el código más portable y sencillo de poner en marcha al reducir los pre-requisitos del sistema en el que vaya a ser compilado/ejecutado.
Queda pendiente añadirle las librerías de linux y hacerlo así multiplataforma, por ahora sólo incluye lo necesario para ponerlo en marcha bajo MsWindows con MinGW.

Este HolaMundo ha sido pensado para aquellos que vienen (o venimos) de librerías gráficas de bajo nivel como OpenGL o DirectX y estamos acostumbrados a realizar el pintado por pantalla casi de forma manual, pensando siempre en vértices, aristas, normales, etc.. Así que apartaremos de nuestra vista aquellos objetos de Irrlicht más avanzados intentando dejar el mínimo número posible de objetos necesarios.

Empecemos echándole un ojo al código, y luego lo comentamos.
(Se han eliminado los comentarios que el zip del tutorial sí incluye)

#include <irrlicht/irrlicht.h>

using namespace irr;
using namespace core;
using namespace scene;
using namespace video;

int main()
{
   IrrlichtDevice *device = createDevice(
      video::EDT_OPENGL,
      dimension2d(640, 480), 16,
      false, false, false, NULL );

   IVideoDriver* driver = device->getVideoDriver();
   ISceneManager* smgr = device->getSceneManager();
 
   smgr->addCameraSceneNode( NULL, vector3df(20,30,-40), vector3df(0,5,0) );

 while( device->run() )
 {
    driver->beginScene( true, true, SColor(255,100,101,140) );
    smgr->drawAll();
    driver->draw3DBox( aabbox3df(0.f,0.f,0.f, 10.f,10.f,10.f) );
    driver->endScene();
 }

   device->drop();
   return 0;
}

Lo primero que se observa es que para trabajar con Irrlicht tan solo hay que incluir una cabecera (que por cierto el blog por el momento no visualiza al confundirlo con una etiqueta HTML). Y lo mismo pasa a nivel de linkado, si observas el Makefile verás que tan solo ha habido que enlazar con una librería.

Todo el API de Irrlicht se encuentra bajo el espacio de nombres "irr". Y está estructurado mediante 5 sub-espacios de nombres más: core, scene, video, io, gui.

La primera instrucción que no puede faltar en una aplicación Irrlicht es una llamada a "irr::createDevice". Ésta función en la encargada de inicializar todo el motor gráfico, representado mediante el objeto "IrrlichtDevice" devuelto. Éste objeto es la madre del cordero de toda aplicación Irrlicht.
Vemos que en la incialización estamos definiendo la ventana de render a través del conjunto de parámetros que tiene la llamada:

- "deviceType": el primero de ellos nos permite seleccionar el motor de render utilizado en la aplicación. Irrlicht incluye una buena colección: OpenGL, DirectX8, DirectX9 y 2 implementaciones software propias. No hay excusas para no hacer aplicaciones multiplataforma! Los identificadores de los distintos motores los podemos encontrar en irr::video::EDT_*. "EDT" significa "Enum Device Type", y es muy común encontrarse este tipo de nomenclatura en el API, así que no lo olvides para encontrar por ti mismo aquello que estés buscando en un futuro.

- "windowSize": el tamaño de la ventana de render, como su nombre indica, expresado en pixels como suele ser costumbre. Aquí se espera un objeto irr::core::dimension2d que encapsula el par de valores.

- "bits": la profundidad de color en bits de la ventana. Típicamente "16" o "32". No olvidar que este valor sólo tiene efecto al trabajar a pantalla completa, ya que de otra forma se utiliza el valor con el que tengas configurado el escritorio.

- "fullscreen": un booleano que especifica si queremos la aplicacion a pantalla completa o no.

- "stencilbuffer": mediante un booleano indicamos si queremos hacer uso del "stencilbuffer" para sombras. Un concepto algo avanzado para el objetivo de este primer tutorial.

- "vsync": activamos o desactivamos la sincronización vertical de nuestra tarjeta gráfica. De nuevo solo funcionaría al trabajar a pantalla completa.

- "eventReceiver": un objeto de la clase "EventReceiver" encargado de gestionar todos los eventos que queremos capturar en nuestra aplicación. Ya llegaremos..


Tras crear nuestro dispositivo Irrlicht, extraemos de él dos de los objetos más importante que tiene instanciados. Como son usados frecuentemente, es habitual hacer con una referencia propia para no estar continuamente haciendo "device->getXXX()".
Los nombres de ambos objetos son bastante intuitivos: VideoDriver y SceneManager. A groso modo podríamos decir que VideoDriver trabaja a bajo nivel y SceneManager nos proporciona la capa más alta de abstracción de todo el motor gráfico.
Ésto mismo lo comprobamos con la siguiente instrucción en la que añadimos una cámara a nuestra escena mediante "addCameraSceneNode". Sus parámetros son la posición de la cámara y el punto al que mira, y para encapsular estos valores se utiliza la clase irr::core::vector3d.

El siguiente paso es entrar de lleno en el bucle de ejecución de nuestra aplicación gráfica. La condición del bucle puede ser tan sencilla como "device->run()". En este caso el cerrar la ventana o la aplicación detendrá el dispositivo irrlicht y provocará que finalice el bucle.
El bucle estará gobernado por dos instrucciones al más puro estilo OpenGL ó máquina de estados: "beginScene" y "endScene". El objetivo de "beginScene" es básicamente limpiar la pantalla, y para ello le pasamos el color con el que queremos que deje el fondo utilizando la clase irr::video::SColor( alpha, r,g,b ). Entre ambos métodos colocaremos todas aquellas instrucciones que tengan como objetivo pintar cosas en pantalla. Por ese motivo encontramos en este primer tutorial una llamada al drawAll del SceneManager, el cual se encarga el solito de pintar todo aquello que le hayamos añadido, en nuestro caso tan solo ha sido la cámara así que la "colocará" en escena.
A continuación probamos hacer una pintada nosotros mismos echando mano directamente del driver de video para pintar un cubo. Si curioseamos las llamadas drawXXX del videoDriver observaremos como son primitivas: triángulos, lineas, cajas/cubos, vértices, etc. El objeto utilizado para definir el cubo no es más que una clase que almacena 2 puntos (x,y,z, X,Y,Z). La nomenclatura "aabbox" viene del término utilizado habitualmente para referirse a los boundingbox: "aabb".
Finalmente tenemos la llamada a endScene que es la encargada realmente de hacer el render por pantalla, ya que antes estábamos pintando sobre un buffer distinto.

Por último, solo queda destruir el device en el momento de cerrar la aplicación, y en el API de Irrlicht todos los objetos siempre de liberan/destruyen mediante un método común llamado "drop".

Y hasta aquí el tutorial.
En el próximo nos acercaremos un poco más al HelloWorld "oficial" de Irrlicht para entender cual es la filosofía a seguir del motor para pintar las cosas, ya que veremos que la idea es no utilizar el driver directamente, que para algo existe la abstracción del SceneManager.

Sigue leyendo >

Irrlicht 1.4.1

¡Irrlicht se actualiza! 5 meses después de la versión 1.4.0.
También lo ha hecho IrrEdit actualizándose con la nueva versión de Irrlicht.

Irrlicht 1.4.1 released

We just released Irrlicht 1.4.1, it is now available at the sourceforge servers. Happy downloading. Version 1.4.1 is mainly a bugfix release and includes:

* Improvements to the COLLADA 1.3 loader, support for Milkshape 1.8 files, Enhanced .3ds, .obj loaders, Microsoft .x file animation playback improvements
* Added X11 support on OSX
* Several speed optimizations
* Tons of bugfixes, API enhancements and other small improvments

Sigue leyendo >