feat: add xrsessioninit options for XRManager

Author: WoodNeck

src/PanoImageRenderer/PanoImageRenderer.js

@@ -687,7 +687,7 @@ class PanoImageRenderer extends Component {
 	/**
 	 * @return Promise
 	 */
-	enterVR() {
+	enterVR(options) {
 		const vr = this._vr;
 
 		if (!WEBXR_SUPPORTED && !navigator.getVRDisplays) {
@@ -697,7 +697,7 @@ class PanoImageRenderer extends Component {
 			return Promise.resolve("VR already enabled.");
 		}
 
-		return this._requestPresent();
+		return this._requestPresent(options);
 	}
 
 	exitVR = () => {
@@ -727,13 +727,13 @@ class PanoImageRenderer extends Component {
 		animator.start();
 	}
 
-	_requestPresent() {
+	_requestPresent(options) {
 		const gl = this.context;
 		const canvas = this.canvas;
 		const animator = this._animator;
 
 		this._vr = WEBXR_SUPPORTED ?
-			new XRManager() :
+			new XRManager(options) :
 			new VRManager();
 
 		const vr = this._vr;

src/PanoImageRenderer/vr/XRManager.js

@@ -1,13 +1,15 @@
 import {mat4, glMatrix} from "gl-matrix";
 import {IS_SAFARI_ON_DESKTOP} from "../../utils/browser";
+import {merge} from "../../utils/utils";
 
 const XR_REFERENCE_SPACE = "local";
 
 class XRManager {
 	get context() { return this._xrSession; }
 
-	constructor() {
+	constructor(options) {
 		this._clear();
+		this._options = options;
 	}
 
 	destroy = () => {
@@ -87,9 +89,11 @@ class XRManager {
 	}
 
 	requestPresent(canvas, gl) {
-		return navigator.xr.requestSession("immersive-vr", {
+		const options = merge({
 			requiredFeatures: [XR_REFERENCE_SPACE],
-		}).then(session => {
+		}, this._options);
+
+		return navigator.xr.requestSession("immersive-vr", options).then(session => {
 			const xrLayer = new window.XRWebGLLayer(session, gl);
 
 			session.updateRenderState({baseLayer: xrLayer});
@@ -118,6 +122,7 @@ class XRManager {
 		this._xrRefSpace = null;
 		this._presenting = false;
 		this._yawOffset = 0;
+		this._options = {};
 	}
 }
 

src/PanoViewer/PanoViewer.js

@@ -405,16 +405,17 @@ class PanoViewer extends Component {
 	 * 이 메소드는 사용자 인터렉션에 의해서 호출되어야 합니다. 예로, 버튼의 onclick 콜백과 같은 콘텍스트에서 호출되어야 합니다.
 	 * 디바이스 센서 활성화에 실패시 혹은 아직 이미지/비디오가 로딩중인 경우("ready"이벤트가 아직 트리거되지 않은 경우)에는 Promise가 reject됩니다.
 	 * @method eg.view360.PanoViewer#enterVR
+	 * @param {object} options Additional options for WebXR session, see {@link https://developer.mozilla.org/en-US/docs/Web/API/XRSessionInit XRSessionInit}.<ko>WebXR용 추가 옵션, {@link https://developer.mozilla.org/en-US/docs/Web/API/XRSessionInit XRSessionInit}을 참조해주세요.</ko>
 	 * @return {Promise<string>} Promise containing either a string of resolved reason or an Error instance of rejected reason.<ko>Promise가 resolve된 이유(string) 혹은 reject된 이유(Error)</ko>
 	 */
-	enterVR() {
+	enterVR(options = {}) {
 		if (!this._isReady) {
 			return Promise.reject(new Error("PanoViewer is not ready to show image."));
 		}
 
 		return new Promise((resolve, reject) => {
 			this.enableSensor()
-				.then(() => this._photoSphereRenderer.enterVR())
+				.then(() => this._photoSphereRenderer.enterVR(options))
 				.then(res => resolve(res))
 				.catch(e => reject(e));
 		});

src/utils/utils.js

@@ -0,0 +1,14 @@
+export function merge(target, ...srcs) {
+	srcs.forEach(source => {
+	  Object.keys(source).forEach(key => {
+		const value = source[key];
+		if (Array.isArray(target[key]) && Array.isArray(value)) {
+			target[key] = [...target[key], ...value];
+		} else {
+			target[key] = value;
+		}
+	  });
+	});
+
+	return target;
+}