EdgesRenderer

[GameMonetize]

Hello all, here is a new small feature for babylon.js 2.2. You can now ask to render edges of a meshes (meaning all edges with no adjacency or with adjacencies with angles < epsilon).

 

Here is how it look likes for a cube and a plane:

http://www.babylonjs-playground.com/#TYAHX#10

 

[Temechon]

Awesome ! Will be useful for the babylon challenge

[Dad72]

I also like. may have also display a grid or it displays only the external borders

[elkyu]

Same question, is it  possible to display the edges of a specific face in a grid ?

Or better, display only one side of a face ?

 

I'm looking for how to do that for a while

[GameMonetize]

So far EdgesRenderer renders all edges but if you look at the code, you'll see that it is easy to just render one edge instead of all

[Vousk-prod.]

This is just soooo coooool !!!

[Wingnut]

Of course, it's always important to abuse it...  http://www.babylonjs-playground.com/#TYAHX#13

 

https://github.com/BabylonJS/Babylon.js/blob/master/src/Rendering/babylon.edgesRenderer.js

 

Ain't it cool?  The code is just fascinating!

 

More abuse?  Ok.  http://www.babylonjs-playground.com/#TYAHX#14

 

Aha!  We have a fresh challenge. 

 

It acts a little better at 7 or less subdivs/tess.  http://www.babylonjs-playground.com/#TYAHX#15

 

I'm too scared to try a torus knot.  And ribbons and tubes?    Where's my hard hat and steel-toed boots?  Construction zone!  Explosions possible! heh

[Ahiru]

Interesting - any idea why starting at a segment number of 5 the upper and lower ring are not edged? http://playground.babylonjs.com/#TYAHX#16

[Wingnut]

  Yeah, that's pretty much the same question most of us are asking ourselves.

 

We were sort-of counting on YOU to have the answer.    C'mon!

 

Maybe it's a lack of adjacency-angles in the upper rings?  Not enough angular change to meet the threshold/criteria for the edge-detector to think it's an edge?  Huh?  C'mon, A! 

 

It's a holiday weekend here in the USA, things are a little drunk.  I think I'm going fishing.  I'll need to drink a bit more before I hit the road, or else the other drunk drivers will surely hit me.  I'll be back in about 6 hours, Ahiru.  That should give you plenty of time to import/hijack the edgesRenderer into a playground scene, find the angle threshold settings in the code, and see how well they can be tweaked for edges with little angular change from adjacent faces  (the edge detector).  I'll expect an advanced tutorial by morning.  Ready?  GO!  

 

Edge rendering is a BRAND NEW feature in the framework... so it's considered alpha, I'm sure.  That's a shader adding those edges, I believe.  The feature is also "holy crap"-grade bleeding-edge advanced stuff.  Serious amounts of wizard dust went into making the thing work AT ALL... I suspect.  Be patient... the author will soon return from hang-gliding in Vancouver. 

[Wingnut]

Ok, I never left to go fishing.

 

Figure it out, yet?  What's that?  You say that the .enableEdgesRendering(*) allows a single parameter?  And that parameter is the threshold/epsilon? 

 

Why yes, that is correct. 

 

It defaults to 0.95, but if you include/set it to .99999 etc... it works a little better on the spheres.  http://www.babylonjs-playground.com/#TYAHX#19  The edgesRenderer is pretty fancy.  Who thinks-up these things?  

[Ahiru]

Interesting, that some are shown, others aren't: http://playground.babylonjs.com/#TYAHX#20

[fenomas]

All it's doing is, it draws a line between two faces if the dot product of their normals is less than epsilon.

 

Dot product is the cosine of the angle between the vectors, so for default epsilon 0.95 the angle is acos(.95) ~= 18 degrees - so if the angle between two faces is less than that no line gets drawn.

[jerome]

good explanation

[Wingnut]

Wow Fen, that's all it took to get a like/thanks out of this guy?  I need to quit working so hard.  sigh 

http://playground.babylonjs.com/#TYAHX#21

[GameMonetize]

Next update will allow the EdgesRenderer to use vertices instead of indices to detect faces (to take in account all kind of meshes)

[Dad72]

There is a small problem with edgesWidth:

 

When I put box.edgesWidth = 4 in localhost thickener is correct, but online thickener is huge (* 10), I must put 0.4 for the same thing as not local.

with an address: http:/127.0.0.1/. I must put edgesWidth = 4 to have the same result as an address http:/www.castorengine.com/Editor/ I put edgesWidth = 0.4

it's strange and I do not understand what can cause this.

 

<fr>

L'épaisseur de l’arrête est environs 10 fois supérieur en ligne par rapport a localhost.

autrement dit: avec une adresse: http:/127.0.0.1/ . je doit mettre edgesWidth = 4 pour avoir le même resultat que sur une adresse http:/www.castorengine.com/Editor/ où le met edgesWidth = 0.4

c'est étrange et je ne comprend pas ce qui peut provoquer cela.

</fr>

 

[Temechon]

Cache issue maybe ? Or browser zoom ?

 

Is it possible for you to create an example on the playground and the same code on your server ? 

[Dad72]

It will not work like that temechon. the playground and the result on my server is the same, but with the same code on my local server with EasyPHP, the result is divided by 10.

 

No zoom on my browser. my caches are empty

 

I can not send local link 127.0.0.1

 

Playground: http://www.babylonjs-playground.com/#TYAHX#10 => OK

My serveur: http://www.castorengine.com/babylon/index.html => OK

Localhost: http://127.0.0.1/CastorEngine/ => Bug

[wxxhrt]

 

Hi, I can't get edges to render on creases, where the angle between faces is less than 180degrees(see attachment), is this possible? a problem with my model? or should I look to an edge detection shader?

 

Thanks

[GameMonetize]

@Dad: There is obviously a bjs version difference. I cannot see any other reason

@wxxhrt: You should change you object to split faces to have a real edge in the geometry

[wxxhrt]

Hi deltakosh, could you expand on this, I can't find a split faces option in the blender obj exporter, should I use a different modeller?

 

Thanks

[Dad72]

Indeed, I was updated locally but not on my server. Deltakosh thank you for your lights.

[iiceman]

@wxxhrt I think DK means the edge split modifier that blender offers. I don't know much about blender but I remember I used it before to to get some hard edges on another wise smooth object. I found it here, there is a short explanation on how to use it, too: http://blender.stackexchange.com/questions/734/how-to-smooth-shade-an-object-while-retaining-hard-edges Hope that helps

 

(But if you find or create a shader that highlights the edges that would be awesome. I am looking for that for quite a while now... sooo let me know if you find something cool )

[wxxhrt]

Thanks iiceman, that makes sense, maybe using blenders cut so the corner that is troublesome has two edges one for each face, that might work too.

 

Sadly shader programming is over my head, this is as far as I got, maybe you'll have more luck

 

http://forum.unity3d.com/threads/export-glsl-shader.377982/

[ash32911]

Hi,

I am trying to set edges renderer on an parametric extrusion. when i enable edges rendering it shows the diagonals as well. i would like for it to show only the edges similar to that of a cube.

here is a playground of my example to help understand my situation.

http://www.babylonjs-playground.com/#TYAHX#91

sorry for the noob question and thanks for the help in advance.