UNPKG

@egjs/view360/dist/PanoViewer/view360.panoviewer.js

Version:
220 kBJavaScriptView Raw
1/*
2Copyright (c) 2017-present NAVER Corp.
3name: @egjs/view360
4license: MIT
5author: NAVER Corp.
6repository: https://github.com/naver/egjs-view360
7version: 3.6.1
8*/
9(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('@egjs/component'), require('promise-polyfill'), require('@egjs/agent'), require('@egjs/axes'), require('gl-matrix'), require('@egjs/imready')) :
typeof define === 'function' && define.amd ? define(['@egjs/component', 'promise-polyfill', '@egjs/agent', '@egjs/axes', 'gl-matrix', '@egjs/imready'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, (global.eg = global.eg || {}, global.eg.view360 = factory(global.eg.Component, global.Promise, global.eg.agent, global.eg.Axes, global.glMatrix, global.eg.ImReady)));
13}(this, (function (Component, Promise$1, agent$1, Axes, glMatrix, ImReady) { 'use strict';
14
var VERSION = "3.6.1";
16
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
19
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
22
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
31
/* global Reflect, Promise */
var extendStatics = function (d, b) {
  extendStatics = Object.setPrototypeOf || {
    __proto__: []
  } instanceof Array && function (d, b) {
    d.__proto__ = b;
  } || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  };
41
  return extendStatics(d, b);
};
44
function __extends(d, b) {
  extendStatics(d, b);
47
  function __() {
    this.constructor = d;
  }
51
  d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign = function () {
  __assign = Object.assign || function __assign(t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];
58
      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
    }
61
    return t;
  };
64
  return __assign.apply(this, arguments);
};
function __awaiter(thisArg, _arguments, P, generator) {
  function adopt(value) {
    return value instanceof P ? value : new P(function (resolve) {
      resolve(value);
    });
  }
73
  return new (P || (P = Promise))(function (resolve, reject) {
    function fulfilled(value) {
      try {
        step(generator.next(value));
      } catch (e) {
        reject(e);
      }
    }
82
    function rejected(value) {
      try {
        step(generator["throw"](value));
      } catch (e) {
        reject(e);
      }
    }
90
    function step(result) {
      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
    }
94
    step((generator = generator.apply(thisArg, _arguments || [])).next());
  });
}
function __generator(thisArg, body) {
  var _ = {
    label: 0,
    sent: function () {
      if (t[0] & 1) throw t[1];
      return t[1];
    },
    trys: [],
    ops: []
  },
      f,
      y,
      t,
      g;
  return g = {
    next: verb(0),
    "throw": verb(1),
    "return": verb(2)
  }, typeof Symbol === "function" && (g[Symbol.iterator] = function () {
    return this;
  }), g;
119
  function verb(n) {
    return function (v) {
      return step([n, v]);
    };
  }
125
  function step(op) {
    if (f) throw new TypeError("Generator is already executing.");
128
    while (_) try {
      if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
      if (y = 0, t) op = [op[0] & 2, t.value];
132
      switch (op[0]) {
        case 0:
        case 1:
          t = op;
          break;
138
        case 4:
          _.label++;
          return {
            value: op[1],
            done: false
          };
145
        case 5:
          _.label++;
          y = op[1];
          op = [0];
          continue;
151
        case 7:
          op = _.ops.pop();
154
          _.trys.pop();
156
          continue;
158
        default:
          if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
            _ = 0;
            continue;
          }
164
          if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
            _.label = op[1];
            break;
          }
169
          if (op[0] === 6 && _.label < t[1]) {
            _.label = t[1];
            t = op;
            break;
          }
175
          if (t && _.label < t[2]) {
            _.label = t[2];
178
            _.ops.push(op);
180
            break;
          }
183
          if (t[2]) _.ops.pop();
185
          _.trys.pop();
187
          continue;
      }
190
      op = body.call(thisArg, _);
    } catch (e) {
      op = [6, e];
      y = 0;
    } finally {
      f = t = 0;
    }
198
    if (op[0] & 5) throw op[1];
    return {
      value: op[0] ? op[1] : void 0,
      done: true
    };
  }
}
function __values(o) {
  var s = typeof Symbol === "function" && Symbol.iterator,
      m = s && o[s],
      i = 0;
  if (m) return m.call(o);
  if (o && typeof o.length === "number") return {
    next: function () {
      if (o && i >= o.length) o = void 0;
      return {
        value: o && o[i++],
        done: !o
      };
    }
  };
  throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
}
function __read(o, n) {
  var m = typeof Symbol === "function" && o[Symbol.iterator];
  if (!m) return o;
  var i = m.call(o),
      r,
      ar = [],
      e;
229
  try {
    while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
  } catch (error) {
    e = {
      error: error
    };
  } finally {
    try {
      if (r && !r.done && (m = i["return"])) m.call(i);
    } finally {
      if (e) throw e.error;
    }
  }
243
  return ar;
}
function __spread() {
  for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
248
  return ar;
}
251
var merge = function (target) {
  var srcs = [];
254
  for (var _i = 1; _i < arguments.length; _i++) {
    srcs[_i - 1] = arguments[_i];
  }
258
  srcs.forEach(function (source) {
    Object.keys(source).forEach(function (key) {
      var value = source[key];
262
      if (Array.isArray(target[key]) && Array.isArray(value)) {
        target[key] = __spread(target[key], value);
      } else {
        target[key] = value;
      }
    });
  });
  return target;
};
var toImageElement = function (image) {
  var images = image instanceof Array ? image : [image];
  var parsedImages = images.map(function (img) {
    var imgEl = img;
276
    if (typeof img === "string") {
      imgEl = new Image();
      imgEl.crossOrigin = "anonymous";
      imgEl.src = img;
    }
282
    return imgEl;
  });
  return parsedImages.length === 1 ? parsedImages[0] : parsedImages;
};
var toVideoElement = function (videoCandidate) {
  if (videoCandidate instanceof HTMLVideoElement) {
    return videoCandidate;
  } else {
    // url
    var video_1 = document.createElement("video");
    video_1.setAttribute("crossorigin", "anonymous");
    video_1.setAttribute("webkit-playsinline", "");
    video_1.setAttribute("playsinline", "");
296
    if (videoCandidate instanceof Array) {
      videoCandidate.forEach(function (v) {
        return appendSourceElement(video_1, v);
      });
    } else {
      appendSourceElement(video_1, videoCandidate);
    }
304
    var sourceCount = video_1.querySelectorAll("source").length;
306
    if (sourceCount > 0) {
      if (video_1.readyState < 1) {
        video_1.load();
      }
    }
312
    return video_1;
  }
};
/**
 *
 * @param {Object | String} videoUrl Object or String containing Video Source URL<ko>비디오 URL 정보를 담고 있는 문자열이나 객체 {type, src}</ko>
 */
320
var appendSourceElement = function (video, videoUrl) {
  var videoSrc;
  var videoType;
324
  if (typeof videoUrl === "object") {
    videoSrc = videoUrl.src;
    videoType = videoUrl.type;
  } else if (typeof videoUrl === "string") {
    videoSrc = videoUrl;
  }
331
  if (!videoSrc) {
    return false;
  }
335
  var sourceElement = document.createElement("source");
  sourceElement.src = videoSrc;
338
  if (videoType) {
    sourceElement.type = videoType;
  }
342
  video.appendChild(sourceElement);
};
345
/* eslint-disable @typescript-eslint/no-implied-eval */
/* eslint-disable no-new-func, no-nested-ternary */
348
var win = typeof window !== "undefined" && window.Math === Math ? window : typeof self !== "undefined" && self.Math === Math ? self : Function("return this")();
/* eslint-enable no-new-func, no-nested-ternary */
351
var doc = win.document;
var nav = win.navigator;
var agent = agent$1();
var osName = agent.os.name;
var browserName = agent.browser.name;
var IS_IOS = osName === "ios";
var IS_SAFARI_ON_DESKTOP = osName === "mac" && browserName === "safari";
359
/* eslint-disable @typescript-eslint/naming-convention */
win.Float32Array = typeof win.Float32Array !== "undefined" ? win.Float32Array : win.Array;
var Float32Array$1 = win.Float32Array;
var getComputedStyle = win.getComputedStyle;
var userAgent = win.navigator && win.navigator.userAgent;
var SUPPORT_TOUCH = ("ontouchstart" in win);
var SUPPORT_DEVICEMOTION = ("ondevicemotion" in win);
var DeviceMotionEvent = win.DeviceMotionEvent;
var devicePixelRatio = win.devicePixelRatio;
369
var TRANSFORM = function () {
  var _a;
372
  var docStyle = (_a = doc === null || doc === void 0 ? void 0 : doc.documentElement.style) !== null && _a !== void 0 ? _a : {};
  var target = ["transform", "webkitTransform", "msTransform", "mozTransform"];
375
  for (var i = 0, len = target.length; i < len; i++) {
    if (target[i] in docStyle) {
      return target[i];
    }
  }
381
  return "";
}(); // check for will-change support
384
385
var SUPPORT_WILLCHANGE = win.CSS && win.CSS.supports && win.CSS.supports("will-change", "transform");
var WEBXR_SUPPORTED = false;
388
var checkXRSupport = function () {
  var navigator = window.navigator;
391
  if (!navigator.xr) {
    return;
  }
395
  if (navigator.xr.isSessionSupported) {
    navigator.xr.isSessionSupported("immersive-vr").then(function (res) {
      WEBXR_SUPPORTED = res;
    }).catch(function () {
      return void 0;
    });
  } else if (navigator.xr.supportsSession) {
    navigator.xr.supportsSession("immersive-vr").then(function (res) {
      WEBXR_SUPPORTED = res;
    }).catch(function () {
      return void 0;
    });
  }
};
410
/**
 * Original Code
 * https://github.com/toji/gl-matrix/blob/v2.3.2/src/gl-matrix.js
 * Math Util
 * modified by egjs
 */
417
var quatToVec3 = function (quaternion) {
  var baseV = glMatrix.vec3.fromValues(0, 0, 1);
  glMatrix.vec3.transformQuat(baseV, baseV, quaternion);
  return baseV;
};
423
var toDegree = function (a) {
  return a * 180 / Math.PI;
};
427
var util = {};
429
util.isPowerOfTwo = function (n) {
  return n && (n & n - 1) === 0;
};
433
util.extractPitchFromQuat = function (quaternion) {
  var baseV = quatToVec3(quaternion);
  return -1 * Math.atan2(baseV[1], Math.sqrt(Math.pow(baseV[0], 2) + Math.pow(baseV[2], 2)));
};
438
util.hypot = Math.hypot || function (x, y) {
  return Math.sqrt(x * x + y * y);
}; // implement reference
// the general equation of a plane : http://www.gisdeveloper.co.kr/entry/평면의-공식
// calculating angle between two vectors : http://darkpgmr.tistory.com/121
444
445
var ROTATE_CONSTANT = {
  PITCH_DELTA: 1,
  YAW_DELTA_BY_ROLL: 2,
  YAW_DELTA_BY_YAW: 3
};
ROTATE_CONSTANT[ROTATE_CONSTANT.PITCH_DELTA] = {
  targetAxis: [0, 1, 0],
  meshPoint: [0, 0, 1]
};
ROTATE_CONSTANT[ROTATE_CONSTANT.YAW_DELTA_BY_ROLL] = {
  targetAxis: [0, 1, 0],
  meshPoint: [1, 0, 0]
};
ROTATE_CONSTANT[ROTATE_CONSTANT.YAW_DELTA_BY_YAW] = {
  targetAxis: [1, 0, 0],
  meshPoint: [0, 0, 1]
};
463
var getRotationDelta = function (prevQ, curQ, rotateKind) {
  var targetAxis = glMatrix.vec3.fromValues(ROTATE_CONSTANT[rotateKind].targetAxis[0], ROTATE_CONSTANT[rotateKind].targetAxis[1], ROTATE_CONSTANT[rotateKind].targetAxis[2]);
  var meshPoint = ROTATE_CONSTANT[rotateKind].meshPoint;
  var prevQuaternion = glMatrix.quat.clone(prevQ);
  var curQuaternion = glMatrix.quat.clone(curQ);
  glMatrix.quat.normalize(prevQuaternion, prevQuaternion);
  glMatrix.quat.normalize(curQuaternion, curQuaternion);
  var prevPoint = glMatrix.vec3.fromValues(0, 0, 1);
  var curPoint = glMatrix.vec3.fromValues(0, 0, 1);
  glMatrix.vec3.transformQuat(prevPoint, prevPoint, prevQuaternion);
  glMatrix.vec3.transformQuat(curPoint, curPoint, curQuaternion);
  glMatrix.vec3.transformQuat(targetAxis, targetAxis, curQuaternion);
  var rotateDistance = glMatrix.vec3.dot(targetAxis, glMatrix.vec3.cross(glMatrix.vec3.create(), prevPoint, curPoint));
  var rotateDirection = rotateDistance > 0 ? 1 : -1; // when counter clock wise, use vec3.fromValues(0,1,0)
  // when clock wise, use vec3.fromValues(0,-1,0)
  // const meshPoint1 = vec3.fromValues(0, 0, 0);
480
  var meshPoint2 = glMatrix.vec3.fromValues(meshPoint[0], meshPoint[1], meshPoint[2]);
  var meshPoint3;
483
  if (rotateKind !== ROTATE_CONSTANT.YAW_DELTA_BY_YAW) {
    meshPoint3 = glMatrix.vec3.fromValues(0, rotateDirection, 0);
  } else {
    meshPoint3 = glMatrix.vec3.fromValues(rotateDirection, 0, 0);
  }
489
  glMatrix.vec3.transformQuat(meshPoint2, meshPoint2, curQuaternion);
  glMatrix.vec3.transformQuat(meshPoint3, meshPoint3, curQuaternion);
  var vecU = meshPoint2;
  var vecV = meshPoint3;
  var vecN = glMatrix.vec3.create();
  glMatrix.vec3.cross(vecN, vecU, vecV);
  glMatrix.vec3.normalize(vecN, vecN);
  var coefficientA = vecN[0];
  var coefficientB = vecN[1];
  var coefficientC = vecN[2]; // const coefficientD = -1 * vec3.dot(vecN, meshPoint1);
  // a point on the plane
501
  curPoint = glMatrix.vec3.fromValues(meshPoint[0], meshPoint[1], meshPoint[2]);
  glMatrix.vec3.transformQuat(curPoint, curPoint, curQuaternion); // a point should project on the plane
504
  prevPoint = glMatrix.vec3.fromValues(meshPoint[0], meshPoint[1], meshPoint[2]);
  glMatrix.vec3.transformQuat(prevPoint, prevPoint, prevQuaternion); // distance between prevPoint and the plane
507
  var distance = Math.abs(prevPoint[0] * coefficientA + prevPoint[1] * coefficientB + prevPoint[2] * coefficientC);
  var projectedPrevPoint = glMatrix.vec3.create();
  glMatrix.vec3.subtract(projectedPrevPoint, prevPoint, glMatrix.vec3.scale(glMatrix.vec3.create(), vecN, distance));
  var trigonometricRatio = (projectedPrevPoint[0] * curPoint[0] + projectedPrevPoint[1] * curPoint[1] + projectedPrevPoint[2] * curPoint[2]) / (glMatrix.vec3.length(projectedPrevPoint) * glMatrix.vec3.length(curPoint)); // defensive block
512
  if (trigonometricRatio > 1) {
    trigonometricRatio = 1;
  }
516
  var theta = Math.acos(trigonometricRatio);
  var crossVec = glMatrix.vec3.cross(glMatrix.vec3.create(), curPoint, projectedPrevPoint);
  distance = coefficientA * crossVec[0] + coefficientB * crossVec[1] + coefficientC * crossVec[2];
  var thetaDirection;
521
  if (rotateKind !== ROTATE_CONSTANT.YAW_DELTA_BY_YAW) {
    thetaDirection = distance > 0 ? 1 : -1;
  } else {
    thetaDirection = distance < 0 ? 1 : -1;
  }
527
  var deltaRadian = theta * thetaDirection * rotateDirection;
  return toDegree(deltaRadian);
};
531
var angleBetweenVec2 = function (v1, v2) {
  var det = v1[0] * v2[1] - v2[0] * v1[1];
  var theta = -Math.atan2(det, glMatrix.vec2.dot(v1, v2));
  return theta;
};
537
util.yawOffsetBetween = function (viewDir, targetDir) {
  var viewDirXZ = glMatrix.vec2.fromValues(viewDir[0], viewDir[2]);
  var targetDirXZ = glMatrix.vec2.fromValues(targetDir[0], targetDir[2]);
  glMatrix.vec2.normalize(viewDirXZ, viewDirXZ);
  glMatrix.vec2.normalize(targetDirXZ, targetDirXZ);
  var theta = -angleBetweenVec2(viewDirXZ, targetDirXZ);
  return theta;
};
546
util.sign = function (x) {
  return Math.sign ? Math.sign(x) : Number(x > 0) - Number(x < 0) || +x;
};
550
util.toDegree = toDegree;
util.getRotationDelta = getRotationDelta;
util.angleBetweenVec2 = angleBetweenVec2;
554
var toAxis = function (source, offset) {
  return offset.reduce(function (acc, v, i) {
    if (source[i]) {
      acc[source[i]] = v;
    }
560
    return acc;
  }, {});
};
564
/**
 * Returns a number value indiciating the version of Chrome being used,
 * or otherwise `null` if not on Chrome.
 *
 * Ref: https://github.com/immersive-web/cardboard-vr-display/pull/19
 */
571
/**
 * In Chrome m65, `devicemotion` events are broken but subsequently fixed
 * in 65.0.3325.148. Since many browsers use Chromium, ensure that
 * we scope this detection by branch and build numbers to provide
 * a proper fallback.
 * https://github.com/immersive-web/webvr-polyfill/issues/307
 */
579
var version = -1; // It should not be null because it will be compared with number
581
var branch = null;
var build = null;
var match = /Chrome\/([0-9]+)\.(?:[0-9]*)\.([0-9]*)\.([0-9]*)/i.exec(userAgent);
585
if (match) {
  version = parseInt(match[1], 10);
  branch = match[2];
  build = match[3];
}
591
var CHROME_VERSION = version;
var IS_CHROME_WITHOUT_DEVICE_MOTION = version === 65 && branch === "3325" && parseInt(build, 10) < 148;
var IS_ANDROID = /Android/i.test(userAgent);
var CONTROL_MODE_VR = 1;
var CONTROL_MODE_YAWPITCH = 2;
var TOUCH_DIRECTION_NONE = 1;
var TOUCH_DIRECTION_YAW = 2;
var TOUCH_DIRECTION_PITCH = 4;
var TOUCH_DIRECTION_ALL = TOUCH_DIRECTION_YAW | TOUCH_DIRECTION_PITCH;
/* Const for MovableCoord */
602
var MC_DECELERATION = 0.0014;
var MC_MAXIMUM_DURATION = 1000;
var MC_BIND_SCALE = [0.20, 0.20];
var MAX_FIELD_OF_VIEW = 110;
var PAN_SCALE = 320; // const DELTA_THRESHOLD = 0.015;
608
var YAW_RANGE_HALF = 180;
var PITCH_RANGE_HALF = 90;
var CIRCULAR_PITCH_RANGE_HALF = 180;
var GYRO_MODE = {
  NONE: "none",
  YAWPITCH: "yawPitch",
  VR: "VR"
};
617
/* eslint-disable */
var MathUtil = win.MathUtil || {};
MathUtil.degToRad = Math.PI / 180;
MathUtil.radToDeg = 180 / Math.PI; // Some minimal math functionality borrowed from THREE.Math and stripped down
// for the purposes of this library.
623
MathUtil.Vector2 = function (x, y) {
  this.x = x || 0;
  this.y = y || 0;
};
628
MathUtil.Vector2.prototype = {
  constructor: MathUtil.Vector2,
  set: function (x, y) {
    this.x = x;
    this.y = y;
    return this;
  },
  copy: function (v) {
    this.x = v.x;
    this.y = v.y;
    return this;
  },
  subVectors: function (a, b) {
    this.x = a.x - b.x;
    this.y = a.y - b.y;
    return this;
  }
};
647
MathUtil.Vector3 = function (x, y, z) {
  this.x = x || 0;
  this.y = y || 0;
  this.z = z || 0;
};
653
MathUtil.Vector3.prototype = {
  constructor: MathUtil.Vector3,
  set: function (x, y, z) {
    this.x = x;
    this.y = y;
    this.z = z;
    return this;
  },
  copy: function (v) {
    this.x = v.x;
    this.y = v.y;
    this.z = v.z;
    return this;
  },
  length: function () {
    return Math.sqrt(this.x * this.x + this.y * this.y + this.z * this.z);
  },
  normalize: function () {
    var scalar = this.length();
673
    if (scalar !== 0) {
      var invScalar = 1 / scalar;
      this.multiplyScalar(invScalar);
    } else {
      this.x = 0;
      this.y = 0;
      this.z = 0;
    }
682
    return this;
  },
  multiplyScalar: function (scalar) {
    this.x *= scalar;
    this.y *= scalar;
    this.z *= scalar;
  },
  applyQuaternion: function (q) {
    var x = this.x;
    var y = this.y;
    var z = this.z;
    var qx = q.x;
    var qy = q.y;
    var qz = q.z;
    var qw = q.w; // calculate quat * vector
698
    var ix = qw * x + qy * z - qz * y;
    var iy = qw * y + qz * x - qx * z;
    var iz = qw * z + qx * y - qy * x;
    var iw = -qx * x - qy * y - qz * z; // calculate result * inverse quat
703
    this.x = ix * qw + iw * -qx + iy * -qz - iz * -qy;
    this.y = iy * qw + iw * -qy + iz * -qx - ix * -qz;
    this.z = iz * qw + iw * -qz + ix * -qy - iy * -qx;
    return this;
  },
  dot: function (v) {
    return this.x * v.x + this.y * v.y + this.z * v.z;
  },
  crossVectors: function (a, b) {
    var ax = a.x;
    var ay = a.y;
    var az = a.z;
    var bx = b.x;
    var by = b.y;
    var bz = b.z;
    this.x = ay * bz - az * by;
    this.y = az * bx - ax * bz;
    this.z = ax * by - ay * bx;
    return this;
  }
};
725
MathUtil.Quaternion = function (x, y, z, w) {
  this.x = x || 0;
  this.y = y || 0;
  this.z = z || 0;
  this.w = w !== undefined ? w : 1;
};
732
MathUtil.Quaternion.prototype = {
  constructor: MathUtil.Quaternion,
  set: function (x, y, z, w) {
    this.x = x;
    this.y = y;
    this.z = z;
    this.w = w;
    return this;
  },
  copy: function (quaternion) {
    this.x = quaternion.x;
    this.y = quaternion.y;
    this.z = quaternion.z;
    this.w = quaternion.w;
    return this;
  },
  setFromEulerXYZ: function (x, y, z) {
    var c1 = Math.cos(x / 2);
    var c2 = Math.cos(y / 2);
    var c3 = Math.cos(z / 2);
    var s1 = Math.sin(x / 2);
    var s2 = Math.sin(y / 2);
    var s3 = Math.sin(z / 2);
    this.x = s1 * c2 * c3 + c1 * s2 * s3;
    this.y = c1 * s2 * c3 - s1 * c2 * s3;
    this.z = c1 * c2 * s3 + s1 * s2 * c3;
    this.w = c1 * c2 * c3 - s1 * s2 * s3;
    return this;
  },
  setFromEulerYXZ: function (x, y, z) {
    var c1 = Math.cos(x / 2);
    var c2 = Math.cos(y / 2);
    var c3 = Math.cos(z / 2);
    var s1 = Math.sin(x / 2);
    var s2 = Math.sin(y / 2);
    var s3 = Math.sin(z / 2);
    this.x = s1 * c2 * c3 + c1 * s2 * s3;
    this.y = c1 * s2 * c3 - s1 * c2 * s3;
    this.z = c1 * c2 * s3 - s1 * s2 * c3;
    this.w = c1 * c2 * c3 + s1 * s2 * s3;
    return this;
  },
  setFromAxisAngle: function (axis, angle) {
    // http://www.euclideanspace.com/maths/geometry/rotations/conversions/angleToQuaternion/index.htm
    // assumes axis is normalized
    var halfAngle = angle / 2;
    var s = Math.sin(halfAngle);
    this.x = axis.x * s;
    this.y = axis.y * s;
    this.z = axis.z * s;
    this.w = Math.cos(halfAngle);
    return this;
  },
  multiply: function (q) {
    return this.multiplyQuaternions(this, q);
  },
  multiplyQuaternions: function (a, b) {
    // from http://www.euclideanspace.com/maths/algebra/realNormedAlgebra/quaternions/code/index.htm
    var qax = a.x;
    var qay = a.y;
    var qaz = a.z;
    var qaw = a.w;
    var qbx = b.x;
    var qby = b.y;
    var qbz = b.z;
    var qbw = b.w;
    this.x = qax * qbw + qaw * qbx + qay * qbz - qaz * qby;
    this.y = qay * qbw + qaw * qby + qaz * qbx - qax * qbz;
    this.z = qaz * qbw + qaw * qbz + qax * qby - qay * qbx;
    this.w = qaw * qbw - qax * qbx - qay * qby - qaz * qbz;
    return this;
  },
  inverse: function () {
    this.x *= -1;
    this.y *= -1;
    this.z *= -1;
    this.normalize();
    return this;
  },
  normalize: function () {
    var l = Math.sqrt(this.x * this.x + this.y * this.y + this.z * this.z + this.w * this.w);
814
    if (l === 0) {
      this.x = 0;
      this.y = 0;
      this.z = 0;
      this.w = 1;
    } else {
      l = 1 / l;
      this.x = this.x * l;
      this.y = this.y * l;
      this.z = this.z * l;
      this.w = this.w * l;
    }
827
    return this;
  },
  slerp: function (qb, t) {
    if (t === 0) return this;
    if (t === 1) return this.copy(qb);
    var x = this.x;
    var y = this.y;
    var z = this.z;
    var w = this.w; // http://www.euclideanspace.com/maths/algebra/realNormedAlgebra/quaternions/slerp/
837
    var cosHalfTheta = w * qb.w + x * qb.x + y * qb.y + z * qb.z;
839
    if (cosHalfTheta < 0) {
      this.w = -qb.w;
      this.x = -qb.x;
      this.y = -qb.y;
      this.z = -qb.z;
      cosHalfTheta = -cosHalfTheta;
    } else {
      this.copy(qb);
    }
849
    if (cosHalfTheta >= 1.0) {
      this.w = w;
      this.x = x;
      this.y = y;
      this.z = z;
      return this;
    }
857
    var halfTheta = Math.acos(cosHalfTheta);
    var sinHalfTheta = Math.sqrt(1.0 - cosHalfTheta * cosHalfTheta);
860
    if (Math.abs(sinHalfTheta) < 0.001) {
      this.w = 0.5 * (w + this.w);
      this.x = 0.5 * (x + this.x);
      this.y = 0.5 * (y + this.y);
      this.z = 0.5 * (z + this.z);
      return this;
    }
868
    var ratioA = Math.sin((1 - t) * halfTheta) / sinHalfTheta;
    var ratioB = Math.sin(t * halfTheta) / sinHalfTheta;
    this.w = w * ratioA + this.w * ratioB;
    this.x = x * ratioA + this.x * ratioB;
    this.y = y * ratioA + this.y * ratioB;
    this.z = z * ratioA + this.z * ratioB;
    return this;
  },
  setFromUnitVectors: function () {
    // http://lolengine.net/blog/2014/02/24/quaternion-from-two-vectors-final
    // assumes direction vectors vFrom and vTo are normalized
    var v1;
    var r;
    var EPS = 0.000001;
    return function (vFrom, vTo) {
      if (v1 === undefined) v1 = new MathUtil.Vector3();
      r = vFrom.dot(vTo) + 1;
886
      if (r < EPS) {
        r = 0;
889
        if (Math.abs(vFrom.x) > Math.abs(vFrom.z)) {
          v1.set(-vFrom.y, vFrom.x, 0);
        } else {
          v1.set(0, -vFrom.z, vFrom.y);
        }
      } else {
        v1.crossVectors(vFrom, vTo);
      }
898
      this.x = v1.x;
      this.y = v1.y;
      this.z = v1.z;
      this.w = r;
      this.normalize();
      return this;
    };
  }()
};
908
/* eslint-disable */
910
/*
 * Copyright 2015 Google Inc. All Rights Reserved.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
var _a; // tslint:disable: only-arrow-functions
var userAgent$1 = (_a = nav === null || nav === void 0 ? void 0 : nav.userAgent) !== null && _a !== void 0 ? _a : "";
var Util = win.Util || {};
Util.MIN_TIMESTEP = 0.001;
Util.MAX_TIMESTEP = 1;
930
Util.base64 = function (mimeType, base64) {
  return "data:" + mimeType + ";base64," + base64;
};
934
Util.clamp = function (value, min, max) {
  return Math.min(Math.max(min, value), max);
};
938
Util.lerp = function (a, b, t) {
  return a + (b - a) * t;
};
942
Util.isIOS = function () {
  var isIOS = /iPad|iPhone|iPod/.test(nav === null || nav === void 0 ? void 0 : nav.platform);
  return function () {
    return isIOS;
  };
}();
949
Util.isWebViewAndroid = function () {
  var isWebViewAndroid = userAgent$1.indexOf("Version") !== -1 && userAgent$1.indexOf("Android") !== -1 && userAgent$1.indexOf("Chrome") !== -1;
  return function () {
    return isWebViewAndroid;
  };
}();
956
Util.isSafari = function () {
  var isSafari = /^((?!chrome|android).)*safari/i.test(userAgent$1);
  return function () {
    return isSafari;
  };
}();
963
Util.isFirefoxAndroid = function () {
  var isFirefoxAndroid = userAgent$1.indexOf("Firefox") !== -1 && userAgent$1.indexOf("Android") !== -1;
  return function () {
    return isFirefoxAndroid;
  };
}();
970
Util.isR7 = function () {
  var isR7 = userAgent$1.indexOf("R7 Build") !== -1;
  return function () {
    return isR7;
  };
}();
977
Util.isLandscapeMode = function () {
  var rtn = win.orientation === 90 || win.orientation === -90;
  return Util.isR7() ? !rtn : rtn;
}; // Helper method to validate the time steps of sensor timestamps.
982
983
Util.isTimestampDeltaValid = function (timestampDeltaS) {
  if (isNaN(timestampDeltaS)) {
    return false;
  }
988
  if (timestampDeltaS <= Util.MIN_TIMESTEP) {
    return false;
  }
992
  if (timestampDeltaS > Util.MAX_TIMESTEP) {
    return false;
  }
996
  return true;
};
999
Util.getScreenWidth = function () {
  return Math.max(win.screen.width, win.screen.height) * win.devicePixelRatio;
};
1003
Util.getScreenHeight = function () {
  return Math.min(win.screen.width, win.screen.height) * win.devicePixelRatio;
};
1007
Util.requestFullscreen = function (element) {
  if (Util.isWebViewAndroid()) {
    return false;
  }
1012
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen();
  } else {
    return false;
  }
1024
  return true;
};
1027
Util.exitFullscreen = function () {
  if (doc.exitFullscreen) {
    doc.exitFullscreen();
  } else if (doc.webkitExitFullscreen) {
    doc.webkitExitFullscreen();
  } else if (doc.mozCancelFullScreen) {
    doc.mozCancelFullScreen();
  } else if (doc.msExitFullscreen) {
    doc.msExitFullscreen();
  } else {
    return false;
  }
1040
  return true;
};
1043
Util.getFullscreenElement = function () {
  return doc.fullscreenElement || doc.webkitFullscreenElement || doc.mozFullScreenElement || doc.msFullscreenElement;
};
1047
Util.linkProgram = function (gl, vertexSource, fragmentSource, attribLocationMap) {
  // No error checking for brevity.
  var vertexShader = gl.createShader(gl.VERTEX_SHADER);
  gl.shaderSource(vertexShader, vertexSource);
  gl.compileShader(vertexShader);
  var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
  gl.shaderSource(fragmentShader, fragmentSource);
  gl.compileShader(fragmentShader);
  var program = gl.createProgram();
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
1059
  for (var attribName in attribLocationMap) gl.bindAttribLocation(program, attribLocationMap[attribName], attribName);
1061
  gl.linkProgram(program);
  gl.deleteShader(vertexShader);
  gl.deleteShader(fragmentShader);
  return program;
};
1067
Util.getProgramUniforms = function (gl, program) {
  var uniforms = {};
  var uniformCount = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS);
  var uniformName = "";
1072
  for (var i = 0; i < uniformCount; i++) {
    var uniformInfo = gl.getActiveUniform(program, i);
    uniformName = uniformInfo.name.replace("[0]", "");
    uniforms[uniformName] = gl.getUniformLocation(program, uniformName);
  }
1078
  return uniforms;
};
1081
Util.orthoMatrix = function (out, left, right, bottom, top, near, far) {
  var lr = 1 / (left - right);
  var bt = 1 / (bottom - top);
  var nf = 1 / (near - far);
  out[0] = -2 * lr;
  out[1] = 0;
  out[2] = 0;
  out[3] = 0;
  out[4] = 0;
  out[5] = -2 * bt;
  out[6] = 0;
  out[7] = 0;
  out[8] = 0;
  out[9] = 0;
  out[10] = 2 * nf;
  out[11] = 0;
  out[12] = (left + right) * lr;
  out[13] = (top + bottom) * bt;
  out[14] = (far + near) * nf;
  out[15] = 1;
  return out;
};
1104
Util.copyArray = function (source, dest) {
  for (var i = 0, n = source.length; i < n; i++) {
    dest[i] = source[i];
  }
};
1110
Util.isMobile = function () {
  var check = false;
1113
  (function (a) {
    if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) check = true;
  })(userAgent$1 || (nav === null || nav === void 0 ? void 0 : nav.vendor) || win.opera);
1117
  return check;
};
1120
Util.extend = function (dest, src) {
  for (var key in src) {
    if (src.hasOwnProperty(key)) {
      dest[key] = src[key];
    }
  }
1127
  return dest;
};
1130
Util.safariCssSizeWorkaround = function (canvas) {
  // TODO(smus): Remove this workaround when Safari for iOS is fixed.
  // iOS only workaround (for https://bugs.webkit.org/show_bug.cgi?id=152556).
  //
  // "To the last I grapple with thee;
  //  from hell's heart I stab at thee;
  //  for hate's sake I spit my last breath at thee."
  // -- Moby Dick, by Herman Melville
  if (Util.isIOS()) {
    var width_1 = canvas.style.width;
    var height_1 = canvas.style.height;
    canvas.style.width = parseInt(width_1) + 1 + "px";
    canvas.style.height = parseInt(height_1) + "px";
    setTimeout(function () {
      canvas.style.width = width_1;
      canvas.style.height = height_1;
    }, 100);
  } // Debug only.
1149
1150
  win.Util = Util;
  win.canvas = canvas;
};
1154
Util.isDebug = function () {
  return Util.getQueryParameter("debug");
};
1158
Util.getQueryParameter = function (name) {
  name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
  var regex = new RegExp("[\\?&]" + name + "=([^&#]*)");
  var results = regex.exec(location.search);
  return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
};
1165
Util.frameDataFromPose = function () {
  var piOver180 = Math.PI / 180.0;
  var rad45 = Math.PI * 0.25; // Borrowed from glMatrix.
1169
  function mat4_perspectiveFromFieldOfView(out, fov, near, far) {
    var upTan = Math.tan(fov ? fov.upDegrees * piOver180 : rad45);
    var downTan = Math.tan(fov ? fov.downDegrees * piOver180 : rad45);
    var leftTan = Math.tan(fov ? fov.leftDegrees * piOver180 : rad45);
    var rightTan = Math.tan(fov ? fov.rightDegrees * piOver180 : rad45);
    var xScale = 2.0 / (leftTan + rightTan);
    var yScale = 2.0 / (upTan + downTan);
    out[0] = xScale;
    out[1] = 0.0;
    out[2] = 0.0;
    out[3] = 0.0;
    out[4] = 0.0;
    out[5] = yScale;
    out[6] = 0.0;
    out[7] = 0.0;
    out[8] = -((leftTan - rightTan) * xScale * 0.5);
    out[9] = (upTan - downTan) * yScale * 0.5;
    out[10] = far / (near - far);
    out[11] = -1.0;
    out[12] = 0.0;
    out[13] = 0.0;
    out[14] = far * near / (near - far);
    out[15] = 0.0;
    return out;
  }
1195
  function mat4_fromRotationTranslation(out, q, v) {
    // Quaternion math
    var x = q[0];
    var y = q[1];
    var z = q[2];
    var w = q[3];
    var x2 = x + x;
    var y2 = y + y;
    var z2 = z + z;
    var xx = x * x2;
    var xy = x * y2;
    var xz = x * z2;
    var yy = y * y2;
    var yz = y * z2;
    var zz = z * z2;
    var wx = w * x2;
    var wy = w * y2;
    var wz = w * z2;
    out[0] = 1 - (yy + zz);
    out[1] = xy + wz;
    out[2] = xz - wy;
    out[3] = 0;
    out[4] = xy - wz;
    out[5] = 1 - (xx + zz);
    out[6] = yz + wx;
    out[7] = 0;
    out[8] = xz + wy;
    out[9] = yz - wx;
    out[10] = 1 - (xx + yy);
    out[11] = 0;
    out[12] = v[0];
    out[13] = v[1];
    out[14] = v[2];
    out[15] = 1;
    return out;
  }
1232
  function mat4_translate(out, a, v) {
    var x = v[0];
    var y = v[1];
    var z = v[2];
    var a00;
    var a01;
    var a02;
    var a03;
    var a10;
    var a11;
    var a12;
    var a13;
    var a20;
    var a21;
    var a22;
    var a23;
1249
    if (a === out) {
      out[12] = a[0] * x + a[4] * y + a[8] * z + a[12];
      out[13] = a[1] * x + a[5] * y + a[9] * z + a[13];
      out[14] = a[2] * x + a[6] * y + a[10] * z + a[14];
      out[15] = a[3] * x + a[7] * y + a[11] * z + a[15];
    } else {
      a00 = a[0];
      a01 = a[1];
      a02 = a[2];
      a03 = a[3];
      a10 = a[4];
      a11 = a[5];
      a12 = a[6];
      a13 = a[7];
      a20 = a[8];
      a21 = a[9];
      a22 = a[10];
      a23 = a[11];
      out[0] = a00;
      out[1] = a01;
      out[2] = a02;
      out[3] = a03;
      out[4] = a10;
      out[5] = a11;
      out[6] = a12;
      out[7] = a13;
      out[8] = a20;
      out[9] = a21;
      out[10] = a22;
      out[11] = a23;
      out[12] = a00 * x + a10 * y + a20 * z + a[12];
      out[13] = a01 * x + a11 * y + a21 * z + a[13];
      out[14] = a02 * x + a12 * y + a22 * z + a[14];
      out[15] = a03 * x + a13 * y + a23 * z + a[15];
    }
1285
    return out;
  }
1288
  function mat4_invert(out, a) {
    var a00 = a[0];
    var a01 = a[1];
    var a02 = a[2];
    var a03 = a[3];
    var a10 = a[4];
    var a11 = a[5];
    var a12 = a[6];
    var a13 = a[7];
    var a20 = a[8];
    var a21 = a[9];
    var a22 = a[10];
    var a23 = a[11];
    var a30 = a[12];
    var a31 = a[13];
    var a32 = a[14];
    var a33 = a[15];
    var b00 = a00 * a11 - a01 * a10;
    var b01 = a00 * a12 - a02 * a10;
    var b02 = a00 * a13 - a03 * a10;
    var b03 = a01 * a12 - a02 * a11;
    var b04 = a01 * a13 - a03 * a11;
    var b05 = a02 * a13 - a03 * a12;
    var b06 = a20 * a31 - a21 * a30;
    var b07 = a20 * a32 - a22 * a30;
    var b08 = a20 * a33 - a23 * a30;
    var b09 = a21 * a32 - a22 * a31;
    var b10 = a21 * a33 - a23 * a31;
    var b11 = a22 * a33 - a23 * a32; // Calculate the determinant
1318
    var det = b00 * b11 - b01 * b10 + b02 * b09 + b03 * b08 - b04 * b07 + b05 * b06;
1320
    if (!det) {
      return null;
    }
1324
    det = 1.0 / det;
    out[0] = (a11 * b11 - a12 * b10 + a13 * b09) * det;
    out[1] = (a02 * b10 - a01 * b11 - a03 * b09) * det;
    out[2] = (a31 * b05 - a32 * b04 + a33 * b03) * det;
    out[3] = (a22 * b04 - a21 * b05 - a23 * b03) * det;
    out[4] = (a12 * b08 - a10 * b11 - a13 * b07) * det;
    out[5] = (a00 * b11 - a02 * b08 + a03 * b07) * det;
    out[6] = (a32 * b02 - a30 * b05 - a33 * b01) * det;
    out[7] = (a20 * b05 - a22 * b02 + a23 * b01) * det;
    out[8] = (a10 * b10 - a11 * b08 + a13 * b06) * det;
    out[9] = (a01 * b08 - a00 * b10 - a03 * b06) * det;
    out[10] = (a30 * b04 - a31 * b02 + a33 * b00) * det;
    out[11] = (a21 * b02 - a20 * b04 - a23 * b00) * det;
    out[12] = (a11 * b07 - a10 * b09 - a12 * b06) * det;
    out[13] = (a00 * b09 - a01 * b07 + a02 * b06) * det;
    out[14] = (a31 * b01 - a30 * b03 - a32 * b00) * det;
    out[15] = (a20 * b03 - a21 * b01 + a22 * b00) * det;
    return out;
  }
1344
  var defaultOrientation = new Float32Array([0, 0, 0, 1]);
  var defaultPosition = new Float32Array([0, 0, 0]);
1347
  function updateEyeMatrices(projection, view, pose, parameters, vrDisplay) {
    mat4_perspectiveFromFieldOfView(projection, parameters ? parameters.fieldOfView : null, vrDisplay.depthNear, vrDisplay.depthFar);
    var orientation = pose.orientation || defaultOrientation;
    var position = pose.position || defaultPosition;
    mat4_fromRotationTranslation(view, orientation, position);
    if (parameters) mat4_translate(view, view, parameters.offset);
    mat4_invert(view, view);
  }
1356
  return function (frameData, pose, vrDisplay) {
    if (!frameData || !pose) return false;
    frameData.pose = pose;
    frameData.timestamp = pose.timestamp;
    updateEyeMatrices(frameData.leftProjectionMatrix, frameData.leftViewMatrix, pose, vrDisplay.getEyeParameters("left"), vrDisplay);
    updateEyeMatrices(frameData.rightProjectionMatrix, frameData.rightViewMatrix, pose, vrDisplay.getEyeParameters("right"), vrDisplay);
    return true;
  };
}();
1366
Util.isInsideCrossDomainIFrame = function () {
  var isFramed = win.self !== win.top;
  var refDomain = Util.getDomainFromUrl(doc.referrer);
  var thisDomain = Util.getDomainFromUrl(win.location.href);
  return isFramed && refDomain !== thisDomain;
}; // From http://stackoverflow.com/a/23945027.
1373
1374
Util.getDomainFromUrl = function (url) {
  var domain; // Find & remove protocol (http, ftp, etc.) and get domain.
1377
  if (url.indexOf("://") > -1) {
    domain = url.split("/")[2];
  } else {
    domain = url.split("/")[0];
  } // find & remove port number
1383
1384
  domain = domain.split(":")[0];
  return domain;
};
1388
/* eslint-disable */
/**
 * Given an orientation and the gyroscope data, predicts the future orientation
 * of the head. This makes rendering appear faster.
 *
 * Also see: http://msl.cs.uiuc.edu/~lavalle/papers/LavYerKatAnt14.pdf
 * @param {Number} predictionTimeS time from head movement to the appearance of
 * the corresponding image.
 */
1398
var PosePredictor =
/*#__PURE__*/
function () {
  function PosePredictor(predictionTimeS) {
    this.predictionTimeS = predictionTimeS; // The quaternion corresponding to the previous state.
1404
    this.previousQ = new MathUtil.Quaternion(); // Previous time a prediction occurred.
1406
    this.previousTimestampS = null; // The delta quaternion that adjusts the current pose.
1408
    this.deltaQ = new MathUtil.Quaternion(); // The output quaternion.
1410
    this.outQ = new MathUtil.Quaternion();
  }
1413
  var __proto = PosePredictor.prototype;
1415
  __proto.getPrediction = function (currentQ, gyro, timestampS) {
    if (!this.previousTimestampS) {
      this.previousQ.copy(currentQ);
      this.previousTimestampS = timestampS;
      return currentQ;
    } // Calculate axis and angle based on gyroscope rotation rate data.
1422
1423
    var axis = new MathUtil.Vector3();
    axis.copy(gyro);
    axis.normalize();
    var angularSpeed = gyro.length(); // If we're rotating slowly, don't do prediction.
1428
    if (angularSpeed < MathUtil.degToRad * 20) {
      if (Util.isDebug()) {
        console.log("Moving slowly, at %s deg/s: no prediction", (MathUtil.radToDeg * angularSpeed).toFixed(1));
      }
1433
      this.outQ.copy(currentQ);
      this.previousQ.copy(currentQ);
      return this.outQ;
    } // Get the predicted angle based on the time delta and latency.
1438
1439
    var deltaT = timestampS - this.previousTimestampS;
    var predictAngle = angularSpeed * this.predictionTimeS;
    this.deltaQ.setFromAxisAngle(axis, predictAngle);
    this.outQ.copy(this.previousQ);
    this.outQ.multiply(this.deltaQ);
    this.previousQ.copy(currentQ);
    this.previousTimestampS = timestampS;
    return this.outQ;
  };
1449
  return PosePredictor;
}();
1452
var STILLNESS_THRESHOLD = 200; // millisecond
1454
var DeviceMotion =
/*#__PURE__*/
function (_super) {
  __extends(DeviceMotion, _super);
1459
  function DeviceMotion() {
    var _this = _super.call(this) || this;
1462
    _this._onDeviceMotion = _this._onDeviceMotion.bind(_this);
    _this._onDeviceOrientation = _this._onDeviceOrientation.bind(_this);
    _this._onChromeWithoutDeviceMotion = _this._onChromeWithoutDeviceMotion.bind(_this);
    _this.isWithoutDeviceMotion = IS_CHROME_WITHOUT_DEVICE_MOTION;
    _this.isAndroid = IS_ANDROID;
    _this.stillGyroVec = glMatrix.vec3.create();
    _this.rawGyroVec = glMatrix.vec3.create();
    _this.adjustedGyroVec = glMatrix.vec3.create();
    _this._timer = -1;
    _this.lastDevicemotionTimestamp = 0;
    _this._isEnabled = false;
1474
    _this.enable();
1476
    return _this;
  }
1479
  var __proto = DeviceMotion.prototype;
1481
  __proto.enable = function () {
    if (this.isAndroid) {
      win.addEventListener("deviceorientation", this._onDeviceOrientation);
    }
1486
    if (this.isWithoutDeviceMotion) {
      win.addEventListener("deviceorientation", this._onChromeWithoutDeviceMotion);
    } else {
      win.addEventListener("devicemotion", this._onDeviceMotion);
    }
1492
    this._isEnabled = true;
  };
1495
  __proto.disable = function () {
    win.removeEventListener("deviceorientation", this._onDeviceOrientation);
    win.removeEventListener("deviceorientation", this._onChromeWithoutDeviceMotion);
    win.removeEventListener("devicemotion", this._onDeviceMotion);
    this._isEnabled = false;
  };
1502
  __proto._onChromeWithoutDeviceMotion = function (e) {
    var alpha = e.alpha,
        beta = e.beta,
        gamma = e.gamma; // There is deviceorientation event trigged with empty values
    // on Headless Chrome.
1508
    if (alpha === null) {
      return;
    } // convert to radian
1512
1513
    alpha = (alpha || 0) * Math.PI / 180;
    beta = (beta || 0) * Math.PI / 180;
    gamma = (gamma || 0) * Math.PI / 180;
    this.trigger(new Component.ComponentEvent("devicemotion", {
      inputEvent: {
        deviceorientation: {
          alpha: alpha,
          beta: beta,
          gamma: -gamma
        }
      }
    }));
  };
1527
  __proto._onDeviceOrientation = function () {
    var _this = this;
1530
    if (this._timer) {
      clearTimeout(this._timer);
    }
1534
    this._timer = win.setTimeout(function () {
      if (new Date().getTime() - _this.lastDevicemotionTimestamp < STILLNESS_THRESHOLD) {
        glMatrix.vec3.copy(_this.stillGyroVec, _this.rawGyroVec);
      }
    }, STILLNESS_THRESHOLD);
  };
1541
  __proto._onDeviceMotion = function (e) {
    // desktop chrome triggers devicemotion event with empthy sensor values.
    // Those events should ignored.
    var isGyroSensorAvailable = !(e.rotationRate.alpha == null);
    var isGravitySensorAvailable = !(e.accelerationIncludingGravity.x == null);
1547
    if (e.interval === 0 || !(isGyroSensorAvailable && isGravitySensorAvailable)) {
      return;
    }
1551
    var devicemotionEvent = __assign({}, e);
1553
    devicemotionEvent.interval = e.interval;
    devicemotionEvent.timeStamp = e.timeStamp;
    devicemotionEvent.type = e.type;
    devicemotionEvent.rotationRate = {
      alpha: e.rotationRate.alpha,
      beta: e.rotationRate.beta,
      gamma: e.rotationRate.gamma
    };
    devicemotionEvent.accelerationIncludingGravity = {
      x: e.accelerationIncludingGravity.x,
      y: e.accelerationIncludingGravity.y,
      z: e.accelerationIncludingGravity.z
    };
    devicemotionEvent.acceleration = {
      x: e.acceleration.x,
      y: e.acceleration.y,
      z: e.acceleration.z
    };
1572
    if (this.isAndroid) {
      glMatrix.vec3.set(this.rawGyroVec, e.rotationRate.alpha || 0, e.rotationRate.beta || 0, e.rotationRate.gamma || 0);
      glMatrix.vec3.subtract(this.adjustedGyroVec, this.rawGyroVec, this.stillGyroVec);
      this.lastDevicemotionTimestamp = new Date().getTime();
      devicemotionEvent.adjustedRotationRate = {
        alpha: this.adjustedGyroVec[0],
        beta: this.adjustedGyroVec[1],
        gamma: this.adjustedGyroVec[2]
      };
    }
1583
    this.trigger(new Component.ComponentEvent("devicemotion", {
      inputEvent: devicemotionEvent
    }));
  };
1588
  return DeviceMotion;
}(Component);
1591
var SensorSample =
/*#__PURE__*/
function () {
  function SensorSample(sample, timestampS) {
    this.set(sample, timestampS);
  }
1598
  var __proto = SensorSample.prototype;
1600
  __proto.set = function (sample, timestampS) {
    this.sample = sample;
    this.timestampS = timestampS;
  };
1605
  __proto.copy = function (sensorSample) {
    this.set(sensorSample.sample, sensorSample.timestampS);
  };
1609
  return SensorSample;
}();
1612
/* eslint-disable */
/**
 * An implementation of a simple complementary filter, which fuses gyroscope and
 * accelerometer data from the 'devicemotion' event.
 *
 * Accelerometer data is very noisy, but stable over the long term.
 * Gyroscope data is smooth, but tends to drift over the long term.
 *
 * This fusion is relatively simple:
 * 1. Get orientation estimates from accelerometer by applying a low-pass filter
 *    on that data.
 * 2. Get orientation estimates from gyroscope by integrating over time.
 * 3. Combine the two estimates, weighing (1) in the long term, but (2) for the
 *    short term.
 */
1628
var ComplementaryFilter =
/*#__PURE__*/
function () {
  function ComplementaryFilter(kFilter) {
    this.addGyroMeasurement = function (vector, timestampS) {
      this.currentGyroMeasurement.set(vector, timestampS);
      var deltaT = timestampS - this.previousGyroMeasurement.timestampS;
1636
      if (Util.isTimestampDeltaValid(deltaT)) {
        this.run_();
      }
1640
      this.previousGyroMeasurement.copy(this.currentGyroMeasurement);
    };
1643
    this.kFilter = kFilter; // Raw sensor measurements.
1645
    this.currentAccelMeasurement = new SensorSample();
    this.currentGyroMeasurement = new SensorSample();
    this.previousGyroMeasurement = new SensorSample(); // Set default look direction to be in the correct direction.
1649
    if (Util.isIOS()) {
      this.filterQ = new MathUtil.Quaternion(-1, 0, 0, 1);
    } else {
      this.filterQ = new MathUtil.Quaternion(1, 0, 0, 1);
    }
1655
    this.previousFilterQ = new MathUtil.Quaternion();
    this.previousFilterQ.copy(this.filterQ); // Orientation based on the accelerometer.
1658
    this.accelQ = new MathUtil.Quaternion(); // Whether or not the orientation has been initialized.
1660
    this.isOrientationInitialized = false; // Running estimate of gravity based on the current orientation.
1662
    this.estimatedGravity = new MathUtil.Vector3(); // Measured gravity based on accelerometer.
1664
    this.measuredGravity = new MathUtil.Vector3(); // Debug only quaternion of gyro-based orientation.
1666
    this.gyroIntegralQ = new MathUtil.Quaternion();
  }
1669
  var __proto = ComplementaryFilter.prototype;
1671
  __proto.addAccelMeasurement = function (vector, timestampS) {
    this.currentAccelMeasurement.set(vector, timestampS);
  };
1675
  __proto.getOrientation = function () {
    return this.filterQ;
  };
1679
  __proto.run_ = function () {
    if (!this.isOrientationInitialized) {
      this.accelQ = this.accelToQuaternion_(this.currentAccelMeasurement.sample);
      this.previousFilterQ.copy(this.accelQ);
      this.isOrientationInitialized = true;
      return;
    }
1687
    var deltaT = this.currentGyroMeasurement.timestampS - this.previousGyroMeasurement.timestampS; // Convert gyro rotation vector to a quaternion delta.
1689
    var gyroDeltaQ = this.gyroToQuaternionDelta_(this.currentGyroMeasurement.sample, deltaT);
    this.gyroIntegralQ.multiply(gyroDeltaQ); // filter_1 = K * (filter_0 + gyro * dT) + (1 - K) * accel.
1692
    this.filterQ.copy(this.previousFilterQ);
    this.filterQ.multiply(gyroDeltaQ); // Calculate the delta between the current estimated gravity and the real
    // gravity vector from accelerometer.
1696
    var invFilterQ = new MathUtil.Quaternion();
    invFilterQ.copy(this.filterQ);
    invFilterQ.inverse();
    this.estimatedGravity.set(0, 0, -1);
    this.estimatedGravity.applyQuaternion(invFilterQ);
    this.estimatedGravity.normalize();
    this.measuredGravity.copy(this.currentAccelMeasurement.sample);
    this.measuredGravity.normalize(); // Compare estimated gravity with measured gravity, get the delta quaternion
    // between the two.
1706
    var deltaQ = new MathUtil.Quaternion();
    deltaQ.setFromUnitVectors(this.estimatedGravity, this.measuredGravity);
    deltaQ.inverse();
1710
    if (Util.isDebug()) {
      console.log("Delta: %d deg, G_est: (%s, %s, %s), G_meas: (%s, %s, %s)", MathUtil.radToDeg * Util.getQuaternionAngle(deltaQ), this.estimatedGravity.x.toFixed(1), this.estimatedGravity.y.toFixed(1), this.estimatedGravity.z.toFixed(1), this.measuredGravity.x.toFixed(1), this.measuredGravity.y.toFixed(1), this.measuredGravity.z.toFixed(1));
    } // Calculate the SLERP target: current orientation plus the measured-estimated
    // quaternion delta.
1715
1716
    var targetQ = new MathUtil.Quaternion();
    targetQ.copy(this.filterQ);
    targetQ.multiply(deltaQ); // SLERP factor: 0 is pure gyro, 1 is pure accel.
1720
    this.filterQ.slerp(targetQ, 1 - this.kFilter);
    this.previousFilterQ.copy(this.filterQ);
  };
1724
  __proto.accelToQuaternion_ = function (accel) {
    var normAccel = new MathUtil.Vector3();
    normAccel.copy(accel);
    normAccel.normalize();
    var quat = new MathUtil.Quaternion();
    quat.setFromUnitVectors(new MathUtil.Vector3(0, 0, -1), normAccel);
    quat.inverse();
    return quat;
  };
1734
  __proto.gyroToQuaternionDelta_ = function (gyro, dt) {
    // Extract axis and angle from the gyroscope data.
    var quat = new MathUtil.Quaternion();
    var axis = new MathUtil.Vector3();
    axis.copy(gyro);
    axis.normalize();
    quat.setFromAxisAngle(axis, gyro.length() * dt);
    return quat;
  };
1744
  return ComplementaryFilter;
}();
1747
ComplementaryFilter.prototype.run_ = function () {
  if (!this.isOrientationInitialized) {
    this.accelQ = this.accelToQuaternion_(this.currentAccelMeasurement.sample);
    this.previousFilterQ.copy(this.accelQ);
    this.isOrientationInitialized = true;
    return;
  }
1755
  var deltaT = this.currentGyroMeasurement.timestampS - this.previousGyroMeasurement.timestampS; // Convert gyro rotation vector to a quaternion delta.
1757
  var gyroDeltaQ = this.gyroToQuaternionDelta_(this.currentGyroMeasurement.sample, deltaT);
  this.gyroIntegralQ.multiply(gyroDeltaQ); // filter_1 = K * (filter_0 + gyro * dT) + (1 - K) * accel.
1760
  this.filterQ.copy(this.previousFilterQ);
  this.filterQ.multiply(gyroDeltaQ); // Calculate the delta between the current estimated gravity and the real
  // gravity vector from accelerometer.
1764
  var invFilterQ = new MathUtil.Quaternion();
  invFilterQ.copy(this.filterQ);
  invFilterQ.inverse();
  this.estimatedGravity.set(0, 0, -1);
  this.estimatedGravity.applyQuaternion(invFilterQ);
  this.estimatedGravity.normalize();
  this.measuredGravity.copy(this.currentAccelMeasurement.sample);
  this.measuredGravity.normalize(); // Compare estimated gravity with measured gravity, get the delta quaternion
  // between the two.
1774
  var deltaQ = new MathUtil.Quaternion();
  deltaQ.setFromUnitVectors(this.estimatedGravity, this.measuredGravity);
  deltaQ.inverse(); // Calculate the SLERP target: current orientation plus the measured-estimated
  // quaternion delta.
1779
  var targetQ = new MathUtil.Quaternion();
  targetQ.copy(this.filterQ);
  targetQ.multiply(deltaQ); // SLERP factor: 0 is pure gyro, 1 is pure accel.
1783
  this.filterQ.slerp(targetQ, 1 - this.kFilter);
  this.previousFilterQ.copy(this.filterQ);
1786
  if (!this.isFilterQuaternionInitialized) {
    this.isFilterQuaternionInitialized = true;
  }
};
1791
ComplementaryFilter.prototype.getOrientation = function () {
  if (this.isFilterQuaternionInitialized) {
    return this.filterQ;
  } else {
    return null;
  }
};
1799
var K_FILTER = 0.98;
var PREDICTION_TIME_S = 0.040;
1802
var FusionPoseSensor =
/*#__PURE__*/
function (_super) {
  __extends(FusionPoseSensor, _super);
1807
  function FusionPoseSensor() {
    var _this = _super.call(this) || this;
1810
    _this.deviceMotion = new DeviceMotion();
    _this.accelerometer = new MathUtil.Vector3();
    _this.gyroscope = new MathUtil.Vector3();
    _this._onDeviceMotionChange = _this._onDeviceMotionChange.bind(_this);
    _this._onScreenOrientationChange = _this._onScreenOrientationChange.bind(_this);
    _this.filter = new ComplementaryFilter(K_FILTER);
    _this.posePredictor = new PosePredictor(PREDICTION_TIME_S);
    _this.filterToWorldQ = new MathUtil.Quaternion();
    _this.isFirefoxAndroid = Util.isFirefoxAndroid(); // This includes iPhone & iPad(both desktop and mobile mode) ref #326
1820
    _this.isIOS = IS_IOS || IS_SAFARI_ON_DESKTOP; // Ref https://github.com/immersive-web/cardboard-vr-display/issues/18
1822
    _this.isChromeUsingDegrees = CHROME_VERSION >= 66;
    _this._isEnabled = false; // Set the filter to world transform, depending on OS.
1825
    if (_this.isIOS) {
      _this.filterToWorldQ.setFromAxisAngle(new MathUtil.Vector3(1, 0, 0), Math.PI / 2);
    } else {
      _this.filterToWorldQ.setFromAxisAngle(new MathUtil.Vector3(1, 0, 0), -Math.PI / 2);
    }
1831
    _this.inverseWorldToScreenQ = new MathUtil.Quaternion();
    _this.worldToScreenQ = new MathUtil.Quaternion();
    _this.originalPoseAdjustQ = new MathUtil.Quaternion();
1835
    _this.originalPoseAdjustQ.setFromAxisAngle(new MathUtil.Vector3(0, 0, 1), -win.orientation * Math.PI / 180);
1837
    _this._setScreenTransform(); // Adjust this filter for being in landscape mode.
1839
1840
    if (Util.isLandscapeMode()) {
      _this.filterToWorldQ.multiply(_this.inverseWorldToScreenQ);
    } // Keep track of a reset transform for resetSensor.
1844
1845
    _this.resetQ = new MathUtil.Quaternion();
1847
    _this.deviceMotion.on("devicemotion", _this._onDeviceMotionChange);
1849
    _this.enable();
1851
    return _this;
  }
1854
  var __proto = FusionPoseSensor.prototype;
1856
  __proto.enable = function () {
    if (this.isEnabled()) {
      return;
    }
1861
    this.deviceMotion.enable();
    this._isEnabled = true;
    win.addEventListener("orientationchange", this._onScreenOrientationChange);
  };
1866
  __proto.disable = function () {
    if (!this.isEnabled()) {
      return;
    }
1871
    this.deviceMotion.disable();
    this._isEnabled = false;
    win.removeEventListener("orientationchange", this._onScreenOrientationChange);
  };
1876
  __proto.isEnabled = function () {
    return this._isEnabled;
  };
1880
  __proto.destroy = function () {
    this.disable();
    this.deviceMotion = null;
  };
1885
  __proto.getOrientation = function () {
    var _this = this;
1888
    var orientation; // Hack around using deviceorientation instead of devicemotion
1890
    if (this.deviceMotion.isWithoutDeviceMotion && this._deviceOrientationQ) {
      this.deviceOrientationFixQ = this.deviceOrientationFixQ || function () {
        var y = new MathUtil.Quaternion().setFromAxisAngle(new MathUtil.Vector3(0, 1, 0), -_this._alpha);
        return y;
      }();
1896
      orientation = this._deviceOrientationQ;
      var out = new MathUtil.Quaternion();
      out.copy(orientation);
      out.multiply(this.filterToWorldQ);
      out.multiply(this.resetQ);
      out.multiply(this.worldToScreenQ);
      out.multiplyQuaternions(this.deviceOrientationFixQ, out); // return quaternion as glmatrix quaternion object
1904
      var outQuat = glMatrix.quat.fromValues(out.x, out.y, out.z, out.w);
      return glMatrix.quat.normalize(outQuat, outQuat);
    } else {
      // Convert from filter space to the the same system used by the
      // deviceorientation event.
      orientation = this.filter.getOrientation();
1911
      if (!orientation) {
        return null;
      }
1915
      var out = this._convertFusionToPredicted(orientation); // return quaternion as glmatrix quaternion object
1917
1918
      var outQuat = glMatrix.quat.fromValues(out.x, out.y, out.z, out.w);
      return glMatrix.quat.normalize(outQuat, outQuat);
    }
  };
1923
  __proto._triggerChange = function () {
    var orientation = this.getOrientation(); // if orientation is not prepared. don't trigger change event
1926
    if (!orientation) {
      return;
    }
1930
    if (!this._prevOrientation) {
      this._prevOrientation = orientation;
      return;
    }
1935
    if (glMatrix.quat.equals(this._prevOrientation, orientation)) {
      return;
    }
1939
    this.trigger(new Component.ComponentEvent("change", {
      quaternion: orientation
    }));
  };
1944
  __proto._convertFusionToPredicted = function (orientation) {
    // Predict orientation.
    this.predictedQ = this.posePredictor.getPrediction(orientation, this.gyroscope, this.previousTimestampS); // Convert to THREE coordinate system: -Z forward, Y up, X right.
1948
    var out = new MathUtil.Quaternion();
    out.copy(this.filterToWorldQ);
    out.multiply(this.resetQ);
    out.multiply(this.predictedQ);
    out.multiply(this.worldToScreenQ);
    return out;
  };
1956
  __proto._onDeviceMotionChange = function (_a) {
    var inputEvent = _a.inputEvent;
    var deviceorientation = inputEvent.deviceorientation;
    var deviceMotion = inputEvent;
    var accGravity = deviceMotion.accelerationIncludingGravity;
    var rotRate = deviceMotion.adjustedRotationRate || deviceMotion.rotationRate;
    var timestampS = deviceMotion.timeStamp / 1000;
1964
    if (deviceorientation) {
      if (!this._alpha) {
        this._alpha = deviceorientation.alpha;
      }
1969
      this._deviceOrientationQ = this._deviceOrientationQ || new MathUtil.Quaternion();
1971
      this._deviceOrientationQ.setFromEulerYXZ(deviceorientation.beta, deviceorientation.alpha, deviceorientation.gamma);
1973
      this._triggerChange();
    } else {
      // Firefox Android timeStamp returns one thousandth of a millisecond.
      if (this.isFirefoxAndroid) {
        timestampS /= 1000;
      }
1980
      this.accelerometer.set(-accGravity.x, -accGravity.y, -accGravity.z);
      this.gyroscope.set(rotRate.alpha, rotRate.beta, rotRate.gamma); // Browsers on iOS, Firefox/Android, and Chrome m66/Android `rotationRate`
      // is reported in degrees, so we first convert to radians.
1984
      if (this.isIOS || this.isFirefoxAndroid || this.isChromeUsingDegrees) {
        this.gyroscope.multiplyScalar(Math.PI / 180);
      }
1988
      this.filter.addAccelMeasurement(this.accelerometer, timestampS);
      this.filter.addGyroMeasurement(this.gyroscope, timestampS);
1991
      this._triggerChange();
1993
      this.previousTimestampS = timestampS;
    }
  };
1997
  __proto._onScreenOrientationChange = function () {
    this._setScreenTransform();
  };
2001
  __proto._setScreenTransform = function () {
    this.worldToScreenQ.set(0, 0, 0, 1);
    var orientation = win.orientation;
2005
    switch (orientation) {
      case 0:
        break;
2009
      case 90:
      case -90:
      case 180:
        this.worldToScreenQ.setFromAxisAngle(new MathUtil.Vector3(0, 0, 1), orientation / -180 * Math.PI);
        break;
    }
2016
    this.inverseWorldToScreenQ.copy(this.worldToScreenQ);
    this.inverseWorldToScreenQ.inverse();
  };
2020
  return FusionPoseSensor;
}(Component);
2023
var getDeltaYaw = function (prvQ, curQ) {
  var yawDeltaByYaw = util.getRotationDelta(prvQ, curQ, ROTATE_CONSTANT.YAW_DELTA_BY_YAW);
  var yawDeltaByRoll = util.getRotationDelta(prvQ, curQ, ROTATE_CONSTANT.YAW_DELTA_BY_ROLL) * Math.sin(util.extractPitchFromQuat(curQ));
  return yawDeltaByRoll + yawDeltaByYaw;
};
2029
var getDeltaPitch = function (prvQ, curQ) {
  var pitchDelta = util.getRotationDelta(prvQ, curQ, ROTATE_CONSTANT.PITCH_DELTA);
  return pitchDelta;
}; // eslint-disable-next-line @typescript-eslint/ban-types
2034
2035
var TiltMotionInput =
/*#__PURE__*/
function (_super) {
  __extends(TiltMotionInput, _super);
2040
  function TiltMotionInput(el, options) {
    if (options === void 0) {
      options = {};
    }
2045
    var _this = _super.call(this) || this;
2047
    _this.element = el;
    _this._prevQuaternion = null;
    _this._quaternion = null;
    _this.fusionPoseSensor = null;
    _this.options = __assign({
      scale: 1,
      threshold: 0
    }, options);
    _this._onPoseChange = _this._onPoseChange.bind(_this);
    return _this;
  }
2059
  var __proto = TiltMotionInput.prototype;
2061
  __proto.mapAxes = function (axes) {
    this.axes = axes;
  };
2065
  __proto.connect = function (observer) {
    if (this.observer) {
      return this;
    }
2070
    this.observer = observer;
    this.fusionPoseSensor = new FusionPoseSensor();
    this.fusionPoseSensor.enable();
2074
    this._attachEvent();
2076
    return this;
  };
2079
  __proto.disconnect = function () {
    if (!this.observer) {
      return this;
    }
2084
    this._dettachEvent();
2086
    this.fusionPoseSensor.disable();
    this.fusionPoseSensor.destroy();
    this.fusionPoseSensor = null;
    this.observer = null;
    return this;
  };
2093
  __proto.destroy = function () {
    this.disconnect();
    this.element = null;
    this.options = null;
    this.axes = null;
    this._prevQuaternion = null;
    this._quaternion = null;
  };
2102
  __proto._onPoseChange = function (event) {
    if (!this._prevQuaternion) {
      this._prevQuaternion = glMatrix.quat.clone(event.quaternion);
      this._quaternion = glMatrix.quat.clone(event.quaternion);
      return;
    }
2109
    glMatrix.quat.copy(this._prevQuaternion, this._quaternion);
    glMatrix.quat.copy(this._quaternion, event.quaternion);
    this.observer.change(this, event, toAxis(this.axes, [getDeltaYaw(this._prevQuaternion, this._quaternion), getDeltaPitch(this._prevQuaternion, this._quaternion)]));
  };
2114
  __proto._attachEvent = function () {
    this.fusionPoseSensor.on("change", this._onPoseChange);
  };
2118
  __proto._dettachEvent = function () {
    this.fusionPoseSensor.off("change", this._onPoseChange);
  };
2122
  return TiltMotionInput;
}(Component);
2125
var screenRotationAngleInst = null;
var refCount = 0;
2128
var ScreenRotationAngle =
/*#__PURE__*/
function () {
  function ScreenRotationAngle() {
    refCount++;
2134
    if (screenRotationAngleInst) {
      return screenRotationAngleInst;
    }
    /* eslint-disable */
2139
2140
    screenRotationAngleInst = this;
    /* eslint-enable */
2143
    this._onDeviceOrientation = this._onDeviceOrientation.bind(this);
    this._onOrientationChange = this._onOrientationChange.bind(this);
    this._spinR = 0;
    this._screenOrientationAngle = 0;
    win.addEventListener("deviceorientation", this._onDeviceOrientation);
    win.addEventListener("orientationchange", this._onOrientationChange);
  }
2151
  var __proto = ScreenRotationAngle.prototype;
2153
  __proto.getRadian = function () {
    // Join with screen orientation
    // this._testVal = this._spinR + ", " + this._screenOrientationAngle + ", " + window.orientation;
    return this._spinR + glMatrix.glMatrix.toRadian(this._screenOrientationAngle);
  };
2159
  __proto.unref = function () {
    if (--refCount > 0) {
      return;
    }
2164
    win.removeEventListener("deviceorientation", this._onDeviceOrientation);
    win.removeEventListener("orientationchange", this._onOrientationChange);
    this._spinR = 0;
    this._screenOrientationAngle = 0;
    /* eslint-disable */
2170
    screenRotationAngleInst = null;
    /* eslint-enable */
2173
    refCount = 0;
  };
2176
  __proto._onDeviceOrientation = function (e) {
    if (e.beta === null || e.gamma === null) {
      // (Chrome) deviceorientation is fired with invalid information {alpha=null, beta=null, ...} despite of not dispatching it. We skip it.
      return;
    } // Radian
2182
2183
    var betaR = glMatrix.glMatrix.toRadian(e.beta);
    var gammaR = glMatrix.glMatrix.toRadian(e.gamma);
    /* spinR range = [-180, 180], left side: 0 ~ -180(deg), right side: 0 ~ 180(deg) */
2187
    this._spinR = Math.atan2(Math.cos(betaR) * Math.sin(gammaR), Math.sin(betaR));
  };
2190
  __proto._onOrientationChange = function () {
    if (win.screen && win.screen.orientation && win.screen.orientation.angle !== undefined) {
      this._screenOrientationAngle = screen.orientation.angle;
    } else if (win.orientation !== undefined) {
      /* iOS */
      this._screenOrientationAngle = win.orientation >= 0 ? win.orientation : 360 + win.orientation;
    }
  };
2199
  return ScreenRotationAngle;
}();
2202
/**
 * RotationPanInput is extension of PanInput to compensate coordinates by screen rotation angle.
 *
 * The reason for using this function is that in VR mode,
 * the roll angle is adjusted in the direction opposite to the screen rotation angle.
 *
 * Therefore, the angle that the user touches and moves does not match the angle at which the actual object should move.
 * @extends PanInput
 */
// @ts-ignore
2213
var RotationPanInput =
/*#__PURE__*/
function (_super) {
  __extends(RotationPanInput, _super);
  /**
   * Constructor
   * @private
   * @param {HTMLElement} el target element
   * @param {Object} [options] The option object
   * @param {Boolean} [options.useRotation]  Whether to use rotation(or VR)
   */
2225
2226
  function RotationPanInput(el, options) {
    if (options === void 0) {
      options = {};
    }
2231
    var _this = _super.call(this, el, options) || this;
2233
    _this._useRotation = false;
    _this._screenRotationAngle = null;
2236
    _this.setUseRotation(!!(options && options.useRotation));
2238
    _this._userDirection = Axes.DIRECTION_ALL;
    return _this;
  }
2242
  var __proto = RotationPanInput.prototype;
2244
  __proto.setUseRotation = function (useRotation) {
    this._useRotation = useRotation;
2247
    if (this._screenRotationAngle) {
      this._screenRotationAngle.unref();
2250
      this._screenRotationAngle = null;
    }
2253
    if (this._useRotation) {
      this._screenRotationAngle = new ScreenRotationAngle();
    }
  };
2258
  __proto.connect = function (observer) {
    // User intetened direction
    this._userDirection = this._direction; // In VR Mode, Use ALL direction if direction is not none
    // Because horizontal and vertical is changed dynamically by screen rotation.
    // this._direction is used to initialize hammerjs
2264
    if (this._useRotation && this._direction & Axes.DIRECTION_ALL) {
      this._direction = Axes.DIRECTION_HORIZONTAL;
    }
2268
    return _super.prototype.connect.call(this, observer);
  };
2271
  __proto.destroy = function () {
    if (this._useRotation && this._screenRotationAngle) {
      this._screenRotationAngle.unref();
    }
2276
    _super.prototype.destroy.call(this);
  }; // eslint-disable-next-line @typescript-eslint/naming-convention
2279
2280
  __proto.getOffset = function (properties, useDirection) {
    if (this._useRotation === false) {
      // @ts-ignore
      return _super.prototype.getOffset.call(this, properties, useDirection);
    } // @ts-ignore
2286
2287
    var offset = _super.prototype.getOffset.call(this, properties, [true, true]);
2289
    var newOffset = [0, 0];
2291
    var theta = this._screenRotationAngle.getRadian();
2293
    var cosTheta = Math.cos(theta);
    var sinTheta = Math.sin(theta); // RotateZ
2296
    newOffset[0] = offset[0] * cosTheta - offset[1] * sinTheta;
    newOffset[1] = offset[1] * cosTheta + offset[0] * sinTheta; // Use only user allowed direction.
2299
    if (!(this._userDirection & Axes.DIRECTION_HORIZONTAL)) {
      newOffset[0] = 0;
    } else if (!(this._userDirection & Axes.DIRECTION_VERTICAL)) {
      newOffset[1] = 0;
    }
2305
    return newOffset;
  };
2308
  return RotationPanInput;
}(Axes.PanInput);
/**
 * Override getDirectionByAngle to return DIRECTION_ALL
 * Ref: https://github.com/naver/egjs-axes/issues/99
 *
 * But we obey axes's rule. If axes's rule is problem, let's apply following code.
 */
// PanInput.getDirectionByAngle = function (angle, thresholdAngle) {
// 	return DIRECTION_ALL;
// };
2320
var Y_AXIS_VECTOR = glMatrix.vec3.fromValues(0, 1, 0);
2322
var DeviceQuaternion =
/*#__PURE__*/
function (_super) {
  __extends(DeviceQuaternion, _super);
2327
  function DeviceQuaternion() {
    var _this = _super.call(this) || this;
2330
    _this._fusionPoseSensor = new FusionPoseSensor();
    _this._quaternion = glMatrix.quat.create();
2333
    _this._fusionPoseSensor.enable();
2335
    _this._fusionPoseSensor.on("change", function (e) {
      _this._quaternion = e.quaternion;
2338
      _this.trigger(new Component.ComponentEvent("change", {
        isTrusted: true
      }));
    });
2343
    return _this;
  }
2346
  var __proto = DeviceQuaternion.prototype;
2348
  __proto.getCombinedQuaternion = function (yaw) {
    var yawQ = glMatrix.quat.setAxisAngle(glMatrix.quat.create(), Y_AXIS_VECTOR, glMatrix.glMatrix.toRadian(-yaw));
    var conj = glMatrix.quat.conjugate(glMatrix.quat.create(), this._quaternion); // Multiply pitch quaternion -> device quaternion -> yaw quaternion
2352
    var outQ = glMatrix.quat.multiply(glMatrix.quat.create(), conj, yawQ);
    return outQ;
  };
2356
  __proto.destroy = function () {
    // detach all event handler
    this.off();
2360
    if (this._fusionPoseSensor) {
      this._fusionPoseSensor.off();
2363
      this._fusionPoseSensor.destroy();
2365
      this._fusionPoseSensor = null;
    }
  };
2369
  return DeviceQuaternion;
}(Component);
2372
var DEFAULT_YAW_RANGE = [-YAW_RANGE_HALF, YAW_RANGE_HALF];
var DEFAULT_PITCH_RANGE = [-PITCH_RANGE_HALF, PITCH_RANGE_HALF];
var CIRCULAR_PITCH_RANGE = [-CIRCULAR_PITCH_RANGE_HALF, CIRCULAR_PITCH_RANGE_HALF];
/**
 * A module used to provide coordinate based on yaw/pitch orientation. This module receives user touch action, keyboard, mouse and device orientation(if it exists) as input, then combines them and converts it to yaw/pitch coordinates.
 * @alias eg.YawPitchControl
 * @extends eg.Component
 *
 * @support {"ie": "10+", "ch" : "latest", "ff" : "latest",  "sf" : "latest", "edge" : "latest", "ios" : "7+", "an" : "2.3+ (except 3.x)"}
 */
2383
var YawPitchControl =
/*#__PURE__*/
function (_super) {
  __extends(YawPitchControl, _super);
  /**
   * @param {object} options The option object of the eg.YawPitch module
   * @param {HTMLElement|null}[options.element=null] element A base element for the eg.YawPitch module
   * @param {number} [options.yaw=0] initial yaw (degree)
   * @param {number} [options.pitch=0] initial pitch (degree)
   * @param {number} [options.fov=65] initial field of view (degree)
   * @param {boolean} [optiosn.showPolePoint=true] Indicates whether pole is shown
   * @param {boolean} [options.useZoom=true] Indicates whether zoom is available
   * @param {boolean} [options.useKeyboard=true] Indicates whether keyboard is enabled
   * @param {string} [config.gyroMode=yawPitch] Enables control through device motion.
   * @param {number} [options.touchDirection=TOUCH_DIRECTION_ALL] Direction of the touch movement (TOUCH_DIRECTION_ALL: all,  TOUCH_DIRECTION_YAW: horizontal, TOUCH_DIRECTION_PITCH: vertical, TOUCH_DIRECTION_NONE: no move)
   * @param {number[]} [options.yawRange=[-180, 180] Range of visible yaw
   * @param {number[]} [options.pitchRange=[-90, 90] Range of visible pitch
   * @param {number[]} [options.fovRange=[30, 110] Range of FOV
   * @param {number} [options.aspectRatio=1] Aspect Ratio
   */
2404
2405
  function YawPitchControl(options) {
    var _this = _super.call(this) || this;
2408
    _this.options = {};
2410
    var opt = __assign({
      element: null,
      yaw: 0,
      pitch: 0,
      fov: 65,
      showPolePoint: false,
      useZoom: true,
      useKeyboard: true,
      gyroMode: GYRO_MODE.YAWPITCH,
      touchDirection: TOUCH_DIRECTION_ALL,
      yawRange: DEFAULT_YAW_RANGE,
      pitchRange: DEFAULT_PITCH_RANGE,
      fovRange: [30, 110],
      aspectRatio: 1
      /* TODO: Need Mandatory? */
2426
    }, options);
2428
    _this._element = opt.element;
    _this._initialFov = opt.fov;
    _this._enabled = false;
    _this._isAnimating = false;
    _this._deviceQuaternion = null;
2434
    _this._initAxes(opt);
2436
    _this.option(opt);
2438
    return _this;
  }
  /**
   * Update Pan Scale
   *
   * Scale(Sensitivity) values of panning is related with fov and height.
   * If at least one of them is changed, this function need to be called.
   * @param {*} param
   */
2448
2449
  var __proto = YawPitchControl.prototype;
2451
  __proto.updatePanScale = function (param) {
    if (param === void 0) {
      param = {};
    }
2456
    var fov = this._axes.get().fov;
2458
    var areaHeight = param.height || parseInt(window.getComputedStyle(this._element).height, 10);
    var scale = MC_BIND_SCALE[0] * fov / this._initialFov * PAN_SCALE / areaHeight;
    this._axesPanInput.options.scale = [scale, scale];
    this._axes.options.deceleration = MC_DECELERATION * fov / MAX_FIELD_OF_VIEW;
    return this;
  };
  /*
   * Override component's option method
   * to call method for updating values which is affected by option change.
   *
   * @param {*} args
   */
2471
2472
  __proto.option = function (key, newValue) {
    // Getter
    if (!key) {
      return this._getOptions();
    } else if (key && typeof key === "string" && typeof newValue === "undefined") {
      return this._getOptions(key);
    } // Setter
2480
2481
    var newOptions = {};
    var changedKeyList = []; // TODO: if value is not changed, then do not push on changedKeyList.
2484
    if (typeof key === "string") {
      changedKeyList.push(key);
      newOptions[key] = newValue;
    } else {
      var options = key; // Retrieving object here
2490
      changedKeyList = Object.keys(options);
      newOptions = __assign({}, options);
    }
2494
    this._setOptions(this._getValidatedOptions(newOptions));
2496
    this._applyOptions(changedKeyList);
2498
    return this;
  };
  /**
   * Enable YawPitch functionality
   * @method eg.YawPitch#enable
   */
2505
2506
  __proto.enable = function () {
    if (this._enabled) {
      return this;
    }
2511
    this._enabled = true; // touchDirection is decided by parameter is valid string (Ref. Axes.connect)
2513
    this._applyOptions(Object.keys(this.options)); // TODO: Is this code is needed? Check later.
2515
2516
    this.updatePanScale();
    return this;
  };
  /**
   * Disable YawPitch functionality
   * @method eg.YawPitch#disable
   */
2524
2525
  __proto.disable = function (persistOrientation) {
    if (persistOrientation === void 0) {
      persistOrientation = false;
    }
2530
    if (!this._enabled) {
      return this;
    } // TODO: Check peristOrientation is needed!
2534
2535
    if (!persistOrientation) {
      this._resetOrientation();
    }
2539
    this._axes.disconnect();
2541
    this._enabled = false;
    return this;
  };
  /**
   * Set one or more of yaw, pitch, fov
   * @param {Object} coordinate yaw, pitch, fov
   * @param {Number} duration Animation duration. if it is above 0 then it's animated.
   */
2550
2551
  __proto.lookAt = function (_a, duration) {
    var yaw = _a.yaw,
        pitch = _a.pitch,
        fov = _a.fov;
2556
    var pos = this._axes.get();
2558
    var y = yaw === undefined ? 0 : yaw - pos.yaw;
    var p = pitch === undefined ? 0 : pitch - pos.pitch;
    var f = fov === undefined ? 0 : fov - pos.fov; // Allow duration of animation to have more than MC_MAXIMUM_DURATION.
2562
    this._axes.options.maximumDuration = Infinity;
2564
    this._axes.setBy({
      yaw: y,
      pitch: p,
      fov: f
    }, duration);
  };
2571
  __proto.getYawPitch = function () {
    var yawPitch = this._axes.get();
2574
    return {
      yaw: yawPitch.yaw,
      pitch: yawPitch.pitch
    };
  };
2580
  __proto.getFov = function () {
    return this._axes.get().fov;
  };
2584
  __proto.getQuaternion = function () {
    var pos = this._axes.get();
2587
    return this._deviceQuaternion.getCombinedQuaternion(pos.yaw);
  };
2590
  __proto.shouldRenderWithQuaternion = function () {
    return this.options.gyroMode === GYRO_MODE.VR;
  };
  /**
   * Destroys objects
   */
2597
2598
  __proto.destroy = function () {
    /* eslint-disable @typescript-eslint/no-unused-expressions */
    this._axes && this._axes.destroy();
    this._axesPanInput && this._axesPanInput.destroy();
    this._axesWheelInput && this._axesWheelInput.destroy();
    this._axesTiltMotionInput && this._axesTiltMotionInput.destroy();
    this._axesPinchInput && this._axesPinchInput.destroy();
    this._axesMoveKeyInput && this._axesMoveKeyInput.destroy();
    this._deviceQuaternion && this._deviceQuaternion.destroy();
    /* eslint-enable @typescript-eslint/no-unused-expressions */
  };
2610
  __proto._initAxes = function (opt) {
    var _this = this;
2613
    var yRange = this._updateYawRange(opt.yawRange, opt.fov, opt.aspectRatio);
2615
    var pRange = this._updatePitchRange(opt.pitchRange, opt.fov, opt.showPolePoint);
2617
    var useRotation = opt.gyroMode === GYRO_MODE.VR;
    this._axesPanInput = new RotationPanInput(this._element, {
      useRotation: useRotation
    });
    this._axesWheelInput = new Axes.WheelInput(this._element, {
      scale: -4
    });
    this._axesTiltMotionInput = null;
    this._axesPinchInput = SUPPORT_TOUCH ? new Axes.PinchInput(this._element, {
      scale: -1
    }) : null;
    this._axesMoveKeyInput = new Axes.MoveKeyInput(this._element, {
      scale: [-6, 6]
    });
    this._axes = new Axes({
      yaw: {
        range: yRange,
        circular: this._isCircular(yRange),
        bounce: [0, 0]
      },
      pitch: {
        range: pRange,
        circular: this._isCircular(pRange),
        bounce: [0, 0]
      },
      fov: {
        range: opt.fovRange,
        circular: [false, false],
        bounce: [0, 0]
      }
    }, {
      deceleration: MC_DECELERATION,
      maximumDuration: MC_MAXIMUM_DURATION
    }, {
      yaw: opt.yaw,
      pitch: opt.pitch,
      fov: opt.fov
    }).on({
      // TODO: change event type after Axes event type inference update
      hold: function (evt) {
        // Restore maximumDuration not to be spin too mush.
        _this._axes.options.maximumDuration = MC_MAXIMUM_DURATION;
2660
        _this.trigger(new Component.ComponentEvent("hold", {
          isTrusted: evt.isTrusted
        }));
      },
      change: function (evt) {
        if (evt.delta.fov !== 0) {
          _this._updateControlScale(evt);
2668
          _this.updatePanScale();
        }
2671
        _this._triggerChange(evt);
      },
      release: function (evt) {
        _this._triggerChange(evt);
      },
      animationEnd: function (evt) {
        _this.trigger(new Component.ComponentEvent("animationEnd", {
          isTrusted: evt.isTrusted
        }));
      }
    });
  };
2684
  __proto._getValidatedOptions = function (newOptions) {
    if (newOptions.yawRange) {
      newOptions.yawRange = this._getValidYawRange(newOptions.yawRange, newOptions.fov, newOptions.aspectRatio);
    }
2689
    if (newOptions.pitchRange) {
      newOptions.pitchRange = this._getValidPitchRange(newOptions.pitchRange, newOptions.fov);
    }
2693
    return newOptions;
  };
2696
  __proto._getOptions = function (key) {
    var value;
2699
    if (typeof key === "string") {
      value = this.options[key];
    } else if (arguments.length === 0) {
      value = this.options;
    }
2705
    return value;
  };
2708
  __proto._setOptions = function (options) {
    for (var key in options) {
      this.options[key] = options[key];
    }
  };
2714
  __proto._applyOptions = function (keys) {
    var options = this.options;
    var axes = this._axes;
    var isVR = options.gyroMode === GYRO_MODE.VR;
    var isYawPitch = options.gyroMode === GYRO_MODE.YAWPITCH; // If it's VR mode, restrict user interaction to yaw direction only
2720
    var touchDirection = isVR ? TOUCH_DIRECTION_YAW & options.touchDirection : options.touchDirection; // If one of below is changed, call updateControlScale()
2722
    if (keys.some(function (key) {
      return key === "showPolePoint" || key === "fov" || key === "aspectRatio" || key === "yawRange" || key === "pitchRange";
    })) {
      // If fov is changed, update pan scale
      if (keys.indexOf("fov") >= 0) {
        axes.setTo({
          "fov": options.fov
        });
        this.updatePanScale();
      }
2733
      this._updateControlScale();
    }
2736
    if (keys.some(function (key) {
      return key === "fovRange";
    })) {
      var fovRange = options.fovRange;
      var prevFov = axes.get().fov;
      var nextFov = axes.get().fov;
      glMatrix.vec2.copy(axes.axis.fov.range, fovRange);
2744
      if (nextFov < fovRange[0]) {
        nextFov = fovRange[0];
      } else if (prevFov > fovRange[1]) {
        nextFov = fovRange[1];
      }
2750
      if (prevFov !== nextFov) {
        axes.setTo({
          fov: nextFov
        }, 0);
2755
        this._updateControlScale();
2757
        this.updatePanScale();
      }
    }
2761
    if (keys.some(function (key) {
      return key === "gyroMode";
    }) && SUPPORT_DEVICEMOTION) {
      // Disconnect first
      if (this._axesTiltMotionInput) {
        this._axes.disconnect(this._axesTiltMotionInput);
2768
        this._axesTiltMotionInput.destroy();
2770
        this._axesTiltMotionInput = null;
      }
2773
      if (this._deviceQuaternion) {
        this._deviceQuaternion.destroy();
2776
        this._deviceQuaternion = null;
      }
2779
      if (isVR) {
        this._initDeviceQuaternion();
      } else if (isYawPitch) {
        this._axesTiltMotionInput = new TiltMotionInput(this._element);
2784
        this._axes.connect(["yaw", "pitch"], this._axesTiltMotionInput);
      }
2787
      this._axesPanInput.setUseRotation(isVR);
    }
2790
    if (keys.some(function (key) {
      return key === "useKeyboard";
    })) {
      var useKeyboard = options.useKeyboard;
2795
      if (useKeyboard) {
        axes.connect(["yaw", "pitch"], this._axesMoveKeyInput);
      } else {
        axes.disconnect(this._axesMoveKeyInput);
      }
    }
2802
    if (keys.some(function (key) {
      return key === "useZoom";
    })) {
      var useZoom = options.useZoom; // Disconnect first
2807
      axes.disconnect(this._axesWheelInput);
2809
      if (useZoom) {
        axes.connect(["fov"], this._axesWheelInput);
      }
    }
2814
    this._togglePinchInputByOption(options.touchDirection, options.useZoom);
2816
    if (keys.some(function (key) {
      return key === "touchDirection";
    }) && this._enabled) {
      this._enableTouch(touchDirection);
    }
  };
2823
  __proto._togglePinchInputByOption = function (touchDirection, useZoom) {
    if (this._axesPinchInput) {
      // disconnect first
      this._axes.disconnect(this._axesPinchInput); // If the touchDirection option is not ALL, pinchInput should be disconnected to make use of a native scroll.
2828
2829
      if (useZoom && touchDirection === TOUCH_DIRECTION_ALL && // TODO: Get rid of using private property of axes instance.
      this._axes._inputs.indexOf(this._axesPinchInput) === -1) {
        this._axes.connect(["fov"], this._axesPinchInput);
      }
    }
  };
2836
  __proto._enableTouch = function (direction) {
    // Disconnect first
    if (this._axesPanInput) {
      this._axes.disconnect(this._axesPanInput);
    }
2842
    var yawEnabled = direction & TOUCH_DIRECTION_YAW ? "yaw" : null;
    var pitchEnabled = direction & TOUCH_DIRECTION_PITCH ? "pitch" : null;
2845
    this._axes.connect([yawEnabled, pitchEnabled], this._axesPanInput);
  };
2848
  __proto._initDeviceQuaternion = function () {
    var _this = this;
2851
    this._deviceQuaternion = new DeviceQuaternion();
2853
    this._deviceQuaternion.on("change", function (e) {
      _this._triggerChange(e);
    });
  };
2858
  __proto._getValidYawRange = function (newYawRange, newFov, newAspectRatio) {
    var ratio = this._adjustAspectRatio(newAspectRatio || this.options.aspectRatio || 1);
2861
    var fov = newFov || this._axes.get().fov;
2863
    var horizontalFov = fov * ratio;
    var isValid = newYawRange[1] - newYawRange[0] >= horizontalFov;
2866
    if (isValid) {
      return newYawRange;
    } else {
      return this.options.yawRange || DEFAULT_YAW_RANGE;
    }
  };
2873
  __proto._getValidPitchRange = function (newPitchRange, newFov) {
    var fov = newFov || this._axes.get().fov;
2876
    var isValid = newPitchRange[1] - newPitchRange[0] >= fov;
2878
    if (isValid) {
      return newPitchRange;
    } else {
      return this.options.pitchRange || DEFAULT_PITCH_RANGE;
    }
  };
2885
  __proto._isCircular = function (range) {
    return range[1] - range[0] < 360 ? [false, false] : [true, true];
  };
  /**
   * Update yaw/pitch min/max by 5 factor
   *
   * 1. showPolePoint
   * 2. fov
   * 3. yawRange
   * 4. pitchRange
   * 5. aspectRatio
   *
   * If one of above is changed, call this function
   */
2900
2901
  __proto._updateControlScale = function (changeEvt) {
    var opt = this.options;
2904
    var fov = this._axes.get().fov;
2906
    var pRange = this._updatePitchRange(opt.pitchRange, fov, opt.showPolePoint);
2908
    var yRange = this._updateYawRange(opt.yawRange, fov, opt.aspectRatio); // TODO: If not changed!?
2910
2911
    var pos = this._axes.get();
2913
    var y = pos.yaw;
    var p = pos.pitch;
    glMatrix.vec2.copy(this._axes.axis.yaw.range, yRange);
    glMatrix.vec2.copy(this._axes.axis.pitch.range, pRange);
    this._axes.axis.yaw.circular = this._isCircular(yRange);
    this._axes.axis.pitch.circular = this._isCircular(pRange);
    /**
     * update yaw/pitch by it's range.
     */
2923
    if (y < yRange[0]) {
      y = yRange[0];
    } else if (y > yRange[1]) {
      y = yRange[1];
    }
2929
    if (p < pRange[0]) {
      p = pRange[0];
    } else if (p > pRange[1]) {
      p = pRange[1];
    }
2935
    if (changeEvt) {
      changeEvt.set({
        yaw: y,
        pitch: p
      });
    }
2942
    this._axes.setTo({
      yaw: y,
      pitch: p
    }, 0);
2947
    return this;
  };
2950
  __proto._updatePitchRange = function (pitchRange, fov, showPolePoint) {
    if (this.options.gyroMode === GYRO_MODE.VR) {
      // Circular pitch on VR
      return CIRCULAR_PITCH_RANGE;
    }
2956
    var verticalAngle = pitchRange[1] - pitchRange[0];
    var halfFov = fov / 2;
    var isPanorama = verticalAngle < 180;
2960
    if (showPolePoint && !isPanorama) {
      // Use full pinch range
      return pitchRange.concat();
    } // Round value as movableCood do.
2965
2966
    return [pitchRange[0] + halfFov, pitchRange[1] - halfFov];
  };
2969
  __proto._updateYawRange = function (yawRange, fov, aspectRatio) {
    if (this.options.gyroMode === GYRO_MODE.VR) {
      return DEFAULT_YAW_RANGE;
    }
2974
    var horizontalAngle = yawRange[1] - yawRange[0];
    /**
     * Full 360 Mode
     */
2979
    if (horizontalAngle >= 360) {
      // Don't limit yaw range on Full 360 mode.
      return yawRange.concat();
    }
    /**
     * Panorama mode
     */
    // Ref : https://github.com/naver/egjs-view360/issues/290
2988
2989
    var halfHorizontalFov = util.toDegree(Math.atan2(aspectRatio, 1 / Math.tan(glMatrix.glMatrix.toRadian(fov / 2)))); // Round value as movableCood do.
2991
    return [yawRange[0] + halfHorizontalFov, yawRange[1] - halfHorizontalFov];
  }; // TODO: update param type after Axes event type inference update
2994
2995
  __proto._triggerChange = function (evt) {
    var pos = this._axes.get();
2998
    var opt = this.options;
    var event = {
      targetElement: opt.element,
      isTrusted: evt.isTrusted,
      yaw: pos.yaw,
      pitch: pos.pitch,
      fov: pos.fov,
      quaternion: null
    };
3008
    if (opt.gyroMode === GYRO_MODE.VR && this._deviceQuaternion) {
      event.quaternion = this._deviceQuaternion.getCombinedQuaternion(pos.yaw);
    }
3012
    this.trigger(new Component.ComponentEvent("change", event));
  }; // TODO: makes constant to be logic
3015
3016
  __proto._adjustAspectRatio = function (input) {
    var inputRange = [0.520, 0.540, 0.563, 0.570, 0.584, 0.590, 0.609, 0.670, 0.702, 0.720, 0.760, 0.780, 0.820, 0.920, 0.970, 1.00, 1.07, 1.14, 1.19, 1.25, 1.32, 1.38, 1.40, 1.43, 1.53, 1.62, 1.76, 1.77, 1.86, 1.96, 2.26, 2.30, 2.60, 3.00, 5.00, 6.00];
    var outputRange = [0.510, 0.540, 0.606, 0.560, 0.628, 0.630, 0.647, 0.710, 0.736, 0.757, 0.780, 0.770, 0.800, 0.890, 0.975, 1.00, 1.07, 1.10, 1.15, 1.18, 1.22, 1.27, 1.30, 1.33, 1.39, 1.45, 1.54, 1.55, 1.58, 1.62, 1.72, 1.82, 1.92, 2.00, 2.24, 2.30];
    var rangeIdx = -1;
3021
    for (var i = 0; i < inputRange.length - 1; i++) {
      if (inputRange[i] <= input && inputRange[i + 1] >= input) {
        rangeIdx = i;
        break;
      }
    }
3028
    if (rangeIdx === -1) {
      if (inputRange[0] > input) {
        return outputRange[0];
      } else {
        // FIXME: this looks definitely wrong
        return outputRange[outputRange[0].length - 1];
      }
    }
3037
    var inputA = inputRange[rangeIdx];
    var inputB = inputRange[rangeIdx + 1];
    var outputA = outputRange[rangeIdx];
    var outputB = outputRange[rangeIdx + 1];
    return this._lerp(outputA, outputB, (input - inputA) / (inputB - inputA));
  };
3044
  __proto._lerp = function (a, b, fraction) {
    return a + fraction * (b - a);
  };
3048
  __proto._resetOrientation = function () {
    var opt = this.options;
3051
    this._axes.setTo({
      yaw: opt.yaw,
      pitch: opt.pitch,
      fov: opt.fov
    }, 0);
3057
    return this;
  };
3060
  YawPitchControl.VERSION = VERSION; // Expose DeviceOrientationControls sub module for test purpose
3062
  YawPitchControl.CONTROL_MODE_VR = CONTROL_MODE_VR;
  YawPitchControl.CONTROL_MODE_YAWPITCH = CONTROL_MODE_YAWPITCH;
  YawPitchControl.TOUCH_DIRECTION_ALL = TOUCH_DIRECTION_ALL;
  YawPitchControl.TOUCH_DIRECTION_YAW = TOUCH_DIRECTION_YAW;
  YawPitchControl.TOUCH_DIRECTION_PITCH = TOUCH_DIRECTION_PITCH;
  YawPitchControl.TOUCH_DIRECTION_NONE = TOUCH_DIRECTION_NONE;
  return YawPitchControl;
}(Component);
3071
/**
 * Constant value for errors
 * @ko 에러에 대한 상수 값
 * @namespace
 * @name ERROR_TYPE
 * @memberof eg.view360.PanoViewer
 */
3079
var ERROR_TYPE = {
  /**
   * Unsupported device
   * @ko 미지원 기기
   * @name INVALID_DEVICE
   * @memberof eg.view360.PanoViewer.ERROR_TYPE
   * @constant
   * @type {Number}
   * @default 10
   */
  INVALID_DEVICE: 10,
3091
  /**
   * Webgl not support
   * @ko WEBGL 미지원
   * @name NO_WEBGL
   * @memberof eg.view360.PanoViewer.ERROR_TYPE
   * @constant
   * @type {Number}
   * @default 11
   */
  NO_WEBGL: 11,
3102
  /**
   * Failed to load image
   * @ko 이미지 로드 실패
   * @name FAIL_IMAGE_LOAD
   * @memberof eg.view360.PanoViewer.ERROR_TYPE
   * @constant
   * @type {Number}
   * @default 12
   */
  FAIL_IMAGE_LOAD: 12,
3113
  /**
   * Failed to bind texture
   * @ko 텍스쳐 바인딩 실패
   * @name FAIL_BIND_TEXTURE
   * @memberof eg.view360.PanoViewer.ERROR_TYPE
   * @constant
   * @type {Number}
   * @default 13
   */
  FAIL_BIND_TEXTURE: 13,
3124
  /**
   * Only one resource(image or video) should be specified
   * @ko 리소스 지정 오류 (image 혹은 video 중 하나만 지정되어야 함)
   * @name INVALID_RESOURCE
   * @memberof eg.view360.PanoViewer.ERROR_TYPE
   * @constant
   * @type {Number}
   * @default 14
   */
  INVALID_RESOURCE: 14,
3135
  /**
   * WebGL context lost occurred
   * @ko WebGL context lost 발생
   * @name RENDERING_CONTEXT_LOST
   * @memberof eg.view360.PanoViewer.ERROR_TYPE
   * @constant
   * @type {Number}
   * @default 15
   */
  RENDERING_CONTEXT_LOST: 15
};
/**
 * Constant value for events
 * @ko 이벤트에 대한 상수 값
 * @namespace
 * @name EVENTS
 * @memberof eg.view360.PanoViewer
 */
3154
var PANOVIEWER_EVENTS = {
  /**
   * Events that is fired when PanoViewer is ready to show image and handle user interaction.
   * @ko PanoViewer 가 사용자의 인터렉션 및 렌더링이 준비되상태에 발생하는 이벤트
   * @name READY
   * @memberof eg.view360.PanoViewer.EVENTS
   * @constant
   * @type {String}
   * @default ready
   */
  READY: "ready",
3166
  /**
   * Events that is fired when direction or fov is changed.
   * @ko PanoViewer 에서 바라보고 있는 방향이나 FOV(화각)가 변경되었을때 발생하는 이벤트
   * @name VIEW_CHANGE
   * @memberof eg.view360.PanoViewer.EVENTS
   * @constant
   * @type {String}
   * @default viewChange
   */
  VIEW_CHANGE: "viewChange",
3177
  /**
   * Events that is fired when animation which is triggered by inertia is ended.
   * @ko 관성에 의한 애니메이션 동작이 완료되었을때 발생하는 이벤트
   * @name ANIMATION_END
   * @memberof eg.view360.PanoViewer.EVENTS
   * @constant
   * @type {String}
   * @default animationEnd
   */
  ANIMATION_END: "animationEnd",
3188
  /**
   * Events that is fired when error occurs
   * @ko 에러 발생 시 발생하는 이벤트
   * @name ERROR
   * @memberof eg.view360.PanoViewer.EVENTS
   * @constant
   * @type {String}
   * @default error
   */
  ERROR: "error"
};
/**
 * Constant value for projection type
 * @ko 프로젝션 타입 대한 상수 값
 * @namespace
 * @name PROJECTION_TYPE
 * @memberof eg.view360.PanoViewer
 */
3207
var PROJECTION_TYPE = {
  /**
   * Constant value for equirectangular type.
   * @ko equirectangular 에 대한 상수 값.
   * @name EQUIRECTANGULAR
   * @memberof eg.view360.PanoViewer.PROJECTION_TYPE
   * @constant
   * @type {String}
   * @default equirectangular
   */
  EQUIRECTANGULAR: "equirectangular",
3219
  /**
   * Constant value for cubemap type.
   * @ko cubemap 에 대한 상수 값.
   * @name CUBEMAP
   * @memberof eg.view360.PanoViewer.PROJECTION_TYPE
   * @constant
   * @type {String}
   * @default cubemap
   */
  CUBEMAP: "cubemap",
3230
  /**
   * Constant value for cubestrip type.
   * Cubestrip is a format for a single image with a combination of six cube faces. It is almost identical to cubemap, but it is implemented in a different way. It aims at better performance and efficiency. In addition, it automatically detects and supports EAC.
   * @ko cubemap 에 대한 상수 값.Cubestrip 은 cube 면이 6개가 조합된 조합을 한장의 이미지를 위한 포맷이다. cubemap 과 사용방법이 거의 동일하지만 다른 방식으로 구현되었다. 보다 좋은 성능과 효율성을 목적으로 한다. 더불어 자동으로 EAC 를 감지하고 지원한다.
   * @name CUBESTRIP
   * @memberof eg.view360.PanoViewer.PROJECTION_TYPE
   * @constant
   * @type {String}
   * @default cubestrip
   */
  CUBESTRIP: "cubestrip",
3242
  /**
   * Constant value for PANORAMA type.
   *
   * PANORAMA is a format for a panorma image which is taken from smartphone.
   * @ko PANORAMA 에 대한 상수값. 파노라마는 스마트 폰에서 가져온 파노라마 이미지의 형식입니다.
   *
   * @name PANORAMA
   * @memberof eg.view360.PanoViewer.PROJECTION_TYPE
   * @constant
   * @type {String}
   * @default panorama
   */
  PANORAMA: "panorama",
3256
  /**
   * Constant value for EQUI_STEREOSCOPY type.
   *
   * Constant value for EQUI_STEREOSCOPY. Stereoscopy image format of EQUIRECTANGULAR. It is an experimental function to show a stereoscopic type equirectangular image on a plane. It does not support stereoscopic viewing function through special visual equipment at present.
   * @ko EQUI_STEREOSCOPY 에 대한 상수값. EQUIRECTANGULAR 의 Stereoscopy 이미지 형식입니다. Stereoscopic 형태의 equirectangular 이미지를 평면에 보여주기 위한 실험적인 기능으로 현재는 특수한 시각 장비를 통한 입체적인 보기 기능은 지원하지 않습니다.
   *
   * @name STEREOSCOPIC_EQUI
   * @memberof eg.view360.PanoViewer.PROJECTION_TYPE
   * @constant
   * @type {String}
   * @default stereoequi
   */
  STEREOSCOPIC_EQUI: "stereoequi"
};
/**
 * A constant value for the format of the stereoscopic equirectangular projection type.
 * @ko Stereoscopic equirectangular 프로젝션 타입의 포맷에 대한 상수 값
 * @namespace
 * @name STEREO_FORMAT
 * @memberof eg.view360.PanoViewer
 */
3278
var STEREO_FORMAT = {
  /**
   * A constant value for format of top bottom stereoscopic 360 equirectangular projection.
   * @ko top bottom stereoscopic 360 equirectangular projection 콘텐츠 포맷에 대한 상수값.
   * @name TOP_BOTTOM
   * @memberof eg.view360.PanoViewer.STEREO_FORMAT
   * @constant
   * @type {String}
   * @default "3dv"
   */
  TOP_BOTTOM: "3dv",
3290
  /**
   * A constant value for format of left right stereoscopic 360 equirectangular projection.
   * @ko Left right stereoscopic 360 equirectangular projection 콘텐츠 포맷에 대한 상수값.
   * @name LEFT_RIGHT
   * @memberof eg.view360.PanoViewer.STEREO_FORMAT
   * @constant
   * @type {String}
   * @default "3dh"
   */
  LEFT_RIGHT: "3dh",
3301
  /**
   * A constant value specifying media is not in stereoscopic format.
   * @ko Stereoscopic 영상이 아닐 경우에 적용하는 상수값.
   * @name NONE
   * @memberof eg.view360.PanoViewer.STEREO_FORMAT
   * @constant
   * @type {String}
   * @default ""
   */
  NONE: ""
}; // eslint-disable-next-line @typescript-eslint/no-unused-vars
3313
var PANOVIEWER_OPTIONS = {
  image: true,
  video: true,
  projectionType: true,
  cubemapConfig: true,
  stereoFormat: true,
  width: true,
  height: true,
  yaw: true,
  pitch: true,
  fov: true,
  showPolePoint: true,
  useZoom: true,
  useKeyboard: true,
  gyroMode: true,
  yawRange: true,
  pitchRange: true,
  fovRange: true,
  touchDirection: true,
  canvasClass: true
};
var DEFAULT_CANVAS_CLASS = "view360-canvas";
3336
var Constants = {
  __proto__: null,
  GYRO_MODE: GYRO_MODE,
  PANOVIEWER_EVENTS: PANOVIEWER_EVENTS,
  ERROR_TYPE: ERROR_TYPE,
  PROJECTION_TYPE: PROJECTION_TYPE,
  STEREO_FORMAT: STEREO_FORMAT,
  PANOVIEWER_OPTIONS: PANOVIEWER_OPTIONS,
  DEFAULT_CANVAS_CLASS: DEFAULT_CANVAS_CLASS
};
3347
var WEBGL_ERROR_CODE = {
  "0": "NO_ERROR",
  "1280": "INVALID_ENUM",
  "1281": "INVALID_VALUE",
  "1282": "INVALID_OPERATION",
  "1285": "OUT_OF_MEMORY",
  "1286": "INVALID_FRAMEBUFFER_OPERATION",
  "37442": "CONTEXT_LOST_WEBGL"
};
var webglAvailability = null; // eslint-disable-next-line @typescript-eslint/naming-convention
3358
var WebGLUtils =
/*#__PURE__*/
function () {
  function WebGLUtils() {}
3363
  WebGLUtils.createShader = function (gl, type, source) {
    var shader = gl.createShader(type);
    gl.shaderSource(shader, source);
    gl.compileShader(shader);
    var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
3369
    if (success) {
      return shader;
    } // eslint-disable-next-line
3373
3374
    console.error(gl.getShaderInfoLog(shader));
    return null;
  };
3378
  WebGLUtils.createProgram = function (gl, vertexShader, fragmentShader) {
    var program = gl.createProgram();
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);
    gl.deleteShader(vertexShader);
    gl.deleteShader(fragmentShader);
    var success = gl.getProgramParameter(program, gl.LINK_STATUS);
3387
    if (success) {
      return program;
    }
3391
    gl.deleteProgram(program);
    return null;
  };
3395
  WebGLUtils.initBuffer = function (gl, target
  /* bind point */
  , data, itemSize, attr) {
    var buffer = gl.createBuffer();
    gl.bindBuffer(target, buffer);
    gl.bufferData(target, data, gl.STATIC_DRAW);
3402
    if (buffer) {
      buffer.itemSize = itemSize;
      buffer.numItems = data.length / itemSize;
    }
3407
    if (attr !== undefined) {
      gl.enableVertexAttribArray(attr);
      gl.vertexAttribPointer(attr, buffer.itemSize, gl.FLOAT, false, 0, 0);
    }
3412
    return buffer;
  };
3415
  WebGLUtils.getWebglContext = function (canvas, userContextAttributes) {
    var e_1, _a;
3418
    var webglIdentifiers = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"];
    var context = null;
3421
    var contextAttributes = __assign({
      preserveDrawingBuffer: false,
      antialias: false
    }, userContextAttributes);
3426
    var onWebglcontextcreationerror = function (e) {
      return e.statusMessage;
    };
3430
    canvas.addEventListener("webglcontextcreationerror", onWebglcontextcreationerror);
3432
    try {
      for (var webglIdentifiers_1 = __values(webglIdentifiers), webglIdentifiers_1_1 = webglIdentifiers_1.next(); !webglIdentifiers_1_1.done; webglIdentifiers_1_1 = webglIdentifiers_1.next()) {
        var identifier = webglIdentifiers_1_1.value;
3436
        try {
          context = canvas.getContext(identifier, contextAttributes);
        } catch (t) {} // eslint-disable-line no-empty
3440
3441
        if (context) {
          break;
        }
      }
    } catch (e_1_1) {
      e_1 = {
        error: e_1_1
      };
    } finally {
      try {
        if (webglIdentifiers_1_1 && !webglIdentifiers_1_1.done && (_a = webglIdentifiers_1.return)) _a.call(webglIdentifiers_1);
      } finally {
        if (e_1) throw e_1.error;
      }
    }
3457
    canvas.removeEventListener("webglcontextcreationerror", onWebglcontextcreationerror);
    return context;
  };
3461
  WebGLUtils.createTexture = function (gl, textureTarget) {
    var texture = gl.createTexture();
    gl.bindTexture(textureTarget, texture);
    gl.texParameteri(textureTarget, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
    gl.texParameteri(textureTarget, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    gl.texParameteri(textureTarget, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(textureTarget, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    gl.bindTexture(textureTarget, null);
    return texture;
  };
  /**
   * Returns the webgl availability of the current browser.
   * @method WebGLUtils#isWebGLAvailable
   * @retuen {Boolean} isWebGLAvailable
   */
3477
3478
  WebGLUtils.isWebGLAvailable = function () {
    if (webglAvailability === null) {
      var canvas = document.createElement("canvas");
      var webglContext = WebGLUtils.getWebglContext(canvas);
      webglAvailability = !!webglContext; // webglContext Resource forced collection
3484
      if (webglContext) {
        var loseContextExtension = webglContext.getExtension("WEBGL_lose_context");
3487
        if (loseContextExtension) {
          loseContextExtension.loseContext();
        }
      }
    }
3493
    return !!webglAvailability;
  };
  /**
   * Returns whether webgl is stable in the current browser.
   * @method WebGLUtils#isStableWebGL
   * @retuen {Boolean} isStableWebGL
   */
3501
3502
  WebGLUtils.isStableWebGL = function () {
    var agentInfo = agent$1();
    var isStableWebgl = true;
3506
    if (agentInfo.os.name === "android") {
      var version = parseFloat(agentInfo.os.version);
3509
      if (version <= 4.3 && version >= 1) {
        isStableWebgl = false;
      } else if (version === 4.4) {
        if (agentInfo.browser.name !== "chrome") {
          isStableWebgl = false;
        }
      }
    }
3518
    return isStableWebgl;
  };
3521
  WebGLUtils.getErrorNameFromWebGLErrorCode = function (code) {
    if (!(code in WEBGL_ERROR_CODE)) {
      return "UNKNOWN_ERROR";
    }
3526
    return WEBGL_ERROR_CODE[code];
  };
  /**
   * This function is wrapper for texImage2D to handle exceptions on texImage2D.
   * Purpose is to prevent service from being stopped by script error.
   */
3533
3534
  WebGLUtils.texImage2D = function (gl, target, pixels) {
    try {
      gl.texImage2D(target, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
    } catch (error) {
      /* eslint-disable no-console */
      console.error("WebGLUtils.texImage2D error:", error);
      /* eslint-enable no-console */
    }
  };
3544
  WebGLUtils.getMaxTextureSize = function (gl) {
    // WARN: MAX_TEXTURE_SIZE_FOR_TEST is used for test
    return  gl.getParameter(gl.MAX_TEXTURE_SIZE);
  };
3549
  return WebGLUtils;
}();
3552
var agentInfo = agent$1();
var isIE11 = agentInfo.browser.name === "ie" && agentInfo.browser.majorVersion === 11;
var EVENTS = {
  ERROR: "error"
};
/**
 *
 * Extends Component for firing errors occurs internally.
 */
3562
var Renderer =
/*#__PURE__*/
function (_super) {
  __extends(Renderer, _super);
3567
  function Renderer() {
    var _this = _super.call(this) || this;
3570
    _this._forceDimension = null;
    _this._pixelCanvas = null;
    _this._pixelContext = null;
    return _this;
  }
3576
  var __proto = Renderer.prototype;
3578
  __proto.render = function (_a) {
    var gl = _a.gl,
        shaderProgram = _a.shaderProgram,
        indexBuffer = _a.indexBuffer,
        mvMatrix = _a.mvMatrix,
        pMatrix = _a.pMatrix;
    gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
    gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
3587
    if (indexBuffer) {
      gl.drawElements(gl.TRIANGLES, indexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
    }
  }; // Define interface for Renderers
3592
  /**
   * Following MUST BE DEFINED on Child of Renderer
   *
   * DATA
   *
   *  - getVertexPositionData
   *  - getIndexData
   *  - getTextureCoordData
   *
   * SOURCE
   *
   *  - getVertexShaderSource
   *  - getFragmentShaderSource
   *
   * TEXTURE
   *
   *  - bindTexture
   */
3611
3612
  __proto.getDimension = function (pixelSource) {
    var width = pixelSource.naturalWidth || pixelSource.videoWidth;
    var height = pixelSource.naturalHeight || pixelSource.videoHeight;
    return {
      width: width,
      height: height
    };
  };
  /**
   * Update data used by shader
   */
3624
3625
  __proto.updateShaderData = function (param) {
    /*
    * Update following data in implementation layer.
    * If the data is not changed, it does not need to implement this function.
    *
    * - _VERTEX_POSITION_DATA
    * - _TEXTURE_COORD_DATA
    * - _INDEX_DATA
    */
  };
  /**
   *
   * @param {HTMLImageElement | HTMLVideoElement} image
   * @param {Object = {width, height}} forceDimension Forced dimension to resize
   */
3641
3642
  __proto._initPixelSource = function (image, forceDimension) {
    if (forceDimension === void 0) {
      forceDimension = null;
    }
3647
    var isIE11Video = isIE11 && image instanceof HTMLVideoElement;
3649
    if (isIE11Video || forceDimension) {
      var _a = forceDimension || this.getDimension(image),
          width = _a.width,
          height = _a.height;
3654
      this._pixelCanvas = document.createElement("canvas");
      this._pixelCanvas.width = width;
      this._pixelCanvas.height = height;
      this._pixelContext = this._pixelCanvas.getContext("2d");
    }
3660
    this._forceDimension = forceDimension;
  };
3663
  __proto._getPixelSource = function (image) {
    if (!this._pixelCanvas) {
      return image;
    }
    /**
     * IE11 && Video
     * or
     * Dimension is forced (Image is larger than texture size.)
     */
3673
3674
    var contentDimension = this.getDimension(image);
    var textureDimension = this._forceDimension || contentDimension;
3677
    if (this._pixelCanvas.width !== textureDimension.width) {
      this._pixelCanvas.width = textureDimension.width;
    }
3681
    if (this._pixelCanvas.height !== textureDimension.height) {
      this._pixelCanvas.height = textureDimension.height;
    }
3685
    if (this._forceDimension) {
      this._pixelContext.drawImage(image, 0, 0, contentDimension.width, contentDimension.height, 0, 0, textureDimension.width, textureDimension.height);
    } else {
      this._pixelContext.drawImage(image, 0, 0);
    }
3691
    return this._pixelCanvas;
  };
3694
  __proto._extractTileConfig = function (imageConfig) {
    var tileConfig = Array.isArray(imageConfig.tileConfig) ? imageConfig.tileConfig : Array.apply(void 0, __spread(Array(6))).map(function () {
      return imageConfig.tileConfig;
    });
    tileConfig = tileConfig.map(function (config) {
      return __assign({
        flipHorizontal: false,
        rotation: 0
      }, config);
    });
    return tileConfig;
  };
3707
  __proto._triggerError = function (error) {
    /* eslint-disable no-console */
    console.error("Renderer Error:", error);
    /* eslint-enable no-console */
3712
    this.trigger(new Component.ComponentEvent(EVENTS.ERROR, {
      message: typeof error === "string" ? error : error.message
    }));
  };
3717
  Renderer.EVENTS = EVENTS;
  return Renderer;
}(Component);
3721
var CubeRenderer =
/*#__PURE__*/
function (_super) {
  __extends(CubeRenderer, _super);
3726
  function CubeRenderer() {
    return _super !== null && _super.apply(this, arguments) || this;
  }
3730
  var __proto = CubeRenderer.prototype;
3732
  CubeRenderer.extractOrder = function (imageConfig) {
    return imageConfig.order || "RLUDBF";
  };
3736
  __proto.getVertexPositionData = function () {
    CubeRenderer._VERTEX_POSITION_DATA = CubeRenderer._VERTEX_POSITION_DATA !== null ? CubeRenderer._VERTEX_POSITION_DATA : [// back
    1, -1, 1, -1, -1, 1, -1, 1, 1, 1, 1, 1, // front
    -1, -1, -1, 1, -1, -1, 1, 1, -1, -1, 1, -1, // top
    -1, 1, -1, 1, 1, -1, 1, 1, 1, -1, 1, 1, // bottom
    1, -1, -1, -1, -1, -1, -1, -1, 1, 1, -1, 1, // right
    1, -1, -1, 1, -1, 1, 1, 1, 1, 1, 1, -1, // left
    -1, -1, 1, -1, -1, -1, -1, 1, -1, -1, 1, 1];
    return CubeRenderer._VERTEX_POSITION_DATA;
  };
3747
  __proto.getIndexData = function () {
    if (CubeRenderer._INDEX_DATA) {
      return CubeRenderer._INDEX_DATA;
    }
3752
    var indexData = [];
    var vertexPositionData = this.getVertexPositionData();
3755
    for (var i = 0; i < vertexPositionData.length / 3; i += 4) {
      indexData.push(i, i + 2, i + 1, i, i + 3, i + 2);
    }
3759
    CubeRenderer._INDEX_DATA = indexData;
    return indexData;
  };
3763
  __proto.getTextureCoordData = function (_a) {
    var _this = this;
3766
    var image = _a.image,
        imageConfig = _a.imageConfig;
    var vertexOrder = "BFUDRL";
    var order = CubeRenderer.extractOrder(imageConfig);
    var base = this.getVertexPositionData();
3772
    var tileConfig = this._extractTileConfig(imageConfig);
3774
    var elemSize = 3;
    var vertexPerTile = 4;
    var trim = imageConfig.trim;
    var texCoords = vertexOrder.split("").map(function (face) {
      return tileConfig[order.indexOf(face)];
    }).map(function (config, i) {
      var rotation = Math.floor(config.rotation / 90);
      var ordermap = config.flipHorizontal ? [0, 1, 2, 3] : [1, 0, 3, 2];
3783
      for (var r = 0; r < Math.abs(rotation); r++) {
        if (config.flipHorizontal && rotation > 0 || !config.flipHorizontal && rotation < 0) {
          ordermap.push(ordermap.shift());
        } else {
          ordermap.unshift(ordermap.pop());
        }
      }
3791
      var elemPerTile = elemSize * vertexPerTile;
      var tileVertex = base.slice(i * elemPerTile, i * elemPerTile + elemPerTile);
      var tileTemp = [];
3795
      for (var j = 0; j < vertexPerTile; j++) {
        tileTemp[ordermap[j]] = tileVertex.splice(0, elemSize);
      }
3799
      return tileTemp;
    }).map(function (coord) {
      return _this._shrinkCoord({
        image: image,
        faceCoords: coord,
        trim: trim
      });
    }).reduce(function (acc, val) {
      return __spread(acc, val.reduce(function (coords, coord) {
        return __spread(coords, coord);
      }, []));
    }, []);
    return texCoords;
  };
3814
  __proto.getVertexShaderSource = function () {
    return "\nattribute vec3 aVertexPosition;\nattribute vec3 aTextureCoord;\nuniform mat4 uMVMatrix;\nuniform mat4 uPMatrix;\nvarying highp vec3 vVertexDirectionVector;\nvoid main(void) {\n  vVertexDirectionVector = aTextureCoord;\n  gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);\n}";
  };
3818
  __proto.getFragmentShaderSource = function () {
    return "\nprecision highp float;\nuniform samplerCube uSampler;\nvarying highp vec3 vVertexDirectionVector;\nvoid main(void) {\n  gl_FragColor = textureCube(uSampler, vVertexDirectionVector);\n}";
  };
3822
  __proto.updateTexture = function (gl, image, imageConfig) {
    var baseOrder = "RLUDBF";
    var order = CubeRenderer.extractOrder(imageConfig);
    var orderMap = {};
    order.split("").forEach(function (v, i) {
      orderMap[v] = i;
    });
3830
    try {
      if (image instanceof Array) {
        for (var surfaceIdx = 0; surfaceIdx < 6; surfaceIdx++) {
          var tileIdx = orderMap[baseOrder[surfaceIdx]];
          WebGLUtils.texImage2D(gl, gl.TEXTURE_CUBE_MAP_POSITIVE_X + surfaceIdx, image[tileIdx]);
        }
      } else {
        var maxCubeMapTextureSize = this.getMaxCubeMapTextureSize(gl, image);
3839
        for (var surfaceIdx = 0; surfaceIdx < 6; surfaceIdx++) {
          var tileIdx = orderMap[baseOrder[surfaceIdx]];
          var tile = this.extractTileFromImage(image, tileIdx, maxCubeMapTextureSize);
          WebGLUtils.texImage2D(gl, gl.TEXTURE_CUBE_MAP_POSITIVE_X + surfaceIdx, tile);
        }
      }
    } catch (e) {
      this._triggerError(e);
    }
  };
3850
  __proto.bindTexture = function (gl, texture, image, imageConfig) {
    gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture);
    this.updateTexture(gl, image, imageConfig);
  };
3855
  __proto.getSourceTileSize = function (image) {
    var _a = this.getDimension(image),
        width = _a.width,
        height = _a.height;
3860
    var aspectRatio = width / height;
    var inputTextureSize;
3863
    if (aspectRatio === 1 / 6) {
      inputTextureSize = width;
    } else if (aspectRatio === 6) {
      inputTextureSize = height;
    } else if (aspectRatio === 2 / 3) {
      inputTextureSize = width / 2;
    } else {
      inputTextureSize = width / 3;
    }
3873
    return inputTextureSize;
  };
3876
  __proto.extractTileFromImage = function (image, tileIdx, outputTextureSize) {
    var width = this.getDimension(image).width;
    var inputTextureSize = this.getSourceTileSize(image);
    var canvas = document.createElement("canvas");
    canvas.width = outputTextureSize;
    canvas.height = outputTextureSize;
    var context = canvas.getContext("2d");
    var tilePerRow = width / inputTextureSize;
    var x = inputTextureSize * tileIdx % (inputTextureSize * tilePerRow);
    var y = Math.floor(tileIdx / tilePerRow) * inputTextureSize;
    context.drawImage(image, x, y, inputTextureSize, inputTextureSize, 0, 0, outputTextureSize, outputTextureSize);
    return canvas;
  };
3890
  __proto.getMaxCubeMapTextureSize = function (gl, image) {
    var agentInfo = agent$1();
    var maxCubeMapTextureSize = gl.getParameter(gl.MAX_CUBE_MAP_TEXTURE_SIZE);
    var imageWidth = this.getSourceTileSize(image);
3895
    if (agentInfo.browser.name === "ie" && agentInfo.browser.majorVersion === 11) {
      if (!util.isPowerOfTwo(imageWidth)) {
        for (var i = 1; i < maxCubeMapTextureSize; i *= 2) {
          if (i < imageWidth) {
            continue;
          } else {
            imageWidth = i;
            break;
          }
        }
      }
    }
3908
    if (agentInfo.os.name === "ios") {
      var majorVersion = agentInfo.os.majorVersion; // ios 9 의 경우 텍스쳐 최대사이즈는 1024 이다.
3911
      if (majorVersion === 9) {
        imageWidth = 1024;
      } // ios 8 의 경우 텍스쳐 최대사이즈는 512 이다.
3915
3916
      if (majorVersion === 8) {
        imageWidth = 512;
      }
    } // maxCubeMapTextureSize 보다는 작고, imageWidth 보다 큰 2의 승수 중 가장 작은 수
3921
3922
    return Math.min(maxCubeMapTextureSize, imageWidth);
  };
3925
  __proto._shrinkCoord = function (coordData) {
    var image = coordData.image,
        faceCoords = coordData.faceCoords,
        trim = coordData.trim;
    var inputTextureSize = Array.isArray(image) ? this.getDimension(image[0]).width : this.getSourceTileSize(image); // Shrink by "trim" px
3931
    var SHRINK_MULTIPLIER = 1 - trim * (2 / inputTextureSize);
    var axisMultipliers = [0, 1, 2].map(function (axisIndex) {
      var axisDir = util.sign(faceCoords[0][axisIndex]);
      var notSameDir = faceCoords.some(function (coord) {
        return util.sign(coord[axisIndex]) !== axisDir;
      });
      return notSameDir;
    }).map(function (notSameDir) {
      return notSameDir ? SHRINK_MULTIPLIER : 1;
    });
    return faceCoords.map(function (coords) {
      return coords.map(function (coord, axisIndex) {
        return coord * axisMultipliers[axisIndex];
      });
    });
  };
3948
  CubeRenderer._VERTEX_POSITION_DATA = null;
  CubeRenderer._INDEX_DATA = null;
  return CubeRenderer;
}(Renderer);
3953
var CubeStripRenderer =
/*#__PURE__*/
function (_super) {
  __extends(CubeStripRenderer, _super);
3958
  function CubeStripRenderer() {
    return _super !== null && _super.apply(this, arguments) || this;
  }
3962
  var __proto = CubeStripRenderer.prototype;
3964
  __proto.getVertexShaderSource = function () {
    return "\nattribute vec3 aVertexPosition;\nattribute vec2 aTextureCoord;\nuniform mat4 uMVMatrix;\nuniform mat4 uPMatrix;\nvarying highp vec2 vTextureCoord;\nvoid main(void) {\n  vTextureCoord = aTextureCoord;\n  gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);\n}";
  };
3968
  __proto.getFragmentShaderSource = function () {
    return "\n#define PI 3.14159265359\nprecision highp float;\nvarying highp vec2 vTextureCoord;\nuniform sampler2D uSampler;\nuniform bool uIsEAC;\nconst vec2 OPERATE_COORDS_RANGE = vec2(-1.0, 1.0);\nconst vec2 TEXTURE_COORDS_RANGE = vec2(0.0, 1.0);\n// vector type is used for initializing values instead of array.\nconst vec4 TEXTURE_DIVISION_X = vec4(0.0, 1.0 / 3.0, 2.0 / 3.0, 1.0);\nconst vec3 TEXTURE_DIVISION_Y = vec3(0.0, 1.0 / 2.0, 1.0);\nconst float EAC_CONST = 2.0 / PI;\nfloat scale(vec2 domainRange, vec2 targetRange, float val) {\n  float unit = 1.0 / (domainRange[1] - domainRange[0]);\n  return targetRange[0] + (targetRange[1] - targetRange[0]) * (val - domainRange[0]) * unit;\n}\nvoid main(void) {\n  float transformedCoordX;\n  float transformedCoordY;\n\n  if (uIsEAC) {\n    vec2 orgTextureRangeX;\n    vec2 orgTextureRangeY;\n\n    // Apply EAC transform\n    if (vTextureCoord.s >= TEXTURE_DIVISION_X[2]) {\n      orgTextureRangeX = vec2(TEXTURE_DIVISION_X[2], TEXTURE_DIVISION_X[3]);\n    } else if (vTextureCoord.s >= TEXTURE_DIVISION_X[1]) {\n      orgTextureRangeX = vec2(TEXTURE_DIVISION_X[1], TEXTURE_DIVISION_X[2]);\n    } else {\n      orgTextureRangeX = vec2(TEXTURE_DIVISION_X[0], TEXTURE_DIVISION_X[1]);\n    }\n\n    if (vTextureCoord.t >= TEXTURE_DIVISION_Y[1]) {\n      orgTextureRangeY = vec2(TEXTURE_DIVISION_Y[1], TEXTURE_DIVISION_Y[2]);\n    } else {\n      orgTextureRangeY = vec2(TEXTURE_DIVISION_Y[0], TEXTURE_DIVISION_Y[1]);\n    }\n\n    // scaling coors by the coordinates following the range from -1.0 to 1.0.\n    float px = scale(orgTextureRangeX, OPERATE_COORDS_RANGE, vTextureCoord.s);\n    float py = scale(orgTextureRangeY, OPERATE_COORDS_RANGE, vTextureCoord.t);\n\n    float qu = EAC_CONST * atan(px) + 0.5;\n    float qv = EAC_CONST * atan(py) + 0.5;\n\n    // re-scaling coors by original coordinates ranges\n    transformedCoordX = scale(TEXTURE_COORDS_RANGE, orgTextureRangeX, qu);\n    transformedCoordY = scale(TEXTURE_COORDS_RANGE, orgTextureRangeY, qv);\n  } else {\n    // normal cubemap\n    transformedCoordX = vTextureCoord.s;\n    transformedCoordY = vTextureCoord.t;\n  }\n\n  gl_FragColor = texture2D(uSampler, vec2(transformedCoordX, transformedCoordY));\n}";
  };
3972
  __proto.getVertexPositionData = function () {
    if (!this._vertices) {
      this._vertices = [// back
      1, -1, 1, -1, -1, 1, -1, 1, 1, 1, 1, 1, // front
      -1, -1, -1, 1, -1, -1, 1, 1, -1, -1, 1, -1, // up
      -1, 1, -1, 1, 1, -1, 1, 1, 1, -1, 1, 1, // down
      -1, -1, 1, 1, -1, 1, 1, -1, -1, -1, -1, -1, // right
      1, -1, -1, 1, -1, 1, 1, 1, 1, 1, 1, -1, // left
      -1, -1, 1, -1, -1, -1, -1, 1, -1, -1, 1, 1];
    }
3983
    return this._vertices;
  };
3986
  __proto.getIndexData = function () {
    var _this = this; // TODO: 한번만 계산하도록 수정하기
3989
3990
    var indices = function () {
      var indexData = [];
3993
      for (var i = 0; i < _this._vertices.length / 3; i += 4) {
        indexData.push(i, i + 1, i + 2, i, i + 2, i + 3);
      }
3997
      return indexData;
    }();
4000
    return indices;
  };
4003
  __proto.getTextureCoordData = function (_a) {
    var _this = this;
4006
    var image = _a.image,
        imageConfig = _a.imageConfig; // TODO: make it cols, rows as config.
4009
    var cols = 3;
    var rows = 2;
    var textureSize = this.getDimension(image);
    var trim = imageConfig.trim;
    var order = imageConfig.order || "RLUDFB";
    var coords = []; // 텍스쳐의 좌표는 윗쪽이 큰 값을 가지므로 row 는 역순으로 넣는다.
4016
    for (var r = rows - 1; r >= 0; r--) {
      for (var c = 0; c < cols; c++) {
        var coord = [c / cols, r / rows, (c + 1) / cols, r / rows, (c + 1) / cols, (r + 1) / rows, c / cols, (r + 1) / rows];
        coords.push(coord);
      }
    }
4023
    var tileConfigs = this._extractTileConfig(imageConfig); // Transform Coord By Flip & Rotation
4025
4026
    coords = coords // shrink coord to avoid pixel bleeding
    .map(function (coord) {
      return _this._shrinkCoord(coord, textureSize, trim);
    }).map(function (coord, i) {
      return _this._transformCoord(coord, tileConfigs[i]);
    }); // vertices 에서 지정된 순서대로 그대로 그리기 위해 vertex 의 순서를 BFUDRL 로 재배치
4033
    return "BFUDRL".split("").map(function (face) {
      return order.indexOf(face);
    }).map(function (index) {
      return coords[index];
    }).reduce(function (acc, val) {
      return acc.concat(val);
    }, []);
  };
4042
  __proto.updateTexture = function (gl, image) {
    WebGLUtils.texImage2D(gl, gl.TEXTURE_2D, this._getPixelSource(image));
  };
4046
  __proto.bindTexture = function (gl, texture, image) {
    // Make sure image isn't too big
    var _a = this.getDimension(image),
        width = _a.width,
        height = _a.height;
4052
    var size = Math.max(width, height);
    var maxSize = WebGLUtils.getMaxTextureSize(gl);
4055
    if (size > maxSize) {
      this._triggerError("Image width(" + width + ") exceeds device limit(" + maxSize + "))");
4058
      return;
    } // Pixel Source for IE11 & Video
4061
4062
    this._initPixelSource(image);
4064
    gl.activeTexture(gl.TEXTURE0);
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
    gl.bindTexture(gl.TEXTURE_2D, texture);
    this.updateTexture(gl, image);
  };
4070
  __proto._transformCoord = function (coord, tileConfig) {
    var newCoord = coord.slice();
4073
    if (tileConfig.flipHorizontal) {
      newCoord = this._flipHorizontalCoord(newCoord);
    }
4077
    if (tileConfig.rotation) {
      newCoord = this._rotateCoord(newCoord, tileConfig.rotation);
    }
4081
    return newCoord;
  };
4084
  __proto._shrinkCoord = function (coord, textureSize, trim) {
    var width = textureSize.width,
        height = textureSize.height; // Shrink by "trim" px
4088
    var SHRINK_Y = trim * (1 / height);
    var SHRINK_X = trim * (1 / width);
    return [coord[0] + SHRINK_X, coord[1] + SHRINK_Y, coord[2] - SHRINK_X, coord[3] + SHRINK_Y, coord[4] - SHRINK_X, coord[5] - SHRINK_Y, coord[6] + SHRINK_X, coord[7] - SHRINK_Y];
  };
4093
  __proto._rotateCoord = function (coord, rotationAngle) {
    var SIZE = 2; // coord means x,y coordinates. Two values(x, y) makes a one coord.
4096
    var shiftCount = Math.floor(rotationAngle / 90) % 4;
4098
    if (shiftCount === 0) {
      return coord;
    }
4102
    var moved;
    var rotatedCoord = [];
4105
    if (shiftCount > 0) {
      moved = coord.splice(0, shiftCount * SIZE);
      rotatedCoord = coord.concat(moved);
    } else {
      moved = coord.splice((4 + shiftCount) * SIZE, -shiftCount * SIZE);
      rotatedCoord = moved.concat(coord);
    }
4113
    return rotatedCoord;
  };
4116
  __proto._flipHorizontalCoord = function (coord) {
    return [coord[2], coord[3], coord[0], coord[1], coord[6], coord[7], coord[4], coord[5]];
  };
4120
  return CubeStripRenderer;
}(Renderer);
4123
var latitudeBands = 60;
var longitudeBands = 60;
var radius = 2;
var ANGLE_CORRECTION_FOR_CENTER_ALIGN = -0.5 * Math.PI;
var textureCoordData = [];
var vertexPositionData = [];
var indexData = [];
var latIdx;
var lngIdx;
4133
for (latIdx = 0; latIdx <= latitudeBands; latIdx++) {
  var theta = (latIdx / latitudeBands - 0.5) * Math.PI;
  var sinTheta = Math.sin(theta);
  var cosTheta = Math.cos(theta);
4138
  for (lngIdx = 0; lngIdx <= longitudeBands; lngIdx++) {
    var phi = (lngIdx / longitudeBands - 0.5) * 2 * Math.PI + ANGLE_CORRECTION_FOR_CENTER_ALIGN;
    var sinPhi = Math.sin(phi);
    var cosPhi = Math.cos(phi);
    var x = cosPhi * cosTheta;
    var y = sinTheta;
    var z = sinPhi * cosTheta;
    var u = lngIdx / longitudeBands;
    var v = latIdx / latitudeBands;
    textureCoordData.push(u, v);
    vertexPositionData.push(radius * x, radius * y, radius * z);
4150
    if (lngIdx !== longitudeBands && latIdx !== latitudeBands) {
      var a = latIdx * (longitudeBands + 1) + lngIdx;
      var b = a + longitudeBands + 1;
      indexData.push(a, b, a + 1, b, b + 1, a + 1);
    }
  }
}
4158
var SphereRenderer =
/*#__PURE__*/
function (_super) {
  __extends(SphereRenderer, _super);
4163
  function SphereRenderer(format) {
    var _this = _super.call(this) || this;
4166
    _this._stereoFormat = format;
    return _this;
  }
4170
  var __proto = SphereRenderer.prototype;
4172
  __proto.render = function (ctx) {
    var gl = ctx.gl,
        shaderProgram = ctx.shaderProgram;
    var leftEyeScaleOffset;
    var rightEyeScaleOffset;
4178
    switch (this._stereoFormat) {
      case STEREO_FORMAT.TOP_BOTTOM:
        leftEyeScaleOffset = [1, 0.5, 0, 0];
        rightEyeScaleOffset = [1, 0.5, 0, 0.5];
        break;
4184
      case STEREO_FORMAT.LEFT_RIGHT:
        leftEyeScaleOffset = [0.5, 1, 0, 0];
        rightEyeScaleOffset = [0.5, 1, 0.5, 0];
        break;
4189
      default:
        leftEyeScaleOffset = [1, 1, 0, 0];
        rightEyeScaleOffset = [1, 1, 0, 0];
    }
4194
    var uTexScaleOffset = gl.getUniformLocation(shaderProgram, "uTexScaleOffset");
    gl.uniform4fv(uTexScaleOffset, __spread(leftEyeScaleOffset, rightEyeScaleOffset));
4197
    _super.prototype.render.call(this, ctx);
  };
4200
  __proto.getVertexPositionData = function () {
    return SphereRenderer._VERTEX_POSITION_DATA;
  };
4204
  __proto.getIndexData = function () {
    return SphereRenderer._INDEX_DATA;
  };
4208
  __proto.getTextureCoordData = function () {
    return SphereRenderer._TEXTURE_COORD_DATA;
  };
4212
  __proto.getVertexShaderSource = function () {
    return "\nattribute vec3 aVertexPosition;\nattribute vec2 aTextureCoord;\nuniform mat4 uMVMatrix;\nuniform mat4 uPMatrix;\nuniform float uEye;\nuniform vec4 uTexScaleOffset[2];\nvarying highp vec2 vTextureCoord;\nvoid main(void) {\n  vec4 scaleOffset = uTexScaleOffset[int(uEye)];\n  vTextureCoord = aTextureCoord.xy * scaleOffset.xy + scaleOffset.zw;\n  gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);\n}";
  };
4216
  __proto.getFragmentShaderSource = function () {
    return "\nprecision highp float;\nvarying highp vec2 vTextureCoord;\nuniform sampler2D uSampler;\nvoid main(void) {\n  gl_FragColor = texture2D(uSampler, vTextureCoord.st);\n}";
  };
4220
  __proto.updateTexture = function (gl, image) {
    WebGLUtils.texImage2D(gl, gl.TEXTURE_2D, this._getPixelSource(image));
  };
4224
  __proto.bindTexture = function (gl, texture, image) {
    // Make sure image isn't too big
    var _a = this.getDimension(image),
        width = _a.width,
        height = _a.height;
4230
    var size = Math.max(width, height);
    var maxSize = WebGLUtils.getMaxTextureSize(gl);
4233
    if (size > maxSize) {
      this._triggerError("Image width(" + width + ") exceeds device limit(" + maxSize + "))");
4236
      return;
    } // Pixel Source for IE11 & Video
4239
4240
    this._initPixelSource(image);
4242
    gl.activeTexture(gl.TEXTURE0);
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
    gl.bindTexture(gl.TEXTURE_2D, texture);
    this.updateTexture(gl, image);
  };
4248
  SphereRenderer._VERTEX_POSITION_DATA = vertexPositionData;
  SphereRenderer._TEXTURE_COORD_DATA = textureCoordData;
  SphereRenderer._INDEX_DATA = indexData;
  return SphereRenderer;
}(Renderer);
4254
var MIN_ASPECT_RATIO_FOR_FULL_PANORAMA = 6;
var longitudeBands$1 = 60;
var textureCoordData$1 = [];
var vertexPositionData$1 = [];
var indexData$1 = [];
4260
var CylinderRenderer =
/*#__PURE__*/
function (_super) {
  __extends(CylinderRenderer, _super);
4265
  function CylinderRenderer() {
    return _super !== null && _super.apply(this, arguments) || this;
  }
4269
  var __proto = CylinderRenderer.prototype;
4271
  __proto.getVertexPositionData = function () {
    return CylinderRenderer._VERTEX_POSITION_DATA;
  };
4275
  __proto.getIndexData = function () {
    return CylinderRenderer._INDEX_DATA;
  };
4279
  __proto.getTextureCoordData = function () {
    return CylinderRenderer._TEXTURE_COORD_DATA;
  };
4283
  __proto.getVertexShaderSource = function () {
    return "\nattribute vec3 aVertexPosition;\nattribute vec2 aTextureCoord;\nuniform mat4 uMVMatrix;\nuniform mat4 uPMatrix;\nvarying highp vec2 vTextureCoord;\nvoid main(void) {\n  vTextureCoord = aTextureCoord;\n  gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);\n}";
  };
4287
  __proto.getFragmentShaderSource = function () {
    return "\nprecision highp float;\nvarying highp vec2 vTextureCoord;\nuniform sampler2D uSampler;\nvoid main(void) {\n  gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));\n}";
  };
4291
  __proto.updateTexture = function (gl, image) {
    WebGLUtils.texImage2D(gl, gl.TEXTURE_2D, this._getPixelSource(image));
  };
4295
  __proto.bindTexture = function (gl, texture, image) {
    // Make sure image isn't too big
    var _a = this.getDimension(image),
        width = _a.width,
        height = _a.height;
4301
    var size = Math.max(width, height);
    var maxSize = WebGLUtils.getMaxTextureSize(gl);
    var resizeDimension;
4305
    if (size > maxSize) {
      this._triggerError("Image width(" + width + ") exceeds device texture limit(" + maxSize + "))"); // Request resizing texture.
4308
      /**
       * TODO: Is it need to apply on another projection type?
       */
4312
4313
      resizeDimension = width > height ? {
        width: maxSize,
        height: maxSize * height / width
      } : {
        width: maxSize * width / height,
        height: maxSize
      };
    } // Pixel Source for IE11 & Video or resizing needed
4322
4323
    this._initPixelSource(image, resizeDimension);
4325
    gl.activeTexture(gl.TEXTURE0);
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
    gl.bindTexture(gl.TEXTURE_2D, texture);
    this.updateTexture(gl, image);
  };
4331
  __proto.updateShaderData = function (_a) {
    var _b = _a.imageAspectRatio,
        imageAspectRatio = _b === void 0 ? MIN_ASPECT_RATIO_FOR_FULL_PANORAMA : _b;
    var lngIdx;
    var cylinderMaxRadian;
    var halfCylinderY;
    var rotated;
    var aspectRatio; // Exception case: orientation is rotated.
4340
    if (imageAspectRatio < 1) {
      /**
       * If rotated is true, we assume that image is rotated counter clockwise.
       * TODO: If there's other rotation, it is need to implement by each rotation.
       */
      rotated = true;
      aspectRatio = 1 / imageAspectRatio;
    } else {
      rotated = false;
      aspectRatio = imageAspectRatio;
    }
4352
    if (aspectRatio >= MIN_ASPECT_RATIO_FOR_FULL_PANORAMA) {
      var fov = 360 / aspectRatio;
      cylinderMaxRadian = 2 * Math.PI; // 360 deg
4356
      halfCylinderY = Math.tan(glMatrix.glMatrix.toRadian(fov / 2));
    } else {
      cylinderMaxRadian = aspectRatio;
      halfCylinderY = 0.5; // Range of cylinder is [-0.5, 0.5] to make height to 1.
    } // initialize shader data before update
4362
4363
    textureCoordData$1.length = 0;
    vertexPositionData$1.length = 0;
    indexData$1.length = 0;
    var CYLIDER_Y = [-halfCylinderY, halfCylinderY];
    var startAngleForCenterAlign = Math.PI / 2 + (2 * Math.PI - cylinderMaxRadian) / 2; // Math.PI / 2 start point when cylinderMaxRadian is 2 phi(360)
    // console.log("cylinderMaxRadian:", glMatrix.toDegree(cylinderMaxRadian), "CYLIDER_Y", CYLIDER_Y, "start angle", glMatrix.toDegree(startAngleForCenterAlign));
4370
    for (var yIdx = 0, yLength = CYLIDER_Y.length; yIdx < yLength
    /* bottom & top */
    ; yIdx++) {
      for (lngIdx = 0; lngIdx <= longitudeBands$1; lngIdx++) {
        var angle = startAngleForCenterAlign + lngIdx / longitudeBands$1 * cylinderMaxRadian;
        var x = Math.cos(angle);
        var y = CYLIDER_Y[yIdx];
        var z = Math.sin(angle);
        var u = void 0;
        var v = void 0;
4381
        if (rotated) {
          // Rotated 90 degree (counter clock wise)
          u = 1 - yIdx; // yLength - yIdx;
4385
          v = lngIdx / longitudeBands$1;
        } else {
          // 	// Normal case (Not rotated)
          u = lngIdx / longitudeBands$1;
          v = yIdx;
        }
4392
        textureCoordData$1.push(u, v);
        vertexPositionData$1.push(x, y, z);
4395
        if (yIdx === 0 && lngIdx < longitudeBands$1) {
          var a = lngIdx;
          var b = a + longitudeBands$1 + 1;
          indexData$1.push(a, b, a + 1, b, b + 1, a + 1);
        }
      }
    }
  };
4404
  CylinderRenderer._VERTEX_POSITION_DATA = vertexPositionData$1;
  CylinderRenderer._TEXTURE_COORD_DATA = textureCoordData$1;
  CylinderRenderer._INDEX_DATA = indexData$1;
  return CylinderRenderer;
}(Renderer);
4410
var VR_DISPLAY_PRESENT_CHANGE = "vrdisplaypresentchange";
var DEFAULT_LEFT_BOUNDS = [0, 0, 0.5, 1];
var DEFAULT_RIGHT_BOUNDS = [0.5, 0, 0.5, 1];
var EYES = {
  LEFT: "left",
  RIGHT: "right"
};
4418
var VRManager =
/*#__PURE__*/
function () {
  function VRManager() {
    var _this = this;
4424
    this.destroy = function () {
      var vrDisplay = _this._vrDisplay;
4427
      _this.removeEndCallback(_this.destroy);
4429
      if (vrDisplay && vrDisplay.isPresenting) {
        void vrDisplay.exitPresent();
      }
4433
      _this._clear();
    };
4436
    this._frameData = new window.VRFrameData();
4438
    this._clear();
  }
4441
  var __proto = VRManager.prototype;
  Object.defineProperty(__proto, "context", {
    get: function () {
      return this._vrDisplay;
    },
    enumerable: false,
    configurable: true
  });
4450
  __proto.canRender = function () {
    return Boolean(this._vrDisplay);
  };
4454
  __proto.beforeRender = function (gl) {
    // Render to the default backbuffer
    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
  };
4459
  __proto.afterRender = function () {
    this._vrDisplay.submitFrame();
  };
4463
  __proto.getEyeParams = function (gl) {
    var display = this._vrDisplay;
    var halfWidth = gl.drawingBufferWidth * 0.5;
    var height = gl.drawingBufferHeight;
    var frameData = this._frameData;
    display.getFrameData(frameData);
    var leftMVMatrix = frameData.leftViewMatrix;
    var rightMVMatrix = frameData.rightViewMatrix;
    glMatrix.mat4.rotateY(leftMVMatrix, leftMVMatrix, this._yawOffset);
    glMatrix.mat4.rotateY(rightMVMatrix, rightMVMatrix, this._yawOffset);
    return [{
      viewport: [0, 0, halfWidth, height],
      mvMatrix: leftMVMatrix,
      pMatrix: frameData.leftProjectionMatrix
    }, {
      viewport: [halfWidth, 0, halfWidth, height],
      mvMatrix: rightMVMatrix,
      pMatrix: frameData.rightProjectionMatrix
    }];
  };
4484
  __proto.isPresenting = function () {
    return Boolean(this._vrDisplay && this._vrDisplay.isPresenting);
  };
4488
  __proto.addEndCallback = function (callback) {
    window.addEventListener(VR_DISPLAY_PRESENT_CHANGE, callback);
  };
4492
  __proto.removeEndCallback = function (callback) {
    window.removeEventListener(VR_DISPLAY_PRESENT_CHANGE, callback);
  };
4496
  __proto.requestPresent = function (canvas) {
    var _this = this;
4499
    return navigator.getVRDisplays().then(function (displays) {
      var vrDisplay = displays.length && displays[0];
4502
      if (!vrDisplay) {
        return Promise$1.reject(new Error("No displays available."));
      }
4506
      if (!vrDisplay.capabilities.canPresent) {
        return Promise$1.reject(new Error("Display lacking capability to present."));
      }
4510
      return vrDisplay.requestPresent([{
        source: canvas
      }]).then(function () {
        var leftEye = vrDisplay.getEyeParameters(EYES.LEFT);
        var rightEye = vrDisplay.getEyeParameters(EYES.RIGHT);
        canvas.width = Math.max(leftEye.renderWidth, rightEye.renderWidth) * 2;
        canvas.height = Math.max(leftEye.renderHeight, rightEye.renderHeight);
4518
        _this._setDisplay(vrDisplay);
      });
    });
  };
4523
  __proto.setYawOffset = function (offset) {
    this._yawOffset = offset;
  };
4527
  __proto._setDisplay = function (vrDisplay) {
    this._vrDisplay = vrDisplay;
    var layers = vrDisplay.getLayers();
4531
    if (layers.length) {
      var layer = layers[0];
      this._leftBounds = layer.leftBounds;
      this._rightBounds = layer.rightBounds;
    }
4537
    this.addEndCallback(this.destroy);
  };
4540
  __proto._clear = function () {
    this._vrDisplay = null;
    this._leftBounds = DEFAULT_LEFT_BOUNDS;
    this._rightBounds = DEFAULT_RIGHT_BOUNDS;
    this._yawOffset = 0;
  };
4547
  return VRManager;
}();
4550
var XR_REFERENCE_SPACE = "local";
4552
var XRManager =
/*#__PURE__*/
function () {
  function XRManager(options) {
    var _this = this;
4558
    if (options === void 0) {
      options = {};
    }
4562
    this.destroy = function () {
      var xrSession = _this._xrSession;
4565
      _this.removeEndCallback(_this.destroy);
4567
      if (xrSession) {
        // Capture to avoid errors
        xrSession.end().then(function () {
          return void 0;
        }, function () {
          return void 0;
        });
      }
4576
      _this._clear();
    };
4579
    this._clear();
4581
    this._options = options;
  }
4584
  var __proto = XRManager.prototype;
  Object.defineProperty(__proto, "context", {
    get: function () {
      return this._xrSession;
    },
    enumerable: false,
    configurable: true
  });
4593
  __proto.canRender = function (frame) {
    var pose = frame.getViewerPose(this._xrRefSpace);
    return Boolean(pose);
  };
4598
  __proto.beforeRender = function (gl, frame) {
    var session = frame.session;
    var baseLayer = session.renderState.baseLayer;
    gl.bindFramebuffer(gl.FRAMEBUFFER, baseLayer.framebuffer);
  }; // eslint-disable-next-line @typescript-eslint/no-empty-function
4604
4605
  __proto.afterRender = function () {};
4607
  __proto.getEyeParams = function (gl, frame) {
    var _this = this;
4610
    var session = frame.session;
    var pose = frame.getViewerPose(this._xrRefSpace);
4613
    if (!pose) {
      // Can't render
      return null;
    }
4618
    var glLayer = session.renderState.baseLayer;
    return pose.views.map(function (view) {
      var viewport = glLayer.getViewport(view);
      var mvMatrix = view.transform.inverse.matrix;
4623
      if (IS_SAFARI_ON_DESKTOP) {
        glMatrix.mat4.rotateX(mvMatrix, mvMatrix, glMatrix.glMatrix.toRadian(180));
      }
4627
      glMatrix.mat4.rotateY(mvMatrix, mvMatrix, _this._yawOffset);
      return {
        viewport: [viewport.x, viewport.y, viewport.width, viewport.height],
        mvMatrix: mvMatrix,
        pMatrix: view.projectionMatrix
      };
    });
  };
4636
  __proto.isPresenting = function () {
    return this._presenting;
  };
4640
  __proto.addEndCallback = function (callback) {
    var _a;
4643
    (_a = this._xrSession) === null || _a === void 0 ? void 0 : _a.addEventListener("end", callback);
  };
4646
  __proto.removeEndCallback = function (callback) {
    var _a;
4649
    (_a = this._xrSession) === null || _a === void 0 ? void 0 : _a.removeEventListener("end", callback);
  };
4652
  __proto.requestPresent = function (canvas, gl) {
    return __awaiter(this, void 0, void 0, function () {
      var options, attributes;
4656
      var _this = this;
4658
      return __generator(this, function (_a) {
        switch (_a.label) {
          case 0:
            options = merge({
              requiredFeatures: [XR_REFERENCE_SPACE]
            }, this._options);
            attributes = gl.getContextAttributes();
            if (!(attributes && attributes.xrCompatible !== true)) return [3
            /*break*/
            , 2];
            return [4
            /*yield*/
            , gl.makeXRCompatible()];
4672
          case 1:
            _a.sent();
4675
            _a.label = 2;
4677
          case 2:
            return [2
            /*return*/
            , navigator.xr.requestSession("immersive-vr", options).then(function (session) {
              var xrLayer = new window.XRWebGLLayer(session, gl);
              session.updateRenderState({
                baseLayer: xrLayer
              });
              return session.requestReferenceSpace(XR_REFERENCE_SPACE).then(function (refSpace) {
                _this._setSession(session, xrLayer, refSpace);
              });
            })];
        }
      });
    });
  };
4694
  __proto.setYawOffset = function (offset) {
    this._yawOffset = offset;
  };
4698
  __proto._setSession = function (session, xrLayer, refSpace) {
    this._xrSession = session;
    this._xrLayer = xrLayer;
    this._xrRefSpace = refSpace;
    this._presenting = true;
    this.addEndCallback(this.destroy);
  };
4706
  __proto._clear = function () {
    this._xrSession = null;
    this._xrLayer = null;
    this._xrRefSpace = null;
    this._presenting = false;
    this._yawOffset = 0;
    this._options = {};
  };
4715
  return XRManager;
}();
4718
var WebGLAnimator =
/*#__PURE__*/
function () {
  function WebGLAnimator() {
    var _this = this;
    /**
     * There can be more than 1 argument when we use XRSession's raf
     */
4727
4728
    this._onLoop = function () {
      var args = [];
4731
      for (var _i = 0; _i < arguments.length; _i++) {
        args[_i] = arguments[_i];
      }
4735
      _this._callback.apply(_this, __spread(args));
4737
      _this._rafId = _this._context.requestAnimationFrame(_this._onLoop);
    };
    /**
     * MacOS X Safari Bug Fix
     * This code guarantees that rendering should be occurred.
     *
     * In MacOS X(10.14.2), Safari (12.0.2)
     * The requestAnimationFrame(RAF) callback is called just after previous RAF callback without term
     * only if requestAnimationFrame is called for next frame while updating frame is delayed (~over 2ms)
     * So browser cannot render the frame and may be freezing.
     */
4749
4750
    this._onLoopNextTick = function () {
      var args = [];
4753
      for (var _i = 0; _i < arguments.length; _i++) {
        args[_i] = arguments[_i];
      }
4757
      var before = performance.now();
4759
      _this._callback.apply(_this, __spread(args));
4761
      var diff = performance.now() - before;
4763
      if (_this._rafTimer >= 0) {
        clearTimeout(_this._rafTimer);
        _this._rafTimer = -1;
      }
      /* Use requestAnimationFrame only if current rendering could be possible over 60fps (1000/60) */
4769
4770
      if (diff < 16) {
        _this._rafId = _this._context.requestAnimationFrame(_this._onLoop);
      } else {
        /* Otherwise, Call setTimeout instead of requestAnimationFrame to gaurantee renering should be occurred */
        _this._rafTimer = window.setTimeout(_this._onLoop, 0);
      }
    };
4778
    this._callback = null;
    this._context = window;
    this._rafId = -1;
    this._rafTimer = -1;
  }
4784
  var __proto = WebGLAnimator.prototype;
4786
  __proto.setCallback = function (callback) {
    this._callback = callback;
  };
4790
  __proto.setContext = function (context) {
    this._context = context;
  };
4794
  __proto.start = function () {
    var context = this._context;
    var callback = this._callback; // No context / callback set
4798
    if (!context || !callback) return; // Animation already started
4800
    if (this._rafId >= 0 || this._rafTimer >= 0) return;
4802
    if (IS_SAFARI_ON_DESKTOP) {
      this._rafId = context.requestAnimationFrame(this._onLoopNextTick);
    } else {
      this._rafId = context.requestAnimationFrame(this._onLoop);
    }
  };
4809
  __proto.stop = function () {
    if (this._rafId >= 0) {
      this._context.cancelAnimationFrame(this._rafId);
    }
4814
    if (this._rafTimer >= 0) {
      clearTimeout(this._rafTimer);
    }
4818
    this._rafId = -1;
    this._rafTimer = -1;
  };
4822
  return WebGLAnimator;
}();
4825
var ImageType = PROJECTION_TYPE; // eslint-disable-next-line @typescript-eslint/naming-convention
4827
var DEVICE_PIXEL_RATIO = devicePixelRatio || 1; // DEVICE_PIXEL_RATIO 가 2를 초과하는 경우는 리소스 낭비이므로 2로 맞춘다.
4829
if (DEVICE_PIXEL_RATIO > 2) {
  DEVICE_PIXEL_RATIO = 2;
} // define custom events name
4833
/**
 * TODO: how to manage events/errortype with PanoViewer
 *
 * I think renderer events should be seperated from viewer events although it has same name.
 */
4839
4840
var EVENTS$1 = {
  BIND_TEXTURE: "bindTexture",
  IMAGE_LOADED: "imageLoaded",
  ERROR: "error",
  RENDERING_CONTEXT_LOST: "renderingContextLost",
  RENDERING_CONTEXT_RESTORE: "renderingContextRestore"
};
var ERROR_TYPE$1 = {
  INVALID_DEVICE: 10,
  NO_WEBGL: 11,
  FAIL_IMAGE_LOAD: 12,
  RENDERER_ERROR: 13
};
4854
var PanoImageRenderer =
/*#__PURE__*/
function (_super) {
  __extends(PanoImageRenderer, _super);
4859
  function PanoImageRenderer(image, width, height, isVideo, container, canvasClass, sphericalConfig, renderingContextAttributes) {
    var _this = // Super constructor
    _super.call(this) || this;
4863
    _this.textureCoordBuffer = null;
    _this.vertexBuffer = null;
    _this.indexBuffer = null;
4867
    _this.exitVR = function () {
      var vr = _this._vr;
      var gl = _this.context;
      var animator = _this._animator;
      if (!vr) return;
      vr.removeEndCallback(_this.exitVR);
      vr.destroy();
      _this._vr = null; // Restore canvas & context on iOS
4876
      if (IS_IOS) {
        _this._restoreStyle();
      }
4880
      _this.updateViewportDimensions(_this.width, _this.height);
4882
      _this._updateViewport();
4884
      gl.bindFramebuffer(gl.FRAMEBUFFER, null);
4886
      _this._bindBuffers();
4888
      _this._shouldForceDraw = true;
      animator.stop();
      animator.setContext(window);
      animator.setCallback(_this._render.bind(_this));
      animator.start();
    };
4895
    _this._renderStereo = function (time, frame) {
      var e_1, _a;
4898
      var vr = _this._vr;
      var gl = _this.context;
      var eyeParams = vr.getEyeParams(gl, frame);
      if (!eyeParams) return;
      vr.beforeRender(gl, frame);
4904
      try {
        // Render both eyes
        for (var _b = __values([0, 1]), _c = _b.next(); !_c.done; _c = _b.next()) {
          var eyeIndex = _c.value;
          var eyeParam = eyeParams[eyeIndex];
          _this.mvMatrix = eyeParam.mvMatrix;
          _this.pMatrix = eyeParam.pMatrix;
          gl.viewport.apply(gl, __spread(eyeParam.viewport));
          gl.uniform1f(_this.shaderProgram.uEye, eyeIndex);
4914
          _this._bindBuffers();
4916
          _this._draw();
        }
      } catch (e_1_1) {
        e_1 = {
          error: e_1_1
        };
      } finally {
        try {
          if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
        } finally {
          if (e_1) throw e_1.error;
        }
      }
4930
      vr.afterRender();
    };
4933
    _this._onFirstVRFrame = function (time, frame) {
      var vr = _this._vr;
      var gl = _this.context;
      var animator = _this._animator; // If rendering is not ready, wait for next frame
4938
      if (!vr.canRender(frame)) return;
      var minusZDir = glMatrix.vec3.fromValues(0, 0, -1);
      var eyeParam = vr.getEyeParams(gl, frame)[0]; // Extract only rotation
4942
      var mvMatrix = glMatrix.mat3.fromMat4(glMatrix.mat3.create(), eyeParam.mvMatrix);
      var pMatrix = glMatrix.mat3.fromMat4(glMatrix.mat3.create(), eyeParam.pMatrix);
      var mvInv = glMatrix.mat3.invert(glMatrix.mat3.create(), mvMatrix);
      var pInv = glMatrix.mat3.invert(glMatrix.mat3.create(), pMatrix);
      var viewDir = glMatrix.vec3.transformMat3(glMatrix.vec3.create(), minusZDir, pInv);
      glMatrix.vec3.transformMat3(viewDir, viewDir, mvInv);
      var yawOffset = util.yawOffsetBetween(viewDir, glMatrix.vec3.fromValues(0, 0, 1));
4950
      if (yawOffset === 0) {
        // If the yawOffset is exactly 0, then device sensor is not ready
        // So read it again until it has any value in it
        return;
      }
4956
      vr.setYawOffset(yawOffset);
      animator.setCallback(_this._renderStereo);
    };
4960
    _this.sphericalConfig = sphericalConfig;
    _this.fieldOfView = sphericalConfig.fieldOfView;
    _this.width = width;
    _this.height = height;
    _this._lastQuaternion = null;
    _this._lastYaw = null;
    _this._lastPitch = null;
    _this._lastFieldOfView = null;
    _this.pMatrix = glMatrix.mat4.create();
    _this.mvMatrix = glMatrix.mat4.create(); // initialzie pMatrix
4971
    glMatrix.mat4.perspective(_this.pMatrix, glMatrix.glMatrix.toRadian(_this.fieldOfView), width / height, 0.1, 100);
    _this.textureCoordBuffer = null;
    _this.vertexBuffer = null;
    _this.indexBuffer = null;
    _this.canvas = _this._initCanvas(container, canvasClass, width, height);
4977
    _this._setDefaultCanvasStyle();
4979
    _this._wrapper = null; // canvas wrapper
4981
    _this._wrapperOrigStyle = null;
    _this._renderingContextAttributes = renderingContextAttributes;
    _this._image = null;
    _this._imageConfig = null;
    _this._imageIsReady = false;
    _this._shouldForceDraw = false;
    _this._keepUpdate = false; // Flag to specify 'continuous update' on video even when still.
4989
    _this._onContentLoad = _this._onContentLoad.bind(_this);
    _this._onContentError = _this._onContentError.bind(_this);
    _this._animator = new WebGLAnimator(); // VR/XR manager
4993
    _this._vr = null;
4995
    if (image) {
      _this.setImage({
        image: image,
        imageType: sphericalConfig.imageType,
        isVideo: isVideo,
        cubemapConfig: sphericalConfig.cubemapConfig
      });
    }
5004
    return _this;
  } // FIXME: Please refactor me to have more loose connection to yawpitchcontrol
5007
5008
  var __proto = PanoImageRenderer.prototype;
5010
  __proto.setYawPitchControl = function (yawPitchControl) {
    this._yawPitchControl = yawPitchControl;
  };
5014
  __proto.getContent = function () {
    return this._image;
  };
5018
  __proto.setImage = function (_a) {
    var image = _a.image,
        imageType = _a.imageType,
        _b = _a.isVideo,
        isVideo = _b === void 0 ? false : _b,
        cubemapConfig = _a.cubemapConfig;
    this._imageIsReady = false;
    this._isVideo = isVideo;
    this._imageConfig = __assign({
      /* RLUDBF is abnormal, we use it on CUBEMAP only */
      order: imageType === ImageType.CUBEMAP ? "RLUDBF" : "RLUDFB",
      tileConfig: {
        flipHorizontal: false,
        rotation: 0
      },
      trim: 0
    }, cubemapConfig);
5036
    this._setImageType(imageType);
5038
    if (this._contentLoader) {
      this._contentLoader.destroy();
    }
5042
    this._contentLoader = new ImReady().on("ready", this._onContentLoad).on("error", this._onContentError);
5044
    if (isVideo) {
      this._image = toVideoElement(image);
5047
      this._contentLoader.check([this._image]);
5049
      this._keepUpdate = true;
    } else {
      this._image = toImageElement(image);
5053
      this._contentLoader.check(Array.isArray(this._image) ? this._image : [this._image]);
5055
      this._keepUpdate = false;
    }
  };
5059
  __proto.isImageLoaded = function () {
    return !!this._image && this._imageIsReady && (!this._isVideo || this._image.readyState >= 2
    /* HAVE_CURRENT_DATA */
    );
  };
5065
  __proto.bindTexture = function () {
    var _this = this;
5068
    return new Promise$1(function (res, rej) {
      var contentLoader = _this._contentLoader;
5071
      if (!_this._image) {
        return rej("Image is not defined");
      }
5075
      if (!contentLoader) {
        return rej("ImageLoader is not initialized");
      }
5079
      if (contentLoader.isReady()) {
        _this._bindTexture();
5082
        res();
      } else {
        contentLoader.check(Array.isArray(_this._image) ? _this._image : [_this._image]);
        contentLoader.once("ready", function (e) {
          if (e.errorCount > 0) {
            rej("Failed to load images.");
          } else {
            _this._bindTexture();
5091
            res();
          }
        });
      }
    });
  }; // 부모 엘리먼트에 canvas 를 붙임
5098
5099
  __proto.attachTo = function (parentElement) {
    if (!this._hasExternalCanvas) {
      this.detach();
      parentElement.appendChild(this.canvas);
    }
5105
    this._wrapper = parentElement;
  };
5108
  __proto.forceContextLoss = function () {
    if (this.hasRenderingContext()) {
      var loseContextExtension = this.context.getExtension("WEBGL_lose_context");
5112
      if (loseContextExtension) {
        loseContextExtension.loseContext();
      }
    }
  }; // 부모 엘리먼트에서 canvas 를 제거
5118
5119
  __proto.detach = function () {
    if (!this._hasExternalCanvas && this.canvas.parentElement) {
      this.canvas.parentElement.removeChild(this.canvas);
    }
  };
5125
  __proto.destroy = function () {
    if (this._contentLoader) {
      this._contentLoader.destroy();
    }
5130
    this._animator.stop();
5132
    this.detach();
    this.forceContextLoss();
    this.off();
    this.canvas.removeEventListener("webglcontextlost", this._onWebglcontextlost);
    this.canvas.removeEventListener("webglcontextrestored", this._onWebglcontextrestored);
  };
5139
  __proto.hasRenderingContext = function () {
    var ctx = this.context;
5142
    if (!ctx || ctx.isContextLost() || !ctx.getProgramParameter(this.shaderProgram, ctx.LINK_STATUS)) {
      return false;
    }
5146
    return true;
  };
5149
  __proto.updateFieldOfView = function (fieldOfView) {
    this.fieldOfView = fieldOfView;
5152
    this._updateViewport();
  };
5155
  __proto.updateViewportDimensions = function (width, height) {
    var viewPortChanged = false;
    this.width = width;
    this.height = height;
    var w = width * DEVICE_PIXEL_RATIO;
    var h = height * DEVICE_PIXEL_RATIO;
5162
    if (w !== this.canvas.width) {
      this.canvas.width = w;
      viewPortChanged = true;
    }
5167
    if (h !== this.canvas.height) {
      this.canvas.height = h;
      viewPortChanged = true;
    }
5172
    if (!viewPortChanged) {
      return;
    }
5176
    this._updateViewport();
5178
    this._shouldForceDraw = true;
  };
5181
  __proto.keepUpdate = function (doUpdate) {
    if (doUpdate && this.isImageLoaded() === false) {
      // Force to draw a frame after image is loaded on render()
      this._shouldForceDraw = true;
    }
5187
    this._keepUpdate = doUpdate;
  };
5190
  __proto.startRender = function () {
    this._animator.setCallback(this._render.bind(this));
5193
    this._animator.start();
  };
5196
  __proto.stopRender = function () {
    this._animator.stop();
  };
5200
  __proto.renderWithQuaternion = function (quaternion, fieldOfView) {
    if (!this.isImageLoaded()) {
      return;
    }
5205
    if (this._keepUpdate === false && this._lastQuaternion && glMatrix.quat.exactEquals(this._lastQuaternion, quaternion) && this.fieldOfView && this.fieldOfView === fieldOfView && this._shouldForceDraw === false) {
      return;
    } // updatefieldOfView only if fieldOfView is changed.
5209
5210
    if (fieldOfView !== undefined && fieldOfView !== this.fieldOfView) {
      this.updateFieldOfView(fieldOfView);
    }
5214
    this.mvMatrix = glMatrix.mat4.fromQuat(glMatrix.mat4.create(), quaternion);
5216
    this._draw();
5218
    this._lastQuaternion = glMatrix.quat.clone(quaternion);
5220
    if (this._shouldForceDraw) {
      this._shouldForceDraw = false;
    }
  };
5225
  __proto.renderWithYawPitch = function (yaw, pitch, fieldOfView) {
    if (!this.isImageLoaded()) {
      return;
    }
5230
    if (this._keepUpdate === false && this._lastYaw !== null && this._lastYaw === yaw && this._lastPitch !== null && this._lastPitch === pitch && this.fieldOfView && this.fieldOfView === fieldOfView && this._shouldForceDraw === false) {
      return;
    } // fieldOfView 가 존재하면서 기존의 값과 다를 경우에만 업데이트 호출
5234
5235
    if (fieldOfView !== undefined && fieldOfView !== this.fieldOfView) {
      this.updateFieldOfView(fieldOfView);
    }
5239
    glMatrix.mat4.identity(this.mvMatrix);
    glMatrix.mat4.rotateX(this.mvMatrix, this.mvMatrix, -glMatrix.glMatrix.toRadian(pitch));
    glMatrix.mat4.rotateY(this.mvMatrix, this.mvMatrix, -glMatrix.glMatrix.toRadian(yaw));
5243
    this._draw();
5245
    this._lastYaw = yaw;
    this._lastPitch = pitch;
5248
    if (this._shouldForceDraw) {
      this._shouldForceDraw = false;
    }
  };
  /**
   * Returns projection renderer by each type
   */
5256
5257
  __proto.getProjectionRenderer = function () {
    return this._renderer;
  };
  /**
   * @return Promise
   */
5264
5265
  __proto.enterVR = function (options) {
    var vr = this._vr;
5268
    if (!WEBXR_SUPPORTED && !navigator.getVRDisplays) {
      return Promise$1.reject("VR is not available on this browser.");
    }
5272
    if (vr && vr.isPresenting()) {
      return Promise$1.resolve("VR already enabled.");
    }
5276
    return this._requestPresent(options);
  };
5279
  __proto._setImageType = function (imageType) {
    var _this = this;
5282
    if (!imageType || this._imageType === imageType) {
      return;
    }
5286
    this._imageType = imageType;
    this._isCubeMap = imageType === ImageType.CUBEMAP;
5289
    if (this._renderer) {
      this._renderer.off();
    }
5293
    switch (imageType) {
      case ImageType.CUBEMAP:
        this._renderer = new CubeRenderer();
        break;
5298
      case ImageType.CUBESTRIP:
        this._renderer = new CubeStripRenderer();
        break;
5302
      case ImageType.PANORAMA:
        this._renderer = new CylinderRenderer();
        break;
5306
      case ImageType.STEREOSCOPIC_EQUI:
        this._renderer = new SphereRenderer(this.sphericalConfig.stereoFormat);
        break;
5310
      default:
        this._renderer = new SphereRenderer(STEREO_FORMAT.NONE);
        break;
    }
5315
    this._renderer.on(Renderer.EVENTS.ERROR, function (e) {
      _this.trigger(new Component.ComponentEvent(EVENTS$1.ERROR, {
        type: ERROR_TYPE$1.RENDERER_ERROR,
        message: e.message
      }));
    });
5322
    this._initWebGL();
  };
5325
  __proto._initCanvas = function (container, canvasClass, width, height) {
    var canvasInContainer = container.querySelector("." + canvasClass);
5328
    var canvas = canvasInContainer || this._createCanvas(canvasClass);
5330
    this._hasExternalCanvas = !!canvasInContainer;
    canvas.width = width;
    canvas.height = height;
    this._onWebglcontextlost = this._onWebglcontextlost.bind(this);
    this._onWebglcontextrestored = this._onWebglcontextrestored.bind(this);
    canvas.addEventListener("webglcontextlost", this._onWebglcontextlost);
    canvas.addEventListener("webglcontextrestored", this._onWebglcontextrestored);
    return canvas;
  };
5340
  __proto._createCanvas = function (className) {
    var canvas = document.createElement("canvas");
    canvas.className = className;
    return canvas;
  };
5346
  __proto._setDefaultCanvasStyle = function () {
    var canvas = this.canvas;
    canvas.style.bottom = "0";
    canvas.style.left = "0";
    canvas.style.right = "0";
    canvas.style.top = "0";
    canvas.style.margin = "auto";
    canvas.style.maxHeight = "100%";
    canvas.style.maxWidth = "100%";
    canvas.style.outline = "none";
    canvas.style.position = "absolute";
  };
5359
  __proto._onContentError = function () {
    this._imageIsReady = false;
    this._image = null;
    this.trigger(new Component.ComponentEvent(EVENTS$1.ERROR, {
      type: ERROR_TYPE$1.FAIL_IMAGE_LOAD,
      message: "failed to load image"
    }));
    return false;
  };
5369
  __proto._triggerContentLoad = function () {
    this.trigger(new Component.ComponentEvent(EVENTS$1.IMAGE_LOADED, {
      content: this._image,
      isVideo: this._isVideo,
      projectionType: this._imageType
    }));
  };
5377
  __proto._onContentLoad = function (e) {
    if (e.errorCount > 0) return;
    this._imageIsReady = true;
5381
    this._triggerContentLoad();
  };
5384
  __proto._initShaderProgram = function () {
    var gl = this.context;
5387
    if (this.shaderProgram) {
      gl.deleteProgram(this.shaderProgram);
      this.shaderProgram = null;
    }
5392
    var renderer = this._renderer;
    var vsSource = renderer.getVertexShaderSource();
    var fsSource = renderer.getFragmentShaderSource();
    var vertexShader = WebGLUtils.createShader(gl, gl.VERTEX_SHADER, vsSource);
    var fragmentShader = WebGLUtils.createShader(gl, gl.FRAGMENT_SHADER, fsSource);
    var shaderProgram = WebGLUtils.createProgram(gl, vertexShader, fragmentShader);
5399
    if (!shaderProgram) {
      throw new Error("Failed to initialize shaders: " + WebGLUtils.getErrorNameFromWebGLErrorCode(gl.getError()));
    }
5403
    gl.useProgram(shaderProgram);
    shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
    shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
    shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
    shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler");
    shaderProgram.textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");
    shaderProgram.uEye = gl.getUniformLocation(shaderProgram, "uEye");
    gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
    gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute); // clear buffer
5413
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT | gl.STENCIL_BUFFER_BIT); // Use TEXTURE0
5415
    gl.uniform1i(shaderProgram.samplerUniform, 0);
    this.shaderProgram = shaderProgram;
  };
5419
  __proto._onWebglcontextlost = function (e) {
    e.preventDefault();
    this.trigger(new Component.ComponentEvent(EVENTS$1.RENDERING_CONTEXT_LOST));
  };
5424
  __proto._onWebglcontextrestored = function () {
    this._initWebGL();
5427
    this.trigger(new Component.ComponentEvent(EVENTS$1.RENDERING_CONTEXT_RESTORE));
  };
5430
  __proto._updateViewport = function () {
    glMatrix.mat4.perspective(this.pMatrix, glMatrix.glMatrix.toRadian(this.fieldOfView), this.canvas.width / this.canvas.height, 0.1, 100);
    this.context.viewport(0, 0, this.context.drawingBufferWidth, this.context.drawingBufferHeight);
  };
5435
  __proto._initWebGL = function () {
    var gl; // TODO: Following code does need to be executed only if width/height, cubicStrip property is changed.
5438
    try {
      this._initRenderingContext();
5441
      gl = this.context;
      this.updateViewportDimensions(this.width, this.height);
5444
      this._initShaderProgram();
    } catch (e) {
      this.trigger(new Component.ComponentEvent(EVENTS$1.ERROR, {
        type: ERROR_TYPE$1.NO_WEBGL,
        message: "no webgl support"
      }));
      this.destroy();
      console.error(e); // eslint-disable-line no-console
5453
      return;
    } // 캔버스를 투명으로 채운다.
5456
5457
    gl.clearColor(0, 0, 0, 0);
    var textureTarget = this._isCubeMap ? gl.TEXTURE_CUBE_MAP : gl.TEXTURE_2D;
5460
    if (this.texture) {
      gl.deleteTexture(this.texture);
    }
5464
    this.texture = WebGLUtils.createTexture(gl, textureTarget);
5466
    if (this._imageType === ImageType.CUBESTRIP) {
      // TODO: Apply following options on other projection type.
      gl.enable(gl.CULL_FACE); // gl.enable(gl.DEPTH_TEST);
    }
  };
5472
  __proto._initRenderingContext = function () {
    if (this.hasRenderingContext()) {
      return;
    }
5477
    if (!window.WebGLRenderingContext) {
      throw new Error("WebGLRenderingContext not available.");
    }
5481
    this.context = WebGLUtils.getWebglContext(this.canvas, this._renderingContextAttributes);
5483
    if (!this.context) {
      throw new Error("Failed to acquire 3D rendering context");
    }
  };
5488
  __proto._initBuffers = function () {
    var image = this._image;
5491
    var vertexPositionData = this._renderer.getVertexPositionData();
5493
    var indexData = this._renderer.getIndexData();
5495
    var textureCoordData = this._renderer.getTextureCoordData({
      image: image,
      imageConfig: this._imageConfig
    });
5500
    var gl = this.context;
    this.vertexBuffer = WebGLUtils.initBuffer(gl, gl.ARRAY_BUFFER, new Float32Array(vertexPositionData), 3, this.shaderProgram.vertexPositionAttribute);
    this.indexBuffer = WebGLUtils.initBuffer(gl, gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indexData), 1);
    this.textureCoordBuffer = WebGLUtils.initBuffer(gl, gl.ARRAY_BUFFER, new Float32Array(textureCoordData), this._isCubeMap ? 3 : 2, this.shaderProgram.textureCoordAttribute);
5505
    this._bindBuffers();
  };
5508
  __proto._bindTexture = function () {
    // Detect if it is EAC Format while CUBESTRIP mode.
    // We assume it is EAC if image is not 3/2 ratio.
    if (this._imageType === ImageType.CUBESTRIP) {
      var _a = this._renderer.getDimension(this._image),
          width = _a.width,
          height = _a.height;
5516
      var isEAC = width && height && width / height !== 1.5 ? 1 : 0;
      this.context.uniform1f(this.context.getUniformLocation(this.shaderProgram, "uIsEAC"), isEAC);
    } else if (this._imageType === ImageType.PANORAMA) {
      var _b = this._renderer.getDimension(this._image),
          width = _b.width,
          height = _b.height;
5523
      var imageAspectRatio = width && height && width / height;
5525
      this._renderer.updateShaderData({
        imageAspectRatio: imageAspectRatio
      });
    } // initialize shader buffers after image is loaded.(by updateShaderData)
    // because buffer may be differ by image size.(eg. CylinderRenderer)
5531
5532
    this._initBuffers();
5534
    this._renderer.bindTexture(this.context, this.texture, this._image, this._imageConfig);
5536
    this._shouldForceDraw = true;
    this.trigger(new Component.ComponentEvent(EVENTS$1.BIND_TEXTURE));
  };
5540
  __proto._updateTexture = function () {
    this._renderer.updateTexture(this.context, this._image, this._imageConfig);
  };
5544
  __proto._render = function () {
    var yawPitchControl = this._yawPitchControl;
    var fov = yawPitchControl.getFov();
5548
    if (yawPitchControl.shouldRenderWithQuaternion()) {
      var quaternion = yawPitchControl.getQuaternion();
      this.renderWithQuaternion(quaternion, fov);
    } else {
      var yawPitch = yawPitchControl.getYawPitch();
      this.renderWithYawPitch(yawPitch.yaw, yawPitch.pitch, fov);
    }
  };
5557
  __proto._bindBuffers = function () {
    var gl = this.context;
    var program = this.shaderProgram;
    var vertexBuffer = this.vertexBuffer;
    var textureCoordBuffer = this.textureCoordBuffer;
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    gl.enableVertexAttribArray(program.vertexPositionAttribute);
    gl.vertexAttribPointer(program.vertexPositionAttribute, vertexBuffer.itemSize, gl.FLOAT, false, 0, 0);
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
    gl.bindBuffer(gl.ARRAY_BUFFER, textureCoordBuffer);
    gl.enableVertexAttribArray(program.textureCoordAttribute);
    gl.vertexAttribPointer(program.textureCoordAttribute, textureCoordBuffer.itemSize, gl.FLOAT, false, 0, 0);
  };
5571
  __proto._draw = function () {
    if (this._isVideo && this._keepUpdate) {
      this._updateTexture();
    }
5576
    this._renderer.render({
      gl: this.context,
      shaderProgram: this.shaderProgram,
      indexBuffer: this.indexBuffer,
      mvMatrix: this.mvMatrix,
      pMatrix: this.pMatrix
    });
  };
5585
  __proto._requestPresent = function (options) {
    var _this = this;
5588
    var gl = this.context;
    var canvas = this.canvas;
    var animator = this._animator;
    this._vr = WEBXR_SUPPORTED ? new XRManager(options) : new VRManager();
    var vr = this._vr;
    animator.stop();
    return new Promise$1(function (resolve, reject) {
      vr.requestPresent(canvas, gl).then(function () {
        vr.addEndCallback(_this.exitVR);
        animator.setContext(vr.context);
        animator.setCallback(_this._onFirstVRFrame);
5600
        if (IS_IOS) {
          _this._setWrapperFullscreen();
        }
5604
        _this._shouldForceDraw = true;
        animator.start();
        resolve("success");
      }).catch(function (e) {
        vr.destroy();
        _this._vr = null;
        animator.start();
        reject(e);
      });
    });
  };
5616
  __proto._setWrapperFullscreen = function () {
    var wrapper = this._wrapper;
    if (!wrapper) return;
    this._wrapperOrigStyle = wrapper.getAttribute("style");
    var wrapperStyle = wrapper.style;
    wrapperStyle.width = "100vw";
    wrapperStyle.height = "100vh";
    wrapperStyle.position = "fixed";
    wrapperStyle.left = "0";
    wrapperStyle.top = "0";
    wrapperStyle.zIndex = "9999";
  };
5629
  __proto._restoreStyle = function () {
    var wrapper = this._wrapper;
    var canvas = this.canvas;
    if (!wrapper) return;
5634
    if (this._wrapperOrigStyle) {
      wrapper.setAttribute("style", this._wrapperOrigStyle);
    } else {
      wrapper.removeAttribute("style");
    }
5640
    this._wrapperOrigStyle = null; // Restore canvas style
5642
    canvas.removeAttribute("style");
5644
    this._setDefaultCanvasStyle();
  };
5647
  PanoImageRenderer.EVENTS = EVENTS$1;
  PanoImageRenderer.ERROR_TYPE = ERROR_TYPE$1;
  return PanoImageRenderer;
}(Component);
5652
/**
 * @memberof eg.view360
 * @extends eg.Component
 * PanoViewer
 */
5658
var PanoViewer =
/*#__PURE__*/
function (_super) {
  __extends(PanoViewer, _super);
  /**
   * @classdesc 360 media viewer
   * @ko 360 미디어 뷰어
   *
   * @param container The container element for the renderer. <ko>렌더러의 컨테이너 엘리먼트</ko>
   * @param options
   *
   * @param {String|HTMLImageElement} options.image Input image url or element (Use only image property or video property)<ko>입력 이미지 URL 혹은 엘리먼트(image 와 video 둘 중 하나만 설정)</ko>
   * @param {String|HTMLVideoElement} options.video Input video url or element(Use only image property or video property)<ko>입력 비디오 URL 혹은 엘리먼트(image 와 video 둘 중 하나만 설정)</ko>
   * @param {String} [options.projectionType=equirectangular] The type of projection: equirectangular, cubemap <br/>{@link eg.view360.PanoViewer.PROJECTION_TYPE}<ko>Projection 유형 : equirectangular, cubemap <br/>{@link eg.view360.PanoViewer.PROJECTION_TYPE}</ko>
   * @param {Object} options.cubemapConfig Config cubemap projection layout. It is applied when projectionType is {@link eg.view360.PanoViewer.PROJECTION_TYPE.CUBEMAP} or {@link eg.view360.PanoViewer.PROJECTION_TYPE.CUBESTRIP}<ko>cubemap projection type 의 레이아웃을 설정한다. 이 설정은 ProjectionType이 {@link eg.view360.PanoViewer.PROJECTION_TYPE.CUBEMAP} 혹은 {@link eg.view360.PanoViewer.PROJECTION_TYPE.CUBESTRIP} 인 경우에만 적용된다.</ko>
   * @param {Object} [options.cubemapConfig.order = "RLUDBF"(ProjectionType === CUBEMAP) | "RLUDFB" (ProjectionType === CUBESTRIP)] Order of cubemap faces <ko>Cubemap 형태의 이미지가 배치된 순서</ko>
   * @param {Object} [options.cubemapConfig.tileConfig = { flipHorizontal:false, rotation: 0 }] Setting about rotation angle(degree) and whether to flip horizontal for each cubemap faces, if you put this object as a array, you can set each faces with different setting. For example, [{flipHorizontal:false, rotation:90}, {flipHorizontal: true, rotation: 180}, ...]<ko>각 Cubemap 면에 대한 회전 각도/좌우반전 여부 설정, 객체를 배열 형태로 지정하여 각 면에 대한 설정을 다르게 지정할 수도 있다. 예를 들어 [{flipHorizontal:false, rotation:90}, {flipHorizontal: true, rotation: 180}, ...]과 같이 지정할 수 있다.</ko>
   * @param {Number} [options.cubemapConfig.trim=0] A px distance to discard from each tile side. You can use this value to avoid graphical glitch at where tiles are connected. This option is available when there's only one texture.<ko>각 타일의 끝으로부터 폐기할 px 거리. 이 옵션을 사용하여 타일의 접합부에서 나타나는 그래픽 결함을 완화할 수 있습니다. 이 옵션은 한 개의 텍스쳐만 사용할 때 적용 가능합니다.</ko>
   * @param {String} [options.stereoFormat="3dv"] Contents format of the stereoscopic equirectangular projection.<br/>See {@link eg.view360.PanoViewer.STEREO_FORMAT}.<ko>Stereoscopic equirectangular projection type의 콘텐츠 포맷을 설정한다.<br/>{@link eg.view360.PanoViewer.STEREO_FORMAT} 참조.</ko>
   * @param {Number} [options.width=width of container] the viewer's width. (in px) <ko>뷰어의 너비 (px 단위)</ko>
   * @param {Number} [options.height=height of container] the viewer's height.(in px) <ko>뷰어의 높이 (px 단위)</ko>
   * @param {Number} [options.yaw=0] Initial Yaw of camera (in degree) <ko>카메라의 초기 Yaw (degree 단위)</ko>
   * @param {Number} [options.pitch=0] Initial Pitch of camera (in degree) <ko>카메라의 초기 Pitch (degree 단위)</ko>
   * @param {Number} [options.fov=65] Initial vertical field of view of camera (in degree) <ko>카메라의 초기 수직 field of view (degree 단위)</ko>
   * @param {Boolean} [options.showPolePoint=false] If false, the pole is not displayed inside the viewport <ko>false 인 경우, 극점은 뷰포트 내부에 표시되지 않습니다</ko>
   * @param {Boolean} [options.useZoom=true] When true, enables zoom with the wheel and Pinch gesture <ko>true 일 때 휠 및 집기 제스춰로 확대 / 축소 할 수 있습니다.</ko>
   * @param {Boolean} [options.useKeyboard=true] When true, enables the keyboard move key control: awsd, arrow keys <ko>true 이면 키보드 이동 키 컨트롤을 활성화합니다: awsd, 화살표 키</ko>
   * @param {String} [options.gyroMode=yawPitch] Enables control through device motion. ("none", "yawPitch", "VR") <br/>{@link eg.view360.PanoViewer.GYRO_MODE} <ko>디바이스 움직임을 통한 컨트롤을 활성화 합니다. ("none", "yawPitch", "VR") <br/>{@link eg.view360.PanoViewer.GYRO_MODE} </ko>
   * @param {Array} [options.yawRange=[-180, 180]] Range of controllable Yaw values <ko>제어 가능한 Yaw 값의 범위</ko>
   * @param {Array} [options.pitchRange=[-90, 90]] Range of controllable Pitch values <ko>제어 가능한 Pitch 값의 범위</ko>
   * @param {Array} [options.fovRange=[30, 110]] Range of controllable vertical field of view values <ko>제어 가능한 수직 field of view 값의 범위</ko>
   * @param {Number} [options.touchDirection= {@link eg.view360.PanoViewer.TOUCH_DIRECTION.ALL}(6)] Direction of touch that can be controlled by user <br/>{@link eg.view360.PanoViewer.TOUCH_DIRECTION}<ko>사용자가 터치로 조작 가능한 방향 <br/>{@link eg.view360.PanoViewer.TOUCH_DIRECTION}</ko>
   * @param {String} [options.canvasClass="view360-canvas"] A class name for the canvas element inside the container element. PanoViewer will use the canvas that has this class instead of creating one if it exists<ko>콘테이너 엘리먼트 내부의 캔버스 엘리먼트의 클래스 이름. PanoViewer는 해당 클래스를 갖는 캔버스 엘리먼트가 콘테이너 엘리먼트 내부에 존재할 경우, 새로 생성하는 대신 그 엘리먼트를 사용할 것입니다</ko>
   *
   * @example
   * ```
   * // PanoViewer Creation
   * // create PanoViewer with option
   * var PanoViewer = eg.view360.PanoViewer;
   * // Area where the image will be displayed(HTMLElement)
   * var container = document.getElementById("myPanoViewer");
   *
   * var panoViewer = new PanoViewer(container, {
   *   // If projectionType is not specified, the default is "equirectangular".
   *   // Specifies an image of the "equirectangular" type.
   *   image: "/path/to/image/image.jpg"
   * });
   * ```
   *
   * @example
   * ```
   * // Cubemap Config Setting Example
   * // For support Youtube EAC projection, You should set cubemapConfig as follows.
   * cubemapConfig: {
   *   order: "LFRDBU",
   *   tileConfig: [{rotation: 0}, {rotation: 0}, {rotation: 0}, {rotation: 0}, {rotation: -90}, {rotation: 180}]
   * }
   * ```
   */
5718
5719
  function PanoViewer(container, options) {
    if (options === void 0) {
      options = {};
    }
5724
    var _this = _super.call(this) || this; // Raises the error event if webgl is not supported.
5726
5727
    if (!WebGLUtils.isWebGLAvailable()) {
      setTimeout(function () {
        _this.trigger(new Component.ComponentEvent(PANOVIEWER_EVENTS.ERROR, {
          type: ERROR_TYPE.NO_WEBGL,
          message: "no webgl support"
        }));
      }, 0);
      return _this;
    }
5737
    if (!WebGLUtils.isStableWebGL()) {
      setTimeout(function () {
        _this.trigger(new Component.ComponentEvent(PANOVIEWER_EVENTS.ERROR, {
          type: ERROR_TYPE.INVALID_DEVICE,
          message: "blacklisted browser"
        }));
      }, 0);
      return _this;
    }
5747
    if (!!options.image && !!options.video) {
      setTimeout(function () {
        _this.trigger(new Component.ComponentEvent(PANOVIEWER_EVENTS.ERROR, {
          type: ERROR_TYPE.INVALID_RESOURCE,
          message: "Specifying multi resouces(both image and video) is not valid."
        }));
      }, 0);
      return _this;
    } // Check XR support at not when imported, but when created.
    // This is intended to make polyfills easier to use.
5758
5759
    checkXRSupport();
    _this._container = container;
    _this._image = options.image || options.video;
    _this._isVideo = !!options.video;
    _this._projectionType = options.projectionType || PROJECTION_TYPE.EQUIRECTANGULAR;
    _this._cubemapConfig = __assign({
      /* RLUDBF is abnormal, we use it on CUBEMAP only for backward compatibility*/
      order: _this._projectionType === PROJECTION_TYPE.CUBEMAP ? "RLUDBF" : "RLUDFB",
      tileConfig: {
        flipHorizontal: false,
        rotation: 0
      },
      trim: 0
    }, options.cubemapConfig);
    _this._stereoFormat = options.stereoFormat || STEREO_FORMAT.TOP_BOTTOM; // If the width and height are not provided, will use the size of the container.
5775
    _this._width = options.width || parseInt(window.getComputedStyle(container).width, 10);
    _this._height = options.height || parseInt(window.getComputedStyle(container).height, 10);
    /**
     * Cache the direction for the performance in renderLoop
     *
     * This value should be updated by "change" event of YawPitchControl.
     */
5783
    _this._yaw = options.yaw || 0;
    _this._pitch = options.pitch || 0;
    _this._fov = options.fov || 65;
    _this._gyroMode = options.gyroMode || GYRO_MODE.YAWPITCH;
    _this._quaternion = null;
    _this._aspectRatio = _this._height !== 0 ? _this._width / _this._height : 1;
    _this._canvasClass = options.canvasClass || DEFAULT_CANVAS_CLASS;
    var fovRange = options.fovRange || [30, 110];
    var touchDirection = PanoViewer._isValidTouchDirection(options.touchDirection) ? options.touchDirection : YawPitchControl.TOUCH_DIRECTION_ALL;
5793
    var yawPitchConfig = __assign(__assign({}, options), {
      element: container,
      yaw: _this._yaw,
      pitch: _this._pitch,
      fov: _this._fov,
      gyroMode: _this._gyroMode,
      fovRange: fovRange,
      aspectRatio: _this._aspectRatio,
      touchDirection: touchDirection
    });
5804
    _this._isReady = false;
5806
    _this._initYawPitchControl(yawPitchConfig);
5808
    _this._initRenderer(_this._yaw, _this._pitch, _this._fov, _this._projectionType, _this._cubemapConfig);
5810
    return _this;
  }
  /**
   * Check whether the current environment can execute PanoViewer
   * @ko 현재 브라우저 환경에서 PanoViewer 실행이 가능한지 여부를 반환합니다.
   * @return PanoViewer executable <ko>PanoViewer 실행가능 여부</ko>
   */
5818
5819
  var __proto = PanoViewer.prototype;
5821
  PanoViewer.isSupported = function () {
    return WebGLUtils.isWebGLAvailable() && WebGLUtils.isStableWebGL();
  };
  /**
   * Check whether the current environment supports the WebGL
   * @ko 현재 브라우저 환경이 WebGL 을 지원하는지 여부를 확인합니다.
   * @return WebGL support <ko>WebGL 지원여부</ko>
   */
5830
5831
  PanoViewer.isWebGLAvailable = function () {
    return WebGLUtils.isWebGLAvailable();
  };
  /**
   * Check whether the current environment supports the gyro sensor.
   * @ko 현재 브라우저 환경이 자이로 센서를 지원하는지 여부를 확인합니다.
   * @param callback Function to take the gyro sensor availability as argument <ko>자이로 센서를 지원하는지 여부를 인자로 받는 함수</ko>
   */
5840
5841
  PanoViewer.isGyroSensorAvailable = function (callback) {
    if (!DeviceMotionEvent && callback) {
      callback(false);
      return;
    }
5847
    var onDeviceMotionChange;
5849
    var checkGyro = function () {
      return new Promise$1(function (res) {
        onDeviceMotionChange = function (deviceMotion) {
          var isGyroSensorAvailable = !(deviceMotion.rotationRate.alpha == null);
          res(isGyroSensorAvailable);
        };
5856
        window.addEventListener("devicemotion", onDeviceMotionChange);
      });
    };
5860
    var timeout = function () {
      return new Promise$1(function (res) {
        setTimeout(function () {
          return res(false);
        }, 1000);
      });
    };
5868
    Promise$1.race([checkGyro(), timeout()]).then(function (isGyroSensorAvailable) {
      window.removeEventListener("devicemotion", onDeviceMotionChange);
5871
      if (callback) {
        callback(isGyroSensorAvailable);
      }
5875
      PanoViewer.isGyroSensorAvailable = function (fb) {
        if (fb) {
          fb(isGyroSensorAvailable);
        }
5880
        return isGyroSensorAvailable;
      };
    });
  };
5885
  PanoViewer._isValidTouchDirection = function (direction) {
    return direction === PanoViewer.TOUCH_DIRECTION.NONE || direction === PanoViewer.TOUCH_DIRECTION.YAW || direction === PanoViewer.TOUCH_DIRECTION.PITCH || direction === PanoViewer.TOUCH_DIRECTION.ALL;
  };
  /**
   * Get the video element that the viewer is currently playing. You can use this for playback.
   * @ko 뷰어가 현재 사용 중인 비디오 요소를 얻습니다. 이 요소를 이용해 비디오의 컨트롤을 할 수 있습니다.
   * @return HTMLVideoElement<ko>HTMLVideoElement</ko>
   * @example
   * ```
   * var videoTag = panoViewer.getVideo();
   * videoTag.play(); // play the video!
   * ```
   */
5899
5900
  __proto.getVideo = function () {
    if (!this._isVideo) {
      return null;
    }
5905
    return this._photoSphereRenderer.getContent();
  };
  /**
   * Set the video information to be used by the viewer.
   * @ko 뷰어가 사용할 이미지 정보를 설정합니다.
   * @param {string|HTMLVideoElement|object} video Input video url or element or config object<ko>입력 비디오 URL 혹은 엘리먼트 혹은 설정객체를 활용(image 와 video 둘 중 하나만 설정)</ko>
   * @param {object} param
   * @param {string} [param.projectionType={@link eg.view360.PanoViewer.PROJECTION_TYPE.EQUIRECTANGULAR}("equirectangular")] Projection Type<ko>프로젝션 타입</ko>
   * @param {object} param.cubemapConfig config cubemap projection layout. <ko>cubemap projection type 의 레이아웃 설정</ko>
   * @param {string} [param.stereoFormat="3dv"] Contents format of the stereoscopic equirectangular projection. See {@link eg.view360.PanoViewer.STEREO_FORMAT}.<ko>Stereoscopic equirectangular projection type의 콘텐츠 포맷을 설정한다. {@link eg.view360.PanoViewer.STEREO_FORMAT} 참조.</ko>
   *
   * @return PanoViewer instance<ko>PanoViewer 인스턴스</ko>
   * @example
   * ```
   * panoViewer.setVideo("/path/to/video/video.mp4", {
   *     projectionType: eg.view360.PanoViewer.PROJECTION_TYPE.EQUIRECTANGULAR
   * });
   * ```
   */
5925
5926
  __proto.setVideo = function (video, param) {
    if (param === void 0) {
      param = {};
    }
5931
    if (video) {
      this.setImage(video, {
        projectionType: param.projectionType,
        isVideo: true,
        cubemapConfig: param.cubemapConfig,
        stereoFormat: param.stereoFormat
      });
    }
5940
    return this;
  };
  /**
   * Get the image information that the viewer is currently using.
   * @ko 뷰어가 현재 사용하고있는 이미지 정보를 얻습니다.
   * @return Image Object<ko>이미지 객체</ko>
   * @example
   * var imageObj = panoViewer.getImage();
   */
5950
5951
  __proto.getImage = function () {
    if (this._isVideo) {
      return null;
    }
5956
    return this._photoSphereRenderer.getContent();
  };
  /**
   * Set the image information to be used by the viewer.
   * @ko 뷰어가 사용할 이미지 정보를 설정합니다.
   * @param {string|HTMLElement|object} image Input image url or element or config object<ko>입력 이미지 URL 혹은 엘리먼트 혹은 설정객체를 활용(image 와 video 둘 중 하나만 설정한다.)</ko>
   * @param {object} param Additional information<ko>이미지 추가 정보</ko>
   * @param {string} [param.projectionType="equirectangular"] Projection Type<ko>프로젝션 타입</ko>
   * @param {object} param.cubemapConfig config cubemap projection layout. <ko>cubemap projection type 레이아웃</ko>
   * @param {string} [param.stereoFormat="3dv"] Contents format of the stereoscopic equirectangular projection. See {@link eg.view360.PanoViewer.STEREO_FORMAT}.<ko>Stereoscopic equirectangular projection type의 콘텐츠 포맷을 설정한다. {@link eg.view360.PanoViewer.STEREO_FORMAT} 참조.</ko>
   * @param {boolean} [param.isVideo=false] Whether the given `imaage` is video or not.<ko>이미지가 비디오인지 여부</ko>
   *
   * @return PanoViewer instance<ko>PanoViewer 인스턴스</ko>
   * @example
   * ```
   * panoViewer.setImage("/path/to/image/image.png", {
   *     projectionType: eg.view360.PanoViewer.PROJECTION_TYPE.CUBEMAP
   * });
   * ```
   */
5977
5978
  __proto.setImage = function (image, param) {
    if (param === void 0) {
      param = {};
    }
5983
    var cubemapConfig = __assign({
      order: "RLUDBF",
      tileConfig: {
        flipHorizontal: false,
        rotation: 0
      },
      trim: 0
    }, param.cubemapConfig);
5992
    var stereoFormat = param.stereoFormat || STEREO_FORMAT.TOP_BOTTOM;
    var isVideo = !!param.isVideo;
5995
    if (this._image && this._isVideo !== isVideo) {
      /* eslint-disable no-console */
      console.warn("PanoViewer is not currently supporting content type changes. (Image <--> Video)");
      /* eslint-enable no-console */
6000
      return this;
    }
6003
    if (image) {
      this._deactivate();
6006
      this._image = image;
      this._isVideo = isVideo;
      this._projectionType = param.projectionType || PROJECTION_TYPE.EQUIRECTANGULAR;
      this._cubemapConfig = cubemapConfig;
      this._stereoFormat = stereoFormat;
6012
      this._initRenderer(this._yaw, this._pitch, this._fov, this._projectionType, this._cubemapConfig);
    }
6015
    return this;
  };
  /**
   * Set whether the renderer always updates the texture and renders.
   * @ko 렌더러가 항상 텍스쳐를 갱신하고 화면을 렌더링 할지 여부를 설정할 수 있습니다.
   * @param doUpdate When true viewer will always update texture and render, when false viewer will not update texture and render only camera config is changed.<ko>true면 항상 텍스쳐를 갱신하고 화면을 그리는 반면, false면 텍스쳐 갱신은 하지 않으며, 카메라 요소에 변화가 있을 때에만 화면을 그립니다.</ko>
   * @return PanoViewer instance<ko>PanoViewer 인스턴스</ko>
   */
6024
6025
  __proto.keepUpdate = function (doUpdate) {
    this._photoSphereRenderer.keepUpdate(doUpdate);
6028
    return this;
  };
  /**
   * Get the current projection type (equirectangular/cube)
   * @ko 현재 프로젝션 타입(Equirectangular 혹은 Cube)을 반환합니다.
   * @return {@link eg.view360.PanoViewer.PROJECTION_TYPE}
   */
6036
6037
  __proto.getProjectionType = function () {
    return this._projectionType;
  };
  /**
   * Activate the device's motion sensor, and return the Promise whether the sensor is enabled
   * If it's iOS13+, this method must be used in the context of user interaction, like onclick callback on the button element.
   * @ko 디바이스의 모션 센서를 활성화하고, 활성화 여부를 담는 Promise를 리턴합니다.
   * iOS13+일 경우, 사용자 인터렉션에 의해서 호출되어야 합니다. 예로, 버튼의 onclick 콜백과 같은 콘텍스트에서 호출되어야 합니다.
   * @return Promise containing nothing when resolved, or string of the rejected reason when rejected.<ko>Promise. resolve되었을 경우 아무것도 반환하지 않고, reject되었을 경우 그 이유를 담고있는 string을 반환한다.</ko>
   */
6048
6049
  __proto.enableSensor = function () {
    return new Promise$1(function (resolve, reject) {
      if (DeviceMotionEvent && typeof DeviceMotionEvent.requestPermission === "function") {
        DeviceMotionEvent.requestPermission().then(function (permissionState) {
          if (permissionState === "granted") {
            resolve();
          } else {
            reject(new Error("permission denied"));
          }
        }).catch(function (e) {
          // This can happen when this method wasn't triggered by user interaction
          reject(e);
        });
      } else {
        resolve();
      }
    });
  };
  /**
   * Disable the device's motion sensor.
   * @ko 디바이스의 모션 센서를 비활성화합니다.
   * @deprecated
   * @return PanoViewer instance<ko>PanoViewer 인스턴스</ko>
   */
6074
6075
  __proto.disableSensor = function () {
    return this;
  };
  /**
   * Switch to VR stereo rendering mode which uses WebXR / WebVR API (WebXR is preferred).
   * This method must be used in the context of user interaction, like onclick callback on the button element.
   * It can be rejected when an enabling device sensor fails or image/video is still loading("ready" event not triggered).
   * @ko WebXR / WebVR API를 사용하는 VR 스테레오 렌더링 모드로 전환합니다. (WebXR을 더 선호합니다)
   * 이 메소드는 사용자 인터렉션에 의해서 호출되어야 합니다. 예로, 버튼의 onclick 콜백과 같은 콘텍스트에서 호출되어야 합니다.
   * 디바이스 센서 활성화에 실패시 혹은 아직 이미지/비디오가 로딩중인 경우("ready"이벤트가 아직 트리거되지 않은 경우)에는 Promise가 reject됩니다.
   * @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 containing either a string of resolved reason or an Error instance of rejected reason.<ko>Promise가 resolve된 이유(string) 혹은 reject된 이유(Error)</ko>
   */
6089
6090
  __proto.enterVR = function (options) {
    var _this = this;
6093
    if (options === void 0) {
      options = {};
    }
6097
    if (!this._isReady) {
      return Promise$1.reject(new Error("PanoViewer is not ready to show image."));
    }
6101
    return new Promise$1(function (resolve, reject) {
      _this.enableSensor().then(function () {
        return _this._photoSphereRenderer.enterVR(options);
      }).then(function (res) {
        return resolve(res);
      }).catch(function (e) {
        return reject(e);
      });
    });
  };
  /**
   * Exit VR stereo rendering mode.
   * @ko VR 스테레오 렌더링 모드에서 일반 렌더링 모드로 전환합니다.
   * @return PanoViewer instance<ko>PanoViewer 인스턴스</ko>
   */
6117
6118
  __proto.exitVR = function () {
    this._photoSphereRenderer.exitVR();
6121
    return this;
  };
  /**
   * When set true, enables zoom with the wheel or pinch gesture. However, in the case of touch, pinch works only when the touchDirection setting is {@link eg.view360.PanoViewer.TOUCH_DIRECTION.ALL}.
   * @ko true 로 설정 시 휠 혹은 집기 동작으로 확대/축소 할 수 있습니다. false 설정 시 확대/축소 기능을 비활성화 합니다. 단, 터치인 경우 touchDirection 설정이 {@link eg.view360.PanoViewer.TOUCH_DIRECTION.ALL} 인 경우에만 pinch 가 동작합니다.
   * @param useZoom
   * @return PanoViewer instance<ko>PanoViewer 인스턴스</ko>
   */
6130
6131
  __proto.setUseZoom = function (useZoom) {
    if (typeof useZoom === "boolean") {
      this._yawPitchControl.option("useZoom", useZoom);
    }
6136
    return this;
  };
  /**
   * When true, enables the keyboard move key control: awsd, arrow keys
   * @ko true이면 키보드 이동 키 컨트롤을 활성화합니다. (awsd, 화살표 키)
   * @param useKeyboard
   * @return PanoViewer instance<ko>PanoViewer 인스턴스</ko>
   */
6145
6146
  __proto.setUseKeyboard = function (useKeyboard) {
    this._yawPitchControl.option("useKeyboard", useKeyboard);
6149
    return this;
  };
  /**
   * Enables control through device motion. ("none", "yawPitch", "VR")
   * @ko 디바이스 움직임을 통한 컨트롤을 활성화 합니다. ("none", "yawPitch", "VR")
   * @param gyroMode {@link eg.view360.PanoViewer.GYRO_MODE}
   * @return PanoViewer instance<ko>PanoViewer 인스턴스</ko>
   * @example
   * ```
   * panoViewer.setGyroMode("yawPitch");
   * //equivalent
   * panoViewer.setGyroMode(eg.view360.PanoViewer.GYRO_MODE.YAWPITCH);
   * ```
   */
6164
6165
  __proto.setGyroMode = function (gyroMode) {
    this._yawPitchControl.option("gyroMode", gyroMode);
6168
    return this;
  };
  /**
   * Set the range of controllable FOV values
   * @ko 제어 가능한 FOV 구간을 설정합니다.
   * @param range
   * @return PanoViewer instance<ko>PanoViewer 인스턴스</ko>
   * @example
   * panoViewer.setFovRange([50, 90]);
   */
6179
6180
  __proto.setFovRange = function (range) {
    this._yawPitchControl.option("fovRange", range);
6183
    return this;
  };
  /**
   * Get the range of controllable FOV values
   * @ko 제어 가능한 FOV 구간을 반환합니다.
   * @return FOV range
   * @example
   * var range = panoViewer.getFovRange(); // [50, 90]
   */
6193
6194
  __proto.getFovRange = function () {
    return this._yawPitchControl.option("fovRange");
  };
  /**
   * Update size of canvas element by it's container element's or specified size. If size is not specified, the size of the container area is obtained and updated to that size.
   * @ko 캔버스 엘리먼트의 크기를 컨테이너 엘리먼트의 크기나 지정된 크기로 업데이트합니다. 만약 size 가 지정되지 않으면 컨테이너 영역의 크기를 얻어와 해당 크기로 갱신합니다.
   * @param {object} [size]
   * @param {number} [size.width=width of the container]
   * @param {number} [size.height=height of the container]
   * @return PanoViewer instance<ko>PanoViewer 인스턴스</ko>
   */
6206
6207
  __proto.updateViewportDimensions = function (size) {
    if (size === void 0) {
      size = {};
    }
6212
    if (!this._isReady) {
      return this;
    }
6216
    var containerSize;
6218
    if (size.width === undefined || size.height === undefined) {
      containerSize = window.getComputedStyle(this._container);
    }
6222
    var width = size.width || parseInt(containerSize.width, 10);
    var height = size.height || parseInt(containerSize.height, 10); // Skip if viewport is not changed.
6225
    if (width === this._width && height === this._height) {
      return this;
    }
6229
    this._width = width;
    this._height = height;
    this._aspectRatio = width / height;
6233
    this._photoSphereRenderer.updateViewportDimensions(width, height);
6235
    this._yawPitchControl.option("aspectRatio", this._aspectRatio);
6237
    this._yawPitchControl.updatePanScale({
      height: height
    });
6241
    this.lookAt({}, 0);
    return this;
  };
  /**
   * Get the current field of view(FOV)
   * @ko 현재 field of view(FOV) 값을 반환합니다.
   */
6249
6250
  __proto.getFov = function () {
    return this._fov;
  };
  /**
   * Get current yaw value
   * @ko 현재 yaw 값을 반환합니다.
   */
6258
6259
  __proto.getYaw = function () {
    return this._yaw;
  };
  /**
   * Get current pitch value
   * @ko 현재 pitch 값을 반환합니다.
   */
6267
6268
  __proto.getPitch = function () {
    return this._pitch;
  };
  /**
   * Get the range of controllable Yaw values
   * @ko 컨트롤 가능한 Yaw 구간을 반환합니다.
   */
6276
6277
  __proto.getYawRange = function () {
    return this._yawPitchControl.option("yawRange");
  };
  /**
   * Get the range of controllable Pitch values
   * @ko 컨트롤 가능한 Pitch 구간을 가져옵니다.
   */
6285
6286
  __proto.getPitchRange = function () {
    return this._yawPitchControl.option("pitchRange");
  };
  /**
   * Set the range of controllable yaw
   * @ko 컨트롤 가능한 Yaw 구간을 반환합니다.
   * @param {number[]} range
   * @return PanoViewer instance<ko>PanoViewer 인스턴스</ko>
   * @example
   * panoViewer.setYawRange([-90, 90]);
   */
6298
6299
  __proto.setYawRange = function (yawRange) {
    this._yawPitchControl.option("yawRange", yawRange);
6302
    return this;
  };
  /**
   * Set the range of controllable Pitch values
   * @ko 컨트롤 가능한 Pitch 구간을 설정합니다.
   * @param {number[]} range
   * @return PanoViewer instance<ko>PanoViewer 인스턴스</ko>
   * @example
   * panoViewer.setPitchRange([-40, 40]);
   */
6313
6314
  __proto.setPitchRange = function (pitchRange) {
    this._yawPitchControl.option("pitchRange", pitchRange);
6317
    return this;
  };
  /**
   * Specifies whether to display the pole by limiting the pitch range. If it is true, pole point can be displayed. If it is false, it is not displayed.
   * @ko pitch 범위를 제한하여 극점을 표시할지를 지정합니다. true 인 경우 극점까지 표현할 수 있으며 false 인 경우 극점까지 표시하지 않습니다.
   * @param showPolePoint
   * @return PanoViewer instance<ko>PanoViewer 인스턴스</ko>
   */
6326
6327
  __proto.setShowPolePoint = function (showPolePoint) {
    this._yawPitchControl.option("showPolePoint", showPolePoint);
6330
    return this;
  };
  /**
   * Set a new view by setting camera configuration. Any parameters not specified remain the same.
   * @ko 카메라 설정을 지정하여 화면을 갱신합니다. 지정되지 않은 매개 변수는 동일하게 유지됩니다.
   * @param {object} orientation
   * @param {number} orientation.yaw Target yaw in degree <ko>목표 yaw (degree 단위)</ko>
   * @param {number} orientation.pitch Target pitch in degree <ko>목표 pitch (degree 단위)</ko>
   * @param {number} orientation.fov Target vertical fov in degree <ko>목표 수직 fov (degree 단위)</ko>
   * @param {number} duration Animation duration in milliseconds <ko>애니메이션 시간 (밀리 초)</ko>
   * @return PanoViewer instance<ko>PanoViewer 인스턴스</ko>
   * @example
   * ```
   * // Change the yaw angle (absolute angle) to 30 degrees for one second.
   * panoViewer.lookAt({yaw: 30}, 1000);
   * ```
   */
6348
6349
  __proto.lookAt = function (orientation, duration) {
    if (duration === void 0) {
      duration = 0;
    }
6354
    if (!this._isReady) {
      return this;
    }
6358
    var yaw = orientation.yaw !== undefined ? orientation.yaw : this._yaw;
    var pitch = orientation.pitch !== undefined ? orientation.pitch : this._pitch;
6361
    var pitchRange = this._yawPitchControl.option("pitchRange");
6363
    var verticalAngleOfImage = pitchRange[1] - pitchRange[0];
    var fov = orientation.fov !== undefined ? orientation.fov : this._fov;
6366
    if (verticalAngleOfImage < fov) {
      fov = verticalAngleOfImage;
    }
6370
    this._yawPitchControl.lookAt({
      yaw: yaw,
      pitch: pitch,
      fov: fov
    }, duration);
6376
    if (duration === 0) {
      this._photoSphereRenderer.renderWithYawPitch(yaw, pitch, fov);
    }
6380
    return this;
  };
  /**
   * Set touch direction by which user can control.
   * @ko 사용자가 조작가능한 터치 방향을 지정합니다.
   * @param direction of the touch. {@link eg.view360.PanoViewer.TOUCH_DIRECTION}<ko>컨트롤 가능한 방향 {@link eg.view360.PanoViewer.TOUCH_DIRECTION}</ko>
   * @return PanoViewer instance
   * @example
   * ```
   * panoViewer = new PanoViewer(el);
   * // Limit the touch direction to the yaw direction only.
   * panoViewer.setTouchDirection(eg.view360.PanoViewer.TOUCH_DIRECTION.YAW);
   * ```
   */
6395
6396
  __proto.setTouchDirection = function (direction) {
    if (PanoViewer._isValidTouchDirection(direction)) {
      this._yawPitchControl.option("touchDirection", direction);
    }
6401
    return this;
  };
  /**
   * Returns touch direction by which user can control
   * @ko 사용자가 조작가능한 터치 방향을 반환한다.
   * @return direction of the touch. {@link eg.view360.PanoViewer.TOUCH_DIRECTION}<ko>컨트롤 가능한 방향 {@link eg.view360.PanoViewer.TOUCH_DIRECTION}</ko>
   * @example
   * ```
   * panoViewer = new PanoViewer(el);
   * // Returns the current touch direction.
   * var dir = panoViewer.getTouchDirection();
   * ```
   */
6415
6416
  __proto.getTouchDirection = function () {
    return this._yawPitchControl.option("touchDirection");
  };
  /**
   * Destroy viewer. Remove all registered event listeners and remove viewer canvas.
   * @ko 뷰어 인스턴스를 해제합니다. 모든 등록된 이벤트리스너를 제거하고 뷰어 캔버스를 삭제합니다.
   * @return PanoViewer instance<ko>PanoViewer 인스턴스</ko>
   */
6425
6426
  __proto.destroy = function () {
    this._deactivate();
6429
    if (this._yawPitchControl) {
      this._yawPitchControl.destroy();
6432
      this._yawPitchControl = null;
    }
6435
    return this;
  }; // TODO: Remove parameters as they're just using private values
6438
6439
  __proto._initRenderer = function (yaw, pitch, fov, projectionType, cubemapConfig) {
    var _this = this;
6442
    this._photoSphereRenderer = new PanoImageRenderer(this._image, this._width, this._height, this._isVideo, this._container, this._canvasClass, {
      initialYaw: yaw,
      initialPitch: pitch,
      fieldOfView: fov,
      imageType: projectionType,
      cubemapConfig: cubemapConfig,
      stereoFormat: this._stereoFormat
    });
6451
    this._photoSphereRenderer.setYawPitchControl(this._yawPitchControl);
6453
    this._bindRendererHandler();
6455
    this._photoSphereRenderer.bindTexture().then(function () {
      return _this._activate();
    }).catch(function () {
      _this.trigger(new Component.ComponentEvent(PANOVIEWER_EVENTS.ERROR, {
        type: ERROR_TYPE.FAIL_BIND_TEXTURE,
        message: "failed to bind texture"
      }));
    });
  };
  /**
   * @private
   * update values of YawPitchControl if needed.
   * For example, In Panorama mode, initial fov and pitchRange is changed by aspect ratio of image.
   *
   * This function should be called after isReady status is true.
   */
6472
6473
  __proto._updateYawPitchIfNeeded = function () {
    if (this._projectionType === PanoViewer.ProjectionType.PANORAMA) {
      // update fov by aspect ratio
      var image = this._photoSphereRenderer.getContent();
6478
      var imageAspectRatio = image.naturalWidth / image.naturalHeight;
      var yawSize = void 0;
      var maxFov = void 0; // If height is larger than width, then we assume it's rotated by 90 degree.
6482
      if (imageAspectRatio < 1) {
        // So inverse the aspect ratio.
        imageAspectRatio = 1 / imageAspectRatio;
      }
6487
      if (imageAspectRatio < 6) {
        yawSize = util.toDegree(imageAspectRatio); // 0.5 means ratio of half height of cylinder(0.5) and radius of cylider(1). 0.5/1 = 0.5
6490
        maxFov = util.toDegree(Math.atan(0.5)) * 2;
      } else {
        yawSize = 360;
        maxFov = 360 / imageAspectRatio; // Make it 5 fixed as axes does.
      } // console.log("_updateYawPitchIfNeeded", maxFov, "aspectRatio", image.naturalWidth, image.naturalHeight, "yawSize", yawSize);
6496
6497
      var minFov = this._yawPitchControl.option("fovRange")[0]; // this option should be called after fov is set.
6499
6500
      this._yawPitchControl.option({
        "fov": maxFov,
        "yawRange": [-yawSize / 2, yawSize / 2],
        "pitchRange": [-maxFov / 2, maxFov / 2],
        "fovRange": [minFov, maxFov]
      });
6507
      this.lookAt({
        fov: maxFov
      });
    }
  };
6513
  __proto._bindRendererHandler = function () {
    var _this = this;
6516
    this._photoSphereRenderer.on(PanoImageRenderer.EVENTS.ERROR, function (e) {
      _this.trigger(new Component.ComponentEvent(PANOVIEWER_EVENTS.ERROR, e));
    });
6520
    this._photoSphereRenderer.on(PanoImageRenderer.EVENTS.RENDERING_CONTEXT_LOST, function () {
      _this._deactivate();
6523
      _this.trigger(new Component.ComponentEvent(PANOVIEWER_EVENTS.ERROR, {
        type: ERROR_TYPE.RENDERING_CONTEXT_LOST,
        message: "webgl rendering context lost"
      }));
    });
  };
6530
  __proto._initYawPitchControl = function (yawPitchConfig) {
    var _this = this;
6533
    this._yawPitchControl = new YawPitchControl(yawPitchConfig);
6535
    this._yawPitchControl.on(PANOVIEWER_EVENTS.ANIMATION_END, function (e) {
      _this.trigger(new Component.ComponentEvent(PANOVIEWER_EVENTS.ANIMATION_END, e));
    });
6539
    this._yawPitchControl.on("change", function (e) {
      _this._yaw = e.yaw;
      _this._pitch = e.pitch;
      _this._fov = e.fov;
      _this._quaternion = e.quaternion;
6545
      _this.trigger(new Component.ComponentEvent(PANOVIEWER_EVENTS.VIEW_CHANGE, e));
    });
  };
6549
  __proto._activate = function () {
    this._photoSphereRenderer.attachTo(this._container);
6552
    this._yawPitchControl.enable();
6554
    this.updateViewportDimensions();
    this._isReady = true; // update yawPitchControl after isReady status is true.
6557
    this._updateYawPitchIfNeeded();
6559
    this.trigger(new Component.ComponentEvent(PANOVIEWER_EVENTS.READY));
6561
    this._photoSphereRenderer.startRender();
  };
  /**
   * Destroy webgl context and block user interaction and stop rendering
   */
6567
6568
  __proto._deactivate = function () {
    // Turn off the video if it has one
    var video = this.getVideo();
6572
    if (video) {
      video.pause();
    }
6576
    if (this._isReady) {
      this._photoSphereRenderer.stopRender();
6579
      this._yawPitchControl.disable();
6581
      this._isReady = false;
    }
6584
    if (this._photoSphereRenderer) {
      this._photoSphereRenderer.destroy();
6587
      this._photoSphereRenderer = null;
    }
  };
  /**
   * Version info string
   * @ko 버전정보 문자열
   * @name VERSION
   * @static
   * @type {String}
   * @example
   * eg.view360.PanoViewer.VERSION;  // ex) 3.0.1
   * @memberof eg.view360.PanoViewer
   */
6601
6602
  PanoViewer.VERSION = VERSION;
  PanoViewer.ERROR_TYPE = ERROR_TYPE;
  PanoViewer.EVENTS = PANOVIEWER_EVENTS;
  PanoViewer.PROJECTION_TYPE = PROJECTION_TYPE;
  PanoViewer.GYRO_MODE = GYRO_MODE; // This should be deprecated!
  // eslint-disable-next-line @typescript-eslint/naming-convention
6609
  PanoViewer.ProjectionType = PROJECTION_TYPE;
  PanoViewer.STEREO_FORMAT = STEREO_FORMAT;
  /**
   * Constant value for touch directions
   * @ko 터치 방향에 대한 상수 값.
   * @namespace
   * @name TOUCH_DIRECTION
   */
6618
  PanoViewer.TOUCH_DIRECTION = {
    /**
     * Constant value for none direction.
     * @ko none 방향에 대한 상수 값.
     * @name NONE
     * @memberof eg.view360.PanoViewer.TOUCH_DIRECTION
     * @constant
     * @type {Number}
     * @default 1
     */
    NONE: YawPitchControl.TOUCH_DIRECTION_NONE,
6630
    /**
     * Constant value for horizontal(yaw) direction.
     * @ko horizontal(yaw) 방향에 대한 상수 값.
     * @name YAW
     * @memberof eg.view360.PanoViewer.TOUCH_DIRECTION
     * @constant
     * @type {Number}
     * @default 6
     */
    YAW: YawPitchControl.TOUCH_DIRECTION_YAW,
6641
    /**
     * Constant value for vertical direction.
     * @ko vertical(pitch) 방향에 대한 상수 값.
     * @name PITCH
     * @memberof eg.view360.PanoViewer.TOUCH_DIRECTION
     * @constant
     * @type {Number}
     * @default 24
     */
    PITCH: YawPitchControl.TOUCH_DIRECTION_PITCH,
6652
    /**
     * Constant value for all direction.
     * @ko all 방향에 대한 상수 값.
     * @name ALL
     * @memberof eg.view360.PanoViewer.TOUCH_DIRECTION
     * @constant
     * @type {Number}
     * @default 30
     */
    ALL: YawPitchControl.TOUCH_DIRECTION_ALL
  };
  return PanoViewer;
}(Component);
6666
/* eslint-disable @typescript-eslint/naming-convention */
var PanoViewerModule = {
  PanoViewer: PanoViewer,
  VERSION: VERSION
};
merge(PanoViewerModule, Constants);
6673
return PanoViewerModule;
6675
6676})));
6677//# sourceMappingURL=view360.panoviewer.js.map
1	`/*`
2	`Copyright (c) 2017-present NAVER Corp.`
3	`name: @egjs/view360`
4	`license: MIT`
5	`author: NAVER Corp.`
6	`repository: https://github.com/naver/egjs-view360`
7	`version: 3.6.1`
8	`*/`
9	`(function (global, factory) {`
10	`typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('@egjs/component'), require('promise-polyfill'), require('@egjs/agent'), require('@egjs/axes'), require('gl-matrix'), require('@egjs/imready')) :`
11	`typeof define === 'function' && define.amd ? define(['@egjs/component', 'promise-polyfill', '@egjs/agent', '@egjs/axes', 'gl-matrix', '@egjs/imready'], factory) :`
12	`(global = typeof globalThis !== 'undefined' ? globalThis : global \|\| self, (global.eg = global.eg \|\| {}, global.eg.view360 = factory(global.eg.Component, global.Promise, global.eg.agent, global.eg.Axes, global.glMatrix, global.eg.ImReady)));`
13	`}(this, (function (Component, Promise$1, agent$1, Axes, glMatrix, ImReady) { 'use strict';`
14
15	`var VERSION = "3.6.1";`
16
17	`/! ****************************************************************************`
18	`Copyright (c) Microsoft Corporation.`
19
20	`Permission to use, copy, modify, and/or distribute this software for any`
21	`purpose with or without fee is hereby granted.`
22
23	`THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH`
24	`REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY`
25	`AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,`
26	`INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM`
27	`LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR`
28	`OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR`
29	`PERFORMANCE OF THIS SOFTWARE.`
30	`***************************************************************************** */`
31
32	`/* global Reflect, Promise */`
33	`var extendStatics = function (d, b) {`
34	`extendStatics = Object.setPrototypeOf \|\| {`
35	`__proto__: []`
36	`} instanceof Array && function (d, b) {`
37	`d.__proto__ = b;`
38	`} \|\| function (d, b) {`
39	`for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];`
40	`};`