How would I begin to bake lighting / ao into vertex color data?

Questions
,
1

I’m interesting in implementing a way to bake the lighting/ao in a scene into the vertex color data of a mesh. Is there any info on how I can accomplish this, or info on understanding what needs to be done?
I haven’t found this topic discussed here anywhere. Any help/advice is appreciated!

2

This is usually done offline in a tool like Blender, export to glTF, and then load the glTF in three.js. Probably the two options you want to consider are:

  • Bake AO: Creates an AO map for soft shadows from ambient light sources. Scene still needs to be lit by some other light sources, like an ambient + point lights, or an environment map.
  • Bake Diffuse: Creates a diffuse texture that includes all lighting and shadow information. Scene no longer needs any lighting, and can be considered “unlit” or “shadeless” in three.js, using THREE.MeshBasicMaterial.

For either of those there should be good tutorials on YouTube, if you search something like “Bake [AO | diffuse] Blender to glTF”. Something like the SimpleBake addon for Blender makes it easier, but isn’t required.

1 Like
3

An even better source would be the (paid) Three.js Journey chapter on baking —

4

I’m not looking for how to use a software to do baking for me. I’m interesting in implementing a way to bake it via code.I’m looking for some information on the process behind how those programs do it so I can implement the same process in three.js

I’ve already tried searching, but all I get are tutorials on how to do it in blender or other software. That’s not what I need. I’m looking for the technical details behind how it is handled so I can code it.

5

Ok, it is usually done in other tools because it’s easier (i.e. already implemented) there. Baking AO is quite different than baking lighting, so that is one thing… do you want to bake both, or are you unsure of the difference? It is also more common and more to bake to a texture than to vertex colors. There are many ways to do this, so if you can be a bit more specific about your goals that may help.

6

I think the simplest approach you could consider would be to use something like geo-ambient-occlusion, giving it your vertex positions and cells (indices) for the entire scene. It will return AO values for each vertex, which you could use in your geometry. You’d need to then either (a) write a custom shader that reads AO from the vertex attribute, or (b) use a 1x256 white-to-black gradient texture as the AO map and write a uv2 attribute for each vertex doing lookups into that.

1 Like
7

I found this that looks like what I have in mind: Stable Ambient Occlusion for Player-Built Objects in Avorion blog - koonschi - Mod DB
I think I can just raycast from each vertex and get a ratio to use as the vertex color. As for the colored lights, I’m not too sure about yet. I guess the vertices would be influenced by those by raycasting to them and checking their intensity. I’d have to figure out how to measure the amount of light they emit on the vertices somehow, since the lights could be faded or have a penumbra, etc. That’s what I’m confused about at the moment.