blob: eeee4319c14db7a2f89c6cc1df623c365acce6a2 [file] [log] [blame]
<!DOCTYPE html>
<title>Map-To-Mesh Demo</title>
#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;
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);
0x800C, camera3D.DOM_CAMERA_PITCH, degreesPerSecond);
0x800D, camera3D.DOM_CAMERA_PITCH, -degreesPerSecond);
0x800E, camera3D.DOM_CAMERA_YAW, degreesPerSecond);
0x800F, camera3D.DOM_CAMERA_YAW, -degreesPerSecond);
// Left joystick
0x8011, camera3D.DOM_CAMERA_PITCH, degreesPerSecond);
0x8012, camera3D.DOM_CAMERA_PITCH, -degreesPerSecond);
0x8013, camera3D.DOM_CAMERA_YAW, degreesPerSecond);
0x8014, camera3D.DOM_CAMERA_YAW, -degreesPerSecond);
// Right joystick
0x8015, camera3D.DOM_CAMERA_PITCH, degreesPerSecond);
0x8016, camera3D.DOM_CAMERA_PITCH, -degreesPerSecond);
0x8017, camera3D.DOM_CAMERA_YAW, degreesPerSecond);
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(
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(
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);
<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.
<!-- 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>