Both left and right layers of stereo object or texture are rendered for each eye (left and right) beginning with threejs > r169 #31434
Description
Description
To have separate objects or textures rendered for each eye of a display capable of stereo rendering (such as a WebXR capable headset like Meta Quest or the Meta WebXR-Immersive-Emulator for desktop Chrome), the object or textures should be assigned to layer 1 for left eye and layer 2 for right eye and the layers enabled. The left eye's rendered view should only see objects or textures assigned to layers 0 and 1, and the right eye's rendered view should only see objects or textures assigned to layers 0 and 2.
Beginning with threejs version r170, each eye's rendered view is getting the default (0 layer) and both the left and right (1 and 2) layers rendered to them, they should just see the layer assigned to them (0 and 1, 0 and 2 respectively).
With threejs versions r169 and older, each eye's rendered view is correct with each eye getting a separate view allowing for the creation of stereo objects or textures (like a left and right stereogram photo texture).
Reproduction steps
- Create a scene and create a green sphere object assigned to layer 1 for the left eye and a red cube object assigned to layer 2 for right eye view, enabling both layers.
- depending on which version of threejs is imported to set up the scene, changing between r169 and r170, the layers will be either visible only to each eye (r169) or will be both rendered to each eye (r170)
Code
// Define layers for stereoscopic rendering
const LEFT_EYE_LAYER = 1;
const RIGHT_EYE_LAYER = 2;
const DEFAULT_LAYER = 0; // Not explicitly used for objects here, but good to define
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 1.6, 3); // Initial camera position (e.g., eye level)
// Add layers to the main camera so it sees objects on layers 0, 1, and 2
// This is important for non-XR view and for the XR camera setup to inherit.
camera.layers.enable(LEFT_EYE_LAYER);
camera.layers.enable(RIGHT_EYE_LAYER);
// Create the green sphere for LEFT eye view
const sphereGeometry = new THREE.SphereGeometry(0.22, 32, 32); // Radius 0.22m
const sphereMaterial = new THREE.MeshPhongMaterial({ color: 0x00ff00 }); // Green color
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
// Position the sphere: 1.5 meters above the floor and 0.5 meters in front of the camera's initial view
sphere.position.set(0, 1.5, -0.5);
scene.add(sphere);
sphere.layers.set(LEFT_EYE_LAYER); // Assign to left eye layer
// Create a red cube geometry for the RIGHT EYE
const cubeGeometry = new THREE.BoxGeometry(0.4, 0.4, 0.4); // width, height, depth
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 }); // Red color
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// Position the cube at the same location as the sphere
cube.position.set(0, 1.5, -0.5);
cube.layers.set(RIGHT_EYE_LAYER); // Assign to right eye layer
scene.add(cube);Live example
DEBUG Codepen Views
*codepen-debug three@169 - green sphere to left eye and red cube to right eye - proper stereo view rendered
*codepen-debug three@170 - green sphere and red cube rendered both to each eye - NO proper stereo view rendered
Regular Codepen Views
*codepen three@169 - green sphere to left eye and red cube to right eye - proper stereo view rendered
*codepen three@170 - green sphere and red cube rendered both to each eye - NO proper stereo view rendered
Screenshots
Stereo View Rendered Correctly, separate layer to each eye with three@r169 (green sphere to left, red cube to right)
At three@r170, each eye is getting both the left and right layers rendered to them, NO Stereo View
Version
r170
Device
No response
Browser
No response
OS
No response