I’m experimenting with multi-views.
Goal is a “bird’s eye” view camera in an inset that overlays another larger view from a second camera which could be a FPS or some other type of camera. I’m close to getting it working but there is odd behavior. First the render does not update unless I resize the browser. Second camera controls are uhmm intermittent until a couple of seconds after resizing the browser. Third when the render does show the simple animation I made the frames persist, like its painting on the canvas. Seeing the PlayGround in action best explains. Another I’m a noob to the playground and cannot get it to run. So I also included HTML/CSS and the BJS source.
Update: I was able to get a JSFiddle demo going: Babylon multi-view demo - one scene, two canvases - JSFiddle - Code Playground
canvas { width: 100%; height: 100%; align-self: center; justify-self: center; }Blockquote
/* any HTML elments of class = ".renderCanvas" width and height set to 100% of browser window */
.renderCanvas {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
}
#renderCanvas0 {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
/* background: transparent; */
background:rgba(200, 200, 200, 1);
z-index: 0;
}
#renderCanvas1 {
width: 25%;
height: 25%;
position: absolute;
left: 0px;
top: 0px;
background:rgba(0, 200, 200, 0.5);
outline-style: inset;
z-index: 1;
}
</style>
<title>Overlay Scene as Inset on Primary Scene - stacked canvases</title>
Blockquote
window.addEventListener(‘DOMContentLoaded’, function () {
// Create a working document
var canvas = document.createElement("canvas");
var engine = new BABYLON.Engine(canvas, true);
// Set the default canvas to use for events
engine.inputElement = document.getElementById("renderCanvas0");
var createScene = function () {
// This creates a basic Babylon Scene object (non-mesh)
var scene = new BABYLON.Scene(engine);
//scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);
//scene.autoClear = false;
// This creates and positions a free camera (non-mesh)
var camera = new BABYLON.ArcRotateCamera("Camera0", 0, 0.8, 5, new BABYLON.Vector3.Zero(), scene);
camera.setTarget(BABYLON.Vector3.Zero());
camera.wheelDeltaPercentage = 0.01;
camera.minz = 0.0001;
camera.lowerRadiusLimit = 1;
camera.upperRadiusLimit = 100;
// This attaches the camera to the canvas
camera.attachControl(document.getElementById("renderCanvas0"), true);
var camera1 = new BABYLON.ArcRotateCamera("Camera1", 0, 0, 100, new BABYLON.Vector3.Zero(), scene);
// assign canvases to cameras
engine.registerView(document.getElementById("renderCanvas0"),camera);
engine.registerView(document.getElementById("renderCanvas1"), camera1);
// This creates a light, aiming 0,1,0 - to the sky (non-mesh)
var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
// Default intensity is 1. Let's dim the light a small amount
light.intensity = 0.7;
// Create Box
var box = BABYLON.MeshBuilder.CreateBox("Box", { size: 2 }, scene);
box.position.y = 0.5;
var mat = new BABYLON.PBRMetallicRoughnessMaterial("mat", scene);
mat.metallic = 1;
mat.roughness = 0.5;
box.material = mat;
// create a sphere
var sphere = new BABYLON.MeshBuilder.CreateSphere("sphere", { segments: 8, diameter: 1 }, scene);
var sphereMaterial = new BABYLON.StandardMaterial("sphereMaterial", scene);
sphereMaterial.diffuseColor = new BABYLON.Color3(100, 0, 100);
sphere.material = sphereMaterial;
sphere.position.z = 3;
camera1.lockedTarget = sphere;
//quick way to creat an quasi ground plane an skydome
//scene.createDefaultEnvironment();
// initialize increments for animations
var deltaXpos = 0;
scene.registerBeforeRender(() => {
sphere.position.x = sphere.position.x + deltaXpos;
//console.log("sphere x pos: ", sphere.position.x);
deltaXpos += 0.000001;
})
return scene;
}; // end create scene function
var scene = createScene();
engine.runRenderLoop(function () {
if (scene.activeCamera) {
scene.render();
}
});
window.addEventListener('resize', function () {
engine.resize();
});
});
Blockquote
Mostly, it is telling the ‘engine’ that there is MULTIPLE cameras active in this scene. If you need more-detailed explanation… we will need the help of smarter people than I. 
I am not an expert. I’m a junior-level forum helper.
