Multi Plane View of Scene - Advice

I am currently working on an editor for creating scenes.
The editor takes inspiration from a well-known cross platform level editor, Trenchbroom.

I specifically liked that you can view/edit the scene in multiple axes:

and was looking to implement something like that on my own.

Using the multiCanvas feature, I’ve gotten to this point:

The problem though, is that I’d also like to only render the outlines of meshes, and also display a grid in the background for the axis plane views, whilst still having the normal 3d view at the top left- just like Trenchbroom does it. This sadly, is not possible by solely using multiCanvas (as far as I can tell), because you can’t really change the scene, eg. to only display the edges of a mesh, for a specific canvas.

Since I can’t think of any other (good) ways to implement such feature, I’m open to suggestions and recommendations- also on how to optimize this efficiently.
Note that I’m looking for a performant and optimized way to handle all this, as it’ll be likely that the scene can consist of 1k+ meshes.

Thanks!

I don’t know for sure as I’ve never tried it myself, but my initial idea would be to use the multi canvas known active view to change the visible grids and materials before that view is rendered e.g. from solid for perspective to wireframe for orthographic.

Engine.onBeforeViewRenderObservable Babylon.js docs

Have you confirmed it’s not possible to change the scene per view?

2 Likes

Small quick example with camera views - https://playground.babylonjs.com/#CX25VM#3
For multiviews Engine.onBeforeViewRenderObservable should work as @inteja mentioned.

2 Likes

Using

    engine.onBeforeViewRenderObservable.add((view) => {
        var cam = view.camera;
        
        if (cam === camera1 || cam === camera2 || cam === camera3) {
            //console.log("2d cam")
            box.material = redMat;
        } else if (cam === camera) {
            //console.log("3d cam")
            box.material = mat;
        }

    });

did the trick for me, but I’m not really liking the performance of this. I’m guessing if I have a scene with 1k+ meshes, iterating over every mesh in the scene and then changing materials etc. each time the view renders would have a heavy impact on performance.

Have you confirmed it’s not possible to change the scene per view

Did not confirm this, no. But from what I’ve researched it does seem to be the case. Still could be wrong though.

Anyway, thanks!

Using LayerMasks seems like an interesting idea, but cloning the meshes still is too expensive for me, especially when the scene consists of a lot of meshes.

Something I thought of that should also be very performant, is to just draw rectangles/other shapes on the canvas that represent the meshes, and positioning and scaling them by iterating through the scene.meshes array and fetching their transformations. So no babylon-side rendering at all, just the canvas. I’m not sure if the babylonjs GUI would be suitable for something like this?

Either way, this does seem like a lot of effort to implement properly (and maybe even above my ability to do so), so I’m still open to other suggestions.

Thanks!

I believe you may use Coroutines for this purpose, it would help to spread the performance impact - Babylon.js docs
Also, you may not need to render every frame in additional views; for example, you may start to render them after 1 second after the main camera had no input events.

1 Like