|
13 | 13 | <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> vr - 360 stereo/mono video native media layers<br />
|
14 | 14 | 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 />
|
15 | 15 | 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> |
17 | 18 | <option data-layout="mono">Mono</option>
|
18 | 19 | </select>
|
19 | 20 | </div>
|
|
44 | 45 | let camera, scene, renderer, controls;
|
45 | 46 |
|
46 | 47 | const sources = {
|
47 |
| - "stereo-left-right": { |
| 48 | + "stereo-left-right-360": { |
48 | 49 | "src": "textures/MaryOculus.mp4",
|
49 | 50 | "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 |
51 | 60 | },
|
52 | 61 | "mono": {
|
53 | 62 | "src": "textures/pano.mp4",
|
54 | 63 | "transform": {},
|
55 |
| - "targetXPos": -(Math.PI / 2) |
| 64 | + "targetXPos": -(Math.PI / 2), |
| 65 | + "layout": "mono" |
56 | 66 | }
|
57 | 67 | };
|
58 | 68 |
|
| 69 | + |
| 70 | + |
59 | 71 | init();
|
60 | 72 |
|
61 | 73 | function init() {
|
|
65 | 77 | context = (window.parent || window),
|
66 | 78 | currentUrl = new URL(context.location.href),
|
67 | 79 | 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); |
73 | 89 |
|
74 | 90 | if (selectedOption) selectedOption.selected = true;
|
75 | 91 |
|
76 | 92 | layoutSelect.addEventListener('change', () => {
|
77 | 93 | const layout = layoutSelect.options[layoutSelect.selectedIndex].dataset.layout;
|
78 | 94 | //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); |
80 | 99 | context.location.replace(newUrl);
|
81 | 100 | });
|
82 | 101 |
|
|
116 | 135 | //For 180 degrees video set the is180 param to true. This will create a half sphere geoemtry.
|
117 | 136 | //Full usage: renderer.xr.createMediaLayer(texture, 'stereo-left-right', { x: 0, y: .28, z: 0, w: .96 }, false, {}, 500, 60, 40);
|
118 | 137 | //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); |
120 | 139 |
|
121 | 140 | scene.add(mediaLayer);
|
122 | 141 |
|
|
0 commit comments