Place meshes relative to the viewport?

[boucher]

My goal is a 3d minimap or radar.

My starting point was to use a simple arrow as a compass or objective pointer, which I tied to the camera and positioned appropriately:

compass.parent = camera;

 

The problem is when the resolution changes, ex. going from landscape to portrait mode, my compass in the top left disappears off the screen.

So, is there a preferred way to position meshes relative to the screen, as in a UI element?

I've considered using a second camera and setting up a room with just my minimap elements, or installing a second canvas with absolute positioning relative to the page, but these don't seem so great.

 

I would also like to have my camera pan away from a character until that character hits the edge of the screen, which would prevent further panning in that direction. These seem like a similar problem, perhaps in reverse. Maybe each frame I shoot a ray into my scene and test for collision with the character? Or set up a plane to shoot a ray at to determine the correct world position to correctly place the UI elements/stop the camera with the given viewport?

 

Any insight is greatly appreciated!

 

 

 

 

[boucher]

The project is here btw:redacted I am looking at the blue arrow top left.

[coolroar]

 

For "camera pan away from a character until that character hits the edge of the screen" try

while ( camera.isInFrustum( character )) { pan }

or while ( camera.isCompletelyInFrustum( character )) { pan }

 

From the first page of "google babylonjs frustum":

• https://doc.babylonjs.com/api/classes/babylon.frustum
• https://stackoverflow.com/questions/2866350/move-camera-to-fit-3d-scene

 

 

[boucher]

camera.isInFrustum() is a nice helper but feels sloppy for collision, so I want to check myself against the plane.

This playground shows me the planes from Frustum.GetPlanes() which return in the order [far, near, right, left, bottom, top]:

https://www.babylonjs-playground.com/#LXZPJK#81

My near plane is a million miles away for some reason?

I think I can use that as a starting point to build a quad that stays in front of the camera to base my UI elements on.

But again, any insight is welcomed.

 

 

Something like the solutions here might be useful:

October 4, 2017

 

[coolroar]

After

var camera = new BABYLON....  try adding:

camera.minZ = 1;

camera.maxZ = 44;

 

Also you can add

camera.fov = 2.7 (or something)

to widen or narrow the frustum.

 

Look over the properties and methods in http://doc.babylonjs.com/api/classes/babylon.camera#maxz 

 

Here's an index of BABYLONjs classes, etc. http://doc.babylonjs.com/api/globals

 

It's not the easiest thing to browse, but along with GOOGLE I find it valuable.

 

Good luck with your projects!         ☘️

[boucher]

Yes, nice docs and an active community are reasons I would choose an API.

 

I was under the impression that the near plane of the frustum is basically synonymous with what is seen on-screen with the view-port.

Setting camera.maxZ brings the near plane closer for some reason, but obviously ruins the view distance.

Maybe I am using the wrong vocabulary or something, it seemed pretty basic to want to position something relative to the camera with regards to the view port. Anyways, I'll stop back when I work out something I like, if nobody else has any good ideas.

Thanks!

 

Edit: Maybe I should set up another scene and camera to lay over my existing scene? Is that the right sort of thinking?

[Guest]

19 hours ago, boucher said:

Maybe I should set up another scene and camera to lay over my existing scene? Is that the right sort of thinking

I like this one as it would be easier for you to maintain (performance wise it is perfectly valid)

[boucher]

3 hours ago, Deltakosh said:

performance wise it is perfectly valid

Okay, that's just what I wanted to know.