40 lines
1.8 KiB
HTML
40 lines
1.8 KiB
HTML
|
<!doctype html>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>VDI stream motion test</title>
|
||
|
|
<style>
|
||
|
|
html, body { margin: 0; overflow: hidden; background: #101827; color: white; font: 24px monospace; }
|
||
|
|
canvas { display: block; width: 100vw; height: 100vh; }
|
||
|
|
#stats { position: fixed; right: 24px; top: 20px; background: #000c; padding: 12px; }
|
||
|
|
</style>
|
||
|
|
<canvas id="scene"></canvas><div id="stats"></div>
|
||
|
|
<script>
|
||
|
|
// Deterministic moving bars + checkerboard: creates continuous desktop damage.
|
||
|
|
// Read the source RAF rate separately from the Moonlight stream/render rate.
|
||
|
|
const canvas = document.getElementById('scene');
|
||
|
|
const context = canvas.getContext('2d', { alpha: false });
|
||
|
|
const stats = document.getElementById('stats');
|
||
|
|
let count = 0, last = performance.now(), sourceFps = 0;
|
||
|
|
function render(now) {
|
||
|
|
if (canvas.width !== innerWidth || canvas.height !== innerHeight) {
|
||
|
|
canvas.width = innerWidth; canvas.height = innerHeight;
|
||
|
|
}
|
||
|
|
const width = canvas.width, height = canvas.height;
|
||
|
|
context.fillStyle = '#101827'; context.fillRect(0, 0, width, height);
|
||
|
|
const offset = Math.floor(now * 0.12) % 128;
|
||
|
|
for (let y = height / 2; y < height; y += 128) {
|
||
|
|
for (let x = -128; x < width; x += 128) {
|
||
|
|
context.fillStyle = (Math.round((x + 128) / 128) + Math.floor(y / 128)) % 2 ? '#28517a' : '#132c46';
|
||
|
|
context.fillRect(x + offset, y, 126, 126);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
const x = (now * 0.6) % (width + 100) - 100;
|
||
|
|
context.fillStyle = '#ffcf40'; context.fillRect(x, 0, 80, height);
|
||
|
|
context.fillStyle = '#ffffff'; context.fillRect(width - x, 0, 8, height);
|
||
|
|
count++;
|
||
|
|
if (now - last >= 1000) { sourceFps = count * 1000 / (now - last); count = 0; last = now; }
|
||
|
|
stats.textContent = `${width}x${height} | source RAF ${sourceFps.toFixed(1)} FPS | ${Math.floor(now)} ms`;
|
||
|
|
requestAnimationFrame(render);
|
||
|
|
}
|
||
|
|
requestAnimationFrame(render);
|
||
|
|
</script>
|