I am completely new to Babylon JS. I was just trying few things like creating my own house with all the furnitures and other household stuffs. I was able to create the whole house with different rooms. Then for adding the furnitures I was importing the Blender’s object. But after 3 to 4 blender object (like a sofa, bed) , the scene camera movement got bad as if it is having a lag. Actually it became NOT SMOOTH. So I was wondering if there is a way to create all the furnitures with the help of Babylon JS only and there would be no need to import any third party object. I also found this link in some other forum which says it has been developed using only BabylonJS. Is that true?
https://www.babylonjs.com/demos/flat2009/
Well, Babylon is not a modeling tool. In theory you could create some objects using Babylon primitives, but I wouldn’t suggest it…
Furniture models are known to be high poly objects, and indeed it can affect your scene performance. But you just need to work on optimization of the models. Create low poly models, try using textures, normal maps where possible. And here and there you can even let through some of the high poly models.
So I suggest you keep working with external models, just follow the rules of the optimization.
As for the link, I really don’t know, but I doubt that everything is created inside Babylon.js alone.
2 Likes
It is possible to create meshes (and sofas as well) with Babylon, but still it is the rendering engine, not a modeling tool, and if you use UV textures you’ll need extra tool anyway.
One may find in PG some examples of JS furniture, but usually they are quite ugly 
- https://playground.babylonjs.com/#KIV6SS#32
2 Likes
Hi @nogalo
Thanks for your answer. So you are saying that using an external object like Blender is a best practice in creating Room kind of scene. Just I will put all my doubt in points for creating room kind of scene:
- Is Blender the right choice for creating objects like bed, sofa, table ? Or should I switch to some other tool.
- While following the rule of optimization, I can add number of blender object in my BabylonJS scene (10 to 15 objects) and the scene will not lag/flicker?
- Any tutorial where only Babylon JS is used to create high poly object like table, chair ?
For that link, now I am actually running it on my local, finding it difficult to understand.
After installation, hit this URL http://localhost:8080/demos/flat2009/
Please provide your valuable inputs to the above mentioned points.
Hi @labris
What about this demo?
https://www.babylonjs.com/demos/flat2009/
Are they using external objects ?
Assets for this scene are located at Website/build/Scenes/Flat2009 at master · BabylonJS/Website · GitHub - as you may see, there is quite a long list of them!
The 3D file for this scene is here -
Website/Flat2009.babylon at master · BabylonJS/Website · GitHub
(you may download it and put into Sandbox to have a look)
1 Like
Blender, 3dsMax, whatever, it doesn’t really matter, as long as you try to optimize each model as much as possible. This is a one of the first scenes that I created in Babylon, and at that point I wasn’t very experienced, so I barely did any optimization, and it works okay. There is no FPS drops, at least not for me on PC. I doubt it will work on mobile devices.
https://www.productexample.com/unit21safari/index.html
But the point being, you can work with low/medium poly models, even some high poly models, but you need to be aware of optimization.
So few things that you can think about.
- Decrease polycount.
- Don’t use high resolution textures, try to work with 1k textures if possible. Important especially for iOS
- Use gltf format
- Use draco compression
- Try using normal maps if possible, instead of geometry.
- If you have several meshes sharing the same material, merge them (you can merge them even if they using different materials in same cases. The point is to have lowest number of objects possible. Sometimes you have models that have like 10 screws for example on it, and each screw is unique entity, merging 10 screws into 1 object in that case helps your cause, as it lowers the number of draw calls.
- Use instances if possible. If you have several chairs, that share same geometry, and material, you import one, and create instances of that chair instead of having several chairs imported.
Also check the doc, and see if there is anything that can help you.
I’ve worked on several projects where I dealt with high poly meshes, and my experience that Babylon deals fairly good with the scenes if implemented correctly. So you creating a house, with the furniture in it. should be doable.
Further if you target mobile devices as well, you can create a logic in the code that provides different texture resolutions depending on the device that is accessing the app. So lower res if mobile, higher res if PC.
One final thought, check your textures in the scene, try only decreasing resolution of the textures and see if there is any performance improvement. Or remove textures completely and test it. Sometimes in my projects, the only reason I was experiencing FPS drops was related to the textures only, and solving them helped improving performance of the app.
4 Likes
That example is very beautiful. Thanks for all the details you shared. I will read all of them and will practice.
2 Likes
@nogalo Is it possible for you to share your scene source code? Your room light is super. How did you do it?
The magic in this is to use textures with pre baked lighting informatio. Very suitable for static scenes.
https://playground.babylonjs.com/#ADPQFC#9
2 Likes