Exporting HDRI scene lighting to glTF


The attached image above is the low-poly forest scene to use for the A-frame WebVR project. The lighting is only from HDRI environment map, there are no additional light sources. I really like the look of the lighting and would want to have it included when exporting the model to glTF.

After doing some reading, I learned that it is not possible to directly include HDR lighting with glTF exporter, and that it would require baking the light to the models.

The issue is all I can do so far is basic modelling but I am very much a complete beginner in advanced stuff. I am completely out of depth with shading, texture mapping and baking and it would require a lot of time for me to look into those knowledge.

In the shading setup, so far I have only used a color texture to color the models. I am not using any other texture nodes as it is a low poly style and I will be using only flat colors to the models.

Shader nodes

And this is the extend of my extremely limited knowledge, I don’t know how to properly unwrap UVs, and setup additional nodes to bake the HDRI world lighting if it is possible.

It would be heaven-sent for me if I can learn how to bake the HDRI lighting to my scene. Please help me guide through how to approach this.

Welcome!

Before you try baking, are you exporting this to a software that supports an HDRI? If it does, you could likely re-create a very similar lighting there, after transferring the scene. Or even if it doesn’t, placing lights to get a similar result might still be easier than baking the lighting, if it can do it.

If you do want to bake the lighting, I can help, but it’s going to be a multi-step process, especially if you are starting from 0.




For a first bake, I would suggest trying it on a single object to start with. Maybe on the ground? That’s a pretty big object that will make the effect of baking very easy to see.

The first step before baking is to prepare the UVs.

1- Select the ground object, then press CTRL+A → apply scale, if you haven’t already. This is needed for the UVs to unwrap properly, or they could get scaled weirdly.

2- Go to edit mode, select everything with “A”, then use “smart UV project”. This will automatically cut the UVs and lay them out within the texture square. It’s a bit messy, but good enough for baking or texture paint.

3- You will get options for the unwrap. Make sure to add a little bit of “margin”. This is needed so the UV pieces don’t touch each other and leak texture between sections of the object. You might need to try a few times to find the right value for your model. You want the pieces to be visibly separated, but not so much that they fail to occupy the texture space well and tightly.
margin

Here is an example of a good gap distance between pieces, done on a simple cube.

If you know UVs well, you can get something a bit better than smart unwrap, but it won’t be necessary for this.




Next step, setting up the texture that will receive the bake.

Go to the object’s material. Create a new “image texture” node. It shouldn’t be connected to anything for now, it should just exist in the material. Press the “new” button to create a new, blank texture. This new texture will be used to receive the bake. Because we are baking lighting, you should check the “32-bit” button, that way the bake can store the full intensity of the light (a regular image would get clamped values and lose some brightness). I would suggest naming the new texture immediately too, or things could get messy quickly.

32-bit

If you have multiple materials on the same object, make sure they all have an image texture node present but disconnected in their material and they are all set to use this same texture.




Now, it’s time to bake.

1- Select the object that will receive the bake and nothing else. Go into its material(s) and make sure the image texture node that will receive the bake is selected in each material and no other is. That’s how you tell Blender which texture you want to bake to.

2- Go to the bake settings (in the render settings, you need to be using Cycles to have them). Set the bake type to diffuse.
diffuse

3- Press the bake button. When the bake is done, go to the UV editor and search for the image you baked to in the list and see if it baked correctly.
list

4- If the bake is correct, save the image. You need to save it immediately, as Blender won’t keep an unsaved image. Make sure to save it in a format that supports 32-bit (or at least 16, that still should be high quality enough), like exr.
save

5- The bake might have noise. There are 2 possible solutions: either bake with enough samples that the noise becomes invisible, or denoise the baked image as a separate step. Technically, the baking system can use the denoiser (if you bake in “combined” mode), but I wouldn’t recommend it, the baking and denoising systems don’t work well together and cause some artifacts. If you want to denoise a bake, you would need to load the image in the compositor and pass it through a denoise node as a separate step from the baking (or do it in photoshop or something).




Now, it’s time to use the bake in the material.

Go back to the material editor, unplug the texture and replace it with pure black. Plug the baked lighting in the emission color and set the emission strength to 1.

The way I plug it here will completely replace the diffuse component (the main color) with the bake, but will still allow reflections to exist on top, so this method can support glossy (but non-metallic) objects.




A few things to be aware of. What I just explained only covers the basics, you might have some situations that are a bit more problematic:

  • A material you baked is also used on an other object. You can solve this by making the material single-user and have different versions of the material on different objects. Or, you can also solve it by baking multiple objects at the same time, if you feel able to do it (you would need to unwrap the UVs of all those objects together in a single UV layout, then bake with all those objects selected).

  • You have a fully metallic object. Metals have no diffuse component in their materials, they are purely reflections. Baking the diffuse will yield a blank texture. You usually wouldn’t bake metals and would rely on the reflection system of the software where you will send this scene if there is one. If you really must bake the reflections, you need to set the bake type to glossy instead, it’s just that you will get static reflections that don’t change with the camera’s angle.

  • You want to bake the lighting on an object with intricate texture detail. This is a bit more complicated, you would need to bake the light separately from the texture (uncheck the “color” during the bake), then combine the existing texture with the baked light in the material.

  • The existing texture already has it’s own UVs and they don’t fit the square. If this is the case, you need to create and unwrap a second set of UVs for the new texture that does fit the square.

Dear @etn249,

First, thank you so much for talking a lot of your time to give me detailed instuctions on the approach.

I followed step by step to unwrap UV to one model, create a blank image texture, select the texture and bake with diffuse type. After baking on step 3, there is a problem as the baked texture went black.

Here is my shader nodes for the water model.

Nodes

Again, thank you for helping me.

That would be because you baked a fully transparent object, its lighting is entirely made of reflections and refractions, so there is no light to be baked. If you do want to bake the water, you will have to temporarily remove the material’s transmission during the bake process.

I am not sure how well this will work, water is the kind of material you wouldn’t bake. If possible, you would use the other software’s own systems to recreate something reflective over there.