<!DOCTYPE html>
<html>

<head>
  <title>Map-To-Mesh Demo</title>

  <style>
    #v {
      width: 100%;
      height: 100%;
      filter: map-to-mesh(equirectangular, 100deg 60deg,
                          matrix3d(1, 0, 0, 0,
                                   0, 1, 0, 0,
                                   0, 0, 1, 0,
                                   0, 0, 0, 1));
    }

    .instructions {
      position: absolute;
      left: 0;
      background-color: white;
      color: black;
    }

    @keyframes blink {
      from {background-color: white;}
      to {background-color: black;}
    }

    .spinner {
      position: absolute;
      left: 0;
      bottom: 0;
      animation: blink 1s infinite alternate;
      width: 20px;
      height: 20px;
    }

    #fps {
      position: absolute;
      left: 50px;
      bottom: 0;
      background-color: white;
      color: black;
    }
  </style>

  <script>
    var degreesPerSecond = 90;
    // The following mappings are done in this order:
    // Up, Down, Left, Right

    // Direction keys
    camera3D.createKeyMapping(38, camera3D.DOM_CAMERA_PITCH, degreesPerSecond);
    camera3D.createKeyMapping(40, camera3D.DOM_CAMERA_PITCH, -degreesPerSecond);
    camera3D.createKeyMapping(37, camera3D.DOM_CAMERA_YAW, degreesPerSecond);
    camera3D.createKeyMapping(39, camera3D.DOM_CAMERA_YAW, -degreesPerSecond);

    // DPAD
    camera3D.createKeyMapping(
        0x800C, camera3D.DOM_CAMERA_PITCH, degreesPerSecond);
    camera3D.createKeyMapping(
        0x800D, camera3D.DOM_CAMERA_PITCH, -degreesPerSecond);
    camera3D.createKeyMapping(
        0x800E, camera3D.DOM_CAMERA_YAW, degreesPerSecond);
    camera3D.createKeyMapping(
        0x800F, camera3D.DOM_CAMERA_YAW, -degreesPerSecond);

    // Left joystick
    camera3D.createKeyMapping(
        0x8011, camera3D.DOM_CAMERA_PITCH, degreesPerSecond);
    camera3D.createKeyMapping(
        0x8012, camera3D.DOM_CAMERA_PITCH, -degreesPerSecond);
    camera3D.createKeyMapping(
        0x8013, camera3D.DOM_CAMERA_YAW, degreesPerSecond);
    camera3D.createKeyMapping(
        0x8014, camera3D.DOM_CAMERA_YAW, -degreesPerSecond);

    // Right joystick
    camera3D.createKeyMapping(
        0x8015, camera3D.DOM_CAMERA_PITCH, degreesPerSecond);
    camera3D.createKeyMapping(
        0x8016, camera3D.DOM_CAMERA_PITCH, -degreesPerSecond);
    camera3D.createKeyMapping(
        0x8017, camera3D.DOM_CAMERA_YAW, degreesPerSecond);
    camera3D.createKeyMapping(
        0x8018, camera3D.DOM_CAMERA_YAW, -degreesPerSecond);

    // Update the frame rate counter at a regular interval.
    function UpdateFPS() {
      if ('h5vcc' in window && 'cVal' in window.h5vcc) {
        // Query Cobalt for the average amount of time between the start of
        // each frame.  Translate that into a framerate and then update a
        // framerate counter on the window.
        var average_frame_time_in_us = window.h5vcc.cVal.getValue(
            'Renderer.Rasterize.DurationInterval.Avg');
        if (!average_frame_time_in_us || average_frame_time_in_us <= 0) {
          // In older versions of Cobalt use a different name for the framerate
          // counter, so try falling back to that if the first fails.
          average_frame_time_in_us = window.h5vcc.cVal.getValue(
              'Renderer.Rasterize.Duration.Avg');
        }

        if (average_frame_time_in_us && average_frame_time_in_us > 0) {
          // Convert frame time into frame rate (by taking the inverse).
          // We also multiply by 1000000 to convert from microseconds to
          // seconds.
          var average_frames_per_second =
              Math.round(1000000.0 / average_frame_time_in_us);

          // Update the display with our calculated frame rate.
          var fps_counter = document.getElementById('fps');
          fps_counter.innerHTML = 'FPS: ' + average_frames_per_second;
        }
      }
      window.setTimeout(UpdateFPS, 1000);
    }
    window.setTimeout(UpdateFPS, 1000);
  </script>
</head>

<body>
  <video autoplay loop id="v" src="progressive.mp4"></video>
  <div class="instructions">
    Use either the keyboard keys, direction keys, or analog joystick/thumbstick
    to look around.
  </div>
  <!-- The spinner is required in order to get around an implementation detail
       of the 'Renderer.Rasterize.DurationInterval.Avg' cval that we rely on
       for measuring the framerate.  In a nutshell, that cval is only updated
       when a CSS animation is active, but not when a video is playing, even
       though both of these things result in a continual re-rasterization of
       the UI/video. -->
  <div class="spinner"></div>
  <div id="fps"></div>
</body>

</html>