Source: ui/vr_webgl.js

  1. /*! @license
  2.  * Shaka Player
  3.  * Copyright 2016 Google LLC
  4.  * SPDX-License-Identifier: Apache-2.0
  5.  */
  8. goog.provide('shaka.ui.VRWebgl');
  10. goog.require('goog.asserts');
  11. goog.require('shaka.log');
  12. goog.require('shaka.Player');
  13. goog.require('shaka.ui.Matrix4x4');
  14. goog.require('shaka.ui.MatrixQuaternion');
  15. goog.require('shaka.ui.VRUtils');
  16. goog.require('shaka.util.EventManager');
  17. goog.require('shaka.util.IReleasable');
  18. goog.require('shaka.util.Timer');
  21. /**
  22.  * @implements {shaka.util.IReleasable}
  23.  */
  24. shaka.ui.VRWebgl = class {
  25.   /**
  26.    * @param {!HTMLMediaElement} video
  27.    * @param {!shaka.Player} player
  28.    * @param {!HTMLCanvasElement} canvas
  29.    * @param {WebGLRenderingContext} gl
  30.    * @param {string} projectionMode
  31.    */
  32.   constructor(video, player, canvas, gl, projectionMode) {
  33.     /** @private {HTMLVideoElement} */
  34.     this.video_ = /** @type {!HTMLVideoElement} */ (video);
  36.     /** @private {shaka.Player} */
  37.     this.player_ = player;
  39.     /** @private {HTMLCanvasElement} */
  40.     this.canvas_ = canvas;
  42.     /** @private {WebGLRenderingContext} */
  43.     this.gl_ = gl;
  45.     /** @private {shaka.util.EventManager} */
  46.     this.eventManager_ = new shaka.util.EventManager();
  48.     /** @private {!Float32Array} */
  49.     this.originalQuaternion_ = shaka.ui.MatrixQuaternion.create();
  51.     /** @private {!Float32Array} */
  52.     this.currentQuaternion_ = shaka.ui.MatrixQuaternion.create();
  54.     /** @private {?WebGLProgram} */
  55.     this.shaderProgram_ = null;
  57.     /** @private {?WebGLBuffer} */
  58.     this.verticesBuffer_ = null;
  60.     /** @private {?WebGLBuffer} */
  61.     this.verticesTextureCoordBuffer_ = null;
  63.     /** @private {?WebGLBuffer} */
  64.     this.verticesIndexBuffer_ = null;
  66.     /** @private {!Float32Array} */
  67.     this.viewMatrix_ = shaka.ui.Matrix4x4.create();
  69.     /** @private {!Float32Array} */
  70.     this.projectionMatrix_ = shaka.ui.Matrix4x4.create();
  72.     /** @private {!Float32Array} */
  73.     this.viewProjectionMatrix_ = shaka.ui.Matrix4x4.create();
  75.     /** @private {!Float32Array} */
  76.     this.identityMatrix_ = shaka.ui.Matrix4x4.create();
  78.     /** @private {?Float32Array} */
  79.     this.diff_ = null;
  81.     /** @private {boolean} */
  82.     this.stereoscopicMode_ = false;
  84.     /** @private {?shaka.util.Timer} */
  85.     this.activeTimer_ = null;
  87.     /** @private {?shaka.util.Timer} */
  88.     this.resetTimer_ = null;
  90.     /** @private {number} */
  91.     this.previousCanvasWidth_ = 0;
  93.     /** @private {number} */
  94.     this.previousCanvasHeight_ = 0;
  96.     /**
  97.      * @private {?{vertices: !Array.<number>, textureCoords: !Array.<number>,
  98.      *           indices: !Array.<number>}}
  99.      */
  100.     this.geometry_ = null;
  102.     /** @private {?number} */
  103.     this.vertexPositionAttribute_ = null;
  105.     /** @private {?number} */
  106.     this.textureCoordAttribute_ = null;
  108.     /** @private {?WebGLTexture} */
  109.     this.texture_ = null;
  111.     /** @private {number} */
  112.     this.positionY_ = 0;
  114.     /** @private {number} */
  115.     this.fieldOfView_ = 75;
  117.     /** @private {number} */
  118.     this.cont_ = 0;
  120.     /** @private {string} */
  121.     this.projectionMode_ = projectionMode;
  123.     this.init_();
  124.   }
  126.   /**
  127.    * @override
  128.    */
  129.   release() {
  130.     if (this.eventManager_) {
  131.       this.eventManager_.release();
  132.       this.eventManager_ = null;
  133.     }
  134.     if (this.activeTimer_) {
  135.       this.activeTimer_.stop();
  136.       this.activeTimer_ = null;
  137.     }
  138.     if (this.resetTimer_) {
  139.       this.resetTimer_.stop();
  140.       this.resetTimer_ = null;
  141.     }
  142.   }
  144.   /**
  145.    * @return {string}
  146.    */
  147.   getProjectionMode() {
  148.     return this.projectionMode_;
  149.   }
  151.   /**
  152.    * @param {!Float32Array} quat
  153.    * @return {{pitch: number, yaw: number, roll: number}} as radians
  154.    * @private
  155.    */
  156.   toEulerAngles_(quat) {
  157.     const angles = {
  158.       pitch: 0,
  159.       yaw: 0,
  160.       roll: 0,
  161.     };
  162.     const x = quat[0];
  163.     const y = quat[1];
  164.     const z = quat[2];
  165.     const w = quat[3];
  166.     const x2 = x * x;
  167.     const y2 = y * y;
  168.     const z2 = z * z;
  169.     const w2 = w * w;
  170.     const unit = x2 + y2 + z2 + w2;
  171.     const test = x * w - y * z;
  172.     if (test > 0.499995 * unit) {
  173.       // singularity at the north pole
  174.       angles.pitch = Math.PI / 2;
  175.       angles.yaw = 2 * Math.atan2(y, x);
  176.       angles.roll = 0;
  177.     } else if (test < -0.499995 * unit) {
  178.       // singularity at the south pole
  179.       angles.pitch = -Math.PI / 2;
  180.       angles.yaw = 2 * Math.atan2(y, x);
  181.       angles.roll = 0;
  182.     } else {
  183.       angles.pitch = Math.asin(2 * (x * z - w * y));
  184.       angles.yaw = Math.atan2(2 * (x * w + y * z), 1 - 2 * (z2 + w2));
  185.       angles.roll = Math.atan2(2 * (x * y + z * w), 1 - 2 * (y2 + z2));
  186.     }
  187.     return angles;
  188.   }
  190.   /**
  191.    * Toogle stereoscopic mode
  192.    */
  193.   toggleStereoscopicMode() {
  194.     this.stereoscopicMode_ = !this.stereoscopicMode_;
  195.     if (!this.stereoscopicMode_) {
  196.       this.gl_.viewport(0, 0, this.canvas_.width, this.canvas_.height);
  197.     }
  198.     this.renderGL_(false);
  199.   }
  201.   /**
  202.    * Returns true if stereoscopic mode is enabled.
  203.    *
  204.    * @return {boolean}
  205.    */
  206.   isStereoscopicModeEnabled() {
  207.     return this.stereoscopicMode_;
  208.   }
  210.   /**
  211.    * @private
  212.    */
  213.   init_() {
  214.     this.initMatrices_();
  215.     this.initGL_();
  216.     this.initGLShaders_();
  217.     this.initGLBuffers_();
  218.     this.initGLTexture_();
  220.     this.eventManager_.listenOnce(this.video_, 'loadeddata', () => {
  221.       let frameRate;
  222.       this.eventManager_.listen(this.video_, 'canplaythrough', () => {
  223.         this.renderGL_();
  224.       });
  225.       this.eventManager_.listen(this.video_, 'playing', () => {
  226.         if (this.activeTimer_) {
  227.           this.activeTimer_.stop();
  228.         }
  229.         if (!frameRate) {
  230.           const variants = this.player_.getVariantTracks();
  231.           for (const variant of variants) {
  232.             const variantFrameRate = variant.frameRate;
  233.             if (variantFrameRate &&
  234.                 (!frameRate || frameRate < variantFrameRate)) {
  235.               frameRate = variantFrameRate;
  236.             }
  237.           }
  238.         }
  239.         if (!frameRate) {
  240.           frameRate = 60;
  241.         }
  242.         this.renderGL_();
  243.         this.activeTimer_ = new shaka.util.Timer(() => {
  244.           this.renderGL_();
  245.         }).tickNow().tickEvery(1 / frameRate);
  246.       });
  247.       this.eventManager_.listen(this.video_, 'pause', () => {
  248.         if (this.activeTimer_) {
  249.           this.activeTimer_.stop();
  250.         }
  251.         this.activeTimer_ = null;
  252.         this.renderGL_();
  253.       });
  254.       this.eventManager_.listen(this.video_, 'seeked', () => {
  255.         this.renderGL_();
  256.       });
  258.       this.eventManager_.listen(document, 'visibilitychange', () => {
  259.         this.renderGL_();
  260.       });
  261.     });
  262.   }
  264.   /**
  265.    * @private
  266.    */
  267.   initMatrices_() {
  268.     shaka.ui.Matrix4x4.lookAt(
  269.         this.viewMatrix_, [0, 0, 0], [1, 0, 0], [0, 1, 0]);
  270.     shaka.ui.Matrix4x4.getRotation(
  271.         this.originalQuaternion_, this.viewMatrix_);
  272.     shaka.ui.Matrix4x4.scale(
  273.         this.identityMatrix_, this.identityMatrix_, [4.0, 4.0, 4.0]);
  274.   }
  276.   /**
  277.    * @private
  278.    */
  279.   initGL_() {
  280.     this.updateViewPort_();
  281.     this.gl_.viewport(
  282.         0, 0, this.gl_.drawingBufferWidth, this.gl_.drawingBufferHeight);
  283.     this.gl_.clearColor(0.0, 0.0, 0.0, 1.0);
  284.     this.gl_.enable(this.gl_.CULL_FACE);
  285.     this.gl_.cullFace(this.gl_.FRONT);
  286.     // Clear the context with the newly set color. This is
  287.     // the function call that actually does the drawing.
  288.     this.gl_.clear(this.gl_.COLOR_BUFFER_BIT);
  289.   }
  291.   /**
  292.    * @private
  293.    */
  294.   initGLShaders_() {
  295.     const vertexShader = this.getGLShader_(this.gl_.VERTEX_SHADER);
  296.     const fragmentShader = this.getGLShader_(this.gl_.FRAGMENT_SHADER);
  298.     // Create program
  299.     this.shaderProgram_ = this.gl_.createProgram();
  300.     this.gl_.attachShader(this.shaderProgram_, vertexShader);
  301.     this.gl_.attachShader(this.shaderProgram_, fragmentShader);
  302.     this.gl_.linkProgram(this.shaderProgram_);
  304.     // If creating the shader program failed, alert
  305.     if (!this.gl_.getProgramParameter(
  306.         this.shaderProgram_, this.gl_.LINK_STATUS)) {
  307.       shaka.log.error('Unable to initialize the shader program: ',
  308.           this.gl_.getProgramInfoLog(this.shaderProgram_));
  309.     }
  311.     // Bind data
  312.     if (this.projectionMode_ == 'cubemap') {
  313.       this.vertexPositionAttribute_ = this.gl_.getAttribLocation(
  314.           this.shaderProgram_, 'aVertexPosition');
  315.       this.textureCoordAttribute_ = this.gl_.getAttribLocation(
  316.           this.shaderProgram_, 'aTextureCoord');
  317.     } else {
  318.       this.vertexPositionAttribute_ = this.gl_.getAttribLocation(
  319.           this.shaderProgram_, 'a_vPosition');
  320.       this.gl_.enableVertexAttribArray(this.vertexPositionAttribute_);
  321.       this.textureCoordAttribute_ = this.gl_.getAttribLocation(
  322.           this.shaderProgram_, 'a_TexCoordinate');
  323.       this.gl_.enableVertexAttribArray(this.textureCoordAttribute_);
  324.     }
  325.   }
  327.   /**
  328.    * Read and generate WebGL shader
  329.    *
  330.    * @param {number} glType Type of shader requested.
  331.    * @return {?WebGLShader}
  332.    * @private
  333.    */
  334.   getGLShader_(glType) {
  335.     let source;
  337.     switch (glType) {
  338.       case this.gl_.VERTEX_SHADER:
  339.         if (this.projectionMode_ == 'cubemap') {
  340.           source = shaka.ui.VRUtils.VERTEX_CUBE_SHADER;
  341.         } else {
  342.           source = shaka.ui.VRUtils.VERTEX_SPHERE_SHADER;
  343.         }
  344.         break;
  345.       case this.gl_.FRAGMENT_SHADER:
  346.         if (this.projectionMode_ == 'cubemap') {
  347.           source = shaka.ui.VRUtils.FRAGMENT_CUBE_SHADER;
  348.         } else {
  349.           source = shaka.ui.VRUtils.FRAGMENT_SPHERE_SHADER;
  350.         }
  351.         break;
  352.       default:
  353.         return null;
  354.     }
  356.     const shader = this.gl_.createShader(glType);
  358.     this.gl_.shaderSource(shader, source);
  360.     this.gl_.compileShader(shader);
  362.     if (!this.gl_.getShaderParameter(shader, this.gl_.COMPILE_STATUS)) {
  363.       shaka.log.warning('Error in ' + glType + ' shader: ' +
  364.           this.gl_.getShaderInfoLog(shader));
  365.     }
  367.     goog.asserts.assert(shader, 'Should have a shader!');
  369.     return shader;
  370.   }
  372.   /**
  373.    * @private
  374.    */
  375.   initGLBuffers_() {
  376.     if (this.projectionMode_ == 'cubemap') {
  377.       this.geometry_ = shaka.ui.VRUtils.generateCube();
  378.     } else {
  379.       this.geometry_ = shaka.ui.VRUtils.generateSphere(100);
  380.     }
  381.     this.verticesBuffer_ = this.gl_.createBuffer();
  382.     this.gl_.bindBuffer(this.gl_.ARRAY_BUFFER, this.verticesBuffer_);
  383.     this.gl_.bufferData(this.gl_.ARRAY_BUFFER,
  384.         new Float32Array(this.geometry_.vertices), this.gl_.STATIC_DRAW);
  385.     this.verticesTextureCoordBuffer_ = this.gl_.createBuffer();
  386.     this.gl_.bindBuffer(
  387.         this.gl_.ARRAY_BUFFER, this.verticesTextureCoordBuffer_);
  388.     this.gl_.bufferData(this.gl_.ARRAY_BUFFER,
  389.         new Float32Array(this.geometry_.textureCoords), this.gl_.STATIC_DRAW);
  390.     this.verticesIndexBuffer_ = this.gl_.createBuffer();
  391.     this.gl_.bindBuffer(
  392.         this.gl_.ELEMENT_ARRAY_BUFFER, this.verticesIndexBuffer_);
  393.     this.gl_.bufferData(this.gl_.ELEMENT_ARRAY_BUFFER,
  394.         new Uint16Array(this.geometry_.indices), this.gl_.STATIC_DRAW);
  395.   }
  397.   /**
  398.    * @private
  399.    */
  400.   initGLTexture_() {
  401.     this.texture_ = this.gl_.createTexture();
  402.     this.gl_.bindTexture(this.gl_.TEXTURE_2D, this.texture_);
  404.     this.gl_.texParameteri(this.gl_.TEXTURE_2D,
  405.         this.gl_.TEXTURE_WRAP_S, this.gl_.CLAMP_TO_EDGE);
  406.     this.gl_.texParameteri(this.gl_.TEXTURE_2D,
  407.         this.gl_.TEXTURE_WRAP_T, this.gl_.CLAMP_TO_EDGE);
  408.     this.gl_.texParameteri(this.gl_.TEXTURE_2D,
  409.         this.gl_.TEXTURE_MIN_FILTER, this.gl_.NEAREST);
  410.     this.gl_.texParameteri(this.gl_.TEXTURE_2D,
  411.         this.gl_.TEXTURE_MAG_FILTER, this.gl_.NEAREST);
  412.   }
  414.   /**
  415.    * @param {boolean=} textureUpdate
  416.    * @private
  417.    */
  418.   renderGL_(textureUpdate = true) {
  419.     const loadMode = this.player_.getLoadMode();
  420.     const isMSE = loadMode == shaka.Player.LoadMode.MEDIA_SOURCE;
  421.     if (!this.video_ || this.video_.readyState < 2 ||
  422.         (!isMSE && this.video_.playbackRate == 0)) {
  423.       return;
  424.     }
  425.     shaka.ui.Matrix4x4.perspective(this.projectionMatrix_,
  426.         this.fieldOfView_ * Math.PI / 180, 5 / 3.2, 0.1, 100.0);
  428.     if (this.projectionMode_ == 'cubemap') {
  429.       shaka.ui.Matrix4x4.perspective(this.projectionMatrix_,
  430.           this.fieldOfView_ * Math.PI / 180, 5 / 2, 0.1, 100.0);
  431.     } else {
  432.       shaka.ui.Matrix4x4.perspective(this.projectionMatrix_,
  433.           this.fieldOfView_ * Math.PI / 180, 5 / 3.2, 0.1, 100.0);
  434.     }
  436.     this.gl_.useProgram(this.shaderProgram_);
  438.     this.gl_.clear(this.gl_.COLOR_BUFFER_BIT);
  439.     this.updateViewPort_();
  441.     if (textureUpdate) {
  442.       this.gl_.activeTexture(this.gl_.TEXTURE0);
  443.       this.gl_.bindTexture(this.gl_.TEXTURE_2D, this.texture_);
  444.       this.gl_.pixelStorei(this.gl_.UNPACK_PREMULTIPLY_ALPHA_WEBGL, 0);
  445.       this.gl_.texImage2D(this.gl_.TEXTURE_2D, 0, this.gl_.RGBA,
  446.           this.gl_.RGBA, this.gl_.UNSIGNED_BYTE, this.video_);
  447.     }
  449.     // Update matrix
  450.     if (this.projectionMode_ == 'equirectangular') {
  451.       shaka.ui.Matrix4x4.multiply(this.viewProjectionMatrix_,
  452.           this.viewMatrix_, this.identityMatrix_);
  453.       shaka.ui.Matrix4x4.multiply(this.viewProjectionMatrix_,
  454.           this.projectionMatrix_, this.viewProjectionMatrix_);
  455.     }
  457.     // Plumbing
  458.     // Vertices
  459.     this.gl_.bindBuffer(this.gl_.ARRAY_BUFFER, this.verticesBuffer_);
  460.     goog.asserts.assert(this.vertexPositionAttribute_ != null,
  461.         'Should have a texture attribute!');
  462.     this.gl_.vertexAttribPointer(
  463.         this.vertexPositionAttribute_, 3, this.gl_.FLOAT, false, 0, 0);
  464.     this.gl_.enableVertexAttribArray(this.vertexPositionAttribute_);
  466.     // UVs
  467.     this.gl_.bindBuffer(
  468.         this.gl_.ARRAY_BUFFER, this.verticesTextureCoordBuffer_);
  469.     goog.asserts.assert(this.textureCoordAttribute_ != null,
  470.         'Should have a texture attribute!');
  471.     this.gl_.vertexAttribPointer(
  472.         this.textureCoordAttribute_, 2, this.gl_.FLOAT, false, 0, 0);
  473.     this.gl_.enableVertexAttribArray(this.textureCoordAttribute_);
  475.     this.gl_.bindBuffer(
  476.         this.gl_.ELEMENT_ARRAY_BUFFER, this.verticesIndexBuffer_);
  478.     this.setMatrixUniforms_();
  480.     this.gl_.uniform1i(
  481.         this.gl_.getUniformLocation(this.shaderProgram_, 'uSampler'), 0);
  483.     if (this.stereoscopicMode_) {
  484.       this.gl_.viewport(0, 0, this.canvas_.width / 2, this.canvas_.height);
  485.     }
  487.     // Draw
  488.     this.gl_.drawElements(this.gl_.TRIANGLES,
  489.         this.geometry_.indices.length, this.gl_.UNSIGNED_SHORT, 0);
  491.     if (this.stereoscopicMode_) {
  492.       this.gl_.viewport(this.canvas_.width / 2, 0,
  493.           this.canvas_.width / 2, this.canvas_.height);
  494.       this.gl_.drawElements(this.gl_.TRIANGLES,
  495.           this.geometry_.indices.length, this.gl_.UNSIGNED_SHORT, 0);
  496.     }
  497.   }
  499.   /**
  500.    * @private
  501.    */
  502.   setMatrixUniforms_() {
  503.     if (this.projectionMode_ == 'cubemap') {
  504.       this.gl_.uniformMatrix4fv(
  505.           this.gl_.getUniformLocation(this.shaderProgram_, 'uProjectionMatrix'),
  506.           false, this.projectionMatrix_);
  507.       this.gl_.uniformMatrix4fv(
  508.           this.gl_.getUniformLocation(this.shaderProgram_, 'uModelViewMatrix'),
  509.           false, this.viewProjectionMatrix_);
  510.     } else {
  511.       this.gl_.uniformMatrix4fv(
  512.           this.gl_.getUniformLocation(this.shaderProgram_, 'u_VPMatrix'),
  513.           false, this.viewProjectionMatrix_);
  514.     }
  515.   }
  517.   /**
  518.    * @private
  519.    */
  520.   updateViewPort_() {
  521.     let currentWidth = this.video_.videoWidth;
  522.     if (!currentWidth) {
  523.       currentWidth = this.canvas_.scrollWidth;
  524.     }
  525.     let currentHeight = this.video_.videoHeight;
  526.     if (!currentHeight) {
  527.       currentHeight = this.canvas_.scrollHeight;
  528.     }
  530.     if (this.previousCanvasWidth_ !== currentWidth ||
  531.         this.previousCanvasHeight_ !== currentHeight) {
  532.       this.canvas_.width = currentWidth;
  533.       this.canvas_.height = currentHeight;
  535.       this.previousCanvasWidth_ = currentWidth;
  536.       this.previousCanvasHeight_ = currentHeight;
  538.       const ratio = currentWidth / currentHeight;
  540.       this.projectionMatrix_ = shaka.ui.Matrix4x4.frustum(
  541.           this.projectionMatrix_, -ratio, ratio, -1, 1, 0, 1);
  543.       this.gl_.viewport(0, 0, currentWidth, currentHeight);
  544.     }
  545.   }
  547.   /**
  548.    * Rotate the view matrix global
  549.    *
  550.    * @param {!number} yaw Yaw.
  551.    * @param {!number} pitch Pitch.
  552.    * @param {!number} roll Roll.
  553.    */
  554.   rotateViewGlobal(yaw, pitch, roll) {
  555.     const pitchBoundary = 90.0 * Math.PI / 180;
  556.     let matrix;
  557.     if (this.projectionMode_ == 'cubemap') {
  558.       matrix = this.viewProjectionMatrix_;
  559.     } else {
  560.       matrix = this.viewMatrix_;
  561.     }
  563.     // Rotate global axis
  564.     shaka.ui.Matrix4x4.rotateY(matrix, matrix, yaw);
  566.     // Variable to limit the pitch movement
  567.     this.positionY_ += pitch;
  569.     if (this.positionY_ < pitchBoundary &&
  570.       this.positionY_ > -pitchBoundary) {
  571.       const out = shaka.ui.Matrix4x4.create();
  572.       shaka.ui.Matrix4x4.rotateX(out, shaka.ui.Matrix4x4.create(), -1 * pitch);
  573.       // Rotate local axis
  574.       shaka.ui.Matrix4x4.multiply(matrix, out, matrix);
  575.     } else {
  576.       // Doing this we restart the value to the previous position,
  577.       // to not mantain a value over 90º or under -90º.
  578.       this.positionY_ -= pitch;
  579.     }
  581.     const out2 = shaka.ui.Matrix4x4.create();
  582.     shaka.ui.Matrix4x4.rotateZ(out2, shaka.ui.Matrix4x4.create(), roll);
  584.     // Rotate local axis
  585.     shaka.ui.Matrix4x4.multiply(matrix, out2, matrix);
  587.     this.renderGL_(false);
  588.   }
  590.   /**
  591.    * @param {number} amount
  592.    */
  593.   zoom(amount) {
  594.     const zoomMin = 20;
  595.     const zoomMax = 100;
  596.     amount /= 50;
  597.     if (this.fieldOfView_ >= zoomMin && this.fieldOfView_ <= zoomMax) {
  598.       this.fieldOfView_ += amount;
  599.     }
  600.     if (this.fieldOfView_ < zoomMin) {
  601.       this.fieldOfView_ = zoomMin;
  602.     } else if (this.fieldOfView_ > zoomMax) {
  603.       this.fieldOfView_ = zoomMax;
  604.     }
  605.     this.renderGL_(false);
  606.   }
  608.   /**
  609.    * @return {number}
  610.    */
  611.   getFieldOfView() {
  612.     return this.fieldOfView_;
  613.   }
  615.   /**
  616.    * @param {number} fieldOfView
  617.    */
  618.   setFieldOfView(fieldOfView) {
  619.     this.fieldOfView_ = fieldOfView;
  620.     this.renderGL_(false);
  621.   }
  623.   /**
  624.    * @return {number}
  625.    */
  626.   getNorth() {
  627.     shaka.ui.Matrix4x4.getRotation(this.currentQuaternion_, this.viewMatrix_);
  629.     const angles = this.toEulerAngles_(this.currentQuaternion_);
  631.     const normalizedDir = {
  632.       x: Math.cos(angles.yaw) * Math.cos(angles.pitch),
  633.       y: Math.sin(angles.yaw) * Math.cos(angles.pitch),
  634.       z: Math.sin(angles.pitch),
  635.     };
  637.     const northYaw = Math.acos(normalizedDir.x);
  639.     return ((northYaw * 180) / Math.PI);
  640.   }
  642.   /**
  643.    * @param {boolean=} firstTime
  644.    */
  645.   reset(firstTime = true) {
  646.     const steps = 20;
  648.     if (firstTime) {
  649.       shaka.ui.Matrix4x4.getRotation(
  650.           this.currentQuaternion_, this.viewMatrix_);
  651.       this.cont_ = 0;
  652.       this.diff_ = shaka.ui.MatrixQuaternion.create();
  653.       this.diff_[0] =
  654.           (this.currentQuaternion_[0] - this.originalQuaternion_[0]) / steps;
  655.       this.diff_[1] =
  656.           (this.currentQuaternion_[1] - this.originalQuaternion_[1]) / steps;
  657.       this.diff_[2] =
  658.           (this.currentQuaternion_[2] - this.originalQuaternion_[2]) / steps;
  659.       this.diff_[3] =
  660.           (this.currentQuaternion_[3] - this.originalQuaternion_[3]) / steps;
  661.     }
  663.     this.currentQuaternion_[0] -= this.diff_[0];
  664.     this.currentQuaternion_[1] -= this.diff_[1];
  665.     this.currentQuaternion_[2] -= this.diff_[2];
  666.     this.currentQuaternion_[3] -= this.diff_[3];
  668.     // Set the view to the original matrix
  669.     const out = shaka.ui.Matrix4x4.create();
  671.     shaka.ui.MatrixQuaternion.normalize(
  672.         this.currentQuaternion_, this.currentQuaternion_);
  674.     shaka.ui.Matrix4x4.fromQuat(out, this.currentQuaternion_);
  676.     this.viewMatrix_ = out;
  678.     if (this.resetTimer_) {
  679.       this.resetTimer_.stop();
  680.       this.resetTimer_ = null;
  681.     }
  682.     if (this.cont_ < steps) {
  683.       this.resetTimer_ = new shaka.util.Timer(() => {
  684.         this.reset(false);
  685.         this.positionY_ = 0;
  686.         this.cont_++;
  687.         this.renderGL_(false);
  688.       }).tickAfter(shaka.ui.VRWebgl.ANIMATION_DURATION_ / steps);
  689.     } else {
  690.       shaka.ui.Matrix4x4.fromQuat(out, this.originalQuaternion_);
  691.       this.viewMatrix_ = out;
  692.     }
  693.   }
  694. };
  696. /**
  697.  * @constant {number}
  698.  */
  699. shaka.ui.VRWebgl.ANIMATION_DURATION_ = 0.5;