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

[jerome]

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);

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

 

pretty easy, so far...

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

  mat.wireframe = false;

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

 

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);

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

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);

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

Now, the shape is "circular".

 

• third case : both closeXXX are true.
• 
  

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

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

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 ?

Ok, ok, here we go...

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

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

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);

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

 

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  !

 

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 !

[GameMonetize]

Pull request is mandatory now (As well as a doc!!)

[jerome]

mmmhh... it's still vanilla javascript

don't you need it to be typescripted before ?

[GameMonetize]

Sure thing:)

[jerome]

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

[JCPalmer]

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.

[GameMonetize]

In order to keep the API simple:

public static CreateRibbon(name: string, ..., scene: Scene, updatable?: boolean): Mesh {            var ribbon= new Mesh(name, scene);            var vertexData = VertexData.CreateRibbon(size);            vertexData.applyToMesh(ribbon, updatable);            return ribbon;        }

Then you put your function in VertexData

[jerome]

f$%!@#g hell !!!

 

the worst way to me, I was afraid of 

[GameMonetize]

Don't worry this is pretty simple

[jerome]

no pain, no gain

I know, I know 

[jerome]

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.

[GameMonetize]

Here for example:

https://github.com/BabylonJS/Babylon.js/blob/master/Babylon/Mesh/babylon.mesh.ts#L1097

 

No new file, just add your code before CreateBox

[jerome]

Hello,

 

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 ?

[jerome]

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 ?
 

[GameMonetize]

You have to configure TSC to compile for EcmaScript 5 (command line option)

[jerome]

something like :

# tsc -t ES5 ts_file_to_compite.ts

?

 

I'll test asap

[jerome]

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 ?

[GameMonetize]

remove the babylon.2.0.d.ts and this should be good!

[jerome]

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 ?

[GameMonetize]

If you reference all the .ts file you do not need the d.ts at all

[RaananW]

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

[jerome]

ok, I understand

like some include or C .h

 

but what is the best practice in the code/compile cycle ?

having all references to all ts files in each ts file ?

 

pfff, I'm not very clear

[RaananW]

for compilation I always used gulp. You already have it configured if I remember correctly :-)

 

The only reason to have this reference file if for your IDE to "play along". 

[jerome]

okay so gulp is enough...

I let the references in each edited file and then compile with gulp ? am I right ?

[RaananW]

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

 

So:

 

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