Setting background colours different from none viewports within the scene

[jcharnley]

Having a couple of issues, What I want to do is find blank spacing between set viewports within the scene. Originally, I started to do some calculations to place in html DIVs in those spaces or use the GUI, so I don’t need to worry about resizing. I can do this but when there is a lot of spacing it gets overly complex.

As you can see, we can set viewport sizes and positions and I set a div overlay over them to give me dividers to show these viewports and make them clickable to attach control to that camera etc.

My next solution was to edit the background colour of the scene, to say black/grey and then as I know the viewports change them to white.

What it should look like, from our .glb export software

I found a playground which seems a good direction to work with.

Babylon.js Playground

First issue is changing this to an Arch rotate camera - if I use scene.autoClear you get mesh smearing

Logic to accommodate for blank spaces between viewports.

1. Set the background colour to black/grey or whatever using clearColor, and as I know where each viewport is. 2. Change background colour of them to white. That would get my desired result.

The only thing I can find on the forums and playgrounds is a PG that scissors portions of the screen and then set the engine.clear() with the new colour.

Seems to work but the original Playground uses freecam, I need to use arch rotate cameras

Here is my PG - https://playground.babylonjs.com/#8R3AJX#11

as you can see if I do not set scene.autoClear = false; I cannot add the colours, if I add this, I will get mesh smearing whenever I rotate a model

Any help would be great.

Update - the mesh smearing seems to have gone now… https://playground.babylonjs.com/#8R3AJX#12

Am I going in the best direction ? Now I just need to look into enableScissors and find out how to get my viewport sizes, as it uses a different cord system, bottom left ?

what about Babylon.Layer to set that viewport with a background of white ?

[sebavan]

Why not simply using camera viewport in Babylon ?

camera.viewport = new BABYLON.Viewport(0.5, 0, 0.5, 1.0); for instance.

[jcharnley]

ive created my viewports all is working well with them, I just want to make my main background thats not in a viewport black and my viewports in white

the 1st picture is my app which shows the viewports

[sebavan]

you could disable autoclear and before calling scene.render you could call engine.clear(red…

then before each camera render call engine.clear(white… or similar.

This should work well.

[jcharnley]

@sebavan

engine.clear(white… or similar

ok great ill give that a shout, would engine.Clear on the cameras happen just after I create it our when they are added into scene.Cameras etc

[sebavan]

it would need to happen every frame before the camera renders.

[jcharnley]

@sebavan

autoclear

Cant get it to work yet.

I’ve added engine.clear() before scene.render within the engine loop

  engine.runRenderLoop(() => {
    // divFps.innerHTML = engine.getFps().toFixed();
    // Sometimes the render is triggered before the scene is done loading
    // this causes a delay during startup
    if (scene && !scene.isLoading) {
      // divFps.innerHTML = engine.getFps().toFixed();
      engine.clear(BABYLON.Color3.Black(), true, true, true);
      scene. Render();
    }
  });

then trying loads of different properties, methods etc on scene and engine. The best I can get it either a black background or completely white.

I thought this might work but doesn’t

 scene.beforeCameraRender=()=>{
            var camClear = BABYLON.Color3.White();
            engine.clear(camClear, true, true, true);
        }

I guess what we are doing is defaulting the engine with color black() then when new viewports are created with a camera default those to white()…

[sebavan]

Ohhh shoot I forgot viewport does not impact clear…

You can try smthg like this https://playground.babylonjs.com/#0VYGPJ#5

[jcharnley]

this is exactly what i need thanks for doing a PG for me, it works am having one last issue though, I cannot see any meshes in my viewports until I click on them, so all the viewports are white, and the non-viewport background is back. its only when I select the viewport i see my meshes/model, is this something to do with forefront and behind? and when I click out the viewport i loss my meshes/model again

Thanks so much

[sebavan]

I am not sure to understand what you mean can you repro in the playground ?