mrdoob · danrossi · Apr 30, 2025 · Apr 30, 2025 · Apr 30, 2025 · May 1, 2025
diff --git a/examples/files.json b/examples/files.json
@@ -461,6 +461,7 @@
 		"webgpu_volume_perlin",
 		"webgpu_water",
 		"webgpu_xr_cubes",
+		"webgpu_xr_media_layer",
 		"webgpu_xr_native_layers"
 	],
 	"webaudio": [

diff --git a/examples/screenshots/webgpu_xr_media_layer.jpg b/examples/screenshots/webgpu_xr_media_layer.jpg
diff --git a/examples/webgpu_xr_media_layer.html b/examples/webgpu_xr_media_layer.html
@@ -0,0 +1,185 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js vr - 360 stereo video</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+		<link type="text/css" rel="stylesheet" href="main.css">
+	</head>
+	<body>
+		<div id="container"></div>
+
+		<div id="info">
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> vr - 360 stereo video native media layers<br />
+			stereoscopic panoramic render by <a href="http://pedrofe.com/rendering-for-oculus-rift-with-arnold/" target="_blank" rel="noopener">pedrofe</a>. scene from <a href="http://www.meryproject.com/" target="_blank" rel="noopener">mery project</a>.
+		</div>
+
+		<video id="video" muted loop crossOrigin="anonymous" playsinline style="display:none">
+			<source src="textures/MaryOculus.mp4">
+		</video>
+
+		<script type="importmap">
+			{
+				"imports": {
+					"three": "../build/three.webgpu.js",
+					"three/webgpu": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
+				}
+			}
+		</script>
+
+		<script type="module">
+
+
+
+			import * as THREE from 'three';
+			import { XRButton } from 'three/addons/webxr/XRButton.js';
+
+			let camera, scene, renderer;
+
+			init();
+
+			function init() {
+
+
+				const container = document.getElementById( 'container' );
+				container.addEventListener( 'click', function () {
+
+					video.play();
+
+				} );
+
+				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 2000 );
+				camera.layers.enable( 1 ); // render left view when no stereo available
+
+				// video
+
+				const video = document.getElementById( 'video' );
+				video.play();
+
+				const texture = new THREE.VideoTexture( video );
+				texture.colorSpace = THREE.SRGBColorSpace;
+
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0x101010 );
+
+				// 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;
+
+				}
+
+				const material2 = new THREE.MeshBasicMaterial( { map: texture } );
+
+				const mesh2 = new THREE.Mesh( geometry2, material2 );
+				mesh2.rotation.y = - Math.PI / 2;
+				mesh2.layers.set( 2 ); // display in right eye only
+				scene.add( mesh2 );
+
+
+				renderer = new THREE.WebGPURenderer( { antialias: true, forceWebGL: true, multiview: true } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
+				renderer.xr.enabled = true;
+				renderer.xr.setReferenceSpaceType( 'local' );
+
+				//quest specific
+				//renderer.xr.setFramebufferScaleFactor( 1.5 );
+				//renderer.xr.setFoveation(1);
+
+				renderer.xr.createMediaLayer(video, 'stereo-left-right', { x: 0, y: .28, z: 0, w: .96 });
+
+				renderer.xr.addEventListener("sessionstart", async () => {
+					const session = renderer.xr.getSession();
+
+					if (renderer.xr._supportsLayers) {
+						mesh1.layers.disableAll();
+						mesh2.layers.disableAll();
+					}
+
+					if (session.supportedFrameRates) {
+						console.log("supported framerates ", session.supportedFrameRates);
+						session.addEventListener('frameratechange', (event) => {
+							console.log("XRFrame rate is now " + session.frameRate)
+						});
+
+						session.updateTargetFrameRate(session.supportedFrameRates[session.supportedFrameRates.length - 1]).then((() => {
+
+						})).catch(console.warn)
+					}
+
+
+
+
+				});
+
+				renderer.xr.addEventListener("sessionend", async () => {
+					mesh1.layers.enableAll();
+					mesh2.layers.enableAll();
+				});
+
+				renderer.setClearColor(0x000, 1);
+				texture.anisotropy = renderer.backend.capabilities.getMaxAnisotropy();
+
+				container.appendChild( renderer.domElement );
+
+				document.body.appendChild( XRButton.createButton( renderer ) );
+
+				//
+
+				window.addEventListener( 'resize', onWindowResize );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+			function animate() {
+
+				renderer.render( scene, camera );
+
+			}
+
+		</script>
+	</body>
+</html>
diff --git a/src/renderers/common/XRManager.js b/src/renderers/common/XRManager.js
@@ -375,6 +375,22 @@ class XRManager extends EventDispatcher {
 		 */
 		this._useMultiview = false;
 
+		/**
+		 * Stores params and video elements for equirect layers.
+		 *
+		 * @private
+		 * @type {Array<Object>}
+		 */
+		this._mediaLayers = [];
+
+		/**
+		 * Stores the created equrect layers for updating render state.
+		 *
+		 * @private
+		 * @type {Array<XREquirectLayer>}
+		 */
+		this._createdMediaLayers = [];
+
 	}
 
 	/**
@@ -596,6 +612,40 @@ class XRManager extends EventDispatcher {
 
 	}
 
+	/**
+	 * Sets up params for an equirect native video layer.
+	 *
+	 * @param {HTMLVideoElement} video The video element.
+	 * @param {('default'|'mono'|'stereo'|'stereo-left-right'|'stereo-top-bottom')} [layout='mono'] The layout to use either mono/stereo-left-right/stereo-top-bottom.
+	 * @param {Object} [transform={}] A transform param for the layer.
+	 * @param {boolean} [is180=false] If it's a 180 video.
+	 * @param {Object} [params={}] Extra params for the layer to add but not needed.
+	 */
+	createMediaLayer( video, layout = 'mono', transform = {}, is180 = false, params = {} ) {
+
+		if ( this._useLayers ) {
+
+			const angleFactor = is180 ? 1 : 2;
+
+			this._mediaLayers.push( {
+
+				video: video,
+				params: {
+					layout: layout,
+					centralHorizontalAngle: Math.PI * angleFactor,
+					transform: new XRRigidTransform(
+						{},
+						transform
+					),
+					...params
+				}
+
+			} );
+
+		}
+
+	}
+
 	createQuadLayer( width, height, translation, quaternion, pixelwidth, pixelheight, rendercall, attributes = [] ) {
 
 		const geometry = new PlaneGeometry( width, height );
@@ -657,7 +707,7 @@ class XRManager extends EventDispatcher {
 
 			const xrlayers = this._session.renderState.layers;
 			xrlayers.unshift( layer.xrlayer );
-			this._session.updateRenderState( { layers: xrlayers } );
+			this._session.updateRenderState( { layers: [ ...this._createdMediaLayers, ...xrlayers ] } );
 
 		} else {
 
@@ -731,7 +781,7 @@ class XRManager extends EventDispatcher {
 
 			const xrlayers = this._session.renderState.layers;
 			xrlayers.unshift( layer.xrlayer );
-			this._session.updateRenderState( { layers: xrlayers } );
+			this._session.updateRenderState( { layers: [ ...this._createdMediaLayers, ...xrlayers ] } );
 
 		} else {
 
@@ -918,9 +968,31 @@ class XRManager extends EventDispatcher {
 
 					}
 
+					//Creates the equirect media layers on session creation
+					if ( this._mediaLayers.length ) {
+
+						const mediaBinding = new XRMediaBinding( session );
+
+						this._createdMediaLayers = this._mediaLayers.map( layer => {
+
+							return mediaBinding.createEquirectLayer(
+								layer.video,
+
+								{
+									space: this._referenceSpace,
+									...layer.params
+								}
+
+							);
+
+						} );
+
+					}
+
+
 				}
 
-				session.updateRenderState( { layers: layersArray } );
+				session.updateRenderState( { layers: [ ...this._createdMediaLayers, ...layersArray ] } );
 
 			} else {