Ambient Oclusion vs lightmaps

I am building up an outdoor environment with buildings in my scene and would like the end result to look like the image below. From what I have found on google it seems like it is ambient occlusion that I am looking for. However, I read here in this forum that it is not optimal, and that another way to do this is with lightmaps.

I found this example (and it looks very promising): three.js webgl - materials - lightmap

Can I achive a similar result as in the picture with lightmaps or do I need ambient occlusion as well? What is a lightmap and how do I add it to my scene?


1 Like

The effect you see in this effect are mostly from shadows and indirect lighting. AO won’t be able to generate these kinds of results. AO will equally shade all edges and corners, for this kind you’ll need a full fledged GI solution. Since those are pretty slow for realtime, it’s possible to bake the complete effect in lightmaps during modelling. Lightmaps are just like diffuse maps but contain how much light is arriving at any point on the scene. You can bake lightmaps in most 3d softwares like blender. Just google and you will find a lot of tutorials.
Once you bake the lightmaps you can export them with the 3d model in GLTF and threejs should automatically load them.

Thank you so much!
We load models into the scene in real time (the users do this) so I’m not sure I can bake the lightmap in advance. is there any way I can do this realtime?

You can generate a shadow map progressively in the scene, but it would be quite slow for a model this big. Threejs has an example for this: three.js examples

For this, you will need the uvs in all the models. You can unwrap models in realtime, but that too would be quite slow. I made a js wrapper for xatlas some time back, which does this: GitHub - repalash/xatlas.js: XAtlas JS Wrapper: Mesh parameterization / UV unwrapping library for use on web and js by compiling to WASM.

Also you can do it in screen space without UV unwrapping if your camera is static

This doesn’t sound quite right to me — are you referring to screenspace AO? Baked AO can give results just as good as GI (at least in terms of the soft shadows) I think, as long as you have a nice UV unwrapping and spend the time baking AO offline.

Once you bake the lightmaps you can export them with the 3d model in GLTF and threejs should automatically load them.

Unfortunately not – glTF files can contained baked AO but not lightmaps. But you could attach the lightmap to the emissive slot in glTF, and then just swap it to .lightMap after loading in three.js easily enough.

is there any example for how this works? i have never seen a youtube tutorial for blender that deals with lightmaps. is this the same as baking into textures?

I’ve only baked diffuse or AO maps in Blender, I’m not as familiar with lightmap baking there, but I think people do… at least in three.js the lightmap is just a texture, not an irradiance volume or anything like that.

Right, sorry for not being clear earlier.
I was referring to SSAO not being able to generate that kind of images. Although it can if you ray trace the color buffer and have enough rays. it’s called SSRTGI.

And was referring to baked AO maps and using them with gltf and blender. Baking the whole lightmap doesn’t seem needed for this kind of rendering.

1 Like