apple2shader/index.html

177 lines
5.5 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MDN Games: Shaders demo</title>
<style>
</style>
<style>
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: auto 20em;
}
.controls {
order: 2;
}
.screen {
order: 1;
}
</style>
</head>
<body>
<script src="screenEmu.js"></script>
<div class="wrapper">
<div class="controls">
<form>
<table>
<tr>
<td>Decoder</td>
<td>
<select id="decoder">
<option value="COMPOSITE_YUV">Composite Y'UV</option>
<option value="COMPOSITE_YIQ">Composite Y'IQ</option>
<option value="COMPOSITE_CXA2025AS">Composite CXA2025AS</option>
</select>
</td>
</tr>
<tr>
<td>Brightness</td>
<td><input type="range" min="-1" max="1" step="0.01" value="0" class="slider" id="videoBrightness"></td>
</tr>
<tr>
<td>Contrast</td>
<td><input type="range" min="0" max="2" step="0.01" value="1" class="slider" id="videoContrast"></td>
</tr>
<tr>
<td>Saturation</td>
<td><input type="range" min="0" max="2" step="0.01" value="1" class="slider" id="videoSaturation"></td>
</tr>
<tr>
<td>Hue</td>
<td><input type="range" min="-0.5" max="0.5" step="0.01" value="0" class="slider" id="videoHue"></td>
</tr>
<tr>
<td>White Only</td>
<td><input type="checkbox" id="white-only"></td>
</tr>
<tr>
<td>Horizontal Center</td>
<td><input type="range" min="-0.1" max="0.1" step="0.01" value="0" class="slider" id="videoHorizontalCenter"></td>
</tr>
<tr>
<td>Horizontal Size</td>
<td><input type="range" min="0.85" max="1.25" step="0.01" value="1.05" class="slider" id="videoHorizontalSize"></td>
</tr>
<tr>
<td>Vertical Center</td>
<td><input type="range" min="-0.1" max="0.1" step="0.01" value="0" class="slider" id="videoVerticalCenter"></td>
</tr>
<tr>
<td>Vertical Size</td>
<td><input type="range" min="0.85" max="1.25" step="0.01" value="1.05" class="slider" id="videoVerticalSize"></td>
</tr>
<tr>
<td>Luma Bandwidth</td>
<td><input type="range" min="0" max="7159090" step="1" value="2000000" class="slider" id="videoLumaBandwidth"></td>
</tr>
<tr>
<td>Chroma Bandwidth</td>
<td><input type="range" min="0" max="7159090" step="1" value="600000" class="slider" id="videoChromaBandwidth"></td>
</tr>
<tr>
<td>B/W Bandwidth</td>
<td><input type="range" min="0" max="7159090" step="1" value="6000000" class="slider" id="videoBandwidth"></td>
</tr>
<tr>
<td>Barrel</td>
<td><input type="range" min="0" max="1" step="0.01" value="0.05" class="slider" id="displayBarrel"></td>
</tr>
<tr>
<td>Scanline Level</td>
<td><input type="range" min="0" max="1" step="0.01" value="0.05" class="slider" id="displayScanlineLevel"></td>
</tr>
<tr>
<td>Shadow Mask Level</td>
<td><input type="range" min="0" max="1" step="0.01" value="0.05" class="slider" id="displayShadowMaskLevel"></td>
</tr>
<tr>
<td>Shadow Mask Dot Pitch</td>
<td><input type="range" min="0" max="2" step="0.01" value="0.5" class="slider" id="displayShadowMaskDotPitch"></td>
</tr>
<tr>
<td>Shadow Mask</td>
<td>
<select id="shadow-mask">
<option value="triad">Triad</option>
<option value="inline">Inline</option>
<option value="aperture">Aperture</option>
<option value="lcd">LCD</option>
<option value="bayer">Bayer</option>
</select>
</td>
</tr>
<tr>
<td>Persistence</td>
<td><input type="range" min="0" max="1" step="0.01" value="0" class="slider" id="displayPersistence"></td>
</tr>
<tr>
<td>Center Lighting</td>
<td><input type="range" min="0" max="1" step="0.01" value="1" class="slider" id="displayCenterLighting"></td>
</tr>
<tr>
<td>Luminance Gain</td>
<td><input type="range" min="1" max="2" step="0.01" value="1" class="slider" id="displayLuminanceGain"></td>
</tr>
<tr>
<td>&nbsp</td>
<td></td>
</tr>
<tr>
<td></td>
<td><input type="reset" value="Reset"></td>
</tr>
</table>
</form>
</div>
<div class="screen">
<canvas id="d" width="768" height="576"></canvas>
</div>
</div><!-- class="wrapper" -->
<script>
// screenEmu.loadImage("images/airheart-560x192.png").then(image => {
// let [c, data] = screenEmu.screenData(image, screenEmu.C.NTSC_DETAILS);
// document.body.appendChild(c);
// });
async function tryScreenView() {
const image = await screenEmu.loadImage("images/airheart-560x192.png");
const [imageCanvas, imageData] = screenEmu.screenData(image, screenEmu.C.NTSC_DETAILS);
let canvas = document.getElementById("d");
let sv = new screenEmu.ScreenView(canvas);
await sv.initOpenGL();
let imageInfo = new screenEmu.ImageInfo(imageData);
let displayConfig = new screenEmu.DisplayConfiguration();
displayConfig.displayResolution = new screenEmu.Size(d.width, d.height);
sv.image = imageInfo;
sv.displayConfiguration = displayConfig;
sv.vsync();
sv.freeOpenGL();
}
tryScreenView().then(() => console.log('tryScreenView: success'));
const w = screenEmu.Vector.lanczosWindow(17, 0.419047624);
</script>
</body>
</html>