| Tutorial 9. Mesh Viewer

This tutorial shows how to create a more complex application with the engine. We construct a simple mesh viewer using the user interface API and the scenemanagement of Irrlicht.
The tutorial shows how to create and use Buttons, Windows, Toolbars, Menus, ComboBoxes, Tabcontrols, Editboxes, Images, MessageBoxes, SkyBoxes, and how to parse XML files with the integrated XML reader of the engine.

The program which is described here will look like this:

Lets start!

We start like in most other tutorials: Include all nesessary header files, add a comment to let the engine be linked with the right .lib file in Visual Studio, and deklare some global variables. We also add two 'using namespece' statements, so we do not need to write the whole names of all classes. In this tutorial, we use a lot stuff from the gui namespace.

    #include <irrlicht.h>
    #include <iostream>

    using namespace irr;
    using namespace gui;

    #pragma comment(lib, "Irrlicht.lib")

    IrrlichtDevice *Device = 0;
    core::stringc StartUpModelFile;
    core::stringw MessageText;
    core::stringw Caption;
    scene::IAnimatedMeshSceneNode* Model = 0;
    scene::ISceneNode* SkyBox = 0;

The three following functions do several stuff used by the mesh viewer. The first function showAboutText() simply displays a messagebox with a caption and a message text. The texts will be stored in the MessageText and Caption variables at startup.

    void showAboutText()
    {
    	// create modal message box with the text
    	// loaded from the xml file.
    	Device->getGUIEnvironment()->addMessageBox(
    		Caption.c_str(), MessageText.c_str());
    }

The second function loadModel() loads a model and displays it using an addAnimatedMeshSceneNode and the scene manager. Nothing difficult. It also displays a short message box, if the model could not be loaded.

    void loadModel(const c8* filename)
    {
    	// load a model into the engine
    	if (Model)
    		Model->remove();
    	Model = 0;

    	scene::IAnimatedMesh* m = Device->getSceneManager()->getMesh(filename);
    	if (!m)
    	{
    		// model could not be loaded
    		if (StartUpModelFile != filename)
    			Device->getGUIEnvironment()->addMessageBox(
    			Caption.c_str(), L"The model could not be loaded. " \
    			L"Maybe it is not a supported file format.");
    		return;
    	}

    	// set default material properties
    	Model = Device->getSceneManager()->addAnimatedMeshSceneNode(m);
    	Model->setMaterialType(video::EMT_TRANSPARENT_ADD_COLOR);
    	Model->setMaterialFlag(video::EMF_LIGHTING, false);
    	Model->setDebugDataVisible(true);
    }

Finally, the third function creates a toolbox window. In this simple mesh viewer, this toolbox only contains a tab control with three edit boxes for changing the scale of the displayed model.

    void createToolBox()
    {
    	// remove tool box if already there
    	IGUIEnvironment* env = Device->getGUIEnvironment();
    	IGUIElement* root = env->getRootGUIElement();
    	IGUIElement* e = root->getElementFromId(5000, true);
    	if (e) e->remove();

    	// create the toolbox window
    	IGUIWindow* wnd = env->addWindow(core::rect<s32>(450,25,640,480),
    		false, L"Toolset", 0, 5000);

    	// create tab control and tabs
    	IGUITabControl* tab = env->addTabControl(
    		core::rect<s32>(2,20,640-452,480-7), wnd, true, true);
    	IGUITab* t1 = tab->addTab(L"Scale");
    	IGUITab* t2 = tab->addTab(L"Empty Tab");

    	// add some edit boxes and a button to tab one
    	env->addEditBox(L"1.0", core::rect<s32>(40,50,130,70), true, t1, 901);
    	env->addEditBox(L"1.0", core::rect<s32>(40,80,130,100), true, t1, 902);
    	env->addEditBox(L"1.0", core::rect<s32>(40,110,130,130), true, t1, 903);
    	env->addButton(core::rect<s32>(10,150,100,190), t1, 1101, L"set");

    	// bring irrlicht engine logo to front, because it
    	// now may be below the newly created toolbox
    	root->bringToFront(root->getElementFromId(666, true));
    }

To get all the events sent by the GUI Elements, we need to create an event receiver. This one is really simple. If an event occurs, it checks the id of the caller and the event type, and starts an action based on these values. For example, if a menu item with id 100 was selected, if opens a file-open-dialog.

    class MyEventReceiver : public IEventReceiver
    {
    public:
    	virtual bool OnEvent(const SEvent& event)
    	{
    		if (event.EventType == EET_GUI_EVENT)
    		{
    			s32 id = event.GUIEvent.Caller->getID();
    			IGUIEnvironment* env = Device->getGUIEnvironment();
    			switch(event.GUIEvent.EventType)
    			{
    			case EGET_MENU_ITEM_SELECTED:
    				{
    					// a menu item was clicked
    					IGUIContextMenu* menu = (IGUIContextMenu*)event.GUIEvent.Caller;
    					s32 id = menu->getItemCommandId(menu->getSelectedItem());

    					switch(id)
    					{
    					case 100: // File -> Open Model
    						env->addFileOpenDialog(L"Please select a model file to open");
    						break;
    					case 200: // File -> Quit
    						Device->closeDevice();
    						break;
    					case 300: // View -> Skybox
    						SkyBox->setVisible(!SkyBox->isVisible());
    						break;
    					case 400: // View -> Debug Information
    						if (Model)
    							Model->setDebugDataVisible(!Model->isDebugDataVisible());
    						break;
    					case 500: // Help->About
    						showAboutText();
    						break;
    					case 610: // View -> Material -> Solid
    						if (Model)
    							Model->setMaterialType(video::EMT_SOLID);
    						break;
    					case 620: // View -> Material -> Transparent
    						if (Model)
    							Model->setMaterialType(video::EMT_TRANSPARENT_ADD_COLOR);
    						break;
    					case 630: // View -> Material -> Reflection
    						if (Model)
    							Model->setMaterialType(video::EMT_SPHERE_MAP);
    						break;
    					}
    					break;
    				}
    			case EGET_FILE_SELECTED:
    				{
    					// load the model file, selected in the file open dialog
    					IGUIFileOpenDialog* dialog =
    						(IGUIFileOpenDialog*)event.GUIEvent.Caller;
    					loadModel(core::stringc(dialog->getFilename()).c_str());
    				}
    			case EGET_BUTTON_CLICKED:
    				switch(id)
    				{
    				case 1101:
    					{
    						// set scale
    						gui::IGUIElement* root = env->getRootGUIElement();
    						core::vector3df scale;
    						core::stringc s;
    						s = root->getElementFromId(901, true)->getText();
    						scale.X = (f32)atof(s.c_str());
    						s = root->getElementFromId(902, true)->getText();
    						scale.Y = (f32)atof(s.c_str());
    						s = root->getElementFromId(903, true)->getText();
    						scale.Z = (f32)atof(s.c_str());
    						if (Model)
    							Model->setScale(scale);
    					}
    					break;
    				case 1102:
    					env->addFileOpenDialog(L"Please select a model file to open");
    					break;
    				case 1103:
    					showAboutText();
    					break;
    				case 1104:
    					createToolBox();
    					break;
    				}
    				break;
    			}
    		}
    		return false;
    	}
    };

Most of the hard work is done. We only need to create the Irrlicht Engine device and all the buttons, menus and toolbars. We start up the engine as usual, using createDevice(). To make our application catch events, we set our eventreceiver as parameter. The #ifdef WIN32 preprocessor commands are not necesarry, but I included them to make the tutorial use DirectX on Windows and OpenGL on all other platforms like Linux. As you can see, there is also a unusual call to IrrlichtDevice::setResizeAble(). This makes the render window resizeable, which is quite useful for a mesh viewer.

    int main()
    {
     // ask user for driver

    	video::E_DRIVER_TYPE driverType;

    	printf("Please select the driver you want for this example:\n"\
    		" (a) Direct3D 9.0c\n (b) Direct3D 8.1\n (c) OpenGL 1.5\n"\
    		" (d) Software Renderer\n (e) Apfelbaum Software Renderer\n"\
    		" (f) NullDevice\n (otherKey) exit\n\n");

    	char key;
    	std::cin >> key;

    	switch(key)
    	{
    		case 'a': driverType = video::EDT_DIRECT3D9;break;
    		case 'b': driverType = video::EDT_DIRECT3D8;break;
    		case 'c': driverType = video::EDT_OPENGL;   break;
    		case 'd': driverType = video::EDT_SOFTWARE; break;
    		case 'e': driverType = video::EDT_BURNINGSVIDEO;break;
    		case 'f': driverType = video::EDT_NULL;     break;
    		default: return 1;
    	}

    	// create device and exit if creation failed

    	MyEventReceiver receiver;
    	Device = createDevice(driverType, core::dimension2d<s32>(640, 480),
    		16, false, false, false, &receiver);

    	if (Device == 0)
    		return 1;  // could not create selected driver.

    	Device->setResizable(true);
    	Device->setWindowCaption(L"Irrlicht Engine - Loading...");

    	video::IVideoDriver* driver = Device->getVideoDriver();
    	IGUIEnvironment* env = Device->getGUIEnvironment();
    	scene::ISceneManager* smgr = Device->getSceneManager();

The next step is to read the configuration file. It is stored in the xml format and looks a little bit like this:
<?xml version="1.0"?>
<config>
<startUpModel file="some filename" />
<messageText caption="Irrlicht Engine Mesh Viewer">
Hello!
</messageText>
</config>
We need the data stored in there to be written into the global variables StartUpModelFile, MessageText and Caption. This is now done using the Irrlicht Engine integrated XML parser:

    	// read configuration from xml file
    	io::IXMLReader* xml =
    		Device->getFileSystem()->createXMLReader("../../media/config.xml");
    	while(xml && xml->read())
    	{
    		switch(xml->getNodeType())
    		{
    		case io::EXN_TEXT:
    			// in this xml file, the only text which occurs is the messageText
    			MessageText = xml->getNodeData();
    			break;
    		case io::EXN_ELEMENT:
    			{
    				if (core::stringw("startUpModel") == xml->getNodeName())
    					StartUpModelFile = xml->getAttributeValue(L"file");
    				else
    				if (core::stringw("messageText") == xml->getNodeName())
    					Caption = xml->getAttributeValue(L"caption");
    			}
    			break;
    		}
    	}
    	if (xml)
    		xml->drop(); // don't forget to delete the xml reader

That wasn't difficult. Now we'll set a nicer font and create the Menu. It is possible to create submenus for every menu item. The call menu->addItem(L"File", -1, true, true); for example adds a new menu Item with the name "File" and the id -1. The following parameter says that the menu item should be enabled, and the last one says, that there should be a submenu. The submenu can now be accessed with menu->getSubMenu(0), because the "File" entry is the menu item with index 0.

    	// set a nicer font
    	IGUISkin* skin = env->getSkin();
    	IGUIFont* font = env->getFont("../../media/fonthaettenschweiler.bmp");
    	if (font)
    		skin->setFont(font);

    	// create menu
    	gui::IGUIContextMenu* menu = env->addMenu();
    	menu->addItem(L"File", -1, true, true);
    	menu->addItem(L"View", -1, true, true);
    	menu->addItem(L"Help", -1, true, true);

    	gui::IGUIContextMenu* submenu;
    	submenu = menu->getSubMenu(0);
    	submenu->addItem(L"Open Model File...", 100);
    	submenu->addSeparator();
    	submenu->addItem(L"Quit", 200);

    	submenu = menu->getSubMenu(1);
    	submenu->addItem(L"toggle sky box visibility", 300);
    	submenu->addItem(L"toggle model debug information", 400);
    	submenu->addItem(L"model material", -1, true, true );

    	submenu = submenu->getSubMenu(2);
    	submenu->addItem(L"Solid", 610);
    	submenu->addItem(L"Transparent", 620);
    	submenu->addItem(L"Reflection", 630);

    	submenu = menu->getSubMenu(2);
    	submenu->addItem(L"About", 500);

We want a toolbar, onto which we can place colored buttons and important looking stuff like a senseless combobox.

    	// create toolbar
    	gui::IGUIToolBar* bar = env->addToolBar();
    	bar->addButton(1102, 0, driver->getTexture("../../media/open.bmp"));
    	bar->addButton(1103, 0, driver->getTexture("../../media/help.bmp"));
    	bar->addButton(1104, 0, driver->getTexture("../../media/tools.bmp"));

    	// create a combobox with some senseless texts
    	gui::IGUIComboBox* box = env->addComboBox(core::rect<s32>(100,5,200,25), bar);
    	box->addItem(L"Bilinear");
    	box->addItem(L"Trilinear");
    	box->addItem(L"Anisotropic");
    	box->addItem(L"Isotropic");
    	box->addItem(L"Psychedelic");
    	box->addItem(L"No filtering");

To make the editor look a little bit better, we disable transparent gui elements, and add a Irrlicht Engine logo. In addition, a text, which will show the current frame per second value is created, and the window caption changed.

    	// disable alpha
    	for (s32 i=0; i<gui::EGDC_COUNT ; ++i)
    	{
    		video::SColor col = env->getSkin()->getColor((gui::EGUI_DEFAULT_COLOR)i);
    		col.setAlpha(255);
    		env->getSkin()->setColor((gui::EGUI_DEFAULT_COLOR)i, col);
    	}

    	// add a tabcontrol
    	createToolBox();

    	// add the irrlicht engine logo
    	IGUIImage* img = env->addImage(core::rect<s32>(22,429,108,460), 0, 666);
    	img->setImage(driver->getTexture("../../media/irrlichtlogoaligned.jpg"));

    	// create fps text
    	IGUIStaticText* fpstext =
    		env->addStaticText(L"", core::rect<s32>(210,26,270,41), true);

    	// set window caption
    	Caption += " - [";
    	Caption += driver->getName();
    	Caption += "]";
    	Device->setWindowCaption(Caption.c_str());

That's nearly the whole application. We simply show the about message box at start up, and load the first model. To make everything look better, a skybox is created and a user controled camera, to make the application a little bit more interactive. Finally, everything is drawed in a standard drawing loop.

    	// show about message box and load default model
    	showAboutText();
    	loadModel(StartUpModelFile.c_str());

    	// add skybox
    	SkyBox = smgr->addSkyBoxSceneNode(
    		driver->getTexture("../../media/irrlicht2_up.bmp"),
    		driver->getTexture("../../media/irrlicht2_dn.bmp"),
    		driver->getTexture("../../media/irrlicht2_lf.bmp"),
    		driver->getTexture("../../media/irrlicht2_rt.bmp"),
    		driver->getTexture("../../media/irrlicht2_ft.bmp"),
    		driver->getTexture("../../media/irrlicht2_bk.bmp"));

    	// add a camera scene node
    	smgr->addCameraSceneNodeMaya();

    	// draw everything
    	while(Device->run() && driver)
    		if (Device->isWindowActive())
    		{
    			driver->beginScene(true, true, video::SColor(150,50,50,50));
    			smgr->drawAll();
    			env->drawAll();

    			driver->endScene();

    			core::stringw str = L"FPS: ";
    			str += driver->getFPS();
    			fpstext->setText(str.c_str());
    		}
    	Device->drop();
    	return 0;
    }

Compile and run this, and you have a fully functional 3d Mesh viewer.