How to modify individually the frames rendered in left/right eyes in VR

Questions
,
1

Hello,

My goal is to add an horizontal mask to my scene rendered in VR (two black lines on the left and right sides of the scene in order to reduce the field of view). I achieved doing that by using a custom shader material overlaying the scene. You can see the result in the screenshot below in non-VR mode.

screenshot_example
screenshot_example1194×670 39.2 KB

Now, the problem is that the VR mode renders the scene two times for each eye for the stereoscopic effect. It means that there is a black area in the middle of my scene while using a HMD (it is like having a weird black area where you would expect to have your nose).

How could I possibly overcome this problem ? Is it possible to control individually the two frames rendered for each eye and add the left mask only on the left frame and the right mask only on the right frame ?

Should I tackle this problem differently ? My goal is basically to reduce the field of view in VR.

2

Does this do what you need (no custom shaders used, tested with Meta Quest 2, the black mask is a mesh called zorroMask):

https://boytchev.github.io/CourseVAX/LecturesBG/13/E1304-Tunnel-FOV.html

image

Edit: the above example is to be used with a VR headset only (like Meta Quest 2). In case you use a smartphone and simple VR glasses, then there is another option – just make the canvas horizontally shorter, but still centered.

2 Likes
3

@PavelBoytchev Hi, thank you very much for your answer and sorry for being so late in my reply (I’ve had some unexpected problems).

It looks great and I guess that this is doing exactly the effect that I want.

However, in order to be sure, I would like to try different masks (for instance reduce the FoV only horizontally and with different values). Would it be possible to have the source code and/or some explanations about how you achieved this result please ?

For instance, assuming the Meta Quest 2 horizontal FoV is 100 deg, is it possible to simulate a 70 deg (or any arbitrary chosen value) by adding the so called Zorro mask with specific values ?

4

The link to the live demo … is also a link to the source code.

Lines 31-37 construct the mask. It is just some black mesh attached to the camera, so when the camera is rotated, the mask is always at the same position (in respect to the camera). You can replace the mask with your own shapes, horizontal, vertical, circular, whatever shape you want.

// create a black mask just in front of the camera (i.e. the user's eyes)
var zorroMask = new THREE.Mesh( 
		new THREE.RingGeometry( 3, 30, 4 ).rotateZ(Math.PI/4),
		new THREE.MeshBasicMaterial( {color: 'black'} )
	);
zorroMask.position.set( 0, 0, -4 );
camera.add( zorroMask );
1 Like