Jump to content

Introducing BabylonJSX


Recommended Posts

Hey fellow Babylon-Supporters,


For a long time I wanted to create an experimental extensions repository for BJS. An "Incubator" for great ideas, that might not be integrated in the framework directly, or require some testing before they make sense. 

BabylonJSX is different than the extensions in Babylon's main Github page. The plan is to create extensions to the framework itself, extensions that will be included directly in working projects and will extend the functionality of BabylonJS.

This was of course discussed with Deltakosh. There is no plan to "steal" functionality from Babylon's main framework. If a certain feature makes sense, DK would (probably) love to have it in the framework itself. This is just a way for the developer to test it out, provide it to the community and see the reactions. Maybe also allow users of past versions of the framework to use it. A good example for that is the web worker collision extension, that will eventually be integrated into BabylonJS itself. until then, it is offered as an extension for testing. It can also be for extensions that have no place in the framework since they change its features or not cross-browser.


BabylonJSX is located here - https://github.com/BabylonJSX


As you can see, there are already 3 projects (one of them was already published in the collision discussion):

  1. IndexedDB Backend for BabylonJS (https://github.com/BabylonJSX/IndexedDB-Backend)
  2. Web Worker Collision support (https://github.com/BabylonJSX/WebWorker-Collisions)
  3. Native Async Events using DOM manipulations. (https://github.com/BabylonJSX/Native-JS-Events)

The project is deliberately not under my name. I am however the only developer there at the moment. I am looking for people with great ideas - developers who think they can create a great extension and want the community to enjoy using it as well.


Any person with an idea will get its own repository and will be able to directly commit there - this repository belongs to him and he is the sole moderator of it. It doesnT have to be TypeScript either. Vanilla JS, Coffeescript and any other languages are more than welcomed (as long as eventually there is a js file to include). The only things I ask are:

  • a bit of organization
  • proper documentation 
  • a demo
  • a non-copyleft open source license (Apache, MIT, BSD etc').

Waiting for your submissions!


Oh, and I am in dire need of a logo!  ;)

Link to comment
Share on other sites

Hey! Thanks!

I must admit I have no idea for the logo. If you asked me  would say, just put an X on Babylon's logo and we're done :-) It is currently for github only (Until it makes sense to publish it online on a websites with all demos etc'). 

If you have an idea, it would be great.

Link to comment
Share on other sites

Hi RaananW and others.  Congrats are in order, thanks and well done.


I have questions.  :)


What will you/we have when BabylonJSX is operational?  A "sort-of third party" add-on library for BJS?


Will deltakosh and others need to custodian/approve BJSX or answer forum questions about it?


Could users (and helpers) become confused as to WHICH part of BJS is causing their issue?


Will we see code like if (bjsx) then foo, else foofoo?


Should a plugin system be used, similar to what is done with other third-party libraries?


Will BJSX cause reluctance to do BJS framework changes... WHEN it breaks BJSX? 


Was the idea for this... primarily caused by WebWorkers needing an external file, as mentioned in the collisions thread?


(thx)  Most of these questions are rhetorical - to make us consider potential issues.  I'm not trying to be a naysayer, but, I DO have some ever-so-slight naysayer feelings about this. 


(Wingy lifts the GameFX library from the roadway and shows everyone how flacid it has gotten... from being run-over by so many un-caring trucks).  :)


We'll see about BJSX.  We'll see if any big dogs put 'likes' on any of this.  If I were an author of BJS, I might take this as an insult.  Suddenly BJS is not pulling its weight... to be "your one-stop" gaming framework for ALL your gaming needs.  It's about to go 2-stop. 


It all depends on IF you needed the external file BECAUSE OF webworkers.  If that's the reason, then of course its a great idea.  But if you are doing a mini-mutiny because you were denied a main framework change request, then I'm going to be reluctant to climb aboard. 


I really doubt it is a spin-away or mutiny in any way, shape or form.  You're just too much of a BJS superhero and superhelper, RaananW.  But behind that forlorn look of your forum photo... could live an evil and sinister being!  hehe.  My dad told me "Never trust a man who won't look you in the eye"  :)

Link to comment
Share on other sites

Don't worry, Wingy  :)


I just think it's just a place where people having weird ideas can experiment them and provide them to everyone without integrating them in BJS  ;)

For instance, this module : https://github.com/BabylonJSX/Native-JS-Events is really useful (imho) but it would be quite complex to integrate into BJS, because it needs some core rewriting and there's a JQuery dependency, I guess.

So maybe it will never be a part of BJS (don't know), but it is worth it for many people needing such a feature.


People wanting to put their two cents, but not able to dive into Typescript, could propose new features also just using JS, something more achieved than a simple PG example, for instance ...


This is only my opinion and vision about this new repo. ;)

Link to comment
Share on other sites

I see it as an experimental lab: A place for people to test things. Obviously BJS won't support them but we can expect to have some of threm remove from BJSX and integrate into BJS


For instance the webworker one will not stay in BJSX for too long :)


I still want BJS to be a one-stop shop for gaming and 3d but too specific things won't fit in it

Link to comment
Share on other sites

Good questions.

BJSX is a place for developers to go crazy. To offer things to the community that not everyone wants. To test functionality. To experiment.

I remember seeing someone who created an obj loader. Wow! What a wonderful extension! Maybe not for everyone, but why not offer it somewhere? Why only paste code in the forum? I have so many ideas for things that I find cool. But they have no place in the main framework. X is the perfect place for that.

As I wrote, I expect a few things from developers that want to join. Regarding support - this is github we are talking about. There is a place for issues and problems. Wonderful place for documentation. But just like any project someone is presenting, it can have a topic on the forum. Why not?

This is in no way a mutiny. As I wrote, I first spoke to DK about it and would never start that without him knowing. I also don't see any reason for one :-) when was the last time DK actually told someone no regarding a new feature?

Regarding not looking in the eyes, I totally agree with your father :-) I'll try finding a new picture! but I doubt your father will trust someone who doesn't even show his face ;-)

Fun aside, I do hope this is not taken the wrong way by anyone.

Oh, and my laptop just passed away. Decided it didn't want to live any more. Served me well. So expect a minor delay in accepting new submissions. And code...

TL;dr : keep calm and submit code!

Link to comment
Share on other sites

[text removed here - so life got better]  :)


Will we always have a fresh version of BJSX within scope of the playground?  Did someone answer that, already?  It seems that an experimental lib will benefit highly from whiteboarding experiments.  Those experimental PG's promote forum chat and idea exchange. 


Who will keep the playground updated?   What are we talking, here?  Possibly multiple version updates in a single day, sometimes?  (I'm such a stick-in-the-mud, huh?  Sorry.)


[more text removed here - so the world celebrated!]  :)

Link to comment
Share on other sites

  • 2 weeks later...

I had just make a suggestion in that way about functions  created by users and Jerome give this link


Here is my post




A suggestion....


I think it should be nice to  create a post named "Library of users functions" where everybody could put a function. that (s)he created or modified, so sharing it easily with all babylon's community



it should include


  • The name of "creator(s)" and the "modifier(s)"
  • The version number
  • the field of the function (animation, text,and so on)
  • The level of difficulty (very subjective!)
  • An explanation about what it does exactly
  • An example
  • What should be improved



So all the community could easy find a function for its need (if it exists)  without to have to create it again, and so devlop quicker his (her) game, application,...




Maybe we could make a folder in Bab jsx containing that kind of stuff?

Link to comment
Share on other sites



maybe if you can give an example of what you mean it would be clearer for me. In general this is the place for those kind of functions, if they offer something different than what Babylon offers or extend babylon's functionality. If it is just a small change in a function, a well-documented gist might be better. Again, an example would be great. I am totally open for everything, as long as it is babylon-oriented  ;)

Link to comment
Share on other sites

an example what it could be :



      Name of the function: var CylinderBetweenPoints = function(pointA, pointB, name, diameter, scene)




        // Function to draw a cylinder between two points:


            var CylinderBetweenPoints = function(pointA, pointB, name, diameter, scene) {
            var vstart =pointA;
            var vend = pointB;
            var distance = BABYLON.Vector3.Distance(vstart,vend );
            //var material = new BABYLON.StandardMaterial("kosh", scene, true);
            var cylinder = BABYLON.Mesh.CreateCylinder(name, distance, diameter, diameter, 36, scene, true);
            var redcyl = new BABYLON.StandardMaterial("kosh", scene);
            redcyl.diffuseColor = new BABYLON.Color3(1, 0, 0);
            redcyl.alpha = 0.5;
            cylinder.material = redcyl;
            // First of all we have to set the pivot not in the center of the cylinder:
            cylinder.setPivotMatrix(BABYLON.Matrix.Translation(0, -distance/ 2, 0));

            // Then move the cylinder to endpoint
            cylinder.position = vend;

            // Then find the vector between points
            var v1 = vend.subtract(vstart);
            var v2 = new BABYLON.Vector3(0, 1, 0);
            // Using cross we will have a vector perpendicular to both vectors
            var axis = BABYLON.Vector3.Cross(v1, v2);
            // Angle between vectors
            var angle = Math.acos(BABYLON.Vector3.Dot(v1, v2));
            // Then using axis rotation the result is obvious
            cylinder.rotationQuaternion = BABYLON.Quaternion.RotationAxis(axis, -angle);



  • Improving shoud be to add other parameters like color, and so on


So we could have a list, a compiltation  of all kind of functions ready to use and to implement in an application; game if needed

Link to comment
Share on other sites

IMHO this is a gist and not a plugin - a snippet that belongs either in the playground or the official babylon documentation.


Having said that - a repository collecting all of those(static)  functions and offering them as a "plugin" would be a great idea for BJX. But it should be organized and administrated correctly. It should offer an added value for the users.

If someone wants to take this under his/her wings, I will be more than happy to open such a repository.

Link to comment
Share on other sites

Thank you, Jerome, for the information, but the initial function could be change to draw easily a plane, a box.... so amen for var CylinderBetweenPoints = function(pointA, pointB, name, diameter, scene)

but welcome to varPlaneBetweenPoints = function(pointA, pointB, name, diameter, scene) and its cousins! ;)


@RaananW: :   I would try with pleasure to help to do such a repository, but not yet alone, my skill is presently still too low to feel able to do it by myself.... but with the help of someone, maybe Wingnut if we can convinced him.... (I think he will kill me! :D ), I am ready to work hands-on. 


Hello Wingy...Peace and love, my brother :wub::P !

Link to comment
Share on other sites

Let's try to first collect a few of those, create playgrounds for them and document them. When there are enough, they will need to be structured in a single js file for people to use. Not just scattered in many files.  It is very important (for me, at least) that there will be an added value for a plugin, and that it will have a cause. For example - mesh manipulation plugin, where you can do all kinds of nice things with mesh and mesh creations. 


When you are ready to do that send me a PM, I will add you to the github developers and you can start commiting changes to the repository.

Link to comment
Share on other sites

Oh man, Alby.  :)  I have the worst coding etiquette on the entire planet.  I don't apply OOP thinking near often enough, and I spread bad coding techniques like peanut butter on a cracker.


Temechon... he writes great code.  So does SamGirardin.  Deltakosh, of course.  I think RaananW does pro-code, as well.  These guys are professional coders, and they really understand the big picture... such as code reusability and project management.  I am happy when they even allow me to talk with them... because I am NOT in their league whatsoever.


Follow Temechon and "The Temechon Files".  He does things correctly, as best I can tell.  Using OOP (objects)... a project becomes "modular"... and the modules are reusable over and over in many projects.  Do your BJS projects this way, and you become "RAD".  Rapid Application Developer.  Get a large collection of objects, and you can build new games in a day.  Only the graphics work will slow you down, because, for coding the game... you used AlbyCore... a library of reusable things that you have been collecting and coding for 2 years.  It makes new game dev... a breeze.  THAT'S where you really want to be, Alby.


Now, can people like you and I... actually GET THERE before we die of old age?  Good question.  RaananW's libraries are just that.  Great tools, reusable tools, with 4500 different authors doing PR's 160 times a day... until he pulls his hair out from maintenance task overload and forum questions about code that he didn't write.  :D

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...