Reduce render resolution on low FPS

This commit is contained in:
Arne Keller 2022-02-01 18:01:55 +01:00
parent a487890d83
commit 6d3a9f4d3a
3 changed files with 8 additions and 3 deletions

View File

@ -10,7 +10,7 @@
<body>
<div id="info">Score: <span id="score">0</span></div>
<button id="start">Start</button>
<div id="version">Version 1.1</div>
<div id="version">Version 1.2c</div>
<script src="./gyronorm.complete.min.js"></script>
<script src="./three.min.js"></script>

View File

@ -115,6 +115,7 @@ const spheres = [];
// wall segments
const borders = [];
let time = Date.now() / 1000.0;
let averageFps = 60.0;
function logger(text) {
console.log(text);
@ -216,7 +217,7 @@ init_gn();
// setup three.js: materials, geometries, scene, lighting and camera
let scene, renderer;
scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 10000);
const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 5000);
// obstacle geometry and material
const geometrySphere = new THREE.SphereGeometry(11, 32, 32);
@ -348,6 +349,7 @@ function animate() {
let now = Date.now() / 1000.0;
let delta = now - time;
time = now;
averageFps = (4 * averageFps + 1.0 / delta ) / 5.0;
requestAnimationFrame(animate);
@ -439,6 +441,9 @@ function animate() {
removed = 0;
document.getElementById("score").innerText = score;
}
if (averageFps < 30.0 && renderer.getPixelRatio() == window.devicePixelRatio) {
renderer.setPixelRatio(window.devicePixelRatio / 2);
}
// create new wall segments on demand
if (borders.length == 0 || borders[borders.length - 1].position.z - camera.position.z > -1200) {

View File

@ -46,6 +46,6 @@ button {
position: absolute;
bottom: 10px;
right: 10px;
font-size: small;
font-size: x-small;
z-index: 1;
}