How to make a blur effect on polygon's edges ?

[elkyu]

Hi,

 

I have something like that (simplified version for the playground) :

 

http://www.babylonjs-playground.com/#272WDW#23

 

But when we move the mouse over the hole, the user don't necessarily know that he can click on the hole. So what I would like is an effect to know that we can click on.

 

At the beggining, I thought to make a little zoom on the image which is behind the hole but i'm not convinced by this effect.

(http://www.babylonjs-playground.com/#272WDW#24 - But, nice work iiceman   )

 

What I thought, would be that at mouseover, display a border all around the edge of the hole (inner side) with a little blur effect.

I don't find an exemple to illustrate what I say, I hope that what I say is understandable.

 

I know it's possible to enable the edges of a polygon (but i don't know how), so i think we can use that, but I don't find anything like this on the forum or the documentation

 

Thanks !

[varomix]

Hi

Maybe it would be better to have and alpha map with a gradient in the hole edges that actually remove the geometry

I think that would be easier.

 

hope that helps

[elkyu]

Hi varomix,

 

Alpha map ? You mean a duplicate of my ground mesh which I place just behind my current ground mesh ?

I already think to that solution, reduce the size of the duplicate mesh and change its alpha value should work but I'm afraid with the two ground mesh,with all these polygons the animation becomes too weighty and start to lag, especially on mobile devices ...

[elkyu]

Nobody know how to display the polygon's edges with a blur effect at the mouseover on the hole ? I think it's not the easier but, the render should be better visually but also in performance

[varomix]

What I mean is just mask your mesh with an alpha texture, no need to duplicate it at all

is just a black and white image that makes and area transparent, of course you can make the transparent area smooth so is not a hard line

 

[elkyu]

hmm .. I'm not sure to understand how to do what you say, it's tricky with my animation I think, no ?

 

Can you do an example on a playground ? 

[varomix]

I did 

 

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

but, seems like the standard shader is not using the alpha correctly, is not using the gradient in the texture, this might be to make the shader faster

so you might need to modify the shader.

[varomix]

Ok I got it to work

I needed to put the texture in the opacity channel

 

there you go, hope it helps you

 

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

[elkyu]

I think I can't use that.

I should have to be more precise about what I want to do.

The playground I make is just an example, in fact, I have several holes, number of hole can change, their position, their size and their form too. So I can't draw a precise texture like you do.

 

What I thought to do is to get back all the faces which are around the hole (I know how to do that). And for all that faces around the holes, find their side in contact with the faces which compose the hole, to finally enable a edge (border) on this side (inner side to the hole)

 

With code, this shouldn't be the easier part to realize, but I still think that it is the best solution so that I can adapt this effect on any hole