Displaying "over/under" stereo pairs in XR

Questions
, , , ,
1

I am trying to display stereo pairs in XR mode and follow this canonical example with a nice girl.

Everything is fine when pairs are in “side-by-side” format, but unfortunately I have them only in “over/under” format and can’t change the source. Looking at example code I see that all magic is in remapping UVs the following way, but can’t figure out how to modify this part for “over/under” case:

// Left
const geometry1 = new THREE.SphereGeometry( 500, 60, 40 );
// Invert the geometry on the x-axis so that all of the faces point inward
geometry1.scale( - 1, 1, 1 );

const uvs1 = geometry1.attributes.uv.array;
for ( let i = 0; i < uvs1.length; i += 2 ) {
  uvs1[ i ] *= 0.5;
}

const material1 = new THREE.MeshBasicMaterial( { map: texture } );

const mesh1 = new THREE.Mesh( geometry1, material1 );
mesh1.rotation.y = - Math.PI / 2;
mesh1.layers.set( 1 ); // Display in left eye only
scene.add( mesh1 );

// Right
const geometry2 = new THREE.SphereGeometry( 500, 60, 40 );
geometry2.scale( - 1, 1, 1 );

const uvs2 = geometry2.attributes.uv.array;
for ( let i = 0; i < uvs2.length; i += 2 ) {
  uvs2[ i ] *= 0.5;
  uvs2[ i ] += 0.5;
}

Could some experts help me to understand how to solve this task ?

2 
     uvs2[ i ] *= 0.5;
     uvs2[ i ] += 0.5;

is taking the UV from full screen.. to half screen .. then offsetting it by half the screen.

For top/bottom it may be something like:

for ( let i = 0; i < uvs1.length; i += 2 ) {   //Top half uvs
    uvs1[ i+1 ] *= 0.5;
}

for ( let i = 0; i < uvs2.length; i += 2 ) {
    uvs2[ i+1 ] *= .5;   // Map UVs to bottom half
    uvs2[ i+1 ] += .5; 
}
1 Like
3

Thanks a lot - you are the wizard !
It was the fastest assistance in my life :slight_smile:

1 Like
4

we aim to please! :smiley:

1 Like