Hello. I’m the creator of the OSS project Misskey, and I’m developing “Misskey Room” as one of its features. It allows users to place furniture of their choice and create their own room in 3D. I’ve made a similar feature before, and this time it’s V2.
For Misskey Room (v2), yes, I chose Babylon!
Until now, whenever I did 3D rendering on the web, I used Three.js. However, I somehow had the impression that Three.js was somewhat old. Its codebase is JavaScript, whereas Babylon is TypeScript. I chose Babylon because I believe it is more refined.
Misskey Room uses many different Babylon features, and I thought it could serve as a good demonstration, so I’m sharing a video of it in development.
Misskey Room is part of Misskey and cannot run as a standalone app, so unfortunately I can’t share a playable link or anything like that.
However, since it is OSS, it is possible to run it locally if you have the necessary knowledge, although it does take some effort. (branch and source code is here)
I’m not very familiar with CG architecture, so it would be difficult for me to contribute directly to Babylon. However, I hope that helping spread the word about Babylon and submitting bug reports can be considered contributions in their own way.
Once again, I would like to express my gratitude to the team maintaining this wonderful framework!
Note: My posts partly use machine translation, so the English may sound unnatural. Thank you for your understanding.
Due to the specification that users can individually change the colors of furniture and so on, we can’t pre-bake everything or prepare a texture atlas in advance. Therefore, we have to render the scene with many materials and meshes included.
That said, we do merge meshes “on the fly” as much as possible.
As a result, the number of draw calls increases, which affects performance.
Using Snapshot Rendering dramatically improved the FPS. It is my favorite feature in Babylon.
However, in “Edit Mode,” where users can place and customize furniture, Snapshot Rendering currently needs to be disabled.
Because of that, my challenge is to maintain good performance even in situations where Snapshot Rendering cannot be used.
To render rooms containing many lights smoothly, the power of clustered lighting was essential. It’s a feature I like just as much as Snapshot Rendering.
I control performance by adjusting the maxRange value according to the user’s graphics settings.
I uploaded the video to YouTube because it exceeded the 12MB limit.
I’m not sure whether using morphs for this kind of purpose is the right approach, but I use them to adjust the dimensions of furniture.
To improve performance, I also implemented a process that bakes the morphs into the vertex buffer, so that meshes can be merged with the morphs already applied.
It might be useful if this were supported as a standard feature in Babylon.
Unfortunately, it’s still under development, so there is currently no actual Misskey server online where this has been deployed, and there is no playable link
(However, if you’re interested and have the necessary knowledge, it is possible to install Misskey on your local PC and run it there.)
You might also want to explore Babylon’s Lattice deformation feature, which I’ve found works well for many types of geometry, especially things like furniture.
