Native media Equirect layers creation #31033
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,167 @@ | ||
| <!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; | ||
|
|
||
| } | ||
|
|
||
| // 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; | ||
|
|
||
| } | ||
|
|
||
| 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' ); | ||
|
|
||
| const mediaLayer = renderer.xr.createMediaLayer(texture, 'stereo-left-right', { x: 0, y: .28, z: 0, w: .96 }); | ||
| //modify geometries for left and right | ||
| mediaLayer.children[0].geometry = geometry1; | ||
| mediaLayer.children[1].geometry = geometry2; | ||
|
|
||
| scene.add(mediaLayer); | ||
|
|
||
| renderer.xr.addEventListener("sessionstart", async () => { | ||
|
There was a problem hiding this comment. Can this also move to XRManager? There was a problem hiding this comment. Do you mean adding the group to the scene or managing the 2D layers internally ? Adding to the scene is external like the other demo. I may need to look at a render option for immersive-vr as it's a black render. There was a problem hiding this comment. If I understood correctly place the 2D mesh toggling internally. As the group adding to the scene is external like the other layer example. Example updated. There is still an issue with immersive-vr mode and may need that render target code in the frame loop. I added the XR controllers to show the projection layer render however the model is displaying artifacts for some reason. It's ok on the dev branch. https://electroteque.org/dev/threejs/examples/webgpu_xr_media_layer.html There was a problem hiding this comment. I just worked out this isn't possible with an equirect layer. So in immersive-vr mode the native layer is being hidden by the three render. So not sure what method to use to "punch through". It's ok for immersive-ar mode. |
||
| const session = renderer.xr.getSession(); | ||
|
|
||
| if (renderer.xr._supportsLayers) { | ||
| mediaLayer.children.forEach(mesh => mesh.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 () => { | ||
| mediaLayer.children.forEach(mesh => mesh.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> | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please include the new example in files.json. Otherwise it won't appear on the homepage.