3D ArtRoom 2022 – Update

I reworked the ArtRoom, which I revived, and re-baked and exported it from Blender to BabylonJS, to the glTF (.glb) file format specifically from Blender.

I mainly added plates to put my photography on. I also tried to put a dedicated environment into the scene, but somehow the .babylon file is broken after exporting it. What I did is drag and drop the Blender export onto the BabyonJS sandbox and saved it as BabylonJS and glTF. But for some reason the environment did not come across.

But since I set all objects to «unlit», this doesn’t really matter that much.

Update April 16. This above is a heavily optimized version. A bit more moody, smaller textures and reduced figures polycount more manually. Basically the file went from 96 MB to 2 MB. Workflow seems stable.

I export from Blender using the built in glTF exporter, import that into the BabylonJS Sandbox, tweak a few things and export it from there. A very big help in all my work going to JPG is Greg Benz’s WebSharp PRO. Highly recommend adding this to your workflow as well!

Create your own environment (still unsolved)

So, technically, to create an environment go here.

Then:

  • drag and drop a hdr image
  • save the env
  • drag and drop the saved .env scene onto a sandbox scene

    But as said above, somehow the exported scene is broken. It cannot be re-imported to the BabylonJS sandbox…

Next Steps

  • Next step would be to code it up and make the images clickable.

Blender «BakingTool» Addon

While getting nice results with the built-in baking in Blender, There’s no way to denoise the renders while rendering. That’s not a biggie, as the compositor can easily be used to denoise the results.

But the baking is sorta cumbersome and very manual. So I was looking for a solution that would automate this a bit. First I tried this GitHub project called «Lightmapper«. But even after hours of testing, running various Blender versions etc. I simply did not get any images out of it. It rendered for 0.0 or 0.01 seconds and nothing. I am sure I missed something, but as it looks like a cool solution. Give it a try! Projects like those are not priceless because they’re free, but many times they combine the best of many commercial tools. But there’s always the «which version of host app to run with which version of the code» problem. Which is not the case with commercial products.

So I found the apparently most well known Blender baking tool called «Baketool«. Bought it, installed it, played with it, consulted their documentation and watched a video or two and I was up and running and it rendered images in no time.

While there’s more than «Baketools» and the Github project «Lightmapper», I am happy with my purchase of «Blendtools». I found my list here. Give it whirl, you might find something that suits you.

Final bake in Blender (left) and the in the BabylonJS Sandbox (right)

Side note: I added a point light for more illumination than just from the neon tubes with an emissive material. And also a spot light to bake the figure.

Process

The process is very easy with this addon.

  • Create a new Job
  • Decide the baking mode (Individual or Atlas & Target)
  • Setup mode, save path, Image format and render device
  • UV settings (Good at default)
  • Then add the object you want to bake
  • Choose the render passes
  • Hit «Bake»

My setup

  • Created a job called «ArtRoom-2022_REGULAR»
  • Chose to bake individual surfaces to texture
  • Enabled «Expert» because it has more options
  • Set path, chose PNG and CPU (with my 1060 there’s not much difference to CPU…)
  • Added all the meshes I want to bake
  • Setup AO and Diffuse pass to be rendered (more samples on AO for less noisiness)
Baketool setup in Blender
Result Diffuse and Ambient Occlusion

DSGVO Cookie-Einwilligung mit Real Cookie Banner