Centralisation of functions created by users

[Alby]

Hi everybody

I'm trying to collect some functions you created so it will be centralised here and maybe one day put in a plugin, if enough documented and well structured with the benediction of RaananW

 

(see: http://www.html5gamedevs.com/topic/13851-introducing-babylonjsx/)

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

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

 

So if you want to share the gold nugget you created with our dynamic and friendly community, please put it here so we can send it maybe soon to RaananW and his team to create a plugin valuable for all of us.


I propose you this structure but if you find a better one please propose it
 

 

it should include

•     The name of "creator(s)" and the "modifier(s)"
•     The version number
•     the field of the function (mesh manipulation, text manipulation , animation, and so on)
•     The level of difficulty (very subjective : for experts always easy, but for beginner sometimes very difficult!)
•     An explanation about what it does exactly
•    The description of the parameters used in it
•     An example
•     What should be improved

 
 

[Alby]

an example what it could be :

 

 

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

 

• Creator Deltakosh on september 10, 2014 (http://www.babylonjs-playground.com/#1RWE59#12)
• Modified by Alby on february 2015
• Version 1.0
• Field: Mesh manipulation
• Level of difficulty: 1
• Use : How to draw a cylinder between two points

 

 

        // 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);
            v1.normalize();
            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);
            axis.normalize();
            console.log(axis);
            
            // Angle between vectors
            var angle = Math.acos(BABYLON.Vector3.Dot(v1, v2));
            console.log(angle);
            
            // Then using axis rotation the result is obvious
            cylinder.rotationQuaternion = BABYLON.Quaternion.RotationAxis(axis, -angle);
            

        }   

 

 

• PointA : x,y,z position of the first point; PointB : x,y,z position of the second point; diameter : the diameter of the cylinder
• Improving shoud be to add other parameters like color, and so on

 

 

But now this function is already replaced by a new one created by Jerome:

 

now you can do a tube (constant radius + line axis == cylinder) between two points directly

var axis = [startPoint, endPoint];
var tube = BABYLON.Mesh.CreateTube("cylinder", axis, radius, tesselation, null, scene);

[Wingnut]

Alby, at minimum, you're destined to be a great contributor to BabylonDocs.  Great thoughts, well worded.

 

One has to ask one's self...  'What is the purpose of Babylon.Tools domain?'

 

Maybe Babylon.Test domain... is applicable?  *scratch scratch*

 

The playground will not allow external JS files to be loaded.  I saw... hmm... one of the Gods... mini-fy a JS library and put it into a playground, once, which I thought was SUPER-fascinating.  And I think jsFiddle does SOMETHING to attempt to include-in external libraries, so, there's some possibilities.  The main thing is that we really don't want to add a maintenance task to someone... having to keep the latest version of some library... in a playground folder (next to its index.js).

 

To briefen, we want the playground to "pull-in" these libraries from their natural homes, and not have to get copies of them from the playground's subfolders.

 

I'm not very experienced in these CORs-ish issues, but I sure enjoyed your posts, Alby.   And I really like the way your brain works, and your enthusiasm.  You're thinkin' RAD!    A JS object full of same-subject functions == library, right?  Yay, reusable OOP!  Now you're a RADOOP.  Rapid Application Developing Object Oriented Programmer.  Wow!

[GameMonetize]

Why not using github repo for this? like a collection of .js files like we did for meshes:

https://github.com/BabylonJS/MeshesLibrary

[Alby]

No problemo, Deltakosh, you are better placed as I am to evaluate the pertinence of it!

 

So I propose to put here just the name, the field and a brief explanation of the user's function put in  https://github.com/B...S/MeshesLibrary,

so everybody will know through this forum and this post what is the use of the function and when it is put in the github libraries.

 

Maybe also create different libraries functions (if they are not yet created) like TextLibrary, and so on,  so user's function according its field can be put directly in the right library.

 

What do you think?.

[GameMonetize]

Actually please use this one:

https://github.com/BabylonJS/UserFunctions

 

 

For more advanced libraries, please use:

https://github.com/BabylonJS/Extensions

[Alby]

I found some functions  in this forum so I put them here with a link to the doc about them

 

 

Field : Mesh manipulation

var tube =  BABYLON.Mesh.CreateTube(name, path, radius, tessellation, radiusFunction, cap, scene, updatable?, sideOrientation) created by Jerome

http://doc.babylonjs.com/page.php?p=24847

 

Basically a tube is just a curved (or not) cylinder.
However it can be far more than just a cylinder if you consider it as a parametric shape.
Example with a simple cos/sin path : http://www.babylonjs-playground.com/#LG3GS#8

 

 

 

Field : Mesh manipulation

CreateRibbon(name, pathArray, closeArray, closePath, offset, scene, updatable, sideOrientation) created by Jerome

http://doc.babylonjs.com/page.php?p=24847

 

The ribbon is a very simple and versatile shape. As it is very elementary, you can model almost any shape using a ribbon or many merged ribbons.

Example : http://www.babylonjs-playground.com/#1W5VJN#17

 

Suggestion : Why not pass one more parameter including the material of those objects in one data (color, alpha, and so on)?

                       ex : var tube =  BABYLON.Mesh.CreateTube(name, path, radius, tessellation, radiusFunction, material, cap, scene, updatable?, sideOrientation)

 

So please guys, feel free to add some more stuff that kind so everybody can perhaps easy find the one (s)he needs.

[jerome]

Well, choose your reason   :

It's coherent with all other static mesh creation functions.

Not all meshes have material.

It is still a big amount of parameters.

Wingy will shout if we change this.

 

 

about your topic :

I thought you wanted to collect only user custom functions.

What's the goal to collect here yet documented and BJS integrated functions ? (naive question )

[Wingnut]

hahaha - me?  Shout?  Nah. 

 

Alby, you might not know this yet, but there is an unwritten "policy" in BJS... to keep it simple (for the users).  One way to do that, is to minimize the amount of parameters/arguments in CreateXXX single-line constructors (such as CreateTube and CreateRibbon).  The trick is... make it display... with one line.  All other "features" should be set AFTER the scene item is created.

 

To save some future typing, we could call BJS single line constructors - SLC.

 

Take a look at your average camera.  Powerful features such as camera.speed, camera.fov, camera.inertia, lots more... are not set with parameters.  They, instead, have "default settings", and by doing default settings for SOME values, framework coders can keep the amount of params/args to a minimum.  That = easy.

 

Let's look at CreateRibbon(name, pathArray, closeArray, closePath, offset, scene, updatable, sideOrientation)

 

First, pathArray.  Jerome COULD put a pathArray property on Ribbons... and set a default pathArray.  BUT, BECAUSE the ribbon would need to be re-created if the user changed the ribbon.pathArray, then Jerome would need a SETter function on the ribbon object... such as ribbon.setPathArray(whatever) or similar. 

 

Inside the ribbon.setPathArray() function, Jerome would need to change the value of this.pathArray, and then call something like this.reCreate() or ribbon.update().  It's quite a hassle to do this, but... Jerome could eliminate the pathArray param/arg from his CreateRibbon SLC... by doing this.

 

Now, let's look-at closeArray, closePath, and offset.  He could do the exact same thing.  Set defaults on those, build setter funcs for each (or a universal setter function - see below), with each setter func ending in a ribbon.reCreate() or ribbon.update();

 

After all that crap, Jerome's ribbon SLC would look like this...

 

CreateRibbon(name, scene, updatable, sideOrientation)

 

It's starting to look BJS-ish, isn't it?  (it's looking "easy").  And thusly, the BJS framework looks more attractive because... it's easy.  The user doesn't need to know that there are 450,000 functions and properties that a user can use/set AFTER the ribbon is created.  They have a ribbon on-screen, and they get excited to see it.  That excitement will continue, and they will use it to learn the 450,000 user-settable after-creation things... about ribbons.    (in theory)

 

This is an issue that framework contributors weigh, often, I suspect.  How much power in the constructor, and how much power AFTER creation.  Think about a user setting ribbon.pathArray = blah... after creation.  The user could have just disposed of the old ribbon and built a new one (with one line) using the new pathArray.  So, for the user... they can change the pathArray after the ribbon creation this way...

 

myOldRibbon.dispose();

myNewRibbon = BABYLON.Mesh.CreateRibbon(name, differentPathArray, closeArray, closePath, offset, scene, updatable, sideOrientation);

 

(two lines to do the change)

 

OR this way...

 

myOldRibbon.set("pathArray", differentPathArray);

 

(one line to do the change, but Jerome does the re-create behind the scenes)

 

It's a toss-up, isn't it?  One way makes SLC more difficult, but avoids needing ribbon.set(property, value).  The other way makes the SLC easier, but adds complications to after-creation operations.

 

Alby (and everyone), if you were the author of CreateRibbon, and knowing all these options, what would YOU do?

 

(I don't think there is a correct or incorrect answer.)   

 

Sorry if I'm off-topic.  You are trying to collect great functions and objects, here, but, as Jerome has asked... what criteria for the funcs? 

 

Some user might write a great func for rotating the angles of mirrorTexture reflectionPlanes that are not at 90 degree angles (a real problem we have).  Maybe it's a great, reusable function... but its reusable ONLY for the reflectionPlanes (a non-standard plane) that are used in mirrorTextures placed at non-90-degree angles.

 

This is a very unique and specific use-criteria, thus making the function useful and not-popular... all at the same time.  Would you want that rare-but-useful function cluttering-up your collection of great functions?  Or would that be SUCH a "specialty function" that it's not worth adding to the collection?  Thoughts?

 

Again, sorry for the off-topic.  This really belongs in the forum topic called "Is it plausible for Alby to attempt to collect a library of indices to great functions?"    Maybe a BETTER question to ask is...

 

"Once this huge library is built, can you keep maintainers/updaters from committing suicide?" 

[jerome]

About the CreateRibbon() method :

I tried to minimized the number of parameters at its lowest.

The current parameters can't be squizzed.

You can omit some  so they will have the documented default value which is the value used in the general case.

But a default value is still a value.

This means that, when the Ribbon is built (as for tube and extrusion), all these values are needed because they drastically change the number, positions and relations of vertices.

We don't deal with a box that has a predictable shape and whose color or scale can be changed afterwards.

The number of a ribbon vertices is unknow without the knowledge of many paths, idem about the vertex positions in space, faces, etc. This is a parametric shape.

That's why the number of parameters is quite bigger than for other basic shapes.

None of them could have been set after its creation unless re-creating another new different ribbon.

 

 

Well, another way (the threejs way) could have been to prepare things before creation :

- create a geometry object

- set many parameters then to this object

- create a material object

- set many parameters then to this object

...

until here, no mesh is created

- create a mesh with these geometry and material objects

- add it to the scene (oooh ? surprise : a new mesh !)

 

but that's definetly not the BJS philosophy

[Vousk-prod.]

Since we already have the BJS doc and many tutos, and the playground, etc, I think this place could collects all that reusable-for-specific-case-only-but-so-smart-and-powerfull-functions (as the one for rotating reflectionPlanes mirror textures angles for instance).

But the yet documented and BJS integrated functions shouldn't be there. We may quickly list them, but I'm not sure this is relevant.

 

The important thing in my opinion is to correclty tag each function in this post, so we'll be able to easily find the one we need when required. That's why a tag section should really be added to your "template".

 

EDIT : And also we may not talk to much in this post, the idea of having a easily searchable list is to avoid all that blah blah we have to go through in the other original posts where those same functions can be found.

[Alby]

@Jerome : Wingy is everlasting, 30 parameters more will not frightened him!

 

Just an Idea,  with this "unmaterial" meshes, supposing we transfer an array of parameters defining the material, we could just add a flag in it sayng it is an unmaterial mesh so all other parameters of the array are ignored.

 

But  ok, I confess I wish  to "simplify" functions and made it the most multi-purpose possible for newbies and puppies (as I am presently) for a quicker developpement of any application.

it is easier to have a function "chair" to decorate a room, and if we can choose the color it will be still better and faster  than to  paint it our self.

 

Sure I know how easier it may look for the user, more difficult it is for the developper (users are often ungrateful person, unaware of time spent by the developper to grant his (her) wishes )

 

I create this post, so that all kind of functions put in it (including BJS integrated functions - they are too created by users, more advanced of course) can be easily be found by a newbie with the possibility that  going all over in this post s(he) may encounter a nugget gold he didn't even thougt about it (searching something we don't thing about is very difficult! )

 

In a way like in a supermarket where you walk and find suddenly a product you didn't think about and use it in a creative way.

 

Take this post like a catalogue, user_friendly table of contents of more elaborate ready to use functions in which we can if not "buy", find inspiration for creation.

 

Hope my explanations are not too obscure, and sorry for my bad english, I know you speak french but the universal language here is english, so Sheakspeare will maybe turn in his grave, but he will forgive me because it is for the better!

 

Any way thank you for the interest and help about this post and my plane text request.

[Wingnut]

WOW!  Just an EXPLOSION of postings!  A forum orgasm!  (a forgasm?)  Amazing!  Not a single function. 

 

I better add one.

 

ummm... see this?

 

https://github.com/BabylonJS/Babylon.js/blob/master/Babylon/Lights/babylon.spotLight.js#L31

 

spotlight.setDirectionToTarget  YAY!!  I invented that.  I contributed to core!  YAY!  Ain't I just something? 

 

(yawn)  Ironically, it probably holds the key to Alby's text planes issue.  The webGL gods made us become close aquaintances... for a reason.  (yeeeeah, right)

[Alby]

Hey Wingy,  where are your glasses, already two borrowed from Jerome.!

 

It is not easy to build a babylon functions supermarket and to find suppliers! (prophet, angel, developper,....does the function "functions supplier" not interest you in addition? )

 

 

@Jerome : in  user custom functions :  only functions developped by users that are not yet  put in libraries till they are integrated in one.

                  by the way is there a doc for newbie how to put easily in https://github.com/BabylonJS/UserFunctions? (or any libraries)

[Wingnut]

Ohhh, yes, I didn't notice the date on post #7.  Yep, I stand erected... errr... corrected.  #7 sure is a pretty post.  Color and structure...almost like an html TABLE in some off-site library of useful BJS funcs.htm 

 

it is easier to have a function "chair" to decorate a room, and if we can choose the color it will be still better and faster  than to  paint it our self.

 

We talked about this in the other thread.  You could "wrap" the CreateChair() function... into your own function... called CreateAlbySuperChair().  It adds smartness and features to the standard chair.  But you will find out that as you add features and brains to your new SuperChair Factory... it all becomes more and more Alby-ish and less and less universal and reusable... which sucks... but it happens.  *shrug*

[Alby]

Field : light manipulation (all about light http://babylondoc.az...age.php?p=22071)

function SpotLight(name, position, direction, angle, exponent, scene) created by Deltakosh and JBousquie found by Wingy

https://github.com/BabylonJS/Babylon.js/blob/master/Babylon/Lights/babylon.spotLight.js#L31

 

New options for soft shadows

Example : not yet

 

 

 

PS: When there will enough functions I will create another post with same name (numbered 2) where there will be only the functions and no comment (more clear), if comments we should put them here

[Wingnut]

Alby, you've been drinking all day again, haven't you?  (just kidding, of course)

 

Nope, i didn't "find" the Spotlight class.  hehe.

 

http://babylondoc.azurewebsites.net/page.php?p=22071

 

The guy who wrote the Lights tutorial... found it.  And coded it. 

 

You aren't going to list every BJS function in this thread, are you?  You better order a big barrel of pixel ink, and bring camping gear and supplies.  Now go get a cold, wet wash cloth, and wipe yourself down.  You're starting to lose it. 

[Alby]

You know well, Wingy, that my sense of humour is very low, I feel completly destroyed, I think I will take one more bottle of whisky to forget!

 

Good link, I think i will put it near my field light definition so newbies (as I am) will have a direct link to everything about light (in this case)

 

 

(ok experts, you know already all and more, but think about us!)

[Wingnut]

  You'll thank me later for putting ice in your radiator before you blow an engine gasket. 

 

"Everything about lights", he says.  NOW you're talkin'!  THAT is a cool approach!  I have been thinking about "Everything About Scene Object" myself, lately.

 

Ever see the 2.0 classes hotlist?  It looks like something that Alby would think-up.... a central place to find all "the good stuff".

 

I made that ugly thing.  You and I think alike in many ways, yes? 

 

But... you need to try to avoid 'inini'.  Infeasible'n'implausible'n'impractical. 

 

Mister Wingy McDingy is trying to hand you an 'inini' checker.  He's trying to get you to examine it carefully, because if SpotLight() is an appropriate function for this list of yours, then you are going to get a tumor trying to add the other BJS functions that are comparable to SpotLight().  There's about 3.5 gazillion of 'em.  Got pixel ink?

 

Trust me, I AM showing you LOVE!  I promise! 

[Alby]

I'm not french (from France) but I speak french, and in french we say "Impossible n'est pas français" (ask to Jerome) and one day we will say in USA "Impossible is not Wingy", I just have to convince you that it is the truth, oh man of little faith, you must banish the words "inin" of your vocubulary, that is not Wingy!

 

The proof, you believe it was possible is that 2.0 classes hotlist you created, but as far I investigate these are all basic functions provided with basic Babylon, isn't it? No new functions created by users.

 

So why not do the same with libs and functions users but with another interface (the one I proposed) simultaneously with the same kind of hotlist (to create) you made that I find very useful?

 

 

Hey Wingy why do you flee like the beep beep coyote runner?

 

Peace and love, my brother of thought!

[Wingnut]

But Alby... Spotlight() is (basic?) Babylon core.  When you added Spotlight() in post #16, you added a "class".  A factory.  That is the BJS framework code... that runs... when a user does:

 

var light0 = new BABYLON.SpotLight("Spot0", blah, blah, scene);

 

That Spotlight() code, "instantiates"  (makes)  a spotLight object.  It starts by making a "Light"-class object, and then makes it smarter.  It adds properties and methods that make it a SPECIAL "Light".  A "spot"!  Yay!  It's a Light class object that's been SPOT-ified!  Alright!

 

It was written by Deltakosh.  Didn't that give you a hint that it was a framework func and not a user-written func?  huh?  Silly guy! 

 

Deltakosh - he da man.  He wrote most of BJS core.

 

So, that is why I said it is 'inini' to try to list all of the BJS core functions in your list.  Spotlight() is not user-written, except... for... you know... my silly 3-line contribution called .setDirectionToTarget()... which I am VERY proud-of.  (How sad, eh?) 

[Alby]

Sorry Wingy, I didn't understand it in that way, indeed it will not be easy to select the "good" ones, headaches guaranteed!

 

Better to scan all the demos to catch possible users functions or routines that could be "transformed" into a useful function.

 

Did you look at "Mesh.rebase() post, http://www.html5gamedevs.com/topic/14349-meshrebase/

Seems Jerome will solve our planetext orientation, a little to hard to understand for me, but surely not for you, so we will not wait for still 184 posts!

 

Hope your house cleaning party was not too tiresome!

[jerome]

just half-solved... sorry

 

For now, it is a solution in the local space only.

Works well, but I'm not satisfied about it because it needs the mesh to be set as updatable. 

 

I will try to redo the same function for world space, but I need some explanation about the BJS internal rotation order used when we use :

mesh.rotation.x = rho;mesh.rotation.y = delta;mesh.rotation.z = gamma;

[Alby]

A new one...

 

Field : Debugging

var debug = function (mesh, scene) created by Temechon

http://www.babylonjs-playground.com/#UTDZF

 

Show local axis of a mesh

Example : http://www.babylonjs-playground.com/#UTDZF

[Alby]

Field : Debugging

var showAxis = function(size) created by Jerome

http://www.babylonjs-playground.com/#2L9DCA

 

Show worlld axis

Example : http://www.babylonjs-playground.com/#2L9DCA