Question

我试图在html画布上显示每秒帧数。我不介意它现在放在画布上的位置，因为我可以在以后调整它。这是我到目前为止所拥有的;

＆＃13;

        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();
        }

＆＃13;

<header>
    <h1 style="text-align: center">Applied Computer Graphics and Vision</h1>
    <p>Instructions<span>
    <br />
    <br />
    Rotation -	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>
	/* Sets */
    var area = document.getElementById('animation-scene');
    area.setAttribute('height', window.innerHeight);
    area.setAttribute('width', window.innerWidth);
</script>
</body>
</html>

＆＃13;

任何帮助或建议都会很棒。我知道必须计算渲染帧数的基本思想，并且一秒钟已经过了存储在fps变量中，但不确定如何通过我的更新动画函数实现它。

我还有一些方法可以在更新动画功能中设置场景的当前/开始时间。

Answer 1

显示FPS非常简单，除了想要了解的常见内容之外，与WebGL无关。这是一个小型FPS显示器

＆＃13;

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);

＆＃13;

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

＆＃13;

您可能不应该使用Date.now()来计算FPS，因为Date.now()仅返回毫秒。自页面加载以来，requestAnimationFrame已经过了几微秒的时间。

另外，你真的没有把它放在画布上。只需使用与画布分开的另一个HTML元素。如果你想让它们重叠，那么使用CSS使它们重叠

＆＃13;

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;
}

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

如何在WebGL上记录和显示FPS？

1 个答案: