サーバーサイドで物理演算の実行【Node.js】

Question

只今、JavaScriptのみで物理演算ライブラリを用いたアプリを作成しているのですが、演算対象が多くなると動きがカクついてきてしまっています。それを解消するためにNode.jsでサーバサイドで物理演算を行い、その結果をWebSocketでリアルタイムにクライアント側へ送ることでカクツキを解消出来ないかと考えているのですが、この考えは間違っている、または技術的に出来ないということはあるでしょうか。また、他にクライアント側での物理演算を軽くする方法などがあれば教えて頂きたいです

Answer 1

フロントエンドのJavaScriptが重いので、
サーバサイドのNode.jsに逃したいとのことですが、
不特定多数へ公開する事が目的ならばオススメ出来ません。

逆に自分一人で行うならば良い案になるかもしれません。
特にブラウザを開いている端末がスマホやノートPCといった貧弱なマシンで、
母艦の高性能なサーバマシンに処理を移譲したいケースであれば最善となりうるでしょう。
(イメージとしてはクラウド実行したゲーム)

ただし、それに飛びつく前に本当のボトルネックが何なのかをしっかり調査する必要があります。
現状が分からないので何とも言えませんので、見るべき所を羅列という形で上げていきます。

カクツキを解消出来ないか

そもそも何故カクツキが発生しているのでしょうか？
JavaScriptとして一番考えられる原因がDOMツリー操作です。

ブラウザの画面描画はDOMツリーというオブジェクトをメモリ上に展開し、
JavaScriptはブラウザが用意したDOMツリーを書き換えるAPIにお願いして画面の更新を促します。

これのコスパが非情に悪いです。
もしうねうね動く物理演算を、裏で大量のdivタグ作ってstyle要素を編集して操っているのであれば、
もはや物理演算云々の話ではありません。
DOMツリーがクソなので画面がカクついています終わり。

そこがボトルネックなのであれば、
せっせとWebSocketを使ってサーバサイドに逃がしても無駄です。
結局画面更新の負荷でブラウザは固まり、カク付くことでしょう。

まず下記を試しましょう。

• svg画像に逃がす

DOMツリーより出来る事は少ないので多少コスト減になるか？

• DOMにデータを持たせているならJSの変数にデータを持たせる

DOM APIでのやり取りを極力減らす事が目的
JS自体は数万レベルの配列操作ならば結構高速にやってくれる

• 画面更新はrequestAnimationFrameを利用する
• ReactやVue等のJSフレームワークの導入

差分だけ賢く更新してくれるので、下手なDOM操作のコードを自分で書くよりもマシになる可能性
あくまで可能性程度

---

以下はそのボトルネックが本当に物理演算だったという前提で考えていきます。

そもそも物理演算の計算をサーバーサイドに逃すと言うことは、
GPU(グラフィックカード)を利用した方が得意なジャンルの計算ではないでしょうか？

もしそうならサーバーサイドに逃がす選択肢自体は悪くないように思えます。
Node.jsはGPU扱えますしね。
参考記事: JavaScriptでGPUを簡単に扱えるライブラリ「GPU.js」レビュー、並列処理で多次元の演算が爆速に

ですがまぁWebアプリの利用者全ての物理演算を
Webサーバのマシンに代わりにやれという状況になります。

一人や二人しか使わないのであれば最善でしょうけど、
もしWeb上に公開して不特定多数のユーザー達に利用してもらうつもりなら
1ヶ月何十万・何百万円するようなWebサーバを
AWS等から借りて運用する事になるかもしれません。
人気が出たら会社を立ち上げる等マネタイズが急がれるでしょう。

Node.jsのWebSocketが同時に捌ける接続数という制約もあります。
調査した感じだと数千人で頭打ちになり、その辺でも利用者に応じてサーバーマシンを増やす対策をしなければなりません。
Node.jsを捨てる選択肢も必要かもしれません。
参考記事: WebSocket大合戦：Clojure、C++、Elixir、Go、NodeJS、Ruby

Answer 2

こういう場合にはwasmを使用すると思います。