WebGL上でFPSを記録および表示する方法は？

Question

私はhtmlキャンバスにフレーム/秒を表示しようとしています。私は後でそれを微調整することができるので、キャンバス上に置かれた場所は気にしません。ここで私がこれまで持っているもの：

 var updateAnimation = function() { 
 

 
      requestAnimFrame(updateAnimation); 
 

 
      var anim = global.animation; 
 
      var e = global.events; 
 

 
      //Set current time 
 
      anim.animationCurrentTime = Date.now(); 
 
      //Set start time 
 
      if (anim.animationStartTime === undefined) { 
 
       anim.animationStartTime = anim.animationCurrentTime; 
 
      } 
 

 
      //Clear the animationStage 
 
      webgl.clear(webgl.COLOR_BUFFER_BIT | webgl.DEPTH_BUFFER_BIT); 
 

 

 

 
      //Draw scene 
 
      drawScene(); 
 

 

 
      //Set previous time as current time to use in next frame 
 
      anim.animationLastTime = anim.animationCurrentTime; 
 
     } 
 

 
     global.document.animationStage = document.getElementById("animation-scene"); 
 

 
     webgl = setupScene(global.document.animationStage); 
 

 
     setupShaders(); 
 
     setupAllBuffers(); 
 
     setupEvents(); 
 
     setupLight(); 
 
     setupTextures(); 
 

 
     initScene(); 
 
     }

<header> 
 
    <h1 style="text-align: center">Applied Computer Graphics and Vision</h1> 
 
    <p>Instructions<span> 
 
    <br /> 
 
    <br /> 
 
    Rotation - \t Click and drag in the direction of rotation <br /> 
 
    Increase/Decrease Orbit Radius - Up and Down Keys <br /> 
 
    Increase/Decrease Orbit Speed - Left and Right Keys <br /> 
 
    Translation Of X - Shift plus mouse drag <br /> 
 
    Translation Of Y - Alt plus mouse drag <br /> 
 
    Translation Of Z - Mouse scroll 
 
    </span></p> 
 
</header> 
 

 
<canvas style="float:left" ; id="animation-scene"></canvas> 
 
<canvas id="myCanvas" width="1400" height="800"></canvas> 
 
<script> 
 
\t /* Sets */ 
 
    var area = document.getElementById('animation-scene'); 
 
    area.setAttribute('height', window.innerHeight); 
 
    area.setAttribute('width', window.innerWidth); 
 
</script> 
 
</body> 
 
</html>

任意のヘルプまたはアドバイスは素晴らしいことです。私はレンダリングされたフレームの数を数えなければならないという基本的な考え方を知っています.1秒が経過するとfps変数に格納されますが、更新アニメーション機能でこれを実装する方法は不明です。

また、更新アニメーション機能内のシーンの現在/開始時刻を設定するメソッドもあります。

Answer 1

1つの可能性は、2フレーム間のデルタ時間を計算し、最後のデルタ時間の平均を計算することです。このためには、デルタ時間を配列に格納する必要があります。次のスニペットで100回が格納されています

var lastTime = Date.now(); 
var times = []; 
var timeSum = 0; 
var actIndex = 0; 
var maxTimes = 100; 

function getFPS() { 

    var currentTime = Date.now(); 
    var deltaMS  = currentTime - lastTime; 
    lastTime  = currentTime; 
    timeSum   = timeSum + deltaMS; 
    if (times.length < maxTimes) { 
     times.push(deltaMS); 
    } else { 
     timeSum   = timeSum - times[actIndex]; 
     times[actIndex] = deltaMS; 
     actIndex  = actIndex < maxTimes-1 ? actIndex+1 : 0; 
    } 
    return 1000 * times.length/timeSum; 
} 

は、コードスニペットを参照してください：

FPSSの表示

var lastTime = Date.now(); 
 
    var times = []; 
 
    var timeSum = 0; 
 
    var actIndex = 0; 
 
    var maxTimes = 100; 
 

 
    function getFPS() { 
 
     
 
     var currentTime = Date.now(); 
 
     var deltaMS  = currentTime - lastTime; 
 
     lastTime  = currentTime; 
 
     timeSum   = timeSum + deltaMS; 
 
     if (times.length < maxTimes) { 
 
      times.push(deltaMS); 
 
     } else { 
 
      timeSum   = timeSum - times[actIndex]; 
 
      times[actIndex] = deltaMS; 
 
      actIndex  = actIndex < maxTimes-1 ? actIndex+1 : 0; 
 
     } 
 
     return 1000 * times.length/timeSum; 
 
    } 
 

 

 
var renderer, scene, camera, controls; 
 

 
function init() { 
 

 
    // renderer 
 
    renderer = new THREE.WebGLRenderer(); 
 
    renderer.setSize(window.innerWidth, window.innerHeight); 
 
    renderer.setClearColor(0x707070, 1); 
 
    document.body.appendChild(renderer.domElement); 
 

 
    // scene 
 
    scene = new THREE.Scene(); 
 
    
 
    // camera 
 
    camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 1000); 
 
    camera.position.set(2, 2, 2); 
 

 
    // controls 
 
    controls = new THREE.OrbitControls(camera); 
 
    
 
    // materials 
 
    var mat0 = new THREE.MeshBasicMaterial({color: 0xff0000}); 
 
    var mat1 = new THREE.MeshBasicMaterial({color: 0x00ff00}); 
 
    var mat2 = new THREE.MeshBasicMaterial({color: 0x0000ff}); 
 
    var mat3 = new THREE.MeshBasicMaterial({color: 0xffff00}); 
 
    var mat4 = new THREE.MeshBasicMaterial({color: 0xff00ff}); 
 
    var mat5 = new THREE.MeshBasicMaterial({color: 0x00ffff}); 
 
    var materials = [mat0, mat1, mat2, mat3, mat4, mat5]; 
 
    
 
    // geometry 
 
    var geometry = new THREE.BoxGeometry(1, 1, 1); 
 
    var mesh = new THREE.Mesh(geometry, materials); 
 
    
 
    // mesh 
 
    scene.add(mesh); 
 

 
    lastTime = Date.now(); 
 
} 
 

 
function animate() { 
 

 
    document.getElementById("fps_val").innerHTML = getFPS().toFixed(1); 
 

 
    requestAnimationFrame(animate); 
 
    renderer.render(scene, camera); 
 
} 
 

 
init(); 
 
animate();

body { 
 
    margin: 0; 
 
    overflow: hidden; 
 
} 
 

 
canvas { 
 
    width: 100%; 
 
    height: 100% 
 
} 
 

 
#fps_val { 
 
    position : absolute; 
 
    top : 5%; 
 
    left : 5%; 
 
}

<script src="https://threejs.org/build/three.min.js"></script> 
 
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script> 
 

 
<span id="fps_val">0</span>

Answer 2

は非常に単純であり、それはだ以外のWebGLを行うには、本当に何もしています共通して知りたいここでDate.now()のみミリ秒を返すようおそらくFPSを計算するためDate.now()を使用してはならない小さなFPS表示

const fpsElem = document.querySelector("#fps"); 
 

 
let then = 0; 
 
function render(now) { 
 
    now *= 0.001;       // convert to seconds 
 
    const deltaTime = now - then;   // compute time since last frame 
 
    then = now;       // remember time for next frame 
 
    const fps = 1/deltaTime;    // compute frames per second 
 
    fpsElem.textContent = fps.toFixed(1); // update fps display 
 
    
 
    requestAnimationFrame(render); 
 
} 
 
requestAnimationFrame(render);

<div>fps: <span id="fps"></span></div>

です。​​は、ページがロードされてからすでにマイクロ秒単位で経過しています。

また、実際にはキャンバスに配置していません。キャンバスとは別の別のHTML要素を使用してください。あなたは彼らが重なるようにしたい場合は、https://github.com/mrdoob/stats.js/を見てみましょう

const gl = document.querySelector("#c").getContext("webgl"); 
 
const fpsElem = document.querySelector("#fps"); 
 

 
let then = 0; 
 
function render(now) { 
 
    now *= 0.001;       // convert to seconds 
 
    const deltaTime = now - then;   // compute time since last frame 
 
    then = now;       // remember time for next frame 
 
    const fps = 1/deltaTime;    // compute frames per second 
 
    fpsElem.textContent = fps.toFixed(1); // update fps display 
 
    
 
    drawScene(now); 
 
    
 
    requestAnimationFrame(render); 
 
} 
 
requestAnimationFrame(render); 
 

 
function drawScene(time) { 
 
    gl.disable(gl.SCISSOR_TEST); 
 
    gl.clearColor(1, 0, 0, 1); 
 
    gl.clear(gl.COLOR_BUFFER_BIT); 
 
    
 
    const halfWidth = gl.canvas.width/2; 
 
    const halfHeight = gl.canvas.height/2 
 
    const x = halfWidth - f(time) * halfWidth; 
 
    const y = halfHeight - f(time * 1.17) * halfHeight; 
 
    const w = (halfWidth - x) * 2; 
 
    const h = (halfHeight - y) * 2; 
 
    gl.scissor(x, y, w, h); 
 
    gl.enable(gl.SCISSOR_TEST); 
 
    gl.clearColor(f(time * 1.1), f(time * 1.3), f(time * 1.2), 1); 
 
    gl.clear(gl.COLOR_BUFFER_BIT); 
 
} 
 

 
function f(v) { 
 
    return Math.sin(v) * .5 + .5; 
 
}

#container { 
 
    position: relative; /* needed so child elements use this as their base */ 
 
} 
 
#hud { 
 
    position: absolute; 
 
    left: 5px; 
 
    top: 5px; 
 
    background: rgba(0, 0, 0, 0.5); /* 50% opaque black */ 
 
    color: white; 
 
    padding: .5em; 
 
    font-family: monospace; 
 
    border-radius: .5em; 
 
} 
 

<div id="container"> 
 
    <canvas id="c"></canvas> 
 
    <div id="hud">fps: <span id="fps"></span></div> 
 
</div>