Unity Camera Preview like Demo

Demos and projects
1

I created a demo to assist in fine-tuning the camera, which like the Unity’s Camera Preview.

picture
picture1163×1162 118 KB

11 Likes
2

I added sky values ​​that are as unity-like as possible.

3

Unity Camera Preview + real parameters | Babylon.js Playground
Maybe useful to someone. When I need to precisely position the camera on stage, I use four lines of code to output the position to the console :innocent:

      document.onclick = function() {
      console.log("alpha - "+mainCamera.alpha);
      console.log("beta - "+mainCamera.beta);
      console.log("radius - "+mainCamera.radius);
      console.log("target - "+mainCamera.target);
      };
1 Like
4

Super handy! Makes it so much easier to set the camera exactly where you want it. Would be even cooler if we could tweak the radius somehow—and maybe have a one-click way to copy the camera values to the clipboard. That’d make things even smoother!

5

@a.dzhakhangirov
Yep, I use that trick too :grinning_face_with_smiling_eyes: But honestly, trying to position the camera precisely using the Inspector can be a bit of a pain. This little tool really takes the experience to the next level.

2 Likes
6

@gsw945 this is super useful, thank you for sharing! If you wanted to create a PR adding this feature to the inspector we would happily review :slight_smile:

7

The naming in the demo is not standardised, let’s unify the naming first:
MainCamera, formally the camera that will be used, used to provide Preview , is observed. (Named cornerCamera in the demo)
MonitorCamera, is used to observe and debug the main camera, which should be in its field of view. (named mainCamera in the demo)

For myself, this demo is currently not in a condition to create a PR, as there are some things that are not clear:

  1. For adding Camera Preview functionality to inspector. Currently there is a need to add an additional monitor camera to add the Preview Camera functionality, and it is envisioned that there needs to be the following actions:
    • Automatically add a monitor camera dynamically
    • Set the viewport of the main camera.
    • Set the active cameras of the current scene, the order is very relevant.
    • Set the AdvancedDynamicTexture of the Preview UI.
    • Set onBeforeCameraRenderObservable to hide the Preview UI from the main camera, via layerMask.
  2. so far I found that the main camera can’t be ArcRotateCamera, otherwise it can’t modify the position and rotation, which is reasonable, and I’m not sure what other types of cameras need to be taken care of.
  3. if there can only be one AdvancedDynamicTexture in fullscreen mode in the current scene, it should be considered not to use fullscreen mode to improve compatibility, but you need to control the position manually.
  4. After closing the inspector, you need to restore changes to the current scene and the main camera (viewport, activeCameras, onBeforeCameraRenderObservable ), which will be incompatible if the scene had these properties set originally.

Babylon.js is great, I can’t add code to it that I know will be buggy in some cases.
I have the will to contribute PR, but I can’t at the moment. Also, I’m a game server developer with limited knowledge of Babylon.js at this stage, and I have very limited time to toss in a web front end.
The original reason for writing this demo was because camera debugging is too hard for me, and inspector is of limited help. I actually spent weeks going through a lot of Playground code and Babylon’s Docs and many attempts before I got to the current look.
I’m happy that this code seems to be useful to you guys.
I’d love to see a contributor add the Camera Preview feature to Babylon.js.

8

My native language is Chinese, and I translated to English with the help of DeepL, so there are some crappy phrases, so please bear with me.