Babylon multi-view demo - one scene, two canvases

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.

by kdwoell

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <script src="https://preview.babylonjs.com/babylon.js"></script>
    <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
    <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
    <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
    <script src="./js/overlay-scene.js"></script>
    <style>
        canvas {
            width: 100%;
            height: 100%;
            align-self: center;
            justify-self: center;
        }

        /* 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>
</head>

<body>
    <canvas class="renderCanvas" id="renderCanvas0"></canvas>
    <canvas class="renderCanvas" id="renderCanvas1"></canvas>
    <script>
    </script>
</body>
</html>

JavaScript

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...