Babylon.js project start-organization

Hello Babylon community,

because i have always problems with organizing code, and my code often become spaghetti, i have some questions for you.
I have some questions about general start/organization inside babylon.

Do you use any frameworks (React, Vue, Angular,ā€¦) ?
Do you prefer typescript approach or javascript.
How do you separete different modules, for example: functions, cameras, meshes, materials, ā€¦
Do you have any starting git projects, or documentation how to write code inside babylon for more
compact and clean way.

Thank you very much!

1 Like

@RaananW will love this question as he created our starter kit and it could give him some new ideas :slight_smile:

Also @PirateJC was discussing exactly this point yesterday.

4 Likes

This topic is in common :metal::
https://forum.babylonjs.com/t/organisation-of-the-source-code/22580

Any other ECS experiences in babylon, or do you prefer Inheritance?

i never heard about it, iā€™m such a noob :laughing:

2 Likes

Thatā€™s the ultimate developerā€™s question :slight_smile:

And there are so many answers to each and every part of it. I think itā€™s very much developer dependent, but i will be happy to express my opinion on this one

Unless you are embedding babylon in a web application (for example - showing a 3D model of a product in a weebshop) I donā€™t see a reason to use an external framework. If you do need it, choose what works best for you! Babylon has a wonderful react binding (built by @brianzinn), but we saw babylon projects using vue and angular as well!

TypeScript will always be my first choice. I donā€™t remember the last project I worked on that was written in javascript. But then again, this is your choice as well! If you feel comfortable with javascript, use it! typescript transpiles to javascript anyhow.

I have created a getting-started project - RaananW/babylonjs-webpack-es6: Babylon.js basic scene with typescript, webpack, es6 modules, editorconfig, eslint, hot loading and more. (github.com) , but it is more to show how to use different elements of the framework with es modules, and doesnā€™t concentrate about structure. As @sebavan mentioned we actually discussed this topic internally, and I think we will soon produce something to show what we think is a nice project structure. This does not mean that it is the only structure, or fits every project.

Me personally - i like using stateless modules, and like to join those functions to one module if they depend on a certain object that can be considered global. The idea is to prevent unneeded imports inside the project as much as possible. So it is less lights, cameras and meshes, and more - the things that relate to this specific topic should be in this directory. Itā€™s hard to explain without showing some code. And of course since babylon is object oriented I donā€™t avoid extending certain classes if needed. The best example is a shader material - I always like extending the shader material rather than create an instance of it. It keeps everything related to this material inside this single class and keeps the projectā€™s structure cleaner. IMHO :slight_smile:

4 Likes

I think those are really great questions. One important thing for me as well is the Developer Experience. So, I also always work on projects with hot module reloading (Fast Refresh/etc), so changes made in my editor are reflected in my scene as soon as I save. Having that work out well involves also managing state of your scene.

Something like a yeoman generator/CLI would be very cool to have, but I think it mainly useful for scaffolding an initial project.

I did some experimentation with Snowpack community templates, which have both JavaScript and TypeScript templates:
Snowpack community template - Demos and projects - Babylon.js (babylonjs.com)

If you did want to try out React - I have templates in JavaScript and Typescript - the JavaScript one uses a state management library:
TypeScript + Create React App Starter Kit (github.com)
JavaScript + Create React App Starter Kit (github.com)
Those above projects use a declarative renderer, but I have imperative examples too like here:
babylonjs vanilla typescript (github.com)

The declarative React projects are the ultimate way to enforce Composition. You can dynamically attach behaviors and really anything to objects and with state management and the reconciler doing the heavy lifting it can be a really good way to manage a scene from application state transparently and also all objects are managed and tracked automaticallyā€¦

I did follow a Mozilla ECS implementation as well (and it has a Babylon demo):
Introducing ECSY: an Entity Component System framework for the Web (mozvr.com)

The general question about ā€œComposition over Inheritanceā€ is really a fundamental aspect found even back in the original gang of four book and to me itā€™s really developer preference and system design needs. In JavaScript we are lucky we have mixins and can do some interesting things with inheritance, but I will still choose composition when it makes sense from years of programming without multiple inheritance. If you look at behaviors (ie: Camera) in Babylon, which is in large part built using Inheritance, you can see they are dynamic behaviours and many other run-time polymorphic changes (which is the intent of composition as a pattern). If you are using inheritance then TypeScript is essential as it will let you know when an interface isnā€™t fully implemented or an abstract method not implemented, etc - whereas JavaScript will fail at runtime.

6 Likes

Everything really depends on what you are trying to build :slight_smile:

  • If you are building a ā€œregularā€ web page where you add some random snippets of Babylon, you can just use React/Vue to build the logic of the app and then just insert Babylon in some places.
  • If you are building a game AND it is not majorly story driven, I would use the ECS pattern. I am currently building a game with this pattern and it works really well. ECS library I use is Javelin (Javelin Docs) instead of ECSY, which is not really well maintained. Basic principle is to have two loops. One for Babylon rendering and one for the ECS game logic.
5 Likes

Great, Awesome! Is there someone with experiences with Angular ?

Maybe @RaananW as he used to love angular ?

1 Like

I used to work quite a lot with angular, but havenā€™t worked with combining babylon and angular since angular 4. I feel old.

Angular is much more forgiving than react in terms of integration with the framework. there is no one single way of integrating a framework into angular, though there is always a best-way :slight_smile:

I found this - https://www.thinktecture.com/en/2d3d/babylon-angular-basic-integration/ , myabe it can help

1 Like

Is there anyone who try to use babylon.js editor with react, angular or another PWA framework? :slight_smile:

Hey Raanan! Iā€™m just jumping back into learning Babylon and was wondering if there are any recommended video tutorials for one to follow about this topic of setting up (installing? Babylon), vscode, and making a simple HTML site that displays Babylonā€™s scene?
Iā€™m finding many videos on youtube, but they seem to setup babylon in odd ways/ i think omitting details for someone with little experience.

Is there one you might recommend? The Getting Started Docs seem to overlook this initial setting up for beginners step ā€“ unless Iā€™ve overshot chapterā€¦

If youā€™d like to use npm - one of the best and simplest templates for Typescript is here with all instructions: GitHub - paganaye/babylonjs-vite-boilerplate

For simple JS version one may try GitHub - sotovviktor/babylonjs-project (to install and run use the same instructions as in abovementioned TS template).

If you need just simple HTML template - the easiest way is to open the Playground and press Download button. You will get the zip archive with all files needed. Unpack and put it onto your local server, thatā€™s all :slight_smile:

5 Likes

Chipping in with high level architecture stuff only, leaving details up to you:

  1. Modular architecture is a unistack (frontend/backend/devOPs) and cross platform workflow using mono-repositories. Iā€™ve been using for over 10 years - it works for any project kind (from simple blogs to complex Photoshop like apps, or ECS kind games). Itā€™s clean, easy to read, has great DUX (Developer User Experience), and most importantly, is reusable with almost 100% DRY code (see my screenshot below how folders are organised).
3 Likes

I prefer to put everything in 1 flat folder, or even 1 file. ecoins folderā€¦ i just cant deal with that lol. thereā€™s two common folders, a modules file, two components folders, a container folder, a utils folder, and a core folder. all of those are synonyms to me. IMO, when you put things in folders, you create an arbitrary taxonomy, when a tag system would be more appropriate, just most editors dont support it. I suppose its kind of like the matrix organization of a corporation, where there are multiple ways to view the hierarchy. i also think english is an issue, because we name things like blue button and red button, when it should actually be decreasing specificity for code, so something like ButtonBlue and ButtonRed will make it easier to find related variants. its all just whatever works for you or your team though. if youā€™re talking massive projects, theia , vscode, and jupyerlab all organize by feature and put the target platform as sub folders. I also think thatā€™s good, when appropriate.

Hey @HirangaG ! Great to see you back in the Babylon world!

Also pinging @syntheticmagus as he might be interested in this topic.

2 Likes

Hi HirangaG,

Welcome back! If youā€™re looking for a well-documented and quick-to-start workflow made with Babylon in mind, Iā€™d like to shamelessly plug the Template Repository Workflow featured in our recent Fruit Fallinā€™ dev story. This the pattern on which weā€™re building our ā€œgolden pathā€ efforts, and it features a number of the benefits already mentioned:

  • Built around a Node.js/NPM core.
  • Designed with modularity in mind.
  • Can stand you up almost instantly with a standalone site hosting your Babylon experience.

Iā€™d definitely recommend giving that dev story a read as it will show you a fast and recommended path to deploying your Babylon experience on a standalone website (and beyond, if youā€™re interested in that). If you have any questions, please donā€™t hesitate to ping me. Hope this helps, and best of luck!

1 Like

Interested to know how you fit in over 200 files in one folder for web release, than another 50 for API server, another 200 for core reusable logicā€¦ you get the where Iā€™m going :slight_smile:

In modular architecture you do not have two of the same thing in one module, but modules can be made of submodules, with unlimited nesting. This allows for infinite scaling, without suffering DUX, performance, flexibility, or maintainability.

If itā€™s a single Homepage website, then I agree, you can put all in one folder (and I made 20+ sites of those kinds back in the days) - itā€™s more efficient that way.

But OP here specifically asked a question about organising a project to avoid spaghetti code. Would be very interested to see a single folder solution for that myself :slight_smile:

1 Like

Now itā€™s my personal opinion and preference with justification as to why I chose them (with being a lead developer from small business to large corps for many years as experience to back it up):

React - learn once, build everywhere (web, iOS, Android, Desktop) with the best pool of open sources npm packages library on planet Earth (at the moment of writing).

Javascript - typescript is good for releasing Frameworks like Babylon and for learners to prevent them from making stupid mistakes. But for my projects, Iā€™m not building Frameworks, and I can code an app without internet (i.e. no stackoverflow to the rescue), then Typescript slows me down, with unnecessary typing and wasted time fixing linting errors. This is against the Pareto Principle (80/20), so I use Javascript.

One day, when there is free time, I will put up a ready made template using Babylon, React, Next.js, Apollo GraphQL, Redux, LESS css, etc. on github - the stack I use myself for blazing fast websites/apps.

1 Like

I know Iā€™m a bit late to the party, but I created this repos as the companion for my upcoming book on BJS - a webpack/npm/JS setup for a static website hosting a BabylonJS application.

HTH and feel free to ask any questions here or in the reposā€™ discussions/Issues!