Skybox and Skydome

In this tutorial we will demonstrate the usage of the skybox and skydome scene nodes of Irrlicht. We will skip giving background on what skyboxes/skydomes are as the Wikipedia article provides a good description: https://en.wikipedia.org/wiki/Skybox_(video_games) We will be using the FPS camera from the Cameras tutorial and the GB.Scene.TerrainSceneNode from the Terrain tutorial. The following topics are covered:

  1. Creating a project
  2. Setup of Irrlicht engine, terrain, camera and render loop
  3. Adding a skybox
  4. Adding a skydome

The tutorial's code files and media files are installed along with Ginjo-Builder and can be accessed from the 'Project' window that is shown when the editor starts. This tutorial is called '08_Skybox' in the 'Tutorials' tab.

1. Creating a project

First we create a project and compiler options XML file. (See Render loop for a more detailed description of creating a project.)

  1. Create a new project through the Project menu.
  2. Right click on project's top level tree node named "New GBP(Unsaved)" and select Rename folder. Rename the folder to "Skybox".
  3. Save the project as "SkyboxAndSkydome.gbp" from the Project menu.
  4. Add a new file to the project tree and save it as "testSkybox.gbc"
  5. Add a new file to the project tree and save it as "Skybox.xml". (The XML file must have the same name as the top level tree node.)

Open "Skybox.xml" and just like in Render loop add the <exe> and <startup> elements. We will also import the GB namespace so we don't have to type it out every time. (For the full list of XML tags see Compiler options.)

<?xml version="1.0" encoding="utf-8"?>
<root>
   <exe path=".\game.exe" />
   <startup name="testSkybox.main" />
   
   <ImportSymbols>
      <namespace name="GB"  />
   </ImportSymbols>
</root>

2. Setup of Irrlicht engine, terrain, camera and render loop

In our XML file we specified the startup function as "testSkybox.main". Double-click on "testSkybox.gbc" in the project tree to open it, and add the following "main" function which initializes the Irrlicht engine, adds an FPS camera and hides the mouse cursor.

function main(var:string cmdArgs[]) returns Int32
{
   var:gb.IrrlichtCreationParameters options=new gb.IrrlichtCreationParameters()
   //Without anti-aliasing our model edges would be jagged 
   options.AntiAliasing=255
   //Tell Irrlicht to use OpenGL for graphics
   options.DriverType=gb.video.DriverType.OpenGL
   //Turn off logging, we won't be using it for now
   options.LoggingLevel=gb.LogLevel.None
   
   var:gb.IrrlichtDevice engine = gb.IrrlichtDevice.CreateDevice(options)
   //Also set our window's title
   engine.SetWindowCaption('Test Skybox')
   
   var:video.VideoDriver driver=engine.VideoDriver
   var:Scene.SceneManager smgr=engine.SceneManager

   //An FPS camera is controlled by the mouse and keys just like one finds in normal FPS games.
   //Press Alt+F4 to quit
   var:gb.scene.CameraSceneNode camera= smgr.AddCameraSceneNodeFPS(null, 100, 1.2)
   //the usual Field of View angle for FPS is 90 degrees
   camera.FOV=1.57079633   //FOV is in radians
   camera.Position = new gb.core.Vector3Df(2700 * 2, 255 * 2, 2600 * 2);
   camera.Target = new gb.core.Vector3Df(2397 * 2, 343 * 2, 2700 * 2);
   camera.FarValue = 42000
   engine.CursorControl.Visible = false

}

Note the camera's Position, Target and FarValue. Now we will add the terrain scene node to our "main" function after our camera code and use the video.MaterialType.DetailMap texture.

var:scene.TerrainSceneNode TerrainNode=smgr.AddTerrainSceneNode('..\media\terrain-heightmap.bmp',null,-1,new core.Vector3Df(),new core.Vector3Df(),new core.Vector3Df(40, 4.4, 40),new video.Color(255, 255, 255),5, scene.TerrainPatchSize._17,4)
TerrainNode.SetMaterialFlag(video.MaterialFlag.Lighting, false)
//TerrainNode.SetMaterialFlag(video.MaterialFlag.Wireframe, true)
TerrainNode.SetMaterialTexture(0, driver.GetTexture('..\media\terrain-texture.jpg'))
TerrainNode.SetMaterialTexture(1, driver.GetTexture('..\media\seamless-desert-sand.jpg'))
TerrainNode.SetMaterialType(video.MaterialType.DetailMap)
TerrainNode.ScaleTexture(1,50)

Note that you can use the IntelliDoc Symbol Info feature to look-up symbol types and definitions. The 'lightbulb' button on the toolbar looks-up the symbol type for the current cursor location and displays it in a tooltip. Pressing F1 also shows the tooltip.

Finally, we add our render loop to the end of the "main" function:

var:video.Color background=new video.Color(160, 160, 160)
while (engine.Run()){
    driver.BeginScene(video.ClearBufferFlag.All, background)
    smgr.DrawAll()
    driver.EndScene()
}

At this point when you run the program you should see the terrain we created in the Terrain tutorial. To quit the program press ALT+F4

3. Adding a skybox

A skybox is centred around the camera's location and consists of 6 images for each side of a cube. When the camera is rotated different parts of the skybox are rendered, creating the illusion of a far away landscape. There is no specific class for skyboxes or skydomes, we just use a GB.Scene.SceneNode. Add the following three lines of code before the render loop:

driver.SetTextureCreationFlag(video.TextureCreationFlag.CreateMipMaps, false)
var:gb.scene.SceneNode skybox=smgr.AddSkyBoxSceneNode('..\media\box_up.jpg','..\media\box_dn.jpg','..\media\box_lf.jpg','..\media\box_rt.jpg','..\media\box_ft.jpg','..\media\box_bk.jpg')
driver.SetTextureCreationFlag(video.TextureCreationFlag.CreateMipMaps, true)

4. Adding a skydome

A skydome uses the same concept as a skybox but uses either a sphere or a hemisphere instead of a cube. Replace the skybox code we put in above with the following:

driver.SetTextureCreationFlag(video.TextureCreationFlag.CreateMipMaps, false)
var:gb.scene.SceneNode skydome=smgr.AddSkyDomeSceneNode(driver.getTexture('..\media\skydome.jpg'),16,8,0.5,2.0)
driver.SetTextureCreationFlag(video.TextureCreationFlag.CreateMipMaps, true)