webvr404/index.ejs at master · Art404/webvr404 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html lang="en">
  <head>
  <title><%= htmlWebpackPlugin.options.title %></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  <style>
    body {
      width: 100%;
      height: 100%;
      background-color: #000;
      color: #fff;
      margin: 0px;
      padding: 0;
      overflow: hidden;
    }

    /* Position the button on the bottom of the page. */
    #ui {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      font-family: 'Karla', sans-serif;
      z-index: 1;
    }

    a#magic-window {
      display: block;
      color: white;
      margin-top: 1em;
    }
  </style>
  </head>

  <body>
    <div id="ui">
      <div id="vr-button"></div>
      <a id="magic-window" href="#">Try it without a headset</a>
    </div>
    <script>
    /*
     * Debug parameters.
     */
    WebVRConfig = {
      /**
       * webvr-polyfill configuration
       */

      // Forces availability of VR mode.
      //FORCE_ENABLE_VR: true, // Default: false.
      // Complementary filter coefficient. 0 for accelerometer, 1 for gyro.
      //K_FILTER: 0.98, // Default: 0.98.
      // How far into the future to predict during fast motion.
      //PREDICTION_TIME_S: 0.040, // Default: 0.040 (in seconds).
      // Flag to disable touch panner. In case you have your own touch controls
      //TOUCH_PANNER_DISABLED: true, // Default: false.
      // Enable yaw panning only, disabling roll and pitch. This can be useful for
      // panoramas with nothing interesting above or below.
      //YAW_ONLY: true, // Default: false.
      // Enable the deprecated version of the API (navigator.getVRDevices).
      //ENABLE_DEPRECATED_API: true, // Default: false.
      // Scales the recommended buffer size reported by WebVR, which can improve
      // performance. Making this very small can lower the effective resolution of
      // your scene.
      BUFFER_SCALE: 0.5, // default: 1.0
      // Allow VRDisplay.submitFrame to change gl bindings, which is more
      // efficient if the application code will re-bind it's resources on the
      // next frame anyway.
      // Dirty bindings include: gl.FRAMEBUFFER_BINDING, gl.CURRENT_PROGRAM,
      // gl.ARRAY_BUFFER_BINDING, gl.ELEMENT_ARRAY_BUFFER_BINDING,
      // and gl.TEXTURE_BINDING_2D for texture unit 0
      // Warning: enabling this might lead to rendering issues.
      //DIRTY_SUBMIT_FRAME_BINDINGS: true // default: false
    };
    </script>
    <!-- A polyfill for Promises. Needed for IE and Edge. -->
    <script src="es6-promise.min.js"></script>
    <!-- three.js 3d library -->
    <script src="three.min.js"></script>
    <!-- VRControls.js acquires positional information from connected VR devices and applies the transformations to a three.js camera object. -->
    <script src="VRControls.js"></script>
    <!-- VREffect.js handles stereo camera setup and rendering. -->
    <script src="VREffect.js"></script>
    <!-- A polyfill for WebVR using the Device{Motion,Orientation}Event API. -->
    <script src="webvr-polyfill.min.js"></script>
    <!-- A set of UI controls for entering VR mode. -->
    <script src="webvr-ui.min.js"></script>
  </body>
</html>