Jump to content

Create a plane with round corners and a colored border


TheFrenchieCake
 Share

Recommended Posts

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 ? :-)

Link to comment
Share on other sites

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.  :)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...