Skip to content

Commit bc82825

Browse files
committed
Add 180 demo source
1 parent 4f406ec commit bc82825

File tree

1 file changed

+30
-11
lines changed

1 file changed

+30
-11
lines changed

examples/webgpu_xr_media_layer.html

Lines changed: 30 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@
1313
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> vr - 360 stereo/mono video native media layers<br />
1414
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 />
1515
Choose Layout: <select id="layout-select">
16-
<option data-layout="stereo-left-right">Stereo</option>
16+
<option data-layout="stereo-left-right-360">Stereo 360</option>
17+
<option data-layout="stereo-top-bottom-180">Stereo 180</option>
1718
<option data-layout="mono">Mono</option>
1819
</select>
1920
</div>
@@ -44,18 +45,29 @@
4445
let camera, scene, renderer, controls;
4546

4647
const sources = {
47-
"stereo-left-right": {
48+
"stereo-left-right-360": {
4849
"src": "textures/MaryOculus.mp4",
4950
"transform": { x: 0, y: .28, z: 0, w: .96 },
50-
"targetXPos": 0
51+
"targetXPos": 0,
52+
"layout": "stereo-left-right"
53+
},
54+
"stereo-top-bottom-180": {
55+
"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",
56+
"transform": { x: 0, y: .28, z: 0, w: .96 },
57+
"targetXPos": 0,
58+
"layout": "stereo-top-bottom",
59+
"is180": true
5160
},
5261
"mono": {
5362
"src": "textures/pano.mp4",
5463
"transform": {},
55-
"targetXPos": -(Math.PI / 2)
64+
"targetXPos": -(Math.PI / 2),
65+
"layout": "mono"
5666
}
5767
};
5868

69+
70+
5971
init();
6072

6173
function init() {
@@ -65,18 +77,25 @@
6577
context = (window.parent || window),
6678
currentUrl = new URL(context.location.href),
6779
urlParams = currentUrl.searchParams,
68-
selectedMediaLayout = urlParams.get('layout') || "stereo-left-right",
69-
selectedOption = [...layoutSelect.options].filter(option => option.dataset.layout === selectedMediaLayout)[0],
70-
selectedSource = sources[selectedMediaLayout].src,
71-
selectedMediaTransform = sources[selectedMediaLayout].transform,
72-
selectedTargetXPos = sources[selectedMediaLayout].targetXPos;
80+
selectedLayout = urlParams.get('layout') || "stereo-left-right-360",
81+
selectedOption = [...layoutSelect.options].filter(option => option.dataset.layout === selectedLayout)[0],
82+
selectedMediaLayout = sources[selectedLayout].layout,
83+
is180 = sources[selectedLayout].is180,
84+
selectedSource = sources[selectedLayout].src,
85+
selectedMediaTransform = sources[selectedLayout].transform,
86+
selectedTargetXPos = sources[selectedLayout].targetXPos;
87+
88+
console.log(currentUrl);
7389

7490
if (selectedOption) selectedOption.selected = true;
7591

7692
layoutSelect.addEventListener('change', () => {
7793
const layout = layoutSelect.options[layoutSelect.selectedIndex].dataset.layout;
7894
//have to hardcode a location due to how the examples work and bug with Quest starting a second XR session.
79-
const newUrl = `${currentUrl.origin}/examples/webgpu_xr_media_layer.html?layout=${layout}`;
95+
const path = currentUrl.hash ? `${currentUrl.pathname}webgpu_xr_media_layer.html` : currentUrl.pathname;
96+
97+
const newUrl = `${currentUrl.origin}${path}?layout=${layout}`;
98+
console.log(newUrl);
8099
context.location.replace(newUrl);
81100
});
82101

@@ -116,7 +135,7 @@
116135
//For 180 degrees video set the is180 param to true. This will create a half sphere geoemtry.
117136
//Full usage: renderer.xr.createMediaLayer(texture, 'stereo-left-right', { x: 0, y: .28, z: 0, w: .96 }, false, {}, 500, 60, 40);
118137
//In this example `selectedMediaLayout` defaults to `stereo-left-right` layout
119-
const mediaLayer = renderer.xr.createMediaLayer(texture, selectedMediaLayout, selectedMediaTransform);
138+
const mediaLayer = renderer.xr.createMediaLayer(texture, selectedMediaLayout, selectedMediaTransform, is180);
120139

121140
scene.add(mediaLayer);
122141

0 commit comments

Comments
 (0)