requestAnimationFrameでフレームと再描画更新を制御したい

Question

前提・実現したいこと

JavaScriptでrequestAnimationFrameでフレームと再描画更新を行うコードを書いてみました。
そこで、一秒ごとにconsole.logで変数fpsを出力したところ、変数の値が４０あたりを行ったり来たりしている状態です。
(requestAnimationFrameが60回更新しているのに対し、if(ping >= 1){}内のコードは40回しか実行されない）。
if（ping >= 2)にすることで、関数内のコードの実行を３０回に抑えようとすると、実際には20回しか実行されないことも確認しました。
（この時のrequestAnimationFrameの更新は60回です）
目標としては、if関数ないの変数「ping」の値を変えることで、自由にfpsを制御できるようにしたいのですがどのような改善が必要でしょうか？

発生している問題・エラーメッセージ

期待している通りの、更新制御が行えない。

該当のソースコード

//ゲーム開始時刻
var start = Date.now();

//過去の時間（最初は初めの時間を使う）
var pastTime = start;
var pastSecond = start;
var time;
console.log(start);

//fps
var fps = 0;
var ping = 0;

render = function () {
        //fps管理
        time = Date.now();
        ping = (time - pastTime ) / (1000/60);
        if (ping >= 1) {
            fps += 1;
            pastTime = time;
        }

        //一秒判定
        if ((Math.floor(time / 1000) - Math.floor(pastSecond / 1000)) >= 1) {
            console.log(fps);
            pastSecond = time;
            fps = 0;

        }
        requestAnimationFrame(render);
    }

render();

補足情報（FW/ツールのバージョンなど）

fpsの計測はfirefoxのコンソール画面での計測です。

Comments

[miyabi-sun]

この質問文を書いたのは本当にあなたですか？過去の質問で「requestAnimationFrameを使ったアニメーションではfpsの制御ができない」と質問文に記載されていますが、出来ないと分かっている事に対してできる前提で質問文を書いているのはどうしてでしょうか。

[meron-pan]

内容の不足で申し訳ありません。requestAnimationFrameが描画のタイミング制御ができないのは重々承知しております。

[meron-pan]

しかしながら、実際に出せる更新速度より同等の速度、またはそれ以下の更新速度はプログラムを書くことによって、疑似的に再現できる（requestAnimationFrame６０回実行するのに対し、内部の関数は30回実行する）ことも理解しているつもりです。今回はそのようなプログラムを書いた上で、理論通りに動かないために質問しました。

[meron-pan]

タイトルが誤解を生んでしまい、申し訳ありませんでした。修正を行いましたので、正しく伝わってくれれば、幸いです

[miyabi-sun]

なるほど、つまり単に言葉足らずで「JSの処理を軽くすれば、関節的にブラウザのFPSを引き上げることができるのではないか？」という推測が挟まっているわけですね。それを前提として「無駄な処理を減らしてFPSを引き上げたい」という質問に繋がるわけですね。この辺をちゃんと記述出来れば質問文としていい感じになると思います。

[meron-pan]

大まかにいえば、そういうことになります。しかし、前回の質問は勉強不足と言葉足らずな部分が多く、この質問の前提として使うには、いささか問題がありすぎると思い質問を新しくしました。

[meron-pan]

また今回はソースコードを添付し、firefoxでパフォーマンスを計測して定的に60fpsが出ていることを確認したうえで、制御用のコードが上手く動作していないことに対しての質問を行っているつもりです

[meron-pan]

完全なる私の言葉足らずで、ご迷惑をおかけしますが、どうかよろしくお願いします

Answer 1

結論から言いうならば、Date.now()を使うのをやめましょう。
こいつは「今」の時刻なので正確な時刻ではないですし（！？）、
なんかやってるのは確実なのでコストを増加するだけのノイズになっています。

代わりに第一引数としてコールバック関数に渡される
DOMHighResTimeStampを利用するようにしてください。
requestAnimationFrame - MDN

第一引数として使われる時点でもう生成された後の話なので、
使っても使わなくてもコストは変わりません。

まぁ、DOMHighResTimeStampはよく分からないDouble型の数値なので扱いはめっちゃ大変だと思いますが、
この中には何時に前回のレンダリングが行われたかの時刻が取得できるので、フレーム計算を行う上でより正確な記述ができるはずです。

---

質問文のようなFPSの調査をしたいのであれば、
requestAnimationFrameとsetTimeoutやsetIntervalを併用すればいいんじゃないですか？
厳密には1000ms毎ではなく、998〜1002msとかの範囲でブレるでしょうけど、
質問文のコードもどうせズレているので誤差みたいなもんでしょう。

// fps以外の状態変数など不要だ！！
var fps = 0;

var render = function () {
  fps++;
  requestAnimationFrame(render);
}
render();

var showFps = function () {
  console.log(fps);
  fps = 0;
}
setInterval(showFps, 1000);

---

ゲームやフレームというワードが質問文にありますが、
もしかしてフレーム単位で天国か地獄かが分かれるような構造のゲームを作りたいのでしょうか？

もしそうならば、JSでやるなら場当たり的なチューニングをする前に、
まずJSのイベントループの仕様を知る必要があります。

JSはHTML上に書かれたコードを超高速で全て実行し完了します。
完了してしまうならば、どうやって「イベント」を引っ掛けて実行するのか？
それはJSがイベント駆動という考え方をしているからです。

JSの関数は「変数に代入」「関数の引数に含める」「関数の戻り値に含める」ことが可能な言語であり、他の変数と違いは、尻に()を付けて実行が可能くらいしかありません。
第一級オブジェクト

JSではこの特性を利用して、やることリストのように関数を用意しておき、
「Aの条件を満たしたら、引数として渡した関数を実行してね、よろしく」という使い方をします。
これが「イベントの登録」、特定のメモリ領域に関数を保存するだけなので一旦処理は終わります。

その後、全ての処理が終わって暇になったブラウザは、定期的に巡回を行います。
「イベントを満たす条件を満たしたイベントは居ないかな？」という風な巡回です。
条件を満たしたらイベントに登録されている関数を1つずつ呼び出して実行します。
その時に投げ込まれる引数はブラウザやMDN等が定義しているので必要に応じて調べてみてください。

これが大まかな流れになります

---

次に、この仕様がゲームのようなフレームを気にするものを作る時に於いてどう影響するのかを見ていきます。

• setTimeoutやrequestAnimationFrameは条件を満たした後も、イベントループの巡回を待つ必要があり、平気で数ms発火が遅延する
• JSはシングルスレッドなので、同時に1個の処理しかできない。したがって同時に複数条件を満たした場合、どちらの関数が(制御出来ないのでほぼランダムに)先に実行され、もう片方は後回しにされる、それにより平気で数ms発火が前後する
• requestAnimationFrameは「はい描画しました、次のフレームを作る準備をしてくださいね」と言っているので、画面への反映タイミングはどう頑張っても1フレーム遅れ

これらの事から、JSでC#のようなフレーム単位のゲームを作るのは不可能クラスに難しいです。
一時的にマシンの負荷をかけて、例えば敵の弾幕が自機を飛び越えるような間隔のレンダリングにして無傷でやり過ごす裏技がありますので、描かれなかったフレームの計算を行ったり…という対処を行うと飛躍的に処理が増えて更に重くなる…という悪循環に陥るでしょう。

ゲーム自体の設計を見直したり、何処を妥協するかをよく練って下さい。
実際のゲームの実装はフレーム落ちはまぁしゃあないと諦めている事も多いです。

Comments

[meron-pan]

詳しい解説ありがとうございます。特に、フレームが不安定だろうが、別に構わないような設計で作成してはいるつもりですが、もしブラウザエンジンに余裕があるのでれば、できるだけ正確にフレーム更新を行っていきたいというような考えです。（60ｆｐｓでるのであれば30ｆｐｓでのフレーム更新はできるでしょって感じです）。

[miyabi-sun]

既存のゲームエンジン的なライブラリにまかせてしまうのが楽だと思います。
自分でハンドリングするなら、「キー入力状態」「ゲームの状態を司るstate」「レンダリング用の前回のstate」を用意して、
renderはstatと前回stateの差分を取りながらあるべき値に更新し続ける

キー入力等はEventTarget.addEventListenerで行う。
setInterval(fn, 1000 / 30)みたいな間隔で発火、キー入力状態を参照しながら集計を取りstateを更新していく。

…のような感じで「ブラウザの更新タイミング」と「ゲーム内部の集計締め切り時間」という2つのフレームを用意して回すと楽かつ余計な処理が増えずに綺麗に運用できると思います。

[meron-pan]

回答ありがとうございます。ゲームの完成が目標であるならばさっさとライブラリを使うのですが、今回は個人製作で商業用並みのクオリティを目指してみようという完全なる「バカ」の試みとしてやっています（まあ、学生だからそんなアホなことが出来るのですが...。）
とはいえ、なんの経験もないただの素人ですので、全くの知識がないといったような感じです。

[meron-pan]

なので、このサイトでの質問は、おそらく素人丸出しのくだらなくて、葉のつたない質問にはなると思いますが、なにとぞ厚い温情を頂けたら幸いです。
今回も、ご丁寧に最初から最後まで解説していただきありがとうございました。