Feature: Independent camera view

[RobTranquillo]

Hello,
I am currently trying out BabylonJS because I am dissatisfied with NeedleEngine in Unity. I have a lot of experience with Unity, Blender and many other 3D editors and CAD programmes. And what I still sorely miss, and hope will soon be possible, is an independent camera view. For meaningful camera alignment, it is essential to be able to change the camera transform and see the effect of this at the same time. This would be possible, for example, with a standalone camera view or if the build ran in its own window and updates in the editor would have a direct effect in the play view.

Thank you very much for this great project, I will continue to follow it.

[julien-moreau]

Hey @RobTranquillo !

I'm not sure to understand the request so I'll ask for more details. Are you talking about that kind of camera view in Unity?

[RobTranquillo]

That could be one way to achieve this.
Another option would be to use two separate windows for this purpose:

20251017-0541-35.1236505.mp4

[julien-moreau]

My main problem is the "separated windows", unfortunately this is not really possible using web technologies :(
I remember @Soullnik proposed a way to open a new tab in the layout for the selected camera. It looks like he was right and I propose to add it so you'll be able to have separated views for each camera (the editor one and the selected one like in your example above)

[RobTranquillo]

For debugging reasons did vibe coded me a "scene view" in one of my needle-projets. This works very well. I do have e second view with free view configuration and complete independed mouse interactions. Exactly like in Unity (Blender, Max, ...).

The main function looks like that:

    private createViewport() {
        this.viewportDiv = document.createElement("div");
        this.viewportDiv.style.position = "absolute";
        this.viewportDiv.style.top = "10px";
        this.viewportDiv.style.right = "10px";
        this.viewportDiv.style.width = `${this.viewWidth}px`;
        this.viewportDiv.style.height = `${this.viewHeight}px`;
        this.viewportDiv.style.border = "2px solid white";
        this.viewportDiv.style.backgroundColor = "rgba(0, 0, 0, 0.5)";
        this.viewportDiv.style.cursor = "grab";
        document.body.appendChild(this.viewportDiv);

        // Create toggle button
        this.createToggleButton();

        this.secondRenderer = new WebGLRenderer({ antialias: true, alpha: true });
        this.secondRenderer.setSize(this.viewWidth, this.viewHeight);
        this.viewportDiv.appendChild(this.secondRenderer.domElement);

        // Create both cameras
        this.createCameras();
        this.updateActiveCamera();
    }

If you want you can get the whole code.

[julien-moreau]

Sure! In this code does it mean that scene is duplicated between renderer1 and renderer2 ?

[RobTranquillo]

To my knowledge, the scene only exists once, but the calculations for rendering the scene must be performed twice.