Jump to content

ribbon mesh ... fourth (and last js) version


Recommended Posts

Hi ladies and gents,


At last, the long story of javascript ribbon mesh ends :)

So, the final signature call of this function is now :

createRibbon(mesh, [pathArray], closeArray, closePath, offset, scene);
  • mesh : the mesh to be ribbonized
  • [pathArray] : an array populated with paths. A path is an array of successive vector3,

  • closeArray : boolean (default false), if true, an extra ribbon will be added between last path and first path of the arrayPath,

  • closePath : boolean (default false), it true, for each path the first and last point of the path will be joined,

  • offset : number (default half size of pathArray), mandatory only if the pathArray contents only one element. The ribbon will be constructed joining ea ch i-th point of the path to the i+offset-th point. It is ignored if pathArray has got more than one element,

  • scene : the current scene.

Don't talk, show ;)


Let's go back to this strange shape : http://www.babylonjs-playground.com/#1W5VJN

There are just 20 paths, each following its own bezier curve. So we've got a pathArray containing these 20 paths.

Let's just ribbonize it (line 71) :

createRibbon(meshExp, paths, false, false, null, scene);



pretty easy, so far...

Let's give it some plain color (line 28) :

  mat.wireframe = false;



Nice :)


Now let's see all those closeXXX parameters.

I first redraw (line 66) the paths onto the ribbon so everyone can understand : http://www.babylonjs-playground.com/#1W5VJN#3


  • first case : closePath = true,  each path is closed.

line 71 :

createRibbon(meshExp, paths, false, true, null, scene);


As you can see, a kind of tube is then closed in the center of the shape.


  • second case : closeArray = true, an extra ribbon is added between last and first ribbon of the pathArray.
createRibbon(meshExp, paths, true, false, null, scene);


Now, the shape is "circular".


  • third case : both closeXXX are true.

createRibbon(meshExp, paths, true, true, null, scene);


Now the shape is a plain volume.

So from 20 paths, we can fill a plain volume with this single command.

Did I tell you as was a lazy guy ;)  ?


Not satisfied ? want something nicer  ?

Ok, so I comment the line 66 to remove the white lines and add a texture (line 29).


et voilà : http://www.babylonjs-playground.com/#1W5VJN#7


If I'm not too wrong, the normals and UVs should be right computed even for closed paths and array.

[EDIT] mmhh.. seems to remain a bad u computation on UVs as the texture isn't stretched on the extra ribbon; fill fix it [/EDIT]


Want some more ? :wacko:

Ok, ok, here we go...

Let's comment line 71 and go down to line 82.


You can then see a new single path, a helix.


so let's ribbonize ! WAAAAIIIIIITTTTTTTT ...

huu, you've got only one path here !?!

sir, yes sir.


We will join points on the same curve. We just have to tell each point to join what other point at offset offset.

Say, offset = 10, for instance.

createRibbon(mesh7, [path1], false, false, 10, scene);



Understood ?  path1 point joins path1[i+offset] point on the helix.

Still easy, nope ?

If you change the offset value, then everything changes.

offset = 5 : http://www.babylonjs-playground.com/#1W5VJN#9

offset = 20 : http://www.babylonjs-playground.com/#1W5VJN#10

Up to you :D !


Finally let's give more steps, a color, a texture (scale it a bit), an evolving texture offset and a true closeArray : http://www.babylonjs-playground.com/#1W5VJN#12








To be continued with the TS ribbon mesh !

Link to comment
Share on other sites

How do you intend to class this in the framework ?


As a new standard mesh ? BABYLON.Mesh.CreateRibbon("name", etc) and then the corresponding BABYLON.VertexData.etc ... which seems a bit too BJS deep core level to my poor skills :( 


Or just a static method ? of what then ?

var mesh = new BABYLON.Mesh("name", scene);XXXX.CreateRibbon( mesh, etc);  // or XXX.Ribonize(mesh, etc); would be more pertinent here
Link to comment
Share on other sites

How about:

module BABYLON{    export class Ribbon extends Mesh{        constructor(name, scene, [pathArray], closeArray, closePath, offset){            super(name, scene);            ....        }    }}

This makes it self enclosed, so you can handle it better.  Also, changes, versions 5, 6, ...  are better documented in repository. 


Being a subclass, allows you to store you own private members.  You could do this in Mesh, but the result is messier.

Link to comment
Share on other sites

mmmh.. not sure I understand where to put the static function you just described : in Mesh class, I guess ? https://github.com/BabylonJS/Babylon.js/blob/master/Babylon/Mesh/babylon.mesh.ts

am I right ?


should I add a new file too ? or modify the existing one ?


However, I understood about the vertexData part : https://github.com/BabylonJS/Babylon.js/blob/master/Babylon/Mesh/babylon.mesh.vertexData.ts

I will do as for other CreateSomething() methods.

Link to comment
Share on other sites



I forked the BJS repo and just started to modify the babylon.mesh.vertexData.ts as you asked for.

When compiling it, I get errors (not on my own code part) about VertexData identifier :

$ tsc babylon.mesh.vertexData.ts../../babylon.2.0.d.ts(3630,11): error TS2300: Duplicate identifier 'VertexData'.babylon.mesh.vertexData.ts(15,18): error TS2300: Duplicate identifier 'VertexData'.

Is there something wrong in the ts file, or in the description file or am I doing wrong ?

Link to comment
Share on other sites

Same thing (different errors) when compiling babylon.mesh.ts :

$ tsc babylon.mesh.tsbabylon.mesh.ts(91,20): error TS1056: Accessors are only available when targeting ECMAScript 5 and higher.babylon.mesh.ts(179,20): error TS1056: Accessors are only available when targeting ECMAScript 5 and higher.babylon.mesh.ts(241,20): error TS1056: Accessors are only available when targeting ECMAScript 5 and higher.

What am I doing wrong ? :(

Link to comment
Share on other sites

mhh... just did :

$ tsc -t ES5 babylon.mesh.vertexData.ts../../babylon.2.0.d.ts(3630,11): error TS2300: Duplicate identifier 'VertexData'.babylon.mesh.vertexData.ts(15,18): error TS2300: Duplicate identifier 'VertexData'.

any clue about this Duplicate identifier error ?

Link to comment
Share on other sites

ok, I'll check

so what's the right practice :

  • keep the .d.ts when editing so the code editor could auto-complete and so on
  • then remove it when compiling ?

Or just remove the reference to the .d.ts file (//<../path/to.d.ts>) in the ts file to de compiled ?

Link to comment
Share on other sites

Hi Jerome, hi DK,


don't want to budge in but I tried once doing exactly that. eventually what helped the most was one big reference file, referencing all of the TS files. Then include it all over.

The only problem with that is that commiting any ts file would include this reference line, and the reference file would have to be commited as well.

This is why I use Visual Studio now (as it handles references much nicer).

Link to comment
Share on other sites

gulp doesn't need the references, it includes them automatically (it includes the .d.ts files during compilation).

If you are using a simple text editor, gulp is enough and no modification of the code is needed.

If you use a more advanced IDE (WebStorm / IntelliJ, Eclipse etc'), you would need the reference file in order to avoid seeing errors (like missing classes, missing namespaces etc').




Gulp is your compiling friend. He handles everything, and will throw errors if you missed something.

Your IDE is just your working environment. It will display errors according to what it knows. And I haven't see an IDE who can handle references like Visual Studio, which means, in order to work with an IDE you need to add this <///reference> tags


It sounds mroe and more complicated as I keep on writing. I hope i'm somehow clear  :blink:

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