solved [Solved]2D forms in a 3D space

[Borjan]

I’m investigating possibilities of porting the graphical part of an OpenGL desktop application to BABYLON.JS. The basic displaying went easy but (for me) the difficult part to create meshes that are 2D forms in a 3D space (please have a look into this 10 seconds video: https://www.youtube.com/watch?v=gFqANSbdtnE). Basically, the rectangles are always facing the camera, but in the same time are rotating and resizing with the entire scene. What would be the right (and hopefully the easiest) way to make that working?

Additionally, I would like to display “tool tips” (mesh names) on selected meshes (and when the mouse pointer hovers over a mesh). That part I could easily program myself (except for hovering), but only by using the 3.0 pre-release (see playground https://www.babylonjs-playground.com/index.html#RBP60B). I’ve copied that solution from the GUI playground and it works just fine. Am I using this functionality properly?

[JohnK]

1 hour ago, Borjan said:

(except for hovering)

Check out http://doc.babylonjs.com/tutorials/how_to_use_actions and triggers which deal with whether pointer is over a mesh or not.

For GUI hovering check out http://www.babylonjs-playground.com/#XCPP9Y#121

Version 3 will be on release very soon so do not worry about using this version.

[Borjan]

1 hour ago, JohnK said:

Check out http://doc.babylonjs.com/tutorials/how_to_use_actions and triggers which deal with whether pointer is over a mesh or not.

For GUI hovering check out http://www.babylonjs-playground.com/#XCPP9Y#121

Version 3 will be on release very soon so do not worry about using this version.

Thanks John for for your input. However, the hovering is not really of a mayor concern and, moreover, I do not need to use GUI except for the "tool tips". Even that I would prefer to solve without involving yet another API set (a separate js library), but, if it is the way I have to do it, I'll do it.

My major concern is how to show rectangles (like in the YouTube video) instead of spheres in my visualization Check  https://www.babylonjs-playground.com/index.html#RBP60B. 

The red and white spheres need to be replaced with red rectangles and blue oval shapes respectively (as used in the video: https://www.youtube.com/watch?v=gFqANSbdtnE)

[JohnK]

Plane with billboardmode https://www.babylonjs-playground.com/index.html#RBP60B#1

[Borjan]

15 hours ago, JohnK said:

Plane with billboardmode https://www.babylonjs-playground.com/index.html#RBP60B#1

Thanks John,

however, your example does not work. Everything rotates as without the billboard mode, looks like something has to be done in addition.

I've heard of it for the first time and checked other entries in this forum. Have a look into this: http://www.html5gamedevs.com/topic/28611-billboard-mode-solved/

I've extracted a piece of it and it behaves as it should be (if I understand well what the "billboard mode" means): http://www.babylonjs-playground.com/#QNG6Y1#1

Please comment!

[JohnK]

First of all my apologies as I made a mistake billboardMode should have a capital M (line 90) however even spelling it correctly would not give the correct results. It appears that billBoardMode does not work with instances without applying it to the instance https://www.babylonjs-playground.com/index.html#RBP60B#5

As an alternative you could use clone https://www.babylonjs-playground.com/index.html#RBP60B#4

This is also the first time I have played with billboardMode. I had read about it in the forum and thought it might help you. My attempt at a solution fell down a bit as it was late and I didn't check it.

I found the error by stripping out parts of your code bit at a time until the problem lay in a small section of code and so focusing on where the issue might be. A useful method for all of us.

 

[Borjan]

3 minutes ago, JohnK said:

First of all my apologies as I made a mistake billboardMode should have a capital M (line 90) however even spelling it correctly would not give the correct results. It appears that billBoardMode does not work with instances without applying it to the instance https://www.babylonjs-playground.com/index.html#RBP60B#5

As an alternative you could use clone https://www.babylonjs-playground.com/index.html#RBP60B#4

This is also the first time I have played with billboardMode. I had read about it in the forum and thought it might help you. My attempt at a solution fell down a bit as it was late and I didn't check it.

I found the error by stripping out parts of your code bit at a time until the problem lay in a small section of code and so focusing on where the issue might be. A useful method for all of us.

 

Thank you very much for your effort! Just one performance question. Is there any difference between using instances and using clones?

[JohnK]

If all the meshes have same geometry and material use instances.

If all the meshes have same geometry but different materials use clones.

 

[Borjan]

1 minute ago, JohnK said:

If all the meshes have same geometry and material use instances.

If all the meshes have same geometry but different materials use clones.

 

Thanks a lot again!