Giving some thickness to LineMesh

[sparkbuzz]

I'm currently faking line thickness by creating lines as slim planes. The problem is however, that as the view changes, and the plane is viewed from the side, it eventually disappears, as it has no volume.

 

To counter this, I was thinking about creating two planes between the lines start and end point, at right angles of each other, alternatively I was thinking about creating a line as a long cylinder, but this seems to be a bad way to approach as drawing lines as cylinders isn't the most resource friendly approach.

 

Is there a better way to give thickness to a line in BabylonJS, perhaps by using a shader of some kind?

 

 

[jahow]

Giving thickness > 1px to a line is not possible in OpenGL ES 2.0, which is the version used by BabylonJS.

 

What you could do is rotate the planes that act as grid lines along their axis, depending on the camera's position. I've setup an example with grid lines on one axis only:

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

 

Not great performance wise though...

[jahow]

Actually lines rotated at 0 and PI/2 around their main axis looks pretty good, and you can merge all the lines together to gain in performance! http://www.babylonjs-playground.com/#HV9RU#3

 

Edit: now with a nice "overlay" effect: http://www.babylonjs-playground.com/#HV9RU#4

I'm off, need to stop playing with this

[sparkbuzz]

Thanks jahow, love the overlay effect, definitely going to look at your code sample after work today. I was thinking about rotating the planes towards the camera but my lack in mathematical skills lead me to rather not take this approach. You'r post helps a lot!

 

Thanks so much for posting!

[Wingnut]

Jahow, you are a madman!  (and a WAY good forum helper/custodian)  Cooooool!  That playground gets bookmarked.