Blender GLTF ambient occlusion export to WebGL for BabylonJS and ThreeJS

If you want to use an Ambient occlusion map in WebGL using the GLTF or GLB format exported from Blender 3.0 or higher then there are some extra steps needed to be able to include the map.
0:30 - Bake Ambient Occlusion to an image texture
1:45 - Blender AO GLTF configuration
03:58 - Bake AO into Diffuse/Color map
05:24 - Results
06:24 - BabylonJS debug tools are awesome !
BabylonJS GLTF Sandbox - sandbox.babylonjs.com/
ThreeJS GLTF Sandbox - gltf-viewer.donmccurdy.com/
Blender GLTF docs - docs.blender.org/manual/en/2....
If you found this useful and want to show some appreciation you can buy me a coffee - www.buymeacoffee.com/dirkteucher
/ dirkteucher

[@DirkTeucher]

0:30 - Bake Ambient Occlusion to an image texture
1:45 - Blender AO GLTF configuration
03:58 - Bake AO into Diffuse/Color map
05:24 - Results
06:24 - BabylonJS debug tools are awesome !

[@williamdainese]

Thank you man. You saved my life with this tutorial. Thank you very much

[@DirkTeucher]

Ha, glad you found it useful.

[@nicolasnayok]

Great! This was the best explanation i've seen today. And it works, thanks a lot.

[@DirkTeucher]

Awesome, glad you liked it. I decided to do these videos whenever I spend too much time stuck on a problem or searching for something like this on youtube or if the existing youtube tutorials are too long :D ... hope it proves useful to ya.

[@nicolasnayok]

@@DirkTeucher i don't understand why 3d software makers don't make it easier. That glb material workflow is a real unuseful pain. But thank god, you made it easier ;)

[@BlenderIndonesia]

thank you

[@salimnad1526]

Good tuto thx!!...I used to use the combined méthode to bake all texture in one texture, but I have a question, how can bake the texture without AO to combine them after in threeJS?
I want to get all information of my texture in one texture but without AO...

[@DirkTeucher]

Check out "Bystedts Blender Baker tutorial" . Daniel Bystedts has made a free baking addon that can do that for you.

[@Sid-rb2oq]

Anyway we can use the same process for lightmaps?

[@DirkTeucher]

I would bake Lightmaps into the diffuse/colour chanell for most use cases I can imagine and then disable shadow rendering in the engine for those objects.

[@Sid-rb2oq]

In my case, i want the lightmap to be added into the gltf file somehow so that i can traverse the scene and multiply it with the albedo by creating my own shader as my scene contains plenty of large meshes and combined/diffuse maps will destroy all details.@@DirkTeucher

[@DirkTeucher]

​@@Sid-rb2oq If you want to apply the lightmap dynamically in babylonjs/threejs then that is a whole other tutorial and I would probably load the lightmap as a separate texture to do what you are suggesting figure out how to blend the texture in. If you are using bablon there is a material shader builder node tool that could probably do this. But I have not looked into it myself as I have never needed to do that. Alternatively you might want to just bake the maps you want separately and then merge them in a photo editing tool. This would be the easiest method and probably the most performant. But you would not be able to dynamically blend the lightmap to say for example switch on a light in a room.
-- Side note -- I switched from Photoshop to Affinity Photo about 3 years ago and highly recommend Affinity.

[@Sid-rb2oq]

I'm working on a 3js project, what if i use the gltf settings node to plug in other textures similar to AO map, will i be able to fetch it by traversing?@@DirkTeucher

[@DirkTeucher]

@@Sid-rb2oq I have no idea, never tried it.

[@rahulygupta8814]

What if we want to keep AO separate?

[@DirkTeucher]

The AO is separated here 2:45

[@Lunsterful]

I see this works well for static scenes, I'm having a horrid time with moving objects casting shadows (in 2022, come on?) everything looks pants in WebGL.

[@DirkTeucher]

Yeah I mean when I did this 6 months ago this was the best technique I could find to create good looking shadows and its a hacky fake method. Maybe something new has popped up in ThreeJS in the last 6 months? If you find anything please let me know. It will get there , I also just wish it would do it faster :D