Hi Everyone,
I am babylon as part of a new project for my company and I was wondering if you had any resources on best practices for folder architecture of babylon projects? Do you separate meshes and materials in different files, lights, cameras? Do you colocate things as much as possible? Any open source example of top of the class projects representing best practices?
Kinda depends on what your project structure is going to be, are you using any 3d party frameworks like angular or bootstrap? Do you plan on making it a NPM deploy? Is it going to have multiple versions/test environments etc.
I usually do
-Github Folder
– project files
– public_html
— index.html
— assets
---- images
---- meshes
---- npm_folders…
— js
— css
An amazing question, which i doubt has an official answer anywhere 
I personally tend to structure my project like I structure web projects - a source directory with all of the code (separated to each scene and inside each object), and an assets directory, where I keep all digital files (images, models, etc’). The structure there tends to be decided by the objects I am using (if they have their own structure, it will stay the same).
In the source directory, I usually stick with the way babylon is sources (Cameras, Lights, etc’) for globaly objects, with my main runner as the index.
But, there are no best practices. I have seen amazing projects with a single file in a single directory, and have seen huge well-structured failures.
1 Like
Hahaha, isn’t that the truth.
1 Like
I’m not talking about the outer folder architecture (assets, building files etc.) and more about the JS architecture.
In our case, it is inside a react application, and I made a bridge using a custom hook so the question is not how it interacts with the rest of the application, but more how to separate things inside. One file projects are okay if you are alone working on it but for something that needs to be shared by a team and be maintained for years, it might be a bit lacklustre
Thanks for the reply, and indeed I didn’t find a single resource, not even an opinionated blogpost, which is a bit scary to be fair. I’ll check the babylon source itself to see what you you mean in that second part.
If that’s what you mean then the community is leaning toward TS convention.
Just read the contribution guide and use that as a structure?
I might be missing something, if you are referring to this document (Start Contributing to Babylon.js - Babylon.js Documentation) it doesn’t really touch application architecture.
Also, the architecture of an engine (that deals with the definition of what is a Mesh, a Light, or a Camera) is different from the architecture of an app (which have multiple instances of meshes, lights and cameras, not to mention custom gameplay script which makes it all interact).
Just make a wrapper object and initialize the engine as a parameter in it. So then you control the scope. This is more development theory then bjs structure though. But I am more then happy to brainstorm with you.
Technically everything is just a matter of scope and how you want to control/access methods. Just set up something that makes sense to you, and make sure you define your conventions to yourself then follow them and refine them as you go.
1 Like
Like. @johanlajili welcome to the community. : )
This place is far less opinionated, far more collaborative, and why Babylon Community is so great.
We use a namespace pattern across our modules, inspired by how BABYLON is instantiated.
// let BABYLON = BABYLON || {}; //roughly
We put everything into a namespace and that is key to a flexible structure.
If I were using react I would either continue the custom namespace, or use CONTEXT, HOOKS to do the same. : )