Multiple views and webxr

Questions
1

Hey,
I’d like to know how to have 2 views, (one normal webxr experience view, and one other view on computer screen for 2D) with webxr?

for now i got this code, but once i enter vr, the computer screen camera doesnt render anything, only the vr on oculus renders.

var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -6), scene);
		camera.setTarget(BABYLON.Vector3.Zero());
		camera.attachControl(scene.getEngine().getRenderingCanvas(), true);
		
		//camera.attachControl(scene.getEngine().getRenderingCanvas(), true);

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


		// Default Environment
		var environment = scene.createDefaultEnvironment({ enableGroundShadow: true });
		environment.setMainColor(BABYLON.Color3.FromHexString("#74b9ff"));
		(environment.ground.parent as any).position.y = 0;
		environment.ground.position.y = 0


		var Box_Left_Trigger = BABYLON.MeshBuilder.CreateBox("Box_Left_Trigger", {}, scene);
		Box_Left_Trigger.position = new BABYLON.Vector3(-2.5, 1, 3);

		var Box_Left_Squeeze = BABYLON.MeshBuilder.CreateBox("Box_Left_Squeeze", {}, scene);
		Box_Left_Squeeze.position = new BABYLON.Vector3(-2.5, -1, 3);

		var Sphere_Left_YButton = BABYLON.MeshBuilder.CreateSphere("Sphere_Left_YButton", { diameter: 1 }, scene);
		Sphere_Left_YButton.position = new BABYLON.Vector3(-2, 0, 3);

		var Sphere_Left_XButton = BABYLON.MeshBuilder.CreateSphere("Sphere_Left_XButton", { diameter: 1 }, scene);
		Sphere_Left_XButton.position = new BABYLON.Vector3(-2, 0, 2);


		var Box_Left_ThumbStick = BABYLON.MeshBuilder.CreateBox("Box_Left_ThumbStick", { size: 0.5 }, scene);
		Box_Left_ThumbStick.position = new BABYLON.Vector3(-1, 0, 1);


		var Box_Right_Trigger = BABYLON.MeshBuilder.CreateBox("Box_Right_Trigger", {}, scene);
		Box_Right_Trigger.position = new BABYLON.Vector3(2.5, 1, 3);

		var Box_Right_Squeeze = BABYLON.MeshBuilder.CreateBox("Box_Right_Squeeze", {}, scene);
		Box_Right_Squeeze.position = new BABYLON.Vector3(2.5, -1, 3);

		var Sphere_Right_BButton = BABYLON.MeshBuilder.CreateSphere("Sphere_Right_BButton", { diameter: 1 }, scene);
		Sphere_Right_BButton.position = new BABYLON.Vector3(2, 0, 3);

		var Sphere_Right_AButton = BABYLON.MeshBuilder.CreateSphere("Sphere_Right_AButton", { diameter: 1 }, scene);
		Sphere_Right_AButton.position = new BABYLON.Vector3(2, 0, 2);

		var Box_Right_ThumbStick = BABYLON.MeshBuilder.CreateBox("Box_Right_ThumbStick", { size: 0.5 }, scene);
		Box_Right_ThumbStick.position = new BABYLON.Vector3(1, 0, 1);

		var xr = await scene.createDefaultXRExperienceAsync({

			//  xrInput: defaultXRExperience.input,
			//      floorMeshes: [environment.ground] /* Array of meshes to be used as landing points */
		});
1 Like
2

This is a webxr limitation. There are a few discussions in that matter.

The recommended method is to render the scene twice - once using the webxr camera, and once using the free camera, set to the xr camera’s position. This will probably cause to performance reduction, as you are practically rendering the scene 3 times (both eyes, plus canvas)

Babylon doesn’t support it directly, but it feels like this is something we should add to the webxr experience helper.

2 Likes
3

Could you provide a playground example with the workaround?

4

Not at the moment, but I can work on that during the week.

1 Like