-
Notifications
You must be signed in to change notification settings - Fork 10
/
elevr-player.html
executable file
·144 lines (121 loc) · 5.69 KB
/
elevr-player.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
<!--
* 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 Picture 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">
<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/phonevr.js" type="text/javascript"></script>
<script src="js/elevr-player.js" type="text/javascript"></script>
</head>
<body>
<div id="picture-container">
<div id="left-load" class="left">
<div id="title-l" class="title">Loading Panorama...</div>
<div id="message-l" class="message">Try WASD + Q/E</div>
</div>
<div id="right-load" class="right">
<div id="title-r" class="title">Loading Panorama...</div>
<div id="message-r" class="message">Try WASD + Q/E</div>
</div>
<canvas id="glcanvas">
Your browser doesn't appear to support the HTML5 <code><canvas></code> element.
</canvas>
<img id="pano-image" src="images/kirby-cove-1-small.jpg"/>
<!-- Picture Controls -->
<div id="picture-controls">
<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="picture-select" class="rfloat">
<option value="0images/kirby-cove-1-small.jpg">Kirby Cove</option>
<option value="0images/denver-botanical-5-small.jpg">Denver Botanical Gardens</option>
<option value="0images/Greeley_pan_small_stars.jpg">Mars with Stars</option>
<option value="0images/utrecht-canal.jpg">Utrecht Canal</option>
<option value="0images/mosaic-math-art.JPG">Mosaic Art Exhibit</option>
<option value="1images/phone-stereo-test.jpg">Phone Stereo Test</option>
</select>
<a id="full-screen" class="fa fa-expand icon rfloat" title="Full Screen"></a>
</div>
<script>runEleVRPlayer();</script>
</div>
</body></html>