Apply Lightmap to PBR material (draco/GLTF export)

[nooxouille]

Hi there.
Being new to Blender, I might be missing something obvious, and I must apolazige for that.

I need to optimize a mesh (a paid one) so it can run as smoothy as possible within a ThreeJS experience (so, a draco compressed gltf export from blender). I’ve understand some of the basic things to do to make it lighter, but I need help regarding the lightmaps.

What I understand of lightmap is that it capture everything within the scene that is (selected and) getting light and shadows. After the process, the result is the same as with light, but without the performance cost.

The scene isn’t sofisticated at all : in terms of ligthing, there is a sun, and some white emissive materials.

Using the addon SimpleBake, I’ve managed to get an atlas of some textures (using some base textures from the mesh, as a test). But for the lightmap, I haven’t been able to get correct results (despite applying advices and settings from tutorials and stuff).

I’ve then decided to go for it the manual way (without using SimpleBake), following this Use lightmap in Blender

The result is, but now I need to mix-it-up somehow whit the actual ground material. And I don’t understand how to get what I want to achieve.

Here is 2 images : the lightmap Im getting and the floor material I’ve tried to add the lightmap to ( https://imgur.com/a/YAXlbTM )

I hope I’ve been clear enought. If anyone could help me, that would be really great (I can also provide the .blend file is necessary).

Happy new year

PS : this is a crosspost with an question asked few days ago on BlenderStackExchange, hoping to get more help here.

[0451]

Have you checked if this works for you on export?

https://docs.blender.org/manual/en/latest/addons/import_export/scene_gltf2.html

Doesn’t work in viewport. As long as it uses correct UV’s and doesn’t get merged together as an ORM map it should work. No clue about your ThreeJS application, but the gltf viewer I’ve had to work with, didn’t differentiate between lightmaps and baked AO (even though it can result in wrong results while interacting with lights in your final application).

If nothing else works you can just multiply albedo with lightmap in blender and bake that into a new texture, but that’s far from optimal.

EDIT:
Just noticed your setup in Blender isn’t correct for viewing the lightmap. You need to multiply (same mix node, multiply blend option) base color / albedo with the lightmap (and using it for some specular occlusion, but you probably don’t need to worry about that).

[nooxouille]

Hey !
Thank you for your awnser, the process is a bit clearer now (yet, quite confusing at first). Working with .gltf isn’t as easy as with .fbx
Still in troubles (something else must be wrong, and I am really confuse on that matter), I’ve quickly checked for an addon that could help me, and it seem that one exist.

But it is simply not working, and I think that is because of the ACES setup I’ve made. I am going to investigate a little more, and will update consequently.

[donmccurdy]

Note that there is no real concept of a lightmap in glTF. If you’ve baked all lighting information (diffuse and specular) into a texture, you could connect that directly to the Material Output’s Surface socket, and it will be treated as an “unlit” or “shadeless” material in glTF and three.js.

To apply a texture to the model as an additive lightmap, you’d need to bake it, export it separately, and then load it in three.js and assign to material.lightMap. I’m afraid I’m not sure of the correct baking steps though, as different software may have somewhat different conventions for units and meaning of lightmaps.

[nooxouille]

Hi ! Sorry I took so long to awnser. Thank you for you time.
I’ve finaly manage to clear things up in my mind, and made it work on the floor object (the https://threejs.org/editor/ help me a lot to vizualize the result)

But things are still wrong for, this time, the walls mesh : the UVs are correct, the lightmap (seems) to be correct but the result once tested within the threejs editor is … weird :

I’ve spend the last 2 days trying stuff, adding solidify to the mesh, testing UVs as far as I could with my personnal blender knowledge and so on but, I just don’t know what to do because, I don’t understand what is happening here.

[RSEhlers]

Check your normals and for a game engine, they might have to all point inside…

[nooxouille]

The normals are ok

[donmccurdy]

@nooxouille

But things are still wrong for, this time, the walls mesh : the UVs are correct, the lightmap (seems) to be correct but the result once tested within the threejs editor is … weird :

Hi @nooxouille, sorry for the trouble here! One important thing to know about three.js —

• the 2nd UV set is always used for lightmaps and ambient occlusion (AO) maps
• the 1st UV set is always used for all other maps

Blender and glTF are more flexible, any UV set can be assigned to any texture map, but when exporting for three.js you’ll unfortunately need to keep that limitation in mind for now. If you have only one set of UVs, you can either duplicate it before export, or after loading in three.js. The three.js glTF loader does this automatically when it sees an AO map, but because lightmaps are not included in the glTF file it cannot do that for you.

I’m guessing that’s the issue, but it’s also worth checking the Blender glTF exporter’s recommendations for any UV transforms you’re using. Another limitation of three.js is that UV offset/rotation/scale is applied per UV set, and not per texture.

[nooxouille]

Well, it already as 2 UV sets.

I’ll check with my developper on monday if he can “manually” reach the lightmap dedicated UV.
But that is really strange considering that the floor as no issue, and I’ve done the exact same thing to both of them …

(The floor is all good)

[donmccurdy]

One more idea – set texture.flipY = false after loading the lightmap, then assign it to the material. Different UV conventions in different graphics APIs and engines.

[nooxouille]

I’ll ask him to try that, and I will keep you updated. Thanks

[nooxouille]

Hey ! so, you nailed it !
The texture.flipY = false trick worked.
Many thanks