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.MediaReadyState');
  19. goog.require('shaka.util.Timer');
  22. /**
  23.  * @implements {shaka.util.IReleasable}
  24.  */
  25. shaka.ui.VRWebgl = class {
  26.   /**
  27.    * @param {!HTMLMediaElement} video
  28.    * @param {!shaka.Player} player
  29.    * @param {!HTMLCanvasElement} canvas
  30.    * @param {WebGLRenderingContext} gl
  31.    * @param {string} projectionMode
  32.    */
  33.   constructor(video, player, canvas, gl, projectionMode) {
  34.     /** @private {!HTMLVideoElement} */
  35.     this.video_ = /** @type {!HTMLVideoElement} */ (video);
  37.     /** @private {shaka.Player} */
  38.     this.player_ = player;
  40.     /** @private {HTMLCanvasElement} */
  41.     this.canvas_ = canvas;
  43.     /** @private {WebGLRenderingContext} */
  44.     this.gl_ = gl;
  46.     /** @private {shaka.util.EventManager} */
  47.     this.eventManager_ = new shaka.util.EventManager();
  49.     /** @private {!Float32Array} */
  50.     this.originalQuaternion_ = shaka.ui.MatrixQuaternion.create();
  52.     /** @private {!Float32Array} */
  53.     this.currentQuaternion_ = shaka.ui.MatrixQuaternion.create();
  55.     /** @private {?WebGLProgram} */
  56.     this.shaderProgram_ = null;
  58.     /** @private {?WebGLBuffer} */
  59.     this.verticesBuffer_ = null;
  61.     /** @private {?WebGLBuffer} */
  62.     this.verticesTextureCoordBuffer_ = null;
  64.     /** @private {?WebGLBuffer} */
  65.     this.verticesIndexBuffer_ = null;
  67.     /** @private {!Float32Array} */
  68.     this.viewMatrix_ = shaka.ui.Matrix4x4.create();
  70.     /** @private {!Float32Array} */
  71.     this.projectionMatrix_ = shaka.ui.Matrix4x4.create();
  73.     /** @private {!Float32Array} */
  74.     this.viewProjectionMatrix_ = shaka.ui.Matrix4x4.create();
  76.     /** @private {!Float32Array} */
  77.     this.identityMatrix_ = shaka.ui.Matrix4x4.create();
  79.     /** @private {?Float32Array} */
  80.     this.diff_ = null;
  82.     /** @private {boolean} */
  83.     this.stereoscopicMode_ = false;
  85.     /** @private {?shaka.util.Timer} */
  86.     this.activeTimer_ = null;
  88.     /** @private {?shaka.util.Timer} */
  89.     this.resetTimer_ = null;
  91.     /** @private {number} */
  92.     this.previousCanvasWidth_ = 0;
  94.     /** @private {number} */
  95.     this.previousCanvasHeight_ = 0;
  97.     /**
  98.      * @private {?{vertices: !Array<number>, textureCoords: !Array<number>,
  99.      *           indices: !Array<number>}}
  100.      */
  101.     this.geometry_ = null;
  103.     /** @private {?number} */
  104.     this.vertexPositionAttribute_ = null;
  106.     /** @private {?number} */
  107.     this.textureCoordAttribute_ = null;
  109.     /** @private {?WebGLTexture} */
  110.     this.texture_ = null;
  112.     /** @private {number} */
  113.     this.positionX_ = 0;
  115.     /** @private {number} */
  116.     this.positionY_ = 0;
  118.     /** @private {number} */
  119.     this.fieldOfView_ = 75;
  121.     /** @private {number} */
  122.     this.cont_ = 0;
  124.     /** @private {string} */
  125.     this.projectionMode_ = projectionMode;
  127.     /** @private {number} */
  128.     this.videoCallbackId_ = -1;
  130.     this.init_();
  131.   }
  133.   /**
  134.    * @override
  135.    */
  136.   release() {
  137.     if (this.videoCallbackId_ != -1) {
  138.       this.video_.cancelVideoFrameCallback(this.videoCallbackId_);
  139.       this.videoCallbackId_ = -1;
  140.     }
  141.     if (this.eventManager_) {
  142.       this.eventManager_.release();
  143.       this.eventManager_ = null;
  144.     }
  145.     if (this.activeTimer_) {
  146.       this.activeTimer_.stop();
  147.       this.activeTimer_ = null;
  148.     }
  149.     if (this.resetTimer_) {
  150.       this.resetTimer_.stop();
  151.       this.resetTimer_ = null;
  152.     }
  153.   }
  155.   /**
  156.    * @return {string}
  157.    */
  158.   getProjectionMode() {
  159.     return this.projectionMode_;
  160.   }
  162.   /**
  163.    * @param {!Float32Array} quat
  164.    * @return {{pitch: number, yaw: number, roll: number}} as radians
  165.    * @private
  166.    */
  167.   toEulerAngles_(quat) {
  168.     const angles = {
  169.       pitch: 0,
  170.       yaw: 0,
  171.       roll: 0,
  172.     };
  173.     const x = quat[0];
  174.     const y = quat[1];
  175.     const z = quat[2];
  176.     const w = quat[3];
  177.     const x2 = x * x;
  178.     const y2 = y * y;
  179.     const z2 = z * z;
  180.     const w2 = w * w;
  181.     const unit = x2 + y2 + z2 + w2;
  182.     const test = x * w - y * z;
  183.     if (test > 0.499995 * unit) {
  184.       // singularity at the north pole
  185.       angles.pitch = Math.PI / 2;
  186.       angles.yaw = 2 * Math.atan2(y, x);
  187.       angles.roll = 0;
  188.     } else if (test < -0.499995 * unit) {
  189.       // singularity at the south pole
  190.       angles.pitch = -Math.PI / 2;
  191.       angles.yaw = 2 * Math.atan2(y, x);
  192.       angles.roll = 0;
  193.     } else {
  194.       angles.pitch = Math.asin(2 * (x * z - w * y));
  195.       angles.yaw = Math.atan2(2 * (x * w + y * z), 1 - 2 * (z2 + w2));
  196.       angles.roll = Math.atan2(2 * (x * y + z * w), 1 - 2 * (y2 + z2));
  197.     }
  198.     return angles;
  199.   }
  201.   /**
  202.    * Toggle stereoscopic mode
  203.    */
  204.   toggleStereoscopicMode() {
  205.     this.stereoscopicMode_ = !this.stereoscopicMode_;
  206.     if (!this.stereoscopicMode_) {
  207.       this.gl_.viewport(0, 0, this.canvas_.width, this.canvas_.height);
  208.     }
  209.     this.renderGL_(false);
  210.   }
  212.   /**
  213.    * Returns true if stereoscopic mode is enabled.
  214.    *
  215.    * @return {boolean}
  216.    */
  217.   isStereoscopicModeEnabled() {
  218.     return this.stereoscopicMode_;
  219.   }
  221.   /**
  222.    * @private
  223.    */
  224.   init_() {
  225.     this.initMatrices_();
  226.     this.initGL_();
  227.     this.initGLShaders_();
  228.     this.initGLBuffers_();
  229.     this.initGLTexture_();
  231.     const setupListeners = () => {
  232.       if (this.video_.readyState >= HTMLMediaElement.HAVE_ENOUGH_DATA) {
  233.         this.renderGL_();
  234.       }
  236.       if ('requestVideoFrameCallback' in this.video_) {
  237.         const videoFrameCallback = (now, metadata) => {
  238.           if (this.videoCallbackId_ == -1) {
  239.             return;
  240.           }
  241.           this.renderGL_();
  242.           // It is necessary to check this again because this callback can be
  243.           // executed in another thread by the browser and we have to be sure
  244.           // again here that we have not cancelled it in the middle of an
  245.           // execution.
  246.           if (this.videoCallbackId_ == -1) {
  247.             return;
  248.           }
  249.           this.videoCallbackId_ =
  250.               this.video_.requestVideoFrameCallback(videoFrameCallback);
  251.         };
  252.         this.videoCallbackId_ =
  253.             this.video_.requestVideoFrameCallback(videoFrameCallback);
  254.       } else {
  255.         let frameRate;
  256.         this.eventManager_.listen(this.video_, 'canplaythrough', () => {
  257.           this.renderGL_();
  258.         });
  259.         this.eventManager_.listen(this.video_, 'playing', () => {
  260.           if (this.activeTimer_) {
  261.             this.activeTimer_.stop();
  262.           }
  263.           if (!frameRate) {
  264.             const variants = this.player_.getVariantTracks();
  265.             for (const variant of variants) {
  266.               const variantFrameRate = variant.frameRate;
  267.               if (variantFrameRate &&
  268.                   (!frameRate || frameRate < variantFrameRate)) {
  269.                 frameRate = variantFrameRate;
  270.               }
  271.             }
  272.           }
  273.           if (!frameRate) {
  274.             frameRate = 60;
  275.           }
  276.           this.renderGL_();
  277.           this.activeTimer_ = new shaka.util.Timer(() => {
  278.             this.renderGL_();
  279.           }).tickNow().tickEvery(1 / frameRate);
  280.         });
  281.         this.eventManager_.listen(this.video_, 'pause', () => {
  282.           if (this.activeTimer_) {
  283.             this.activeTimer_.stop();
  284.           }
  285.           this.activeTimer_ = null;
  286.           this.renderGL_();
  287.         });
  288.         this.eventManager_.listen(this.video_, 'seeked', () => {
  289.           this.renderGL_();
  290.         });
  292.         this.eventManager_.listen(document, 'visibilitychange', () => {
  293.           this.renderGL_();
  294.         });
  295.       }
  296.     };
  298.     shaka.util.MediaReadyState.waitForReadyState(this.video_,
  299.         HTMLMediaElement.HAVE_CURRENT_DATA,
  300.         this.eventManager_,
  301.         setupListeners);
  302.   }
  304.   /**
  305.    * @private
  306.    */
  307.   initMatrices_() {
  308.     shaka.ui.Matrix4x4.lookAt(
  309.         this.viewMatrix_, [0, 0, 0], [1, 0, 0], [0, 1, 0]);
  310.     shaka.ui.Matrix4x4.getRotation(
  311.         this.originalQuaternion_, this.viewMatrix_);
  312.     shaka.ui.Matrix4x4.scale(
  313.         this.identityMatrix_, this.identityMatrix_, [4.0, 4.0, 4.0]);
  314.   }
  316.   /**
  317.    * @private
  318.    */
  319.   initGL_() {
  320.     this.updateViewPort_();
  321.     this.gl_.viewport(
  322.         0, 0, this.gl_.drawingBufferWidth, this.gl_.drawingBufferHeight);
  323.     this.gl_.clearColor(0.0, 0.0, 0.0, 1.0);
  324.     this.gl_.enable(this.gl_.CULL_FACE);
  325.     this.gl_.cullFace(this.gl_.FRONT);
  326.     // Clear the context with the newly set color. This is
  327.     // the function call that actually does the drawing.
  328.     this.gl_.clear(this.gl_.COLOR_BUFFER_BIT);
  329.   }
  331.   /**
  332.    * @private
  333.    */
  334.   initGLShaders_() {
  335.     const vertexShader = this.getGLShader_(this.gl_.VERTEX_SHADER);
  336.     const fragmentShader = this.getGLShader_(this.gl_.FRAGMENT_SHADER);
  338.     // Create program
  339.     this.shaderProgram_ = this.gl_.createProgram();
  340.     this.gl_.attachShader(this.shaderProgram_, vertexShader);
  341.     this.gl_.attachShader(this.shaderProgram_, fragmentShader);
  342.     this.gl_.linkProgram(this.shaderProgram_);
  344.     // If creating the shader program failed, alert
  345.     if (!this.gl_.getProgramParameter(
  346.         this.shaderProgram_, this.gl_.LINK_STATUS)) {
  347.       shaka.log.error('Unable to initialize the shader program: ',
  348.           this.gl_.getProgramInfoLog(this.shaderProgram_));
  349.     }
  351.     // Bind data
  352.     if (this.projectionMode_ == 'cubemap') {
  353.       this.vertexPositionAttribute_ = this.gl_.getAttribLocation(
  354.           this.shaderProgram_, 'aVertexPosition');
  355.       this.textureCoordAttribute_ = this.gl_.getAttribLocation(
  356.           this.shaderProgram_, 'aTextureCoord');
  357.     } else {
  358.       this.vertexPositionAttribute_ = this.gl_.getAttribLocation(
  359.           this.shaderProgram_, 'a_vPosition');
  360.       this.gl_.enableVertexAttribArray(this.vertexPositionAttribute_);
  361.       this.textureCoordAttribute_ = this.gl_.getAttribLocation(
  362.           this.shaderProgram_, 'a_TexCoordinate');
  363.       this.gl_.enableVertexAttribArray(this.textureCoordAttribute_);
  364.     }
  365.   }
  367.   /**
  368.    * Read and generate WebGL shader
  369.    *
  370.    * @param {number} glType Type of shader requested.
  371.    * @return {?WebGLShader}
  372.    * @private
  373.    */
  374.   getGLShader_(glType) {
  375.     let source;
  377.     switch (glType) {
  378.       case this.gl_.VERTEX_SHADER:
  379.         if (this.projectionMode_ == 'cubemap') {
  380.           source = shaka.ui.VRUtils.VERTEX_CUBE_SHADER;
  381.         } else {
  382.           source = shaka.ui.VRUtils.VERTEX_SPHERE_SHADER;
  383.         }
  384.         break;
  385.       case this.gl_.FRAGMENT_SHADER:
  386.         if (this.projectionMode_ == 'cubemap') {
  387.           source = shaka.ui.VRUtils.FRAGMENT_CUBE_SHADER;
  388.         } else {
  389.           source = shaka.ui.VRUtils.FRAGMENT_SPHERE_SHADER;
  390.         }
  391.         break;
  392.       default:
  393.         return null;
  394.     }
  396.     const shader = this.gl_.createShader(glType);
  398.     this.gl_.shaderSource(shader, source);
  400.     this.gl_.compileShader(shader);
  402.     if (!this.gl_.getShaderParameter(shader, this.gl_.COMPILE_STATUS)) {
  403.       shaka.log.warning('Error in ' + glType + ' shader: ' +
  404.           this.gl_.getShaderInfoLog(shader));
  405.     }
  407.     goog.asserts.assert(shader, 'Should have a shader!');
  409.     return shader;
  410.   }
  412.   /**
  413.    * @private
  414.    */
  415.   initGLBuffers_() {
  416.     if (this.projectionMode_ == 'cubemap') {
  417.       this.geometry_ = shaka.ui.VRUtils.generateCube();
  418.     } else if (this.projectionMode_ == 'halfequirectangular') {
  419.       this.geometry_ = shaka.ui.VRUtils.generateSphere(100, true);
  420.     } else {
  421.       this.geometry_ = shaka.ui.VRUtils.generateSphere(100);
  422.     }
  423.     this.verticesBuffer_ = this.gl_.createBuffer();
  424.     this.gl_.bindBuffer(this.gl_.ARRAY_BUFFER, this.verticesBuffer_);
  425.     this.gl_.bufferData(this.gl_.ARRAY_BUFFER,
  426.         new Float32Array(this.geometry_.vertices), this.gl_.STATIC_DRAW);
  427.     this.verticesTextureCoordBuffer_ = this.gl_.createBuffer();
  428.     this.gl_.bindBuffer(
  429.         this.gl_.ARRAY_BUFFER, this.verticesTextureCoordBuffer_);
  430.     this.gl_.bufferData(this.gl_.ARRAY_BUFFER,
  431.         new Float32Array(this.geometry_.textureCoords), this.gl_.STATIC_DRAW);
  432.     this.verticesIndexBuffer_ = this.gl_.createBuffer();
  433.     this.gl_.bindBuffer(
  434.         this.gl_.ELEMENT_ARRAY_BUFFER, this.verticesIndexBuffer_);
  435.     this.gl_.bufferData(this.gl_.ELEMENT_ARRAY_BUFFER,
  436.         new Uint16Array(this.geometry_.indices), this.gl_.STATIC_DRAW);
  437.   }
  439.   /**
  440.    * @private
  441.    */
  442.   initGLTexture_() {
  443.     this.texture_ = this.gl_.createTexture();
  444.     this.gl_.bindTexture(this.gl_.TEXTURE_2D, this.texture_);
  446.     this.gl_.texParameteri(this.gl_.TEXTURE_2D,
  447.         this.gl_.TEXTURE_WRAP_S, this.gl_.CLAMP_TO_EDGE);
  448.     this.gl_.texParameteri(this.gl_.TEXTURE_2D,
  449.         this.gl_.TEXTURE_WRAP_T, this.gl_.CLAMP_TO_EDGE);
  450.     this.gl_.texParameteri(this.gl_.TEXTURE_2D,
  451.         this.gl_.TEXTURE_MIN_FILTER, this.gl_.NEAREST);
  452.     this.gl_.texParameteri(this.gl_.TEXTURE_2D,
  453.         this.gl_.TEXTURE_MAG_FILTER, this.gl_.NEAREST);
  454.   }
  456.   /**
  457.    * @param {boolean=} textureUpdate
  458.    * @private
  459.    */
  460.   renderGL_(textureUpdate = true) {
  461.     const loadMode = this.player_.getLoadMode();
  462.     const isMSE = loadMode == shaka.Player.LoadMode.MEDIA_SOURCE;
  463.     if (!this.video_ || this.video_.readyState < 2 ||
  464.         (!isMSE && this.video_.playbackRate == 0)) {
  465.       return;
  466.     }
  467.     shaka.ui.Matrix4x4.perspective(this.projectionMatrix_,
  468.         this.fieldOfView_ * Math.PI / 180, 5 / 3.2, 0.1, 100.0);
  470.     if (this.projectionMode_ == 'cubemap') {
  471.       shaka.ui.Matrix4x4.perspective(this.projectionMatrix_,
  472.           this.fieldOfView_ * Math.PI / 180, 5 / 2, 0.1, 100.0);
  473.     } else {
  474.       shaka.ui.Matrix4x4.perspective(this.projectionMatrix_,
  475.           this.fieldOfView_ * Math.PI / 180, 5 / 3.2, 0.1, 100.0);
  476.     }
  478.     this.gl_.useProgram(this.shaderProgram_);
  480.     this.gl_.clear(this.gl_.COLOR_BUFFER_BIT);
  481.     this.updateViewPort_();
  483.     if (textureUpdate) {
  484.       this.gl_.activeTexture(this.gl_.TEXTURE0);
  485.       this.gl_.bindTexture(this.gl_.TEXTURE_2D, this.texture_);
  486.       this.gl_.pixelStorei(this.gl_.UNPACK_PREMULTIPLY_ALPHA_WEBGL, 0);
  487.       this.gl_.texImage2D(this.gl_.TEXTURE_2D, 0, this.gl_.RGBA,
  488.           this.gl_.RGBA, this.gl_.UNSIGNED_BYTE, this.video_);
  489.     }
  491.     // Update matrix
  492.     if (this.projectionMode_ == 'equirectangular' ||
  493.         this.projectionMode_ == 'halfequirectangular') {
  494.       shaka.ui.Matrix4x4.multiply(this.viewProjectionMatrix_,
  495.           this.viewMatrix_, this.identityMatrix_);
  496.       shaka.ui.Matrix4x4.multiply(this.viewProjectionMatrix_,
  497.           this.projectionMatrix_, this.viewProjectionMatrix_);
  498.     }
  500.     // Plumbing
  501.     // Vertices
  502.     this.gl_.bindBuffer(this.gl_.ARRAY_BUFFER, this.verticesBuffer_);
  503.     goog.asserts.assert(this.vertexPositionAttribute_ != null,
  504.         'Should have a texture attribute!');
  505.     this.gl_.vertexAttribPointer(
  506.         this.vertexPositionAttribute_, 3, this.gl_.FLOAT, false, 0, 0);
  507.     this.gl_.enableVertexAttribArray(this.vertexPositionAttribute_);
  509.     // UVs
  510.     this.gl_.bindBuffer(
  511.         this.gl_.ARRAY_BUFFER, this.verticesTextureCoordBuffer_);
  512.     goog.asserts.assert(this.textureCoordAttribute_ != null,
  513.         'Should have a texture attribute!');
  514.     this.gl_.vertexAttribPointer(
  515.         this.textureCoordAttribute_, 2, this.gl_.FLOAT, false, 0, 0);
  516.     this.gl_.enableVertexAttribArray(this.textureCoordAttribute_);
  518.     this.gl_.bindBuffer(
  519.         this.gl_.ELEMENT_ARRAY_BUFFER, this.verticesIndexBuffer_);
  521.     this.setMatrixUniforms_();
  523.     this.gl_.uniform1i(
  524.         this.gl_.getUniformLocation(this.shaderProgram_, 'uSampler'), 0);
  526.     if (this.stereoscopicMode_) {
  527.       this.gl_.viewport(0, 0, this.canvas_.width / 2, this.canvas_.height);
  528.     }
  530.     // Draw
  531.     this.gl_.drawElements(this.gl_.TRIANGLES,
  532.         this.geometry_.indices.length, this.gl_.UNSIGNED_SHORT, 0);
  534.     if (this.stereoscopicMode_) {
  535.       this.gl_.viewport(this.canvas_.width / 2, 0,
  536.           this.canvas_.width / 2, this.canvas_.height);
  537.       this.gl_.drawElements(this.gl_.TRIANGLES,
  538.           this.geometry_.indices.length, this.gl_.UNSIGNED_SHORT, 0);
  539.     }
  540.   }
  542.   /**
  543.    * @private
  544.    */
  545.   setMatrixUniforms_() {
  546.     if (this.projectionMode_ == 'cubemap') {
  547.       this.gl_.uniformMatrix4fv(
  548.           this.gl_.getUniformLocation(this.shaderProgram_, 'uProjectionMatrix'),
  549.           false, this.projectionMatrix_);
  550.       this.gl_.uniformMatrix4fv(
  551.           this.gl_.getUniformLocation(this.shaderProgram_, 'uModelViewMatrix'),
  552.           false, this.viewProjectionMatrix_);
  553.     } else {
  554.       this.gl_.uniformMatrix4fv(
  555.           this.gl_.getUniformLocation(this.shaderProgram_, 'u_VPMatrix'),
  556.           false, this.viewProjectionMatrix_);
  557.     }
  558.   }
  560.   /**
  561.    * @private
  562.    */
  563.   updateViewPort_() {
  564.     let currentWidth = this.video_.videoWidth;
  565.     if (!currentWidth) {
  566.       currentWidth = this.canvas_.scrollWidth;
  567.     }
  568.     let currentHeight = this.video_.videoHeight;
  569.     if (!currentHeight) {
  570.       currentHeight = this.canvas_.scrollHeight;
  571.     }
  573.     if (this.previousCanvasWidth_ !== currentWidth ||
  574.         this.previousCanvasHeight_ !== currentHeight) {
  575.       this.canvas_.width = currentWidth;
  576.       this.canvas_.height = currentHeight;
  578.       this.previousCanvasWidth_ = currentWidth;
  579.       this.previousCanvasHeight_ = currentHeight;
  581.       const ratio = currentWidth / currentHeight;
  583.       this.projectionMatrix_ = shaka.ui.Matrix4x4.frustum(
  584.           this.projectionMatrix_, -ratio, ratio, -1, 1, 0, 1);
  586.       this.gl_.viewport(0, 0, currentWidth, currentHeight);
  587.     }
  588.   }
  590.   /**
  591.    * Rotate the view matrix global
  592.    *
  593.    * @param {!number} yaw Yaw.
  594.    * @param {!number} pitch Pitch.
  595.    * @param {!number} roll Roll.
  596.    */
  597.   rotateViewGlobal(yaw, pitch, roll) {
  598.     let yawBoundary = Infinity;
  599.     let pitchBoundary = 90.0 * Math.PI / 180;
  601.     if (this.projectionMode_ == 'halfequirectangular') {
  602.       yawBoundary = 90.0 * Math.PI / 180;
  603.       pitchBoundary /= 2;
  604.     }
  606.     let matrix;
  607.     if (this.projectionMode_ == 'cubemap') {
  608.       matrix = this.viewProjectionMatrix_;
  609.     } else {
  610.       matrix = this.viewMatrix_;
  611.     }
  613.     // Variable to limit the movement
  614.     this.positionX_ += yaw;
  615.     this.positionY_ += pitch;
  617.     if (this.positionX_ < yawBoundary &&
  618.       this.positionX_ > -yawBoundary) {
  619.       // Rotate global axis
  620.       shaka.ui.Matrix4x4.rotateY(matrix, matrix, yaw);
  621.     } else {
  622.       this.positionX_ -= yaw;
  623.     }
  625.     if (this.positionY_ < pitchBoundary &&
  626.       this.positionY_ > -pitchBoundary) {
  627.       const out = shaka.ui.Matrix4x4.create();
  628.       shaka.ui.Matrix4x4.rotateX(out, shaka.ui.Matrix4x4.create(), -1 * pitch);
  629.       // Rotate local axis
  630.       shaka.ui.Matrix4x4.multiply(matrix, out, matrix);
  631.     } else {
  632.       // Doing this we restart the value to the previous position,
  633.       // to not maintain a value over 90º or under -90º.
  634.       this.positionY_ -= pitch;
  635.     }
  637.     const out2 = shaka.ui.Matrix4x4.create();
  638.     shaka.ui.Matrix4x4.rotateZ(out2, shaka.ui.Matrix4x4.create(), roll);
  640.     // Rotate local axis
  641.     shaka.ui.Matrix4x4.multiply(matrix, out2, matrix);
  643.     this.renderGL_(false);
  644.   }
  646.   /**
  647.    * @param {number} amount
  648.    */
  649.   zoom(amount) {
  650.     const zoomMin = 20;
  651.     const zoomMax = 100;
  652.     amount /= 50;
  653.     if (this.fieldOfView_ >= zoomMin && this.fieldOfView_ <= zoomMax) {
  654.       this.fieldOfView_ += amount;
  655.     }
  656.     if (this.fieldOfView_ < zoomMin) {
  657.       this.fieldOfView_ = zoomMin;
  658.     } else if (this.fieldOfView_ > zoomMax) {
  659.       this.fieldOfView_ = zoomMax;
  660.     }
  661.     this.renderGL_(false);
  662.   }
  664.   /**
  665.    * @return {number}
  666.    */
  667.   getFieldOfView() {
  668.     return this.fieldOfView_;
  669.   }
  671.   /**
  672.    * @param {number} fieldOfView
  673.    */
  674.   setFieldOfView(fieldOfView) {
  675.     this.fieldOfView_ = fieldOfView;
  676.     this.renderGL_(false);
  677.   }
  679.   /**
  680.    * @return {number}
  681.    */
  682.   getNorth() {
  683.     shaka.ui.Matrix4x4.getRotation(this.currentQuaternion_, this.viewMatrix_);
  685.     const angles = this.toEulerAngles_(this.currentQuaternion_);
  687.     const normalizedDir = {
  688.       x: Math.cos(angles.yaw) * Math.cos(angles.pitch),
  689.       y: Math.sin(angles.yaw) * Math.cos(angles.pitch),
  690.       z: Math.sin(angles.pitch),
  691.     };
  693.     const northYaw = Math.acos(normalizedDir.x);
  695.     return ((northYaw * 180) / Math.PI);
  696.   }
  698.   /**
  699.    * @param {boolean=} firstTime
  700.    */
  701.   reset(firstTime = true) {
  702.     const steps = 20;
  704.     if (firstTime) {
  705.       shaka.ui.Matrix4x4.getRotation(
  706.           this.currentQuaternion_, this.viewMatrix_);
  707.       this.cont_ = 0;
  708.       this.diff_ = shaka.ui.MatrixQuaternion.create();
  709.       this.diff_[0] =
  710.           (this.currentQuaternion_[0] - this.originalQuaternion_[0]) / steps;
  711.       this.diff_[1] =
  712.           (this.currentQuaternion_[1] - this.originalQuaternion_[1]) / steps;
  713.       this.diff_[2] =
  714.           (this.currentQuaternion_[2] - this.originalQuaternion_[2]) / steps;
  715.       this.diff_[3] =
  716.           (this.currentQuaternion_[3] - this.originalQuaternion_[3]) / steps;
  717.     }
  719.     this.currentQuaternion_[0] -= this.diff_[0];
  720.     this.currentQuaternion_[1] -= this.diff_[1];
  721.     this.currentQuaternion_[2] -= this.diff_[2];
  722.     this.currentQuaternion_[3] -= this.diff_[3];
  724.     // Set the view to the original matrix
  725.     const out = shaka.ui.Matrix4x4.create();
  727.     shaka.ui.MatrixQuaternion.normalize(
  728.         this.currentQuaternion_, this.currentQuaternion_);
  730.     shaka.ui.Matrix4x4.fromQuat(out, this.currentQuaternion_);
  732.     this.viewMatrix_ = out;
  734.     if (this.resetTimer_) {
  735.       this.resetTimer_.stop();
  736.       this.resetTimer_ = null;
  737.     }
  738.     if (this.cont_ < steps) {
  739.       this.resetTimer_ = new shaka.util.Timer(() => {
  740.         this.reset(false);
  741.         this.positionX_ = 0;
  742.         this.positionY_ = 0;
  743.         this.cont_++;
  744.         this.renderGL_(false);
  745.       }).tickAfter(shaka.ui.VRWebgl.ANIMATION_DURATION_ / steps);
  746.     } else {
  747.       shaka.ui.Matrix4x4.fromQuat(out, this.originalQuaternion_);
  748.       this.viewMatrix_ = out;
  749.     }
  750.   }
  751. };
  753. /**
  754.  * @const {number}
  755.  */
  756. shaka.ui.VRWebgl.ANIMATION_DURATION_ = 0.5;