DJ's WebGL Tutorial 002--渲染循环、显示FPS

来源：互联网发布：java获取每个月的天数编辑：程序博客网时间：2024/05/17 00:06

1.为了便于编码，先将html与javascript拆分为2个文件。
2.在页面中再添加一个canvas，用来绘制2d文本显示FPS。
html文件完整代码：

    <!DOCTYPE html>      <html>      <head>          <title>DJ's WebGL Tutorial 002</title>          <script type="text/javascript" src="main.js"></script>      </head>      <body>          <canvas width="640" height="480" id="canvas"                  style="position:absolute;top:10px;left:10px;">          </canvas>          <canvas width="640" height="480" id="canvas2d"                  style="position:absolute;top:10px;left:10px;">          </canvas>      </body>      </html>

3.添加render函数，进行循环渲染：

    function render() {          update_fps();          gl.clear(gl.COLOR_BUFFER_BIT);          window.requestAnimationFrame(render);      }

4.每秒更新一次FPS显示：

    function update_fps() {          frame++;          var now = new Date().getTime();          if (now - time > 1000) {              var c2d = document.getElementById('canvas2d').getContext('2d');              c2d.clearRect(0, 0, c2d.canvas.width, c2d.canvas.height);              c2d.font = "20px Consolas";              c2d.fillStyle = "#00ff00";              c2d.fillText("FPS:" + frame, 5, 20);              time = now;              frame = 0;          }      }

main.js文件完整代码：

    var gl = null;      var frame = 0;      var time = 0;      onload = function() {          var c = document.getElementById('canvas');          gl = c.getContext('experimental-webgl');          init_gl();          render();      }      function init_gl() {          gl.clearColor(0.0, 0.0, 1.0, 1.0);      }      function render() {          update_fps();          gl.clear(gl.COLOR_BUFFER_BIT);          window.requestAnimationFrame(render);      }      function update_fps() {          frame++;          var now = new Date().getTime();          if (now - time > 1000) {              var c2d = document.getElementById('canvas2d').getContext('2d');              c2d.clearRect(0, 0, c2d.canvas.width, c2d.canvas.height);              c2d.font = "20px Consolas";              c2d.fillStyle = "#00ff00";              c2d.fillText("FPS:" + frame, 5, 20);              time = now;              frame = 0;          }      }

运行结果：

现在，我们有了一个60帧/秒的游戏主循环。

0 0