2018-04-28 20:42:53 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
2018-05-17 01:33:47 +00:00
|
|
|
<title>WebGL port of OpenEmulator NTSC shader</title>
|
2018-04-28 20:42:53 +00:00
|
|
|
<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">
|
2018-05-11 01:07:06 +00:00
|
|
|
<form>
|
2018-04-28 20:42:53 +00:00
|
|
|
<table>
|
2018-05-18 00:11:39 +00:00
|
|
|
<tr>
|
|
|
|
|
<td>Image</td>
|
|
|
|
|
<td>
|
|
|
|
|
<select id="input-image" class="input-image">
|
|
|
|
|
</select>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td> </td>
|
|
|
|
|
<td></td>
|
|
|
|
|
</tr>
|
2018-04-28 20:42:53 +00:00
|
|
|
<tr>
|
2018-05-10 02:35:14 +00:00
|
|
|
<td>Decoder</td>
|
|
|
|
|
<td>
|
2018-05-16 01:14:48 +00:00
|
|
|
<select id="decoder" class="update">
|
|
|
|
|
<option value="CANVAS_YUV">Composite Y'UV</option>
|
|
|
|
|
<option value="CANVAS_YIQ">Composite Y'IQ</option>
|
|
|
|
|
<option value="CANVAS_CXA2025AS">Composite CXA2025AS</option>
|
|
|
|
|
<option value="CANVAS_RGB">RGB</option>
|
|
|
|
|
<option value="CANVAS_MONOCHROME">Monochrome</option>
|
2018-05-10 02:35:14 +00:00
|
|
|
</select>
|
|
|
|
|
</td>
|
2018-04-28 20:42:53 +00:00
|
|
|
</tr>
|
|
|
|
|
<tr>
|
2018-05-10 02:35:14 +00:00
|
|
|
<td>Brightness</td>
|
2018-05-16 01:14:48 +00:00
|
|
|
<td><input type="range" min="-1" max="1" step="0.01" value="0" class="slider update" id="videoBrightness"></td>
|
2018-04-28 20:42:53 +00:00
|
|
|
</tr>
|
|
|
|
|
<tr>
|
2018-05-10 02:35:14 +00:00
|
|
|
<td>Contrast</td>
|
2018-05-16 01:14:48 +00:00
|
|
|
<td><input type="range" min="0" max="2" step="0.01" value="1" class="slider update" id="videoContrast"></td>
|
2018-04-28 20:42:53 +00:00
|
|
|
</tr>
|
|
|
|
|
<tr>
|
2018-05-10 02:35:14 +00:00
|
|
|
<td>Saturation</td>
|
2018-05-16 01:14:48 +00:00
|
|
|
<td><input type="range" min="0" max="2" step="0.01" value="1" class="slider update" id="videoSaturation"></td>
|
2018-04-28 20:42:53 +00:00
|
|
|
</tr>
|
|
|
|
|
<tr>
|
2018-05-10 02:35:14 +00:00
|
|
|
<td>Hue</td>
|
2018-05-16 01:14:48 +00:00
|
|
|
<td><input type="range" min="-0.5" max="0.5" step="0.01" value="0" class="slider update" id="videoHue"></td>
|
2018-04-28 20:42:53 +00:00
|
|
|
</tr>
|
|
|
|
|
<tr>
|
2018-05-10 02:35:14 +00:00
|
|
|
<td>White Only</td>
|
2018-05-16 01:14:48 +00:00
|
|
|
<td><input type="checkbox" id="white-only" class="update"></td>
|
2018-04-28 20:42:53 +00:00
|
|
|
</tr>
|
|
|
|
|
<tr>
|
2018-05-10 02:35:14 +00:00
|
|
|
<td>Horizontal Center</td>
|
2018-05-16 01:14:48 +00:00
|
|
|
<td><input type="range" min="-0.1" max="0.1" step="0.01" value="0" class="slider update" id="videoHorizontalCenter"></td>
|
2018-04-28 20:42:53 +00:00
|
|
|
</tr>
|
|
|
|
|
<tr>
|
2018-05-10 02:35:14 +00:00
|
|
|
<td>Horizontal Size</td>
|
2018-05-16 01:14:48 +00:00
|
|
|
<td><input type="range" min="0.85" max="1.25" step="0.01" value="1.05" class="slider update" id="videoHorizontalSize"></td>
|
2018-04-28 20:42:53 +00:00
|
|
|
</tr>
|
|
|
|
|
<tr>
|
2018-05-10 02:35:14 +00:00
|
|
|
<td>Vertical Center</td>
|
2018-05-16 01:14:48 +00:00
|
|
|
<td><input type="range" min="-0.1" max="0.1" step="0.01" value="0" class="slider update" id="videoVerticalCenter"></td>
|
2018-04-28 20:42:53 +00:00
|
|
|
</tr>
|
|
|
|
|
<tr>
|
2018-05-10 02:35:14 +00:00
|
|
|
<td>Vertical Size</td>
|
2018-05-16 01:14:48 +00:00
|
|
|
<td><input type="range" min="0.85" max="1.25" step="0.01" value="1.05" class="slider update" id="videoVerticalSize"></td>
|
2018-04-28 20:42:53 +00:00
|
|
|
</tr>
|
|
|
|
|
<tr>
|
2018-05-10 02:35:14 +00:00
|
|
|
<td>Luma Bandwidth</td>
|
2018-05-16 01:14:48 +00:00
|
|
|
<td><input type="range" min="0" max="7159090" step="1" value="2000000" class="slider update" id="videoLumaBandwidth"></td>
|
2018-04-28 20:42:53 +00:00
|
|
|
</tr>
|
|
|
|
|
<tr>
|
2018-05-10 02:35:14 +00:00
|
|
|
<td>Chroma Bandwidth</td>
|
2018-05-16 01:14:48 +00:00
|
|
|
<td><input type="range" min="0" max="7159090" step="1" value="600000" class="slider update" id="videoChromaBandwidth"></td>
|
2018-04-28 20:42:53 +00:00
|
|
|
</tr>
|
|
|
|
|
<tr>
|
2018-05-10 02:35:14 +00:00
|
|
|
<td>B/W Bandwidth</td>
|
2018-05-16 01:14:48 +00:00
|
|
|
<td><input type="range" min="0" max="7159090" step="1" value="6000000" class="slider update" id="videoBandwidth"></td>
|
2018-04-28 20:42:53 +00:00
|
|
|
</tr>
|
|
|
|
|
<tr>
|
2018-05-10 02:35:14 +00:00
|
|
|
<td>Barrel</td>
|
2018-05-16 01:14:48 +00:00
|
|
|
<td><input type="range" min="0" max="1" step="0.01" value="0.05" class="slider update" id="displayBarrel"></td>
|
2018-04-28 20:42:53 +00:00
|
|
|
</tr>
|
|
|
|
|
<tr>
|
2018-05-10 02:35:14 +00:00
|
|
|
<td>Scanline Level</td>
|
2018-05-16 01:14:48 +00:00
|
|
|
<td><input type="range" min="0" max="1" step="0.01" value="0.05" class="slider update" id="displayScanlineLevel"></td>
|
2018-04-28 20:42:53 +00:00
|
|
|
</tr>
|
|
|
|
|
<tr>
|
2018-05-10 02:35:14 +00:00
|
|
|
<td>Shadow Mask Level</td>
|
2018-05-16 01:14:48 +00:00
|
|
|
<td><input type="range" min="0" max="1" step="0.01" value="0.05" class="slider update" id="displayShadowMaskLevel"></td>
|
2018-04-28 20:42:53 +00:00
|
|
|
</tr>
|
|
|
|
|
<tr>
|
2018-05-10 02:35:14 +00:00
|
|
|
<td>Shadow Mask Dot Pitch</td>
|
2018-05-16 01:14:48 +00:00
|
|
|
<td><input type="range" min="0" max="2" step="0.01" value="0.5" class="slider update" id="displayShadowMaskDotPitch"></td>
|
2018-04-28 20:42:53 +00:00
|
|
|
</tr>
|
|
|
|
|
<tr>
|
2018-05-10 02:35:14 +00:00
|
|
|
<td>Shadow Mask</td>
|
|
|
|
|
<td>
|
2018-05-16 01:14:48 +00:00
|
|
|
<select id="shadow-mask" class="update">
|
|
|
|
|
<option value="SHADOWMASK_TRIAD">Triad</option>
|
|
|
|
|
<option value="SHADOWMASK_INLINE">Inline</option>
|
|
|
|
|
<option value="SHADOWMASK_APERTURE">Aperture</option>
|
|
|
|
|
<option value="SHADOWMASK_LCD">LCD</option>
|
|
|
|
|
<option value="SHADOWMASK_BAYER">Bayer</option>
|
2018-05-10 02:35:14 +00:00
|
|
|
</select>
|
|
|
|
|
</td>
|
2018-04-28 20:42:53 +00:00
|
|
|
</tr>
|
|
|
|
|
<tr>
|
2018-05-10 02:35:14 +00:00
|
|
|
<td>Persistence</td>
|
2018-05-16 01:14:48 +00:00
|
|
|
<td><input type="range" min="0" max="1" step="0.01" value="0" class="slider update" id="displayPersistence"></td>
|
2018-04-28 20:42:53 +00:00
|
|
|
</tr>
|
|
|
|
|
<tr>
|
2018-05-10 02:35:14 +00:00
|
|
|
<td>Center Lighting</td>
|
2018-05-16 01:14:48 +00:00
|
|
|
<td><input type="range" min="0" max="1" step="0.01" value="1" class="slider update" id="displayCenterLighting"></td>
|
2018-04-28 20:42:53 +00:00
|
|
|
</tr>
|
|
|
|
|
<tr>
|
2018-05-10 02:35:14 +00:00
|
|
|
<td>Luminance Gain</td>
|
2018-05-16 01:14:48 +00:00
|
|
|
<td><input type="range" min="1" max="2" step="0.01" value="1" class="slider update" id="displayLuminanceGain"></td>
|
2018-04-28 20:42:53 +00:00
|
|
|
</tr>
|
2018-05-11 01:07:06 +00:00
|
|
|
<tr>
|
2018-05-18 00:11:39 +00:00
|
|
|
<td> </td>
|
|
|
|
|
<td></td>
|
2018-05-11 01:07:06 +00:00
|
|
|
</tr>
|
|
|
|
|
<tr>
|
2018-05-18 00:11:39 +00:00
|
|
|
<td></td>
|
|
|
|
|
<td><input type="reset" id="reset" value="Reset"></td>
|
2018-05-11 01:07:06 +00:00
|
|
|
</tr>
|
2018-04-28 20:42:53 +00:00
|
|
|
</table>
|
2018-05-11 01:07:06 +00:00
|
|
|
</form>
|
2018-04-28 20:42:53 +00:00
|
|
|
</div>
|
|
|
|
|
<div class="screen">
|
2018-05-11 01:07:06 +00:00
|
|
|
<canvas id="d" width="768" height="576"></canvas>
|
2018-04-28 20:42:53 +00:00
|
|
|
</div>
|
|
|
|
|
</div><!-- class="wrapper" -->
|
|
|
|
|
<script>
|
2018-05-16 01:14:48 +00:00
|
|
|
function updateDisplayConfig(config) {
|
|
|
|
|
config.videoDecoder = document.getElementById('decoder').value;
|
|
|
|
|
config.videoBrightness = Number(document.getElementById('videoBrightness').value);
|
|
|
|
|
config.videoContrast = Number(document.getElementById('videoContrast').value);
|
|
|
|
|
config.videoSaturation = Number(document.getElementById('videoSaturation').value);
|
|
|
|
|
config.videoHue = Number(document.getElementById('videoHue').value);
|
|
|
|
|
config.videoCenter = new screenEmu.Point(
|
2018-05-18 00:11:39 +00:00
|
|
|
Number(document.getElementById('videoHorizontalCenter').value),
|
|
|
|
|
Number(document.getElementById('videoVerticalCenter').value)
|
2018-05-16 01:14:48 +00:00
|
|
|
);
|
|
|
|
|
config.videoSize = new screenEmu.Size(
|
2018-05-18 00:11:39 +00:00
|
|
|
Number(document.getElementById('videoHorizontalSize').value),
|
|
|
|
|
Number(document.getElementById('videoVerticalSize').value)
|
2018-05-16 01:14:48 +00:00
|
|
|
);
|
|
|
|
|
config.videoBandwidth = Number(document.getElementById('videoBandwidth').value);
|
|
|
|
|
config.videoLumaBandwidth = Number(document.getElementById('videoLumaBandwidth').value);
|
|
|
|
|
config.videoChromaBandwidth = Number(document.getElementById('videoChromaBandwidth').value);
|
|
|
|
|
config.videoWhiteOnly = document.getElementById('white-only').checked;;
|
|
|
|
|
config.displayBarrel = Number(document.getElementById('displayBarrel').value);
|
|
|
|
|
config.displayScanlineLevel = Number(document.getElementById('displayScanlineLevel').value);
|
|
|
|
|
config.displayShadowMaskLevel = Number(document.getElementById('displayShadowMaskLevel').value);
|
|
|
|
|
config.displayShadowMaskDotPitch = Number(document.getElementById('displayShadowMaskDotPitch').value);
|
|
|
|
|
config.displayShadowMask = document.getElementById('shadow-mask').value;
|
|
|
|
|
config.displayPersistence = Number(document.getElementById('displayPersistence').value);
|
|
|
|
|
config.displayCenterLighting = Number(document.getElementById('displayCenterLighting').value);
|
|
|
|
|
config.displayLuminanceGain = Number(document.getElementById('displayLuminanceGain').value);
|
|
|
|
|
}
|
2018-04-28 20:42:53 +00:00
|
|
|
|
2018-05-16 01:14:48 +00:00
|
|
|
async function setupScreenView() {
|
2018-05-18 00:11:39 +00:00
|
|
|
const images = [
|
2018-05-21 00:26:02 +00:00
|
|
|
["images/airheart-560x192.png", "Airheart", true ],
|
|
|
|
|
["images/battle-chess.png", "Battle Chess", true ],
|
|
|
|
|
["images/archon.png", "Archon", false],
|
|
|
|
|
["images/archon-ii.png", "Archon II", false],
|
|
|
|
|
["images/lode-runner.png", "Lode Runner", false],
|
|
|
|
|
["images/championship-lode-runner.png", "Championship Lode Runner", false],
|
|
|
|
|
["images/marty-reader.png", "Marty's Family Reader", true ],
|
|
|
|
|
["images/bards-tale.png", "Bard's Tale", false],
|
|
|
|
|
["images/dazzledraw-flower.png", "DazzleDraw flower", true ],
|
|
|
|
|
["images/rescue-raiders-pic.png", "Rescue Raiders (a)", false],
|
|
|
|
|
["images/rescue-raiders-words.png", "Rescue Raiders (b)", false],
|
|
|
|
|
["images/ancient-legends.png", "Ancient Legends", false],
|
2018-05-18 00:11:39 +00:00
|
|
|
];
|
|
|
|
|
|
|
|
|
|
const image1 = await screenEmu.loadImage("images/airheart-560x192.png");
|
|
|
|
|
const image2 = await screenEmu.loadImage("images/battle-chess.png");
|
|
|
|
|
const image3 = await screenEmu.loadImage("images/archon.png");
|
|
|
|
|
const image4 = await screenEmu.loadImage("images/archon-ii.png");
|
|
|
|
|
const image5 = await screenEmu.loadImage("images/lode-runner.png");
|
|
|
|
|
const image6 = await screenEmu.loadImage("images/marty-reader.png");
|
|
|
|
|
|
|
|
|
|
const imsel = document.getElementById('input-image');
|
|
|
|
|
|
|
|
|
|
for (let i = 0; i < images.length; i++) {
|
2018-05-19 03:29:00 +00:00
|
|
|
const image = await screenEmu.loadImage(images[i][0]);
|
|
|
|
|
images[i].push(image);
|
2018-05-18 00:11:39 +00:00
|
|
|
const option = document.createElement("option");
|
|
|
|
|
option.text = images[i][1];
|
|
|
|
|
option.value = i;
|
|
|
|
|
imsel.appendChild(option);
|
|
|
|
|
}
|
2018-05-10 02:35:14 +00:00
|
|
|
|
2018-04-28 20:42:53 +00:00
|
|
|
let canvas = document.getElementById("d");
|
2018-05-09 02:50:29 +00:00
|
|
|
let sv = new screenEmu.ScreenView(canvas);
|
2018-04-28 20:42:53 +00:00
|
|
|
await sv.initOpenGL();
|
2018-05-05 03:00:38 +00:00
|
|
|
|
|
|
|
|
let displayConfig = new screenEmu.DisplayConfiguration();
|
2018-05-11 01:07:06 +00:00
|
|
|
displayConfig.displayResolution = new screenEmu.Size(d.width, d.height);
|
2018-05-05 03:00:38 +00:00
|
|
|
sv.displayConfiguration = displayConfig;
|
|
|
|
|
|
2018-05-16 01:14:48 +00:00
|
|
|
update = () => {
|
2018-05-19 03:29:00 +00:00
|
|
|
updateDisplayConfig(displayConfig);
|
|
|
|
|
sv.displayConfiguration = displayConfig;
|
|
|
|
|
sv.vsync();
|
2018-05-16 01:14:48 +00:00
|
|
|
}
|
2018-04-28 20:42:53 +00:00
|
|
|
|
2018-05-16 01:14:48 +00:00
|
|
|
for (const elem of document.getElementsByClassName('update')) {
|
2018-05-19 03:29:00 +00:00
|
|
|
elem.onchange = update;
|
2018-05-16 01:14:48 +00:00
|
|
|
}
|
|
|
|
|
|
2018-05-18 00:11:39 +00:00
|
|
|
updateImage = () => {
|
|
|
|
|
const index = Number(imsel.value);
|
|
|
|
|
const [imageCanvas, imageData] = screenEmu.screenData(images[index][3],
|
|
|
|
|
screenEmu.C.NTSC_DETAILS,
|
|
|
|
|
images[index][2]);
|
|
|
|
|
let imageInfo = new screenEmu.ImageInfo(imageData);
|
|
|
|
|
sv.image = imageInfo;
|
|
|
|
|
sv.vsync();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
updateImage();
|
|
|
|
|
imsel.onchange = updateImage;
|
|
|
|
|
|
|
|
|
|
document.getElementById('reset').onclick = () => {
|
2018-05-19 03:29:00 +00:00
|
|
|
setTimeout(() => {
|
|
|
|
|
update();
|
|
|
|
|
updateImage();
|
|
|
|
|
}, 0);
|
2018-05-18 00:11:39 +00:00
|
|
|
}
|
|
|
|
|
|
2018-05-16 01:14:48 +00:00
|
|
|
// sv.freeOpenGL();
|
|
|
|
|
}
|
2018-05-05 03:00:38 +00:00
|
|
|
|
2018-05-18 00:11:39 +00:00
|
|
|
setupScreenView();
|
2018-04-28 20:42:53 +00:00
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
