Change eye separation width in WebVR

Triuman · May 17, 2018, 2:56pm

Hi, I am using Threejs to stream stereoscopic video to Oculus Rift. I put videos on a sphere geometry. When two eyes are separated, I am able to see sphere as 3D object. I would like to put both left and right cameras at the same position. How can I do that?

I am using the example here. In this example they used THREE.VREffect. But it shows only left eye for me.

Mugen87 · May 17, 2018, 4:29pm

VREffect is actually deprecated. WebVR support is a built-in feature since a while. Can you try it with the code of the latest version?

github.com

mrdoob/three.js/blob/master/examples/webvr_video.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webvr - video</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
		<!-- Origin Trial Token, feature = WebVR (For Chrome M62+), origin = https://threejs.org, expires = 2018-05-12 -->
		<meta http-equiv="origin-trial" data-feature="WebVR (For Chrome M62+)" data-expires="2018-05-12" content="AkM+gi6Fb7IUBwFLs18hn/x6dusbsVRYG9KBTWUUjvmT0m0wGkxRPy63Aj/i+Ti4d6qMEMnRcsR7MVV5Wuvp/AIAAABQeyJvcmlnaW4iOiJodHRwczovL3RocmVlanMub3JnOjQ0MyIsImZlYXR1cmUiOiJXZWJWUjEuMU02MiIsImV4cGlyeSI6MTUyNjExODIwMH0=">
		<style>
			body {
				font-family: Monospace;
				background-color: #f0f0f0;
				margin: 0px;
				overflow: hidden;
			}
			#info {
				position: absolute;
				top: 10px;
				width: 100%;
				color: #fff;

This file has been truncated. show original

Triuman · May 18, 2018, 10:05am

I tried the sample. It just create a huge sphere to remove stereo effect but it is still seen. There must be an eye separation setting somewhere, right?

Mugen87 · May 18, 2018, 10:31am

There must be an eye separation setting somewhere, right?

No. The projection and view matrices for the left and right eye are provided by WebVR and the related eye separation is not changeable via three.js.

github.com

mrdoob/three.js/blob/f184feaf53f5a99899e602085e6f86d431b887de/src/renderers/webvr/WebVRManager.js#L163-L164


      
          		cameraL.matrixWorldInverse.fromArray( frameData.leftViewMatrix );
          		cameraR.matrixWorldInverse.fromArray( frameData.rightViewMatrix );

github.com

mrdoob/three.js/blob/f184feaf53f5a99899e602085e6f86d431b887de/src/renderers/webvr/WebVRManager.js#L189-L190


      
          		cameraL.projectionMatrix.fromArray( frameData.leftProjectionMatrix );
          		cameraR.projectionMatrix.fromArray( frameData.rightProjectionMatrix );

Mugen87 · May 18, 2018, 10:42am

Triuman · May 18, 2018, 10:46am

Thank you. I will probably tinker WebVRManager then.

Triuman · May 19, 2018, 12:31pm

When I changed line 164 to

cameraR.matrixWorldInverse.fromArray( frameData.leftViewMatrix );

it worked.

github.com

mrdoob/three.js/blob/f184feaf53f5a99899e602085e6f86d431b887de/src/renderers/webvr/WebVRManager.js#L163-L164


		cameraL.matrixWorldInverse.fromArray( frameData.leftViewMatrix );
		cameraR.matrixWorldInverse.fromArray( frameData.rightViewMatrix );

Topic		Replies	Views
WebVR - update scene independently for each eye Questions webvr	3	577	December 14, 2018
WebVR Stereo Camera Not Working Questions webvr	0	880	October 5, 2018
Can I use stereoCamera in an immersive-ar scene? Questions stereoeffect	3	698	April 28, 2023
WebXR with Three.js: basic functionality is missing Questions webxr	4	734	April 22, 2021
Show different things to the eyes at the same time in VR Questions webxr	1	626	October 18, 2020

Change eye separation width in WebVR

Related topics