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!

@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.

3 Likes

This topic is in common :metal::

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:

1 Like

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.

3 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.
4 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