An introduction to cube mapping

Cubemaps are used in real time ren­der­ing engines (mostly in video games) to fake reflec­tions on objects. Raytracing is slow and heavy on the CPU, so instead of tra­cing rays it’s faster to take the inform­a­tions from a pre-calculated image. A Cubemap is made of six dif­fer­ent images mapped on a cube (one image per face). Most of the time those six images are parts of a 360° pan­or­ama, it’s faster to use this type of pro­jec­tion vs a sphere (because the sphere will obvi­ously have more poly­gons than a cube).

Video games use them it for all kind of reflec­tions on metal­lic objects, they also use them for sky­box back­grounds (environe­ments) or just spe­cial effects on shaders (for example you can fake global illu­min­a­tion using a cube­map) because it’s very fast and the res­ults are impressive.

Recent games even use cube­maps to fake global illu­min­a­tion and dif­fuse illu­min­a­tion by using a high mipmap level of a cubmap. The high mipmap level is like a blurry ver­sion of your sharp cube­map, which con­tain the light inform­a­tions but not the details, it’s usu­ally called a “Diffusely Convolved cubemap” (read this art­icle on the poly­count wiki for more informations).

Software used in this article

Picturenaut + Filter plu­gins (read the instruc­tions to install the plu­gins)
HDRshop v1 (the ver­sion two is not a free­ware)
ATI cube­map­gen (down­load link at the bot­tom of the page)

What's a diffusely convolved cubemap ?

Behind this strange word there’s a simple explan­a­tion, mak­ing a sharp pan­or­ama into a dif­fusely con­volved one is like tak­ing a pic­ture in Photoshop and apply­ing some blur. The only dif­fer­ence here, between Photoshop and Picturenaut, is that Picturenaut blur the image and respect the outer edges. The res­ult, when applied to a sphere, has no vis­ible seams !

Sharp reflections or smooth illumination

Here you can see the dif­fer­ence between a sharp pan­or­ama and the dif­fuse ver­sion of it. The sharp one is usu­ally used for reflec­tions on metal­lic objects while the dif­fuse one is used to mimic the effects of global illu­min­a­tion. You could also have a less dif­fuse but not quite per­fectly sharp one for objects with glossy reflections.

Now, let’s see what’s the res­ult if we don’t use Picturnaut. Here’s a ver­sion with some Photoshop gaus­sian blur. There’s more details, less light from the sun, a lot more brown and orange col­ors from the build­ings. And most import­antly (you can’t see it on that image, because it’s flat) there’s a dif­fer­ence between the top and bot­tom pixels and between the left and right pixels.

How does that look on objects ?

Here’s the pre­vi­ous pan­or­ama applied to the Standford rab­bit model in a real­time engine. I also added a small ammount of fres­nel in the lumin­ance to make the edges a little bit more defined.

As you can see with the dif­fusely con­volved pan­or­ama you only get soft lights, in game engine they com­bine that soft indir­ect light to dynamic lights (spots, sun, torch­light and so on) to get even more real­istic res­ults. You could also com­bine that ver­sion with a slight ammount of the sharp cube­map to fake mater­i­als like porcelain.

In the next example I just used the sharp cube­map, you can clearly see the chrome look and feel. Its even more impress­ive when you move the cam­era around. Even if the mesh doesn’t reflect itself you get very nice fake real­time reflec­tions. It almost look like a render.

Here’s another example just for fun, the teapot metal is made high mipmap level of the sharp cube­map and the black rub­ber is made from the same cube­map but dif­fusely convolved.

Another benefit of using cubemaps

What’s cool about them is that you can have dif­fer­ent mipmap levels in the same file (see Mipmap on Wikipedia). Using the embed­ded mipmap levels you can do both chrome and blurry alu­minium reflec­tions using only one cube­map. For sharp reflec­tions like chrome you use the mipmap level 0 (with the higher defin­i­tion) and for the blurry reflec­tions like alu­minium you use a higher mipmap level (with a smal­ler defin­i­tion). At each mipmap level the cube­map become blurrier.

Its also good for your graphic card memory, if you look at a chrome object in a video game that’s 10 meters far from the cam­era you don’t need a 1024 pixel cube­map on it because the object take only 20 pixel on your screen. The object will use a higher res­ol­u­tion cube­map if you get close to it. Think like that, mipmap are like LOD  (see Level of Detail on wiki­pe­dia) but for textures.

How do I make cubemaps ?

First of all you need some 360° images, they can be in vari­ous pro­jec­tion meth­ods (pan­or­ama, spher­ical, cross). If you don’t know where to get some free images, you can go to the sIBL Archive and down­load some of their files. In each pack­age you will get a 8bit JPG file and a 32bit EXR file in pan­or­ama pro­jec­tion. You can use both.

8bit vs 32bit cubemaps

You can work with HDR images or LDR images (see High dynamic range ima­ging on wiki­pe­dia). LDR images like 8bit JPG are enough for most cases. 32bit cube­maps are used mostly for sky­boxes (a good example on the Valve wiki) because they got more dynamic range, thus they give even bet­ter res­ults in qual­ity than 8bit images. The only draw­back is that they are more expens­ive for the graphic card. Hopefully you can con­vert the 32bit files into 8bit files…

Tools to use

There’s not one work­flow for cube­map cre­ation, but here’s the tools I use and what pur­pose they serve. The basic work­flow is get­ting a pan­or­ama (or shoot­ing one), con­vert­ing that pan­or­ama to a ver­tical cross pro­jec­tion and gen­er­at­ing the cube­map from that file.

Picturenaut is one of the free tool you gonna love. You can use it to con­vert the HDR images to LDR ones when you need it. That’s also the tool you will use to gen­er­ate the Diffusely Convolved ver­sion of your sharp panorama.

HDRshop is used to con­vert your pan­or­ama (lat­it­ude lon­git­ude pro­jec­tion) to a ver­tical cross one. Here’s an example of a ver­tical cross pro­jec­tion, it look like an unfol­ded cube.

Generating the cubemap in ATI Cubemapgen

Once you got a ver­tical cross pro­jec­ted image you will need to use ATI Cubemapgen. With this tool you can load your ver­tical cross and fil­ter it to a cube­map. There’s plenty of options, you can gen­er­ate mipmaps, blur the gen­er­ated cube­map etc… You can import HDR or LDR ver­tical cross, DDS cube­maps, or sep­ar­ate faces (one image per face) You can then save DDS cube­map, sep­ar­ate faces or cube­map cross depend­ing on the engine you’re gonna use. I use DDS cube­map since it’s the most com­mon type in real time engines (see DirectDraw Surface on wiki­pe­dia).

I usu­ally do a Diffusely Convolved cube­map at 64 pixels per face for light­ing. Some 128 pixels per face with dif­fer­ent ammounts of blur (for rough mater­i­als). And a 1024 or 512 pixels per face for chrome mater­i­als with a super small blur of 4 pixels (per­fectly sharp reflec­tions look wrong).

Other utilities for Windows

To see the .DDS files in the explorer you need the Nvidia DDS Thumbnail viewer. You can also use the Windows Texture viewer to view your .DDS at full size. There’ also the Nvidia DDS Plugins if you use Photoshop to load and export .DDS files.

Information and other things about this subject

The poly­count wiki got one art­icle about cube­maps and another art­icle about the dif­fusely con­volved cubemaps. The Marmoset tool­bag is a real time engine to show­case mod­els for game artists which sup­port cube­maps and HDR files as illu­min­a­tion source. It’s also one of the best engine with the Unreal 3 engine for tak­ing screen­shots of game assets.

Ressources used in this tutorial

Barcelona rooftops from the Smart IBL Archive on hdrlabs.com (awe­some site by the way)
The clas­sic Standford Bunny model from the Standford University, mod­i­fied ver­sion with less poly­gons by Mr.Bluesummers (good things on his web­site) smoothed in Cinema 4D.