robinfehr/babylonjs_layers.js

## babylonjs_layers.js
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
    <title>Babylon - Getting Started</title>
    <script src="babylon.custom.js"></script>
    <style>
      html, body {
        overflow: hidden;
          width   : 100%;
          height  : 100%;
          margin  : 0;
          padding : 0;
      }

        #renderCanvas {
          width   : 100%;
          height  : 100%;
          touch-action: none;
          position: absolute;
          z-Index: 0;
        }

        #renderCanvas2 {
          width   : 100%;
          height  : 100%;
          touch-action: none;
          position: absolute;
          z-Index: 1;
        }

        #topLayer {
          width   : 100%;
          height  : 100%;
          position: absolute;
          z-Index: 2;
        }
    </style>
  </head>
  <body>
    <div id="topLayer"></div>
    <canvas id="renderCanvas"></canvas>
    <canvas id="renderCanvas2"></canvas>
    <script>
window.addEventListener('DOMContentLoaded', function(){
  // get the canvas DOM element
  const canvas = document.getElementById('renderCanvas');
  const canvas2= document.getElementById('renderCanvas2');
  var engine1 = new BABYLON.Engine(canvas, true);
  var engine2 = new BABYLON.Engine(canvas2, true);
  window.addEventListener('resize', function(){
      engine1.resize();
      engine2.resize();
  });

  var createScene = (controlLayer, engine, pos) => {
    var scene = new BABYLON.Scene(engine);
    scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);

    var camera = new BABYLON.ArcRotateCamera("camera1",  0, 0, 0, new BABYLON.Vector3(0, 0, 0), scene);
    camera.setPosition(new BABYLON.Vector3(0, 0, -50));
    camera.setTarget(BABYLON.Vector3.Zero());
    camera.attachControl(controlLayer, false);

    var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), scene);
    var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene);
    sphere.position.y = pos;

    return scene;
  }

  const forwardEvent = (e) => {
    const newEvent = new e.constructor(e.type, e);
    canvas.dispatchEvent(newEvent);
    canvas2.dispatchEvent(newEvent);
  };

  const mouseDown = (e) => {
    engine1.isPointerLock = true;
    engine2.isPointerLock = true;
    forwardEvent(e);
  };
  const mouseUp = (e) => {
    engine1.isPointerLock = false;
    engine2.isPointerLock = false;
    forwardEvent(e);
  }


  document.getElementById("topLayer").addEventListener("mousemove", e => forwardEvent(e), false);
  document.getElementById("topLayer").addEventListener("mousedown", e => mouseDown(e, true), false);
  document.getElementById("topLayer").addEventListener("mouseup", e => mouseUp(e), false);
  //document.getElementById("topLayer").addEventListener("MSGestureChange", e => forwardEvent(e), false);

  // call the createScene function
  var scene1 = createScene(canvas, engine1, 1);
  var scene2 = createScene(canvas2, engine2, 4);
  // run the render loop
  engine1.runRenderLoop(function(){
    scene1.render();
  });
  engine2.runRenderLoop(function(){
    scene2.render();
  });

});
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
	<title>Babylon - Getting Started</title>
	<script src="babylon.custom.js"></script>
	<style>
	html, body {
	overflow: hidden;
	width : 100%;
	height : 100%;
	margin : 0;
	padding : 0;
	}

	#renderCanvas {
	width : 100%;
	height : 100%;
	touch-action: none;
	position: absolute;
	z-Index: 0;
	}

	#renderCanvas2 {
	width : 100%;
	height : 100%;
	touch-action: none;
	position: absolute;
	z-Index: 1;
	}

	#topLayer {
	width : 100%;
	height : 100%;
	position: absolute;
	z-Index: 2;
	}
	</style>
	</head>
	<body>
	<div id="topLayer"></div>
	<canvas id="renderCanvas"></canvas>
	<canvas id="renderCanvas2"></canvas>
	<script>
	window.addEventListener('DOMContentLoaded', function(){
	// get the canvas DOM element
	const canvas = document.getElementById('renderCanvas');
	const canvas2= document.getElementById('renderCanvas2');
	var engine1 = new BABYLON.Engine(canvas, true);
	var engine2 = new BABYLON.Engine(canvas2, true);
	window.addEventListener('resize', function(){
	engine1.resize();
	engine2.resize();
	});

	var createScene = (controlLayer, engine, pos) => {
	var scene = new BABYLON.Scene(engine);
	scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);

	var camera = new BABYLON.ArcRotateCamera("camera1", 0, 0, 0, new BABYLON.Vector3(0, 0, 0), scene);
	camera.setPosition(new BABYLON.Vector3(0, 0, -50));
	camera.setTarget(BABYLON.Vector3.Zero());
	camera.attachControl(controlLayer, false);

	var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), scene);
	var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene);
	sphere.position.y = pos;

	return scene;
	}

	const forwardEvent = (e) => {
	const newEvent = new e.constructor(e.type, e);
	canvas.dispatchEvent(newEvent);
	canvas2.dispatchEvent(newEvent);
	};

	const mouseDown = (e) => {
	engine1.isPointerLock = true;
	engine2.isPointerLock = true;
	forwardEvent(e);
	};
	const mouseUp = (e) => {
	engine1.isPointerLock = false;
	engine2.isPointerLock = false;
	forwardEvent(e);
	}


	document.getElementById("topLayer").addEventListener("mousemove", e => forwardEvent(e), false);
	document.getElementById("topLayer").addEventListener("mousedown", e => mouseDown(e, true), false);
	document.getElementById("topLayer").addEventListener("mouseup", e => mouseUp(e), false);
	//document.getElementById("topLayer").addEventListener("MSGestureChange", e => forwardEvent(e), false);

	// call the createScene function
	var scene1 = createScene(canvas, engine1, 1);
	var scene2 = createScene(canvas2, engine2, 4);
	// run the render loop
	engine1.runRenderLoop(function(){
	scene1.render();
	});
	engine2.runRenderLoop(function(){
	scene2.render();
	});

	});
	</script>
	</body>
	</html>