Using Image Based Lighting (IBL)

Wave Engine offers a complete lighting system with different light types for different scene settings. However, sometimes you need to create a soft environment, which is difficult to create with point based lights. For example, a cool sunset with lot of ambient illumination, different colors, etc.

To do that our Standard material offers the possibility to create an Image Based Lighting (IBL from now) on your entities and adding that extra realism.

IBL example

What is Image Based Lighting (IBL)?

The image based lighting is a 3D technique which uses a texture or image with a pre-rendered environment to apply that lighting to the 3D object. It’s very popular because it achieves spectacular results with little CPU and GPU usage, like the previous picture, for example.

How does IBL work?

The idea of IBL is similar to the reflection map that we’ve been using until now, but instead of calculating the specular direction of the cubemap, we directly use the normal direction to get the cubemap color at a specific point, according to the next diagram:

Different uses for cubemap

(We’ve used a cubemap from our IBL sample)

The left scenario represents a reflection cubemap using normals for mirroring the view direction from the camera. On the other side the diffuse cubemap is not affected by the view direction as it’s just a projection of the environment map, so its appearance is not affected by the camera point of view, like the next video:

However, the diffuse cubemap has too much detail for being used for illumination. That’s why we use that cubemap to create a irradiance cubemap. The irradiance cubemap is like a blurry version of the original, but can be used as a diffuse cubemap lighting. The next picture shows the irradiance map of the previous cubemap:

Irradiance map from the standard cubemap

(That irradiance map can also be found on our IBL Sample)

Applied to an 3d object you can clearly appreciate the realism of the IBL. The next video shows a model with IBL and with reflection cubemap.

Using IBL in Wave Engine

Applying IBL to an entity having an irradiance cubemap is really easy. The next sections will explain different ways to add it in Wave Engine.

From Visual Editor

Using the Visual Editor is the easiest way. You only need to create a new Standard Material (Right click on Asset Preview panel > Create Material or Assets > Create Material in the main menu):


Now pay attention to the AmbientPath property of the material. Clicking on that property will show a floating panel with all the cubemaps of your project. Click on your correct irradiance cubemap (in this case the Environment1Light.cubemap)

The last step is to disable the lighting of the material. This will discard all your scene lights and light the object only with IBL. However, you can mix both IBL and Wave lights if you prefer. Uncheck the LightingEnabled checkbox and click on Create.

The last part is applying your new created material to your entity. To do that just select the entity and search its MaterialsMap component, click on DefaulMaterialPath (you can select the dictionary if you prefer, as usual), and select the new created material on the new floating panel:

From code

Creating IBL in code is also really simple, just create a new Standard Material in the CreateScene method of your Scene class (or somewhere else 🙂 ) and asign its AmbientPath property with the irradiance cubemap asset path:

var iblMaterial = new StandardMaterial()
  AmbientPath = WaveContent.Assets.Environment1Light_cubemap,
  LightingEnabled = false

Finally we only need to apply that material to the MaterialsMap component of the entity:

entity.FindComponent<MaterialsMap>().DefaultMaterial = iblMaterial;

And that’s it.

Generate irradiance map from reflection cubemap

There are several ways to generate an irradiance map from a cubemap, but a good one is using CmftStudio, an open source application that can be downloaded here (and also its source code). It is a really powerful tool that allows the user to perform lot of operations to cubemaps.

A relative more simple way is to apply a Gaussian blur filter in a photo editing tool like Photoshop to remove its detail. However, take in mind that that result won’t be 100% realistic. Take it as a quick option!




Leave a Reply

Your email address will not be published. Required fields are marked *