Source: extern/screen.js

  1. import register from "../util/register.js";
  3. import m_cam_fact from "../intern/camera.js";
  4. import m_cont_fact from "../intern/container.js";
  5. import m_cfg_fact from "../intern/config.js";
  6. import m_hud_fact from "../intern/hud.js";
  7. import m_input_fact from "../intern/input.js";
  8. import m_main_fact from "../intern/main.js";
  9. import m_obj_util_fact from "../intern/obj_util.js";
  10. import m_print_fact from "../intern/print.js";
  11. import m_scs_fact from "../intern/scenes.js";
  12. import * as m_vec4 from "../libs/gl_matrix/vec4.js";
  14. /**
  15.  * Screen API
  16.  * The API is used to manage content on the screen: fullscreen, HMD, HUD.
  17.  * @module screen
  18.  */
  19. function Screen(ns, exports) {
  21. var m_cam   = m_cam_fact(ns);
  22. var m_cont  = m_cont_fact(ns);
  23. var m_cfg   = m_cfg_fact(ns);
  24. var m_hud   = m_hud_fact(ns);
  25. var m_input = m_input_fact(ns);
  26. var m_main  = m_main_fact(ns);
  27. var m_obj_util = m_obj_util_fact(ns);
  28. var m_print = m_print_fact(ns);
  29. var m_scs   = m_scs_fact(ns);
  31. var _vec4_tmp = m_vec4.create();
  32. var _vec4_tmp2 = m_vec4.create();
  34. var _splited_screen = false;
  36. var _exit_cb = function() {};
  37. var _vr_present_change_cb = function() {};
  39. var cfg_dbg = m_cfg.debug_subs;
  41. // TODO: fix API doc of draw_mixer_strip function. Add information about id,
  42. // is_active, slot, params, active_param, mute, solo params.
  44. /**
  45.  * Draw the mixer strip.
  46.  * Used by mixer addon.
  47.  * @method module:screen.draw_mixer_strip
  48.  */
  49. exports.draw_mixer_strip = m_hud.draw_mixer_strip;
  51. /**
  52.  * Plot the array.
  53.  * @method module:screen.plot_array
  54.  * @param {string} header Plot header
  55.  * @param {number} slot Slot number
  56.  * @param {Float32Array} arr Array
  57.  * @param {number} arg_min Minimum plot argument value
  58.  * @param {number} arg_max Maximum plot argument value
  59.  * @param {number} val_min Minimum plot value
  60.  * @param {number} val_max Maximum plot value
  61.  */
  62. exports.plot_array = m_hud.plot_array;
  64. exports.request_fullscreen = request_fullscreen;
  65. /**
  66.  * Request fullscreen mode, i.e. presenting element entire to a screen.
  67.  * It is better to use
  68.  * {@link module:screen.request_fullscreen_hmd|request_fullscreen_hmd} for
  69.  * presenting VR content on head-mounted display.
  70.  * Security issues: execute by user event.
  71.  * @method module:screen.request_fullscreen
  72.  * @param {HTMLElement} [elem=Canvas container element] HTML element.
  73.  * @param {FullscreenEnabledCallback} [enabled_cb] Enabled callback.
  74.  * @param {FullscreenDisabledCallback} [disabled_cb] Disabled callback.
  75.  */
  76. function request_fullscreen(elem, enabled_cb, disabled_cb) {
  77.     elem = elem || m_cont.get_container();
  78.     enabled_cb = enabled_cb || function() {};
  79.     disabled_cb = disabled_cb || function() {};
  81.     function on_fullscreen_change() {
  82.         if (document.fullscreenElement === elem ||
  83.                 document.webkitFullscreenElement === elem ||
  84.                 document.mozFullScreenElement === elem ||
  85.                 document.webkitIsFullScreen ||
  86.                 document.msFullscreenElement === elem) {
  87.             //m_print.log("Fullscreen enabled");
  88.             enabled_cb();
  89.         } else {
  90.             document.removeEventListener("fullscreenchange",
  91.                     on_fullscreen_change, false);
  92.             document.removeEventListener("webkitfullscreenchange",
  93.                     on_fullscreen_change, false);
  94.             document.removeEventListener("mozfullscreenchange",
  95.                     on_fullscreen_change, false);
  96.             document.removeEventListener("MSFullscreenChange",
  97.                     on_fullscreen_change, false);
  98.             //m_print.log("Fullscreen disabled");
  99.             disabled_cb();
  100.         }
  101.     }
  103.     document.addEventListener("fullscreenchange", on_fullscreen_change, false);
  104.     document.addEventListener("webkitfullscreenchange", on_fullscreen_change, false);
  105.     document.addEventListener("mozfullscreenchange", on_fullscreen_change, false);
  106.     document.addEventListener("MSFullscreenChange", on_fullscreen_change, false);
  108.     elem.requestFullScreen = elem.requestFullScreen ||
  109.             elem.webkitRequestFullScreen || elem.mozRequestFullScreen
  110.             || elem.msRequestFullscreen;
  111.     if (elem.requestFullScreen)
  112.         elem.requestFullScreen();
  113.     else
  114.         m_print.error("B4W App: request fullscreen method is not supported");
  115. }
  117. exports.exit_fullscreen = exit_fullscreen;
  118. /**
  119.  * Exit fullscreen mode.
  120.  * @method module:screen.exit_fullscreen
  121.  */
  122. function exit_fullscreen() {
  124.     var exit_fs = document.exitFullscreen || document.webkitExitFullscreen ||
  125.             document.mozCancelFullScreen || document.msExitFullscreen;
  127.     if (typeof exit_fs != "function")
  128.         m_print.error("B4W App: exit fullscreen method is not supported");
  130.     exit_fs.apply(document);
  131. }
  133. /**
  134.  * Check whether fullscreen mode is available.
  135.  * @method module:screen.check_fullscreen
  136.  * @returns {boolean} Result of the check.
  137.  */
  138. exports.check_fullscreen = m_input.check_fullscreen;
  140. /**
  141.  * Request HMD fullscreen mode. Use the function for represent VR content
  142.  * on a head-mounted display.
  143.  * The function requires using of a browser supporting WebVR API
  144.  * or a mobile browser supporting Fullscreen API.
  145.  * Security issues: execute by user event.
  146.  * @method module:screen.request_fullscreen_hmd
  147.  * @param {HTMLElement} [element=Canvas container element] HTML element.
  148.  * @param {GenericCallback} [enabled_cb] The callback will be called right
  149.  * after switching HMD fullscreen mode on.
  150.  * @param {GenericCallback} [disabled_cb] The callback will be called right
  151.  * after switching HMD fullscreen mode off.
  152.  * @example
  153.  * var m_input = require("input");
  154.  * var m_screen = require("screen");
  155.  * m_input.add_click_listener(document.body, function() {
  156.  *     m_screen.request_fullscreen_hmd();
  157.  * });
  158.  */
  159. exports.request_fullscreen_hmd = function(element, enabled_cb, disabled_cb) {
  160.     if (!m_cfg.get("stereo") == "HMD" &&
  161.             !(m_cfg.get("stereo") == "NONE" && m_cfg.get("is_mobile_device")))
  162.         return;
  164.     var hmd_device = m_input.get_device_by_type_element(m_input.DEVICE_HMD);
  165.     if (hmd_device &&
  166.             m_input.get_value_param(hmd_device, m_input.HMD_WEBVR_TYPE) & m_input.HMD_WEBVR1) {
  167.         var webvr_display = hmd_device.webvr_display;
  168.         if (webvr_display && !webvr_display.isPresenting) {
  170.             enabled_cb = enabled_cb || function() {};
  171.             disabled_cb = disabled_cb || function() {};
  173.             _vr_present_change_cb = function() {
  174.                 if (webvr_display.isPresenting)
  175.                     enabled_cb();
  176.                 else {
  177.                     window.removeEventListener('vrdisplaypresentchange', _vr_present_change_cb);
  178.                     disabled_cb();
  179.                 }
  180.             }
  181.             window.addEventListener('vrdisplaypresentchange', _vr_present_change_cb, false);
  183.             var capabilities = webvr_display.capabilities;
  184.             if (!capabilities.canPresent)
  185.                 m_print.error("HMD fullscreen request failed.");
  186.             else {
  187.                 var canvas = m_cont.get_canvas();
  188.                 webvr_display.requestPresent([{source: canvas}]).then(function () {
  189.                     // TODO: add some logic
  190.                 }, function () {
  191.                     m_print.error("HMD fullscreen request failed.");
  192.                 });
  193.             }
  194.         }
  195.     } else
  196.         request_fullscreen(element, enabled_cb, disabled_cb);
  198. }
  200. /**
  201.  * Exit HMD fullscreen mode.
  202.  * @method module:screen.exit_fullscreen_hmd
  203.  */
  204. exports.exit_fullscreen_hmd = function() {
  205.     if (!m_cfg.get("stereo") == "HMD" &&
  206.             !(m_cfg.get("stereo") == "NONE" && m_cfg.get("is_mobile_device")))
  207.         return;
  209.     var hmd_device = m_input.get_device_by_type_element(m_input.DEVICE_HMD);
  210.     if (hmd_device &&
  211.             m_input.get_value_param(hmd_device, m_input.HMD_WEBVR_TYPE) & m_input.HMD_WEBVR1) {
  212.         var webvr_display = hmd_device.webvr_display;
  213.         if (webvr_display && webvr_display.isPresenting) {
  214.             webvr_display.exitPresent();
  215.             m_cont.resize_to_container(true);
  216.         }
  217.     } else
  218.         exit_fullscreen();
  219. }
  221. /**
  222.  * Check whether HMD fullscreen mode is available.
  223.  * @method module:screen.check_fullscreen_hmd
  224.  * @returns {boolean} The result of the checking.
  225.  */
  226. exports.check_fullscreen_hmd = function() {
  227.     var hmd_device = m_input.get_device_by_type_element(m_input.DEVICE_HMD);
  228.     var is_webvr_1 = m_input.get_value_param(hmd_device, m_input.HMD_WEBVR_TYPE) & m_input.HMD_WEBVR1;
  229.     if (hmd_device &&
  230.             (is_webvr_1 && hmd_device.webvr_display || !is_webvr_1 && m_input.check_fullscreen()))
  231.         return true;
  232.     return false;
  233. }
  235. exports.request_split_screen = request_split_screen;
  236. /**
  237.  * Request "split screen" mode, which represent rendering two eyes suitable
  238.  * for head-mounted displays.
  239.  * The function requires setting the "stereo" config to "HMD"
  240.  * {see @link module:config}, using a browser supporting WebVR API
  241.  * or a mobile browser.
  242.  * @method module:screen.request_split_screen
  243.  * @param {GenericCallback} [enter_cb] The callback will be called right
  244.  * after turning split screen mode on.
  245.  * @param {GenericCallback} [exit_cb] The callback will be called right
  246.  * after turning split screen mode off.
  247.  * @example
  248.  * var m_app = require("app");
  249.  * var m_screen = require("screen");
  250.  * exports.init = function() {
  251.  *     m_app.init({
  252.  *         // . . .
  253.  *         stereo: "HMD"
  254.  *    });
  255.  * }
  256.  *
  257.  * m_screen.request_split_screen();
  258.  */
  259. function request_split_screen(enter_cb, exit_cb) {
  260.     var hmd_device = m_input.get_device_by_type_element(m_input.DEVICE_HMD);
  261.     if (!hmd_device)
  262.         return false;
  264.     if (_splited_screen)
  265.         return true;
  267.     // _exit_cb will be called in the exit_split_screen function.
  268.     _exit_cb = exit_cb;
  270.     if (m_scs.check_active()) {
  271.          var camobj = m_scs.get_camera(m_scs.get_active());
  272.          if (!camobj)
  273.              return;
  274.     } else
  275.         return;
  277.     if (hmd_device.registered) {
  278.         enable_split_screen(camobj);
  280.         if (enter_cb)
  281.             enter_cb();
  282.     } else {
  283.         m_input.request_register_device(hmd_device);
  284.         hmd_device.registered_cb = function() {
  285.             enable_split_screen(camobj);
  287.             if (enter_cb)
  288.                 enter_cb();
  289.         }
  290.     }
  291. }
  293. function enable_split_screen(camobj) {
  294.     var hmd_device = m_input.get_device_by_type_element(m_input.DEVICE_HMD);
  295.     if (!hmd_device)
  296.         return false;
  298.     if (_splited_screen)
  299.         return true;
  301.     var hmd_type = m_input.get_value_param(hmd_device, m_input.HMD_WEBVR_TYPE);
  302.     if (hmd_type & m_input.HMD_WEBVR1_1) {
  303.         var webvr_display = hmd_device.webvr_display;
  304.         // TODO: check code below
  305.         // There was strange behavior Samsung Internet on GearVR
  306.         var left_eye = webvr_display.getEyeParameters("left");
  307.         var right_eye = webvr_display.getEyeParameters("right");
  309.         m_cont.resize(
  310.                 Math.max(left_eye.renderWidth, right_eye.renderWidth) * 2,
  311.                 Math.max(left_eye.renderHeight, right_eye.renderHeight), false);
  313.         // TODO: uncomment until fieldOfView is not in WebVR 1.*
  314.         // var hmd_left_proj_mat = m_input.get_vector_param(hmd_device,
  315.         //         m_input.HMD_PROJ_LEFT, _mat4_tmp);
  316.         // var hmd_right_proj_mat = m_input.get_vector_param(hmd_device,
  317.         //         m_input.HMD_PROJ_RIGHT, _mat4_tmp2);
  318.         // m_cam.set_hmd_proj_mat(camobj, hmd_left_proj_mat, hmd_right_proj_mat);
  319.     } else {
  320.         // non-WebVR, pre-WebVR 1.1
  321.         // TODO: remove magic numbers
  322.         var canvas = m_cont.get_canvas();
  323.         var actual_width = Math.max(2 * canvas.height, canvas.width);
  324.         var actual_height = actual_width / 2;
  325.         m_cont.resize(actual_width, actual_height, false);
  326.     }
  328.     // TODO: remove HMD FOV
  329.     // HMD FOV deprecated. Use projection matrixes instead.
  330.     var hmd_left_fov = m_input.get_vector_param(hmd_device,
  331.             m_input.HMD_FOV_LEFT, _vec4_tmp);
  332.     var hmd_right_fov = m_input.get_vector_param(hmd_device,
  333.             m_input.HMD_FOV_RIGHT, _vec4_tmp2);
  334.     m_cam.set_hmd_fov(camobj, hmd_left_fov, hmd_right_fov,
  335.             !Boolean(hmd_type & m_input.HMD_WEBVR1_1));
  337.     var hmd_params = {};
  338.     hmd_params.base_line_factor = 0.5;
  339.     hmd_params.inter_lens_factor = 0.5;
  340.     hmd_params.enable_hmd_stereo = true;
  341.     if (hmd_type & (m_input.HMD_NON_WEBVR | m_input.HMD_WEBVR_MOBILE |
  342.             m_input.HMD_WEBVR_DESKTOP)) {
  343.         hmd_params.distortion_coefs = [
  344.             hmd_device.distortion_coefs[0],
  345.             hmd_device.distortion_coefs[1]
  346.         ];
  347.         hmd_params.chromatic_aberration_coefs = [
  348.             hmd_device.chromatic_aberration_coefs[0],
  349.             hmd_device.chromatic_aberration_coefs[1],
  350.             hmd_device.chromatic_aberration_coefs[2],
  351.             hmd_device.chromatic_aberration_coefs[3]
  352.         ];
  353.         if (!hmd_device.webvr_hmd_device)
  354.             if (hmd_device.base_line_dist && hmd_device.height_dist && hmd_device.bevel_size)
  355.                 hmd_params.base_line_factor = (hmd_device.base_line_dist - hmd_device.bevel_size) /
  356.                         hmd_device.height_dist;
  357.             else if (!hmd_device.bevel_size)
  358.                 hmd_params.base_line_factor = hmd_device.base_line_dist / hmd_device.height_dist;
  359.         if (hmd_device.inter_lens_dist && hmd_device.width_dist && !hmd_device.webvr_hmd_device)
  360.             hmd_params.inter_lens_factor = hmd_device.inter_lens_dist /
  361.                     hmd_device.width_dist;
  362.     }
  364.     // NOTE: prevent crash in case of difference of slink's dimensions.
  365.     // For example: "debug" slink ~ 0.5 X 1.0,
  366.     //              "origin" slink ~ distortion_scale * 0.5 X distortion_scale * 1.0
  367.     if (!cfg_dbg.enabled)
  368.         m_scs.multiply_size_mult(0.5, 1.0);
  369.     m_scs.set_hmd_params(hmd_params);
  371.     var eye_distance = m_input.get_value_param(hmd_device, m_input.HMD_EYE_DISTANCE);
  372.     if (eye_distance) {
  373.         var active_scene = m_scs.get_active();
  374.         var cam_scene_data = m_obj_util.get_scene_data(camobj, active_scene);
  375.         var cameras = cam_scene_data.cameras;
  376.         m_cam.set_eye_distance(cameras, eye_distance);
  377.     }
  379.     m_scs.render_both_eyes();
  381.     // m_input.reset_device(hmd_device);
  383.     _splited_screen = true;
  384.     return true;
  385. }
  387. /**
  388.  * Exit "split screen" mode.
  389.  * @method module:screen.exit_split_screen
  390.  * @returns {boolean} "Split screen" mode is disabled.
  391.  */
  392. exports.exit_split_screen = function() {
  393.     var hmd_device = m_input.get_device_by_type_element(m_input.DEVICE_HMD)
  394.     if (!_splited_screen || !hmd_device || !hmd_device.registered)
  395.         return false;
  397.     // set up non-vr mode
  398.     var hmd_params = {};
  399.     hmd_params.enable_hmd_stereo = false;
  400.     m_scs.set_hmd_params(hmd_params);
  402.     _splited_screen = false;
  404.     if (_exit_cb)
  405.         _exit_cb();
  407.     m_scs.render_one_eye();
  409.     if (!cfg_dbg.enabled)
  410.         m_scs.multiply_size_mult(2.0, 1.0);
  412.     // resize screen to canvas resolution (non-vr mode)
  413.     m_cont.resize_to_container(true);
  414.     return true;
  415. }
  417. /**
  418.  * Take a screenshot and download as screenshot.png image.
  419.  * @method module:screen.shot
  420.  * @param {string} [format="image/png"] The MIME image format ("image/png",
  421.  * "image/jpeg", "image/webp" and so on)
  422.  * @param {number} [quality=1.0] Number between 0 and 1 for types: "image/jpeg",
  423.  * "image/webp"
  424.  * @example
  425.  * var m_screen = require("screen");
  426.  * m_screen.shot();
  427.  */
  428. exports.shot = function(format, quality) {
  429.     format = format || "image/png";
  430.     quality = quality || 1.0;
  432.     var cb = function(url) {
  433.         var file_name = "screenshot." + format.split("/")[1];
  434.         if (navigator.msSaveOrOpenBlob) {
  435.             navigator.msSaveOrOpenBlob(url, file_name);
  436.         } else {
  437.             var a = window.document.createElement("a");
  438.             document.body.appendChild(a);
  439.             a.style.display = "none";
  440.             a.href = url;
  441.             a.download = "screenshot." + format.split("/")[1];
  442.             a.click();
  444.             document.body.removeChild(a);
  445.         }
  446.     }
  448.     m_main.canvas_data_url(cb, format, quality, true);
  449. }
  451. }
  453. var screen_factory = register("screen", Screen);
  455. export default screen_factory;