Reality Composer Camera Behavior

Questions
1

Hello everybody,

First of all, I must apologize for my absolute lack of knowledge; I come from a 2D world (Front-end development) and have never been really good at algebra :crying_cat_face:

I am currently trying to create a camera that behaves like the one in Appleā€™s Reality Composer.

In RC, when a mesh is selected, it becomes the target of the camera without being in the center of the screen. I made this screencast as a demo: Screen Recording 2021-06-29 at 5.00.40 PM

You can see how after moving the mesh to the left, both rotation and zoom use it as its target but without centering the camera on it.

For my current attempt, I tried using an ArcRotateCamera but when I use setTarget, it ā€œjumpsā€ to center the target in the middle of the viewport.

Although it is a super broad question, I wanted to try and ask if you folks know of any thread/tutorial/playground I should take a look at in order to understand what I need to learn to accomplish thisā€¦

Currently, I am looking at https://playground.babylonjs.com/#5PWC2D#2 but, quite honestly, I donā€™t understand much haha.

Anything helps!

Thank you very much :slight_smile:

2

Adding @PirateJC for providing more links and tuto :slight_smile:

3

Hey @onescene

First and foremost welcome to the Babylon Family! Weā€™re sincerely happy to have you here!

I also want to thank you for making it super clear what youā€™re trying to achieve. That always makes it WAY easier for us to help people get to the answers theyā€™re looking for.

In this case, unfortunately, the answer is not super clear. Essentially none of the built in Babylon cameras will allow for the functionality that youā€™re after. That said, thereā€™s still hope.

You have 2 options that you can explore:

  1. Create a camera rig yourself. This would use existing cameras in Babylon but break up and distribute their functionality among other pieces. For example maybe one camera handles the input, while another handles aim. Something in that world. This is likely possible, but probably not super easy.
  2. The best option for you would likely be to create your own custom camera. Since Babylon is completely open-source you have the ability to look at the core code and extend it in any way you need!

These two docs would be good places for you to start looking:

Sorry we donā€™t have a more direct answer to your question, but hopefully these resources can help you get started.

Thanks and once again, welcome to the family!

3 Likes
4

Thank you very much! I will use this info and what I have built so far and get back to yā€™all with a playground showing the progress.

Thank you for your help and support, this is definitively a new world (or at least a new dimension!) for me :slight_smile:

1 Like
5

This example could also be helpful:
https://playground.babylonjs.com/#AH85PF#53

1 Like
6

Oh ~ that is very close to what I am looking for!

Thank you, @a_bolog !

Iā€™ll take a few days to properly understand it and come back with -hopefully- less general questions :slight_smile:

1 Like
7

Hey @onescene, like @PirateJC suggests, making a custom camera or custom camera input would be the most surefire way to accomplish what youā€™re looking for. You can also leverage the use of scene.onPointerObservable for some additional functionality, if you donā€™t want to design a full camera. Hereā€™s a PG that demonstrates an off-center wheel zoom with the ArcRotateCamera: Off-center zoom example | Babylon.js Playground (babylonjs.com). Keep in mind that this is only one way to do it and may not be perfect. As for things like dragging, take a look at our Gizmos docs for a bit of code inspiration.

2 Likes
8

Hello everybody,

After a week working on some other stuff I was able to sit back and go through the links you sent. It was super helpful :slight_smile:

Thanks to @PirateJC for the documentation links! @PolygonalSun I learned about the concept of Linear Interpolation and @a_bolog taught me how to implement camera input controls.

I implemented a custom camera input setup, played with the target screen offset of the arc camera and a few more things.

This is what I am thinking now:

  • A Universal camera can basically do anything, it can be in any position pointing at any place.
  • A ArcRotate camera points at its target and uses alpha, beta and radius to define its position, rotation, etc.

My so far unfounded belief is that I could take certain data from an ArcRotateCamera and use it to set properties of a UniversalCamera so that both show the same picture.

Here is a schematic PG: https://playground.babylonjs.com/#XHT8WY#8

Perhaps, like @PirateJC mentioned, a rig with a RIG_MODE_STEREOSCOPIC_OVERUNDER mode be worth looking intoā€¦

TL;DR: Is it possible to have a camera of type A show exactly the same image of one of type B by copying certain property values from one to another?

Thanks again for your warm welcoming and help :slight_smile: - if at any point anybody needs any help with front-end please hit me up :sweat_smile:

1 Like
9

This thread might help How to convert UniversalCamera rotation to ArcRotateCamera rotation

1 Like
10

Thanks @sebavan that worked pretty well!

1 Like