-
Notifications
You must be signed in to change notification settings - Fork 111
/
index.html
82 lines (76 loc) · 2.44 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Convert a 360° panorama to a cubemap.">
<title>Panorama to Cubemap</title>
<style>
body {
margin: 1em auto;
max-width: 800px;
}
.settings > * {
margin-top: 12px;
margin-bottom: 12px;
}
#cubemap {
width: 800px;
height: 600px;
position: relative;
border: 1px solid #888;
background: #eee;
margin-top: 15px;
}
</style>
</head>
<body>
<header>
<h1>Panorama to Cubemap</h1>
<aside>Convert a 360° panorama to six cube faces.</aside>
</header>
<main>
<section>
<h2>Upload</h2>
<label>Upload a panoramic image: <input id="imageInput" type="file" accept="image/*"></label>
<ul>
<li>The image should be formatted with the equirectangular projection.</li>
<li>The image should have an aspect ratio of 2:1 (the width must be exactly twice the height).</li>
</ul>
<p>A cubemap will be generated from your image.</p>
</section>
<section class="settings">
<h2>Settings</h2>
<div>
<label>Cube Rotation: <input id="cubeRotation" type="number" min="0" max="359" value="180">°</label>
</div>
<fieldset title="The resampling algorithm to use when generating the cubemap.">
<legend>Interpolation type</legend>
<label><input type="radio" name="interpolation" value="lanczos" checked>Lanczos (best but slower)</label>
<label><input type="radio" name="interpolation" value="cubic">Cubic (sharper details)</label>
<label><input type="radio" name="interpolation" value="linear">Linear (softer details)</label>
</fieldset>
<fieldset>
<legend>Output format</legend>
<label><input type="radio" name="format" value="png" checked>PNG</label>
<label><input type="radio" name="format" value="jpg">JPEG</label>
</fieldset>
</section>
<section>
<h2>Output</h2>
<p>Click each cube face to save it to your computer.</p>
<div id="cubemap">
<b id="generating" style="visibility:hidden">Generating...</b>
<output id="faces"></output>
</div>
</section>
</main>
<footer>
<p>
<small>By <a href="https://github.com/jaxry">Lucas Crane</a></small>
<br>
<small>Design by <a href="http://motherfuckingwebsite.com/">mf</a></small>
</p>
</footer>
<script src="main.js"></script>
</body>
</html>