ニコ生ゲームで3Dができたら面白そうではないか？ということでパート1では3Dゲームを作るための技術についてまとめてみる。
技術を調べる
1.標準機能だけでやる
Primitive Speed ～ 3Dドライビング ～というゲームが恐らくAkashicEngineのデフォの機能だけで作っている。
こちらのゲームは3Dで表現された街並みの中などを高速でかっ飛ばす1人称レースゲームだ。3Dの景観は実際には2D矩形描画を組み合わせて表現されている。ロール方向の視点回転まであるのでなかなか臨場感があるが、Akashicの標準機能だけで十分作れるはず*1。
2.拡張ライブラリを使う
森のかくれんぼというゲームは恐らく公式？で出してるライブラリGitHub - akashic-games/raycaster-jsを使ってると思う。要はjsで3Dレンダラ書いちゃおうというもの。
この拡張ライブラリは使ったことないが割と高機能っぽくてビルボードとか距離フォグとか深度バッファも実装されている。木や草はビルボードを使っているし視界から遠ざかるほど暗くなるのには距離フォグを使っている。
ちなみにRenderer._putImageData()という命令を使えば、任意のビットマップをSurfaceに反映可能なので、このライブラリを使わず0からレイトレレンダラを自作することも可能だ。それであれば、理論的にはライティングや影、GI表現など好きな表現を盛り込んだレンダラにカスタマイズ可能であるが、JSが数値計算苦手なことを考えるとなかなか現実解にはなりにくい。
この拡張ライブラリ自体はそこそこな速度で動くようだが、ライブラリにせよ自作にせよスマホで動かすことなども考えるとソフトウェアレンダラでは表現力とパフォーマンスのトレードオフがかなり重要であり、表現に対して強い制約となってしまう。
3.その他？
実際にゲームを公開しているか不明だが、技術的に3Dにチャレンジしている方が見つかったので一応掲載。
みんなAkashicの制約の中で作っててえらい！というか2019なのでこのころはiOSのWebGL2対応もかなりダメダメだったはず、iOSユーザーを除外するような手段は記事にできんってことなのかも。
4.CanvasAPIを使う
前回の記事で取り上げた通り、ニコ生ゲームでもCanvasAPIを使うことができ、WebGLゲームも作れそうという話をした。そこで、今回は普通にWebGLを使ってニコ生ゲームを作ってみようと思う。
ちなみにWebGLにはバージョン1.0と2.0があり、2.0は機能的にかなり進化している。というか1.0がかなりパフォーマンスに問題があるので基本的には2.0を使うことになると思う。ただし、iOSはセキュリティ上の問題やブランディング戦略でWebGL対応がかなり遅かったらしく今*2でも2.0をサポートしてない端末はそこそこ出回ってそうであるが無視する。
しかし、WebGLどころかOpenGLプログラミングもほぼしたことないので何から始めたらいいのかわからない。本当にニコ生ゲームでWebGLが使えるかどうかの検証もしたい。調べてみたところWebで3Dコンテンツを作るならThree.jsというライブラリがメジャーらしい。
このライブラリはjs/tsから利用することができ、WebGLの煩雑な処理をカプセル化してオブジェクト指向的に3Dシーンやオブジェクトを扱える。数学計算や様々な3Dモデルのローダーも含まれており、いきなりからがっつり3Dコンテンツ開発ができるライブラリのようだ。というわけでまず、Three.jsをニコ生ゲームに組み込んで動くか動作検証を行った。検証したのはもう1年以上前でソースコードも残っていないため記憶の断片だが、確か球体にポイントライト1灯を当てただけのシーンを作ったと思う。Three.jsは単にgame.jsonに含めただけだとエクスポートでエラーが出てしまったので、色々コードをいじったり削ったりしながらもなんとか組み込み実験は成功し、ニコ生での起動、Androidでの表示まで確認できた。なので、一応これを使えばガチの3Dゲームは作れそうである。（パフォーマンス未検証）
と、ここまでやっておいてなんだが、自分の場合は結局Three.jsは使わなかった。 正直使いにくさを感じたのとゴリゴリの3Dゲームをjsで作るのは勘弁願いたかったので、ここから先はc++とOpenGL SDKを使って3DエンジンからフルスクラッチしつつemscriptenでWebAssembly化することにした。なによりブラウザのデバッガがストレスだったので普段はwindowsゲームとして開発して時々Web出力して確認みたいなことがしたかったのだ。要はUnityみたいな仕組みを自前で用意しようということだ。この件については後々書こうと思うが、とりあえず次章ではWebGLをAkashic上で実際に使ってみようと思う。
