mirror of
https://github.com/fenomas/glsl-projectron.git
synced 2026-01-25 15:06:26 +00:00
175 lines
4.0 KiB
HTML
175 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>GLSL Projectron creator demo</title>
|
|
<meta name="description" content="viewer">
|
|
<style type="text/css">
|
|
html,
|
|
body {
|
|
margin: 0.5rem;
|
|
height: 100%;
|
|
font: 300 15px Meiryo, Helvetica, sans-serif;
|
|
}
|
|
|
|
select,
|
|
input,
|
|
button {
|
|
font: inherit;
|
|
}
|
|
|
|
.container {
|
|
margin: 0.5rem;
|
|
float: left;
|
|
width: 500px;
|
|
height: 500px;
|
|
}
|
|
|
|
.UI {
|
|
float: left;
|
|
margin: 1rem;
|
|
}
|
|
|
|
label {
|
|
user-select: none;
|
|
display: block;
|
|
margin: 0.25rem;
|
|
}
|
|
|
|
label>* {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
button {
|
|
margin: 0.25rem;
|
|
}
|
|
|
|
.sep {
|
|
height: 1rem;
|
|
}
|
|
|
|
.view {
|
|
width: 500px;
|
|
height: 500px;
|
|
}
|
|
|
|
strong {
|
|
font-weight: 500;
|
|
font-size: 135%;
|
|
}
|
|
|
|
.txt {
|
|
width: 6rem;
|
|
font: 400 15px monospace;
|
|
}
|
|
|
|
.txtin {
|
|
text-align: center;
|
|
width: 3rem;
|
|
font: 400 15px monospace;
|
|
line-height: 20px;
|
|
}
|
|
|
|
#data {
|
|
font: 400 13px monospace;
|
|
}
|
|
|
|
.desc {
|
|
width: 550px;
|
|
margin-left: 2rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class='container'>
|
|
<canvas id='view' width="500px" height="500px"></canvas>
|
|
</div>
|
|
|
|
<div class='UI'>
|
|
|
|
<label>
|
|
<input type='checkbox' id='paused' checked />
|
|
<strong>Paused</strong>
|
|
</label>
|
|
|
|
<div class='sep'></div>
|
|
|
|
<label><select id='gensPerFrame'>
|
|
<option>1</option>
|
|
<option>10</option>
|
|
<option selected='true'>20</option>
|
|
<option>50</option>
|
|
<option>100</option>
|
|
</select> generations per frame
|
|
</label>
|
|
<label><input class='txt' id='preferFewer' value='0.001'> Fewer polys tolerance</label>
|
|
<span style="font-size: smaller;">
|
|
(score tolerance within which to drop polygons)
|
|
</span>
|
|
|
|
<div class='sep'></div>
|
|
|
|
<label><input class='txt' id='polys'> Polygons</label>
|
|
<label><input class='txt' id='gens'> Generations</label>
|
|
<label><input class='txt' id='gps'> Gens/s</label>
|
|
<label><input class='txt' id='score'> Score</label>
|
|
<div class='sep'></div>
|
|
|
|
<label>
|
|
Alpha range:
|
|
<input class='txtin' id='minAlpha' value='0.1'> to
|
|
<input class='txtin' id='maxAlpha' value='0.5'>
|
|
</label>
|
|
<label>
|
|
Adjust amt: <input class='txtin' id='adjust' value='0.5'>
|
|
</label>
|
|
<div class='sep'></div>
|
|
|
|
<button id='export'>Export vert/color data ↓</button>
|
|
<br>
|
|
<textarea id='data' rows='3' cols='30'></textarea>
|
|
<br>
|
|
<button id='import'>Import vert/color data ↑</button>
|
|
<div class='sep'></div>
|
|
|
|
<label>
|
|
<input type='checkbox' id='showRef' />Show reference
|
|
</label>
|
|
<label>
|
|
<input type='checkbox' id='showScr' />Scratch buffer
|
|
</label>
|
|
|
|
</div>
|
|
|
|
<br clear='left'>
|
|
<p class='desc'>
|
|
To change the target image drag an image onto this page.
|
|
</p>
|
|
|
|
<p class='desc'>
|
|
Or check out some built examples:
|
|
— <a href="./viewer.html">Mona</a>
|
|
— <a href="./viewer-vermeer.html">Vermeer</a>
|
|
</p>
|
|
|
|
<p class='desc' style="width: 500px;">
|
|
You can also specify a size for the internal comparison texture
|
|
in this page's query string,
|
|
<a href="./index.html?size=128">thusly</a>.
|
|
</p>
|
|
|
|
<p class='desc'>
|
|
Back to <a href="https://github.com/fenomas/glsl-projectron">GLSL-Projectron</a>
|
|
</p>
|
|
|
|
<br>
|
|
<br>
|
|
|
|
<script src="maker-bundle.js"></script>
|
|
|
|
</body>
|
|
|
|
</html> |