How to bake a 3D scene from three js

Questions
, ,
1

Hello guys,

I want to bake a complete 3D scene edited in three js. Once the user sets all the position / scale / rotation of a set of models, I want to bake the full scene in a server side (just an idea) and then, once the bake process it is done, load the lightmaps in three js.

I want to know If this process is viable, and which software should I use in that case. I know how to bake the scene in Blender, but this process is manual, and I want to do something similar in an automatic way.

I would like to know the kind of structure that I should continue with this project,

Thanks!

1 Like
2

There is an example in the repository about progressive light maps. Maybe it’s a starting point for your use case: three.js webgl - progressive lightmap accumulation

3

You might consider using an intermediate (meta) language, as is done for Threeml.org. In each example page you can press F2, and download the threeml code that can reproduce the page as is, having the actual objects positions, rotations etc.
Internally the script recursively checks the scene and the objects within it.

Similarly you could create a json or xml from this, post this back to the server, and use this baked file there to regenerate the scene as edited by the user.

4

Thank you bot for your answers.

I didn’t clarify that there’s two parts here:

  • One where the scene it is been edited
  • One where everything is static and we can see everything with the lights baked.

My question was related to the second one. The idea is to export all the entire scene (let’s say in glb), use one software (?) to bake the scene and get the lightmapping and then, for the second part load that glb + lightmaps.

Something simiar as this example: Swivel

My question is basically which kind of software should I use to reproduce these lightmap textures in a server side. Do you have any suggestion?

Thanks!

5

Please excuse me for restarting this topic!

Did you find the answer to your question? I am in the same position as you were back then and i am interested if you found out anything useful :slight_smile: I am also working on some sort of editor where a 3D view can be loaded (and i’d like to use baking to improve the performance)

6

I’m also really curious about this. I’m currently running Blender from the command line to texture bake and would love a more straightforward way of going about it.

7

there is a project that attempted this GitHub - pmndrs/react-three-lightmap: In-browser lightmap/AO baker for react-three-fiber and ThreeJS but imo auto bake is too spotty, even in blender im not aware of any tool or plugin that can do it. UVs always throw a fork in it and make it a manual process. same applies to the three example that mugen posted. i’ve spent weeks trying to make it work with varying models and scenes and it failed practically everywhere except simple, perfectly uv unwrapped models.

as a middle ground drei has a accumulative shadow bake for simple planes that is stable and can either accumulate over time or bake a single texture, but it’s of course not the same.