Is this possible with lightmaps? (screenshots)

If I had a 100% static scene with base textures like this…

…is it possible to alter the lighting to this degree purely by swapping out lightmaps on UV2?

Before I dive into “how” to do this, I wanted to start with “is this even possible”, thanks!

2 Likes

good question for @PatrickRyan :slight_smile: @Vinc3r might know as well ?

@papajuan, if you are baking light onto static objects like this, swapping out the light map texture should get you close. Though lightmaps will need to be balanced with scene lighting as well so that you can ensure your materials look correct. Unless you just bake out your diffuse color textures to be used as unlit materials, which you could also do, you will need to use both scene lighting and light maps. This is a simple example of lightmaps - press the spacebar to see the different modes of lightmap.

Thanks for the response @PatrickRyan.

This makes me think I have an incorrect mental model of how lightmaps work i.e. I guess I thought lightmaps were the lighting. Instead, it sounds like the lightmaps simply lighten/darken the underlying diffuse texture, and we still have to cast scene light on the objects to see them? Something like that?

Could you please comment on the difference in technique between that lightmapping playground you referenced and this playground which seems to be a very different approach? https://www.babylonjs-playground.com/#8EGGW2#19

Thanks so much for the help!

I’m very confident that the effect you want is doable.

If you want to do a quick test, you can start with this playground (PBR materials and first set of lightmaps already handled).
Then you can easily made a second lightmaps set, (import the glTF file into Blender to tweak the scene), and by using a right naming convention, in combination with tools like the asset manager, you should see that’s it’s possible.

But, if you have in mind to develop a fading between the two sets, in place of just an on/off switch, then I hope you know how to write a shader :nerd_face: (maybe these kind of effects can be done through the node material editor?)

4 Likes

There’s really not much difference between the example in my last post and the one you shared. The biggest difference is that the simple lightmap I shader is used a Standard material and the one you shared is using PBRMaterial for most of the meshes, plus a multimaterial for the furniture. In both cases, we have a lightmap applied to the base color/diffuse texture and the whole scene is lit by scene lighting. Let’s break down the scene you shared:

Base color texture:

Lightmap texture:

Base color and lightmap texture with scene lighting:

The thing to note here is that this scene uses both a hemisphere light for overall light in the scene and the Babylon standard theatre IBL which is adding some directional color to the surfaces. If you were to disable these lights, your mesh would be entirely black as the light map does not do any kind of emissive operation, only modifies the base color returned in the shader. You can test this by changing the metallic and roughness levels on the PBR material to be metallic 1.0 and roughness 0.0.

What you see here is that the metallic and smooth surface is now reflecting the skybox. Before the material was set to metallic 0.0 and roughness 1.0 so that the material added only the most diffused contributions from the IBL.

You can even see reflections in the brightest parts of the floor with direct sunlight hitting it:

image

I also agree with @Vinc3r, though that this workflow is aimed more at changing the scene lighting during a “loading moment” where you cut to a loading screen or are not looking at the scene when the lighting is switched. Lightmaps are not set up to display a smooth gradation between two different textures. If you want that kind of transition, you will need to create a custom shader or node material. You can accomplish this by rebuilding the lightmap math into a node material, but we don’t have a specific node called “lightmap” to mimic the functionality.

I hope this helps, but feel free to ping with more questions.

3 Likes

@PatrickRyan this is all so helpful! Thank you for dissecting that scene and providing the analysis. I’ll start hacking at the playground that @Vinc3r posted and make sure I’m getting it (I think I am though).

(Also, not at all looking for smooth transitions – just want to do a hard load of lightmaps based on other things elsewhere. But good to know that would be a shader thing if I ever wanted to attempt that.)

Thanks again!

2 Likes

Making progress but everything is really dark:

https://playground.babylonjs.com/#RM91KG#1

For reference, this is what I’m shooting for:

I’m going to keep digging into this, but wanted to check back here in case there was something obvious I wasn’t doing correctly. Thanks!

1 Like

Hi,
on babylon side maybe you can try :
mesh.material.lightmapTexture.level = 50 ;

https://playground.babylonjs.com/#RM91KG#2 ,

however the texture you used is really dark.

3 Likes

@papajuan, I would agree with @samuelgirardin about the lightmap texture being too dark. However, if you just increase the level of the texture, you quickly get clipping on the bright areas of the scene. Instead, you will likely need to take a more balanced approach between your scene light and your lightmap, adding some brightness to both. I slightly modified your PG to increase the brightness and change the direction of the hemisphere light in your scene to brighten everything up. I also brought your lightmap into photoshop and brightened the curve. Here are the results:

The curve adjustment looks pretty severe, but most of your data is in the lower values of the scene, so we really needed to boost it:

Using a curve adjustment allows us to specifically brighten ranges of the image without clipping. Adding the rest of the luminance to the scene through the hemispheric light gives an overall boost as well. Balancing them together allows you to open the shadows while still having highlight detail and shadow detail in the scene.

This is just a quick and dirty example. There are a lot of things you will want to do to balance the render to your target light bringing in roughness/metallic values into your shader as well as potentially adding a bloom post process and possibly anti-aliasing. But this should point you in the right direction.

Heres the adjusted jpg as well. Rather than host it, I just replaced the lightmap in the scene by loading from file.

image

I hope this helps, but feel free to ping back with more questions.

3 Likes

What is your setup for Blender baking? I’ve often notice luminosity differences between the camera render, and the result stored in baked textures, so you may have to increase a bit light intensity and bounces.

(not directly related to your issue but for baking, I greatly suggest Baketool addon, which helps a lot for the process)

2 Likes

@PatrickRyan WOW what a difference! I did wonder about cranking things up in PS but worried I would be compensating for doing something wrong elsewhere in the process. But if this is the process, great to know – I can do that. Thanks so much for the detailed response!

1 Like

@Vinc3r I’ve just been using these Bake settings:

I’ve not fiddled at all w light bounces but will give that a try to see how it affects things. Thanks so much for the Baketool recommendation. I will buy it today! :slight_smile: I’m far from a Blender expert so let me know if you have any other general recommendations re: baking lightmaps for BJS.

Using vanilla Blender baking workflow (which is a pain in the a** :smiley:), try this:
image

Use the combined mode with glossy, transmission & emit only if needed on some objects.

Here in Baketools:

1 Like

Also, maybe you can be interested by a functionnality I’ve put in my ReTiCo addon, to activate Material Outputs by labels, which allow to quickly activate materials set up for the baking render:

I haven’t updated the doc about this, but you can download the last version here.

2 Likes

@Vinc3r So, the workflow of that BakeTool is pretty great. However, I’m getting very different results compared to what I was getting doing the manual bake process (I used the settings from your BakeTool screenshot).

Here is my original PG with the regular lightmap: https://playground.babylonjs.com/#RM91KG#1

And here is a PG with a lightmap from BakeTool: https://playground.babylonjs.com/#RM91KG#4

Do you know why I’m getting such wildly different results just by doing the baking differently?

(I’m temporarily not applying any of the lighting adjustments suggested by @PatrickRyan and @samuelgirardin just so I can first understand these differences between regular Blender baking and BakeTool baking)

@Vinc3r Ok so now I’m really confused. I just did a simpler test from scratch, and now I’m getting really similar results between Blender and BJS (lightmap from BakeTool).

Blender:

BJS:


(PG here)

Any ideas why my previous example had such wild variety but this shows remarkable consistency? Is it the more harsh the lighting, the more you have to fiddle with the lightmaps and other settings?

I’ll keep experimenting…

You’ve got these lightmaps using Diffuse bake type? Or Combined like in your first post?

But yes, I always in my scene tried to stick to my workflow… and also tweak baking parameters using my feelings. These tweaks are scene-dependant (exterior, interior, sunny or cloudy, etc), and sometimes you have to send lightmaps in a 2D graphic editor.

1 Like

@Vinc3r I think I have a workable version finally. BakeTool was a game-changer, so thanks so much for that suggestion. I also determined that I had my sunlight set too bright in Blender, and when I dialed that down, the sunlight lightmap started to look right.

Here is my latest, working PG. These lightmaps are straight out of Blender/BakeTool, and I’m doing only a little BJS light tweaking per the suggestion of @PatrickRyan.

lm-swap

Thanks everyone for all of the help!! This is exactly what I was hoping to learn.

4 Likes

This is so cool !!! @PatrickRyan I wonder how we could bump this info to our doc ???

2 Likes