forked from notlion/streetview-stereographic
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
104 lines (93 loc) · 3.65 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
<!DOCTYPE html>
<html>
<head>
<title>Streetview Stereographic</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<link href="css/style.css" media="all" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="lib/embr/src/lib/require.js"></script>
<script type="text/javascript" src="lib/lzma/lzma.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
window.addEventListener("load", function(){
require([ "main" ]);
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-28077326-1']);
_gaq.push(['_trackPageview']);
(function(){
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div id="right">
<div id="map"></div>
<div id="mapui">
<div class="input-border">
<input id="location" type="text" tabindex="0" spellcheck="false"
onfocus="this.parentNode.classList.add('focus')"
onblur="this.parentNode.classList.remove('focus')"/>
</div>
</div>
</div>
<div id="left">
<canvas id="gl-canvas" class="grabbable" style="display:none;"></canvas>
<div id="no-webgl" style="display:none;">
<p>Hrm.. It looks like either your browser doesn't support WebGL, or it's not enabled.</p>
</div>
<div id="code" class="shut" style="visibility:hidden">
<textarea id="code-text" spellcheck="false">
precision mediump float;
uniform sampler2D texture;
uniform float scale, aspect, time;
uniform mat3 transform;
varying vec2 v_texcoord;
#define PI 3.141592653589793
void main(){
vec2 rads = vec2(PI * 2., PI);
vec2 pnt = (v_texcoord - .5) * vec2(scale, scale * aspect);
// Project to Sphere
float x2y2 = pnt.x * pnt.x + pnt.y * pnt.y;
vec3 sphere_pnt = vec3(2. * pnt, x2y2 - 1.) / (x2y2 + 1.);
sphere_pnt *= transform;
// Convert to Spherical Coordinates
float r = length(sphere_pnt);
float lon = atan(sphere_pnt.y, sphere_pnt.x);
float lat = acos(sphere_pnt.z / r);
gl_FragColor = texture2D(texture, vec2(lon, lat) / rads);
}
</textarea>
</div>
<svg id="code-toggle" title="Toggle Shader Source" class="shut" width="30" height="30" version="1.2" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(15,15)">
<circle cx="0" cy="0" r="13"/>
<path d="M -7,0 L 7,0 M 0,-7 L 0,7"/>
</g>
</svg>
<div id="panoui">
<a id="above" href="#">above</a>
<a id="below" href="#">below</a>
<a id="fullwindow" class="r" href="#">></a>
<a id="about-toggle" class="r" href="#">about</a>
</div>
</div>
<div id="about-backdrop" style="visibility:hidden;"></div>
<div id="about" style="visibility:hidden;">
<h1>Streetview<br/>Stereographic</h1>
<p>Shader Toy + Google Map + Panoramic Explorer</p>
<ul>
<li>Walk .. Keyboard ↑ ← ↓ →</li>
<li>Rotate .. Click and drag left panel</li>
</ul>
<div id="forkme">
<a href="https://github.com/notlion/streetview-stereographic">
<img src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub">
</a>
</div>
</div>
</body>
</html>