-
Notifications
You must be signed in to change notification settings - Fork 195
/
index.html
executable file
·167 lines (140 loc) · 6.37 KB
/
index.html
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!--
* eleVR Web Player: A web player for 360 video on the Oculus
* Copyright (C) 2014 Andrea Hawksley and Andrew Lutomirski
*
* This program is free software; you can redistribute it and/or
* modify it under the terms of the GNU General Public License
* as published by the Free Software Foundation; either version 2
* of the License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program; if not, write to the Free Software
* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
-->
<!DOCTYPE html>
<html>
<head>
<title>eleVR Web Player</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="icon" sizes="196x196" href="elelogo-square.png">
<!-- Fragment shader program -->
<script id="shader-fs" type="x-shader/x-fragment">
varying mediump vec3 vDirection;
uniform mediump float eye;
uniform mediump float projection;
uniform sampler2D uSampler;
#define PI 3.1415926535897932384626433832795
mediump vec4 directionToColor(mediump vec3 direction, mediump float eye, mediump float projection) {
/*
* Input: a direction. +x = right, +y = up, +z = backward.
* an eye. left = 0, right = 1.
* a projection. see ProjectionEnum in JS file for enum
* Output: a color from the video
*
* Bug alert: the control flow here may screw up texture filtering.
*/
mediump float theta = atan(direction.x, -1.0 * direction.z);
mediump float phi = atan(direction.y, length(direction.xz));
/*
* The Nexus 7 and the Moto X (and possibly many others) have
* a buggy atan2 implementation that screws up when the numerator
* (the first argument) is too close to zero. (The 1e-4 is carefully
* chosen: 1e-5 doesn't fix the problem.
*/
if (abs(direction.x) < 1e-4 * abs(direction.z))
theta = 0.5*PI * (1.0 - sign(-1.0 * direction.z));
if (abs(direction.y) < 1e-4 * length(direction.xz))
phi = 0.0;
// Uncomment to debug the transformations.
// return vec4(theta / (2. * PI) + 0.5, phi / (2. * PI) + 0.5, 0., 0.);
if (projection == 0.) {
// Projection == 0: equirectangular projection
return texture2D(uSampler, vec2(mod(theta / (2.0*PI), 1.0), phi / PI + 0.5));
} else {
// Projection == 1: equirectangular top/bottom 3D projection
eye = 1. - eye;
return texture2D(uSampler, vec2(mod(theta / (2.0*PI), 1.0), ((phi / PI + 0.5) + eye)/ 2.));
}
}
void main(void) {
gl_FragColor = directionToColor(vDirection, eye, projection);
}
</script>
<!-- Vertex shader program -->
<script id="shader-vs" type="x-shader/x-vertex">
attribute mediump vec2 aVertexPosition;
uniform mediump mat4 proj_inv;
varying mediump vec3 vDirection;
void main(void) {
gl_Position = vec4(aVertexPosition, 1.0, 1.0);
mediump vec4 projective_direction = proj_inv * gl_Position;
vDirection = projective_direction.xyz / projective_direction.w;
}
</script>
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/elevr-player.css">
<script src="lib/gl-matrix.js" type="text/javascript"></script>
<script src="lib/util.js" type="text/javascript"></script>
<script src="js/controls.js" type="text/javascript"></script>
<script src="js/player-webgl.js" type="text/javascript"></script>
<script src="js/webvr.js" type="text/javascript"></script>
<script src="js/phonevr.js" type="text/javascript"></script>
<script src="js/elevr-player.js" type="text/javascript"></script>
</head>
<body>
<div id="video-container">
<!-- Loading Message -->
<div id="left-load" class="left">
<div id="title-l" class="title">Loading Video...</div>
<div id="message-l" class="message hidden">Try WASD + Q/E</div>
</div>
<div id="right-load" class="right">
<div id="title-r" class="title">Loading Video...</div>
<div id="message-r" class="message hidden">Try WASD + Q/E</div>
</div>
<div id="left-play" class="left hidden">
<a id="play-l" class="large-play fa fa-play fa-5x"></a>
</div>
<div id="right-play" class="right hidden">
<a id="play-r" class="large-play fa fa-play fa-5x"></a>
</div>
<canvas id="glcanvas">
Your browser doesn't appear to support the HTML5 <code><canvas></code> element.
</canvas>
<video class="hidden" preload="auto" id="video" loop="true" webkit-playsinline crossOrigin="anonymous">
<source src="therelaxatron2.mp4" type="video/mp4">
<source src="therelaxatron.webm" type="video/webm">
</video>
<!-- Video Controls -->
<div id="video-controls" class="hidden">
<a id="play-pause" class="fa fa-play icon" title="Play"></a>
<input type="range" id="seek-bar" value="0">
<a id="loop" class="fa fa-chain-broken icon" title="Stop Looping"></a>
<a id="mute" class="fa fa-volume-up icon" title="Mute"></a>
<a id="recenter" class="fa fa-dot-circle-o icon" title="Recenter"></a>
<a id="select-local-file" class="fa fa-folder-open icon rfloat" title="Select File"></a>
<select id="projection-select" class="rfloat">
<option value=0>Equirectangular</option>
<option value=1>Equirectangular 3D</option>
</select>
<select id="video-select" class="rfloat">
<option value="0therelaxatron2.mp4">The Relaxatron (mp4)</option>
<option value="0therelaxatron.webm">The Relaxatron (webm)</option>
<option value="1Vidcon5.mp4">Vidcon (mp4)</option>
<option value="1Vidcon.webm">Vidcon (webm)</option>
</select>
<a id="full-screen" class="fa fa-expand icon rfloat" title="Full Screen"></a>
</div>
<script>runEleVRPlayer();</script>
</div>
</body></html>