mrdoob · danrossi · Apr 30, 2025 · Apr 30, 2025 · Apr 30, 2025 · May 1, 2025
diff --git a/examples/files.json b/examples/files.json
@@ -464,6 +464,7 @@
 		"webgpu_water",
 		"webgpu_xr_rollercoaster",
 		"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,246 @@
+<!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/mono 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>.<br />
+			Choose Layout: <select id="layout-select">
+				<option data-layout="stereo-left-right-360">Stereo 360</option>
+				<option data-layout="stereo-top-bottom-180">Stereo 180</option>
+				<option data-layout="mono">Mono</option>
+			</select>
+		</div>
+
+		<video id="video" muted loop crossOrigin="anonymous" playsinline style="display:none">
+		</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 { VRButton } from 'three/addons/webxr/VRButton.js';
+			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+
+			import { XRControllerModelFactory } from 'three/addons/webxr/XRControllerModelFactory.js';
+
+			let camera, scene, renderer, controls;
+
+			const sources = {
+				"stereo-left-right-360": {
+					"src": "textures/MaryOculus.mp4",
+					"transform": { x: 0, y: .28, z: 0, w: .96 },
+					"targetXPos": 0,
+					"layout": "stereo-left-right"
+				},
+				"stereo-top-bottom-180": {
+					"src": "https://oculus-mp4.s3.amazonaws.com/immersive+video+8K+for+Oculus+Browser/everestvr_6.2k_30s_180_TB_h264_crf27_CREDIT_JON_GRIFFITH-injected.mp4",
+					"transform": {  },
+					"targetXPos": 0,
+					"layout": "stereo-top-bottom",
+					"is180": true 
+				},
+				"mono": {
+					"src": "textures/pano.mp4",
+					"transform": {},
+					"targetXPos": -(Math.PI / 2),
+					"layout": "mono"
+				}
+			};
+
+
+
+			init();
+
+			function init() {
+
+				//demo code to select media layout from a select menu or from the `layout` query
+				const layoutSelect = document.getElementById('layout-select'),
+				context = (window.parent || window),
+				currentUrl = new URL(context.location.href),
+				urlParams = currentUrl.searchParams,
+				selectedLayout = urlParams.get('layout') || "stereo-left-right-360",
+				selectedOption = [...layoutSelect.options].filter(option => option.dataset.layout === selectedLayout)[0],
+				selectedMediaLayout = sources[selectedLayout].layout,
+				is180 = sources[selectedLayout].is180,
+				selectedSource = sources[selectedLayout].src,
+				selectedMediaTransform = sources[selectedLayout].transform,
+				selectedTargetXPos = sources[selectedLayout].targetXPos;
+
+				if (selectedOption) selectedOption.selected = true;				
+
+				layoutSelect.addEventListener('change', () => {
+					const layout = layoutSelect.options[layoutSelect.selectedIndex].dataset.layout;
+					//have to hardcode a location due to how the examples work and bug with Quest starting a second XR session.
+					const path = currentUrl.hash ? `${currentUrl.pathname}webgpu_xr_media_layer.html` : currentUrl.pathname;
+
+					const newUrl = `${currentUrl.origin}${path}?layout=${layout}`;
+					context.location.replace(newUrl);
+				});
+
+				const container = document.getElementById( 'container' );
+				container.addEventListener( 'click', function () {
+
+					video.play();
+
+				} );
+
+				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 2000 );
+				camera.layers.enable( 1 );
+				camera.rotation.reorder('YXZ');
+
+				const video = document.getElementById( 'video' );
+				video.src = selectedSource;
+				video.play();
+
+				const texture = new THREE.VideoTexture( video );
+				texture.colorSpace = THREE.SRGBColorSpace;
+
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0x505050 );
+
+				renderer = new THREE.WebGPURenderer( { antialias: true, forceWebGL: true, multiview: true } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setClearColor(0x000, 1);
+				renderer.setAnimationLoop( animate );
+				renderer.xr.enabled = true;
+				renderer.xr.setReferenceSpaceType( 'local' );
+
+				//create a native media layer and projection layer / 2D mono/stereo mesh in a group.
+				//media layer position transformation can be applied in a quaternion transformation object.
+				//extra params for the createEquirectLayer method can be applied to the createMediaLayer method.
+				//SphereGeometry is created internally. To specify radius, width and height segements, they can be configured on the createMediaLayer method.
+				//For 180 degrees video set the is180 param to true. This will create a half sphere geoemtry.
+				//Full usage: renderer.xr.createMediaLayer(texture, 'stereo-left-right', { x: 0, y: .28, z: 0, w: .96 }, false, {}, 500, 60, 40);
+				//In this example `selectedMediaLayout` defaults to `stereo-left-right` layout
+				const mediaLayer = renderer.xr.createMediaLayer(texture, selectedMediaLayout, selectedMediaTransform, is180);
+
+				scene.add(mediaLayer);
+
+				scene.add( new THREE.HemisphereLight( 0xa5a5a5, 0x898989, 3 ) );
+
+				const light = new THREE.DirectionalLight( 0xffffff, 3 );
+				light.position.set( 1, 1, 1 ).normalize();
+				scene.add( light );
+
+				controls = new OrbitControls( camera, renderer.domElement );
+				//positions is needed to get orbit controls working
+				controls.target.x = selectedTargetXPos;
+				controls.target.z = -0.01;
+				controls.enableDamping = true;
+				controls.dampingFactor = 0.05;
+
+				controls.update();
+
+				texture.anisotropy = renderer.backend.capabilities.getMaxAnisotropy();
+
+				container.appendChild( renderer.domElement );
+
+				document.body.appendChild( VRButton.createButton( renderer ) );
+
+				window.addEventListener( 'resize', onWindowResize );
+
+				const controller1 = renderer.xr.getController( 0 );
+
+				controller1.addEventListener( 'connected', function ( event ) {
+
+					this.add( buildController( event.data ) );
+
+				} );
+				controller1.addEventListener( 'disconnected', function () {
+
+					this.remove( this.children[ 0 ] );
+
+				} );
+				scene.add( controller1 );
+
+				const controller2 = renderer.xr.getController( 1 );
+
+				controller2.addEventListener( 'connected', function ( event ) {
+
+					this.add( buildController( event.data ) );
+
+				} );
+				controller2.addEventListener( 'disconnected', function () {
+
+					this.remove( this.children[ 0 ] );
+
+				} );
+				scene.add( controller2 );
+
+
+				const controllerModelFactory = new XRControllerModelFactory();
+
+				const controllerGrip1 = renderer.xr.getControllerGrip( 0 );
+				controllerGrip1.add( controllerModelFactory.createControllerModel( controllerGrip1 ) );
+				scene.add( controllerGrip1 );
+
+				const controllerGrip2 = renderer.xr.getControllerGrip( 1 );
+				controllerGrip2.add( controllerModelFactory.createControllerModel( controllerGrip2 ) );
+				scene.add( controllerGrip2 );
+
+			}
+
+			function buildController( data ) {
+
+				let geometry, material;
+
+				switch ( data.targetRayMode ) {
+
+					case 'tracked-pointer':
+
+						geometry = new THREE.BufferGeometry();
+						geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( [ 0, 0, 0, 0, 0, - 1 ], 3 ) );
+						geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( [ 0.5, 0.5, 0.5, 0, 0, 0 ], 3 ) );
+
+						material = new THREE.LineBasicMaterial( { vertexColors: true, blending: THREE.AdditiveBlending } );
+
+						return new THREE.Line( geometry, material );
+
+					case 'gaze':
+
+						geometry = new THREE.RingGeometry( 0.02, 0.04, 32 ).translate( 0, 0, - 1 );
+						material = new THREE.MeshBasicMaterial( { opacity: 0.5, transparent: true } );
+						return new THREE.Mesh( geometry, material );
+
+					}
+
+				}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+			function animate() {
+				controls.update();
+				renderer.render( scene, camera );
+
+			}
+
+		</script>
+	</body>
+</html>