This is my first time posting in the community, and I hope to receive your guidance and support. I am a beginner in Babylon.js, and I was initially inspired by this example: 3D Cabinet Designer. I wanted to develop an interactive 3D kitchen scene myself.
Over the past two weeks, I have been defining different cabinet classes and generating Babylon.js scenes automatically using C# code. Everything was going smoothly until I encountered rendering issues.
Here’s my current setup:
I’m using a HemisphericLight with a predefined groundColor.
The panel materials are created using PBRMaterial, with albedoTexture set and metallic = 0.
The setup is quite simple and looks very unrealistic.
To what extent can Babylon.js render images that are almost identical to real-life scenes? For example, the kitchen in the photo below uses the same panel material as my scene, but it looks much more realistic (of course yes).
If achieving 90% realism is possible (I know this percentage is meaningless), where should I start learning? Is there a roadmap for rendering techniques in interior design?
I’ve noticed that many online design platforms use server-side rendering, where a selected view takes a few minutes to render in the background, and then the rendered image is sent to the front-end. For example, the case below Free 3D Home Design Software - Floor Plan Creator.
The setup is quite simple and looks very unrealistic
Okay so afaik there’s a few things that make a scene realistic.
Models and Textures
Have everything modeled using real life measurements / metrics, this helps preserve proportions and prevents things looking out of place.
Use PBR materials, don’t just use albedo, add normal, metallic and roughness textures as well. Make them mimic the values the objects irl would have.
Otherwise they’ll look flat and boring kinda like in your initial image
Framing and composition
Compose a scene as how it’d be irl, add randomness, add imperfections.
use soft shadows and shadow casting where you can, ambient occlusion where you can’t
Use an environment texture, hdris, for better reflection and lighting.
how you setup your lighting can greatly impact your scene.
Post processing
Until this point only focus on your scene looking realistic, at this step you can make it look good. Diverging from realistic, but an overall better output ( remember reality is often overexposed, unsaturated and has a poor selection of colors ).
I’ll complete a bit as well, giving a point of view, more “3D generalistic” about your question :
There are generally 2 ways of rendering 3D, and they are VERY different.
Ray tracing : for each pixel, light beams are sent from the camera, bounce N times until reach a light, go back with energy info (fortunately, light takes the same path both ways, so it’s ok to launch from Camera)
Rasterisation : for each triangle in the scene, some colors is computed using some shaders and lights positions, and each triangle is “drawn” on the image, 1 by 1.
Then :
Ray tracing engines (for example : Blender Cycles) are theorically the “only way” to achieve photorealism (“basic” rasterisation means there is no link between 2 triangles, while in real time, surfaces send light to each other)
Rasterisation engines (for example : BabylonJS) implement some “tricks” to simulate the photorealism missing from lack of raytracing.
I’ll give a simple example of what I call “tricks”, to make it clear :
RED : the rasterized image has no reflections of light on meshes. This can be achieved with PBR mentioned by @Heaust-ops, and also have a look as well at the SSR (Screen Space Reflection) which is yet another nice trick
BLUE : the rasterized image has no energy loss on corners (When surfaces are close to each other, light bounces N times between surfaces, loosing energy, the result is darker area. See in the corners, or behind the toaster on the left). Since rasterisation won’t compute light bounces, it cannot compute this. But a “FAKE” way is called AO “Ambiant Occlusion”. It’s a manual darkening of the surface when close to another surface. This is used in the 3D Cabinet Designer you have linked above :
The dark area next to corners is the AO being used.
In Babylon JS there is for example the SSAO (Screen Space Ambiant Occlusion) which does this very well
To conclude, if you want to get as close as possible to photorealism, either you go Ray Traced (won’t be real time), either you try to mix all “tricks”, already listed above
Also, (Yeah, when I’m started, I cannot stop, sorry ) if you ask yourself about these “Screen Space” stuff (SSAO, SSR, etc…). “Screen Space” means it’s done in the context of the screen, which means it’s basically 2D (not 3D !). Seems nothing, but it means a lot.
(I previously worked into training Computer Vision AIs with 3D rendering, and I can ensure even the best rasterized render won’t compete with raytraced for a second, with an AI sensible to any fake pixel)
I recently came across this video, which is a perfect example :
FS2024 on the Left, RealLife on the Right, impressive, isn’t it ?
Now, have a CLOSE look at 0:26 - 0:28.
You have a perfect example of the cons of the “Screen Space” reflexion :
So, Screen Space means “computed on the screen”
To make the reflexion in the water (A), the GPU takes the pixels from the trees (B) and fade them mirrored on the water.
This “fake” ray tracing works great, but now, what if you put something between you and the tree ? In real life, you should still see the tree in the water
Thank you all for your detailed and insightful responses!
I really appreciate the effort you’ve put into explaining the process. The step-by-step guide, the additional points, and the deeper insights into rendering mechanics have all been incredibly helpful.
I’ll work on improving my scene rendering based on your suggestions and will share some results once I make progress. Hopefully, this will be useful for others facing similar challenges in the future. Looking forward to further discussions!
Blender was mentioned above, but it’s also worth mentioning that Blender can be used in headless mode, without a GUI, just from the command line, which is what the cloud based render farms use Rendering From The Command Line - Blender 4.3 Manual
So, you could use one of the pre-existing cloud render farm solutions (assuming they have an API and you’re able to cover the cost), or roll your own with headless Blender.
) if you ask yourself about these “Screen Space” stuff (SSAO, SSR, etc…). “Screen Space” means it’s done in the context of the screen, which means it’s basically 2D (not 3D !). Seems nothing, but it means a lot.
