Reality Composer Camera Behavior

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:

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

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

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

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

1 Like

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

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

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

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

1 Like

Thanks @sebavan that worked pretty well!

1 Like