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.
@@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 ;)
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...
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.
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
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.
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
@@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.
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
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 !
Great! This was the best explanation i've seen today. And it works, thanks a lot.
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.
@@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 ;)
Thank you man. You saved my life with this tutorial. Thank you very much
Ha, glad you found it useful.
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...
Check out "Bystedts Blender Baker tutorial" . Daniel Bystedts has made a free baking addon that can do that for you.
thank you
What if we want to keep AO separate?
The AO is separated here 2:45
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.
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
Anyway we can use the same process for lightmaps?
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.
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
@@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.
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
@@Sid-rb2oq I have no idea, never tried it.