77 lines
3.2 KiB
HTML
77 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>renderang</title>
|
|
<style>
|
|
:root { --bg:#14101d; --panel:#241c33; --ink:#cfc3ec; --hot:#ff5c8a; --dim:#6b5f8a; }
|
|
* { box-sizing: border-box; }
|
|
body { margin:0; background:var(--bg); color:var(--ink);
|
|
font-family:"Courier New", monospace; height:100vh; display:flex; overflow:hidden; }
|
|
#view { flex:1; display:flex; align-items:center; justify-content:center; background:#000; }
|
|
#view canvas { image-rendering: pixelated; }
|
|
#panel { width:230px; background:var(--panel); border-left:4px solid #000;
|
|
padding:10px; font-size:12px; overflow-y:auto; flex-shrink:0; }
|
|
h1 { font-size:15px; margin:0 0 2px; color:var(--hot); letter-spacing:2px; }
|
|
.sub { color:var(--dim); margin-bottom:12px; }
|
|
fieldset { border:2px solid var(--dim); margin:0 0 10px; padding:6px 8px; }
|
|
legend { padding:0 4px; color:var(--hot); }
|
|
label { display:block; margin:6px 0 2px; }
|
|
input[type=range] { width:100%; accent-color:var(--hot); }
|
|
select { width:100%; background:var(--bg); color:var(--ink);
|
|
border:2px solid var(--dim); font-family:inherit; padding:2px; }
|
|
.modes { display:grid; grid-template-columns:1fr 1fr; gap:4px; }
|
|
.modes button { background:var(--bg); color:var(--ink); border:2px solid var(--dim);
|
|
padding:5px 0; font-family:inherit; font-size:12px; cursor:pointer; }
|
|
.modes button.on { background:var(--hot); color:#14101d; border-color:var(--hot); font-weight:bold; }
|
|
.row { display:flex; align-items:center; gap:6px; margin:5px 0; }
|
|
.row input { accent-color:var(--hot); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="view"></div>
|
|
<div id="panel">
|
|
<h1>RENDERANG</h1>
|
|
<div class="sub">retro renderer v0.1</div>
|
|
|
|
<fieldset>
|
|
<legend>mode</legend>
|
|
<div class="modes">
|
|
<button data-mode="ps1" class="on">PS1</button>
|
|
<button data-mode="n64">N64</button>
|
|
<button data-mode="saturn">SATURN</button>
|
|
<button data-mode="off">OFF</button>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<fieldset>
|
|
<legend>knobs</legend>
|
|
<label>vertex snap <input id="snap" type="range" min="0" max="1" step="0.05" value="1"></label>
|
|
<label>affine warp <input id="affine" type="range" min="0" max="1" step="0.05" value="1"></label>
|
|
<label>color levels <input id="levels" type="range" min="4" max="256" step="4" value="32"></label>
|
|
<div class="row"><input id="dither" type="checkbox" checked><span>bayer dither</span></div>
|
|
<div class="row"><input id="scan" type="checkbox"><span>scanlines</span></div>
|
|
<label>internal res
|
|
<select id="res">
|
|
<option>320x240</option>
|
|
<option>256x224</option>
|
|
<option>160x120</option>
|
|
<option>512x384</option>
|
|
<option>640x480</option>
|
|
</select>
|
|
</label>
|
|
</fieldset>
|
|
|
|
<fieldset>
|
|
<legend>actor</legend>
|
|
<label>animation <select id="anim"></select></label>
|
|
</fieldset>
|
|
</div>
|
|
<script type="importmap">
|
|
{ "imports": { "three": "./vendor/three.module.js" } }
|
|
</script>
|
|
<script type="module" src="src/main.js"></script>
|
|
</body>
|
|
</html>
|