Create a plane with round corners and a colored border

[TheFrenchieCake]

Hi everyone,

 

I have a minimap in the upper right corner of my project; the minimap is a orthographic camera with its own viewport, just like in Temechons FPS tutorial. For clarity purpose, I need it to be clearly "separated" from the main canvas. So, I'd like to create a square plane with round corners, and eventually with a colored border, that I'll place beneath the main terrain of my scene.

 

For now I just created a square half-transparent white plane beneath the terrain, which already separated the minimap from the terrain displayed (but I really need those round corners and that colored border ^^).

 

I could create an other plane that I would place upon the first one, but the fact is the main terrain is very big (the first underneath plane has dimensions of 40.000x40.000) and it would maybe cause some performance issues. Also, I thought about texturing the underneath plane, but again, it's very big and could cause performance issues...

 

Any ideas ? :-)

[Wingnut]

Hi again, TFC!

  You COULD use a rounded html border, with absolute positioning.

http://playground.babylonjs.com/#SVJ9R#5

*shrug* 

Make sure you always use percentages to set its top/left position and its width/height. That way, resizes and different screen rez conditions...  SHOULD keep the html border positioned correctly.  No promises, though. 

[TheFrenchieCake]

Hi Wingnut!

 

Thanks for your answer :-) I was already thinking about this solution, but thought there would have been a 3D solution ;-p I'll use this solution, for now (thank you for all the styling that I won't have to search, by the way ;-) ).