Babylon.jsでFPSを表示する方法

1. デフォルトのFPSカウンターの表示: Babylon.jsでは、デフォルトでFPSカウンターが利用可能です。以下のコードを使用して、シーンにFPSカウンターを追加できます。

var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function () {
  var scene = new BABYLON.Scene(engine);

  // FPSカウンターの表示
  scene.debugLayer.show();
  // シーンの作成と処理
  return scene;
};
var scene = createScene();
engine.runRenderLoop(function () {
  scene.render();
});
window.addEventListener("resize", function () {
  engine.resize();
});

このコードでは、showメソッドを使用してFPSカウンターを表示しています。この方法では、Babylon.jsのデバッグレイヤーを使用しているため、他のデバッグ機能も利用できます。

2. カスタムのFPSカウンターの表示: デフォルトのFPSカウンターではなく、独自のスタイルでFPSを表示したい場合は、次のようなカスタムのFPSカウンターを作成することもできます。

var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function () {
  var scene = new BABYLON.Scene(engine);
  // FPSカウンターのテキスト要素を作成
  var fpsDiv = document.createElement("div");
  fpsDiv.style.position = "absolute";
  fpsDiv.style.color = "white";
  fpsDiv.style.fontSize = "20px";
  fpsDiv.style.top = "10px";
  fpsDiv.style.left = "10px";
  document.body.appendChild(fpsDiv);
  // レンダーループ内でFPSを更新
  engine.runRenderLoop(function () {
    scene.render();
    fpsDiv.innerHTML = engine.getFps().toFixed() + " fps";
  });
  // シーンの作成と処理
  return scene;
};
var scene = createScene();
window.addEventListener("resize", function () {
  engine.resize();
});

このコードでは、カスタムのFPSカウンターを作成するためにHTMLのdiv要素を使用しています。レンダーループ内でengine.getFps()メソッドを使用してFPSを取得し、要素のinnerHTMLに表示しています。

以上が、Babylon.jsでFPSを表示する方法とコード例です。これらの方法を使用することで、アプリケーションのパフォーマンスを監視し、最適化のための手がかりを得ることができます。