100日後に完成するゲームシステム 87日目「Three.jsの環境構築がとってもめんどくさかった話」

時代は3Dだ！と、遅咲きに言っている、ユゲタです。 最終更新から、半年ぐらい放置していた、例のゲーム開発ですが、仕事の忙しさが理由という言い訳はしません。 モックアップ版を作った段階から、かなり深い技術も搭載できたことから、色々とシステムに対して、大幅にリファクタリングしたいという事と、 やはり3D対応をしたいという、自分に対して強い要望が芽生えてきたので、その準備をしていたという事が原因なのですが、webGLを使うことは決まっていたんだけど、 独自レンダリングでやるか、Three.jsを使うかで迷いに迷っていたんですね。 とりあえず、Three.jsを触り慣れて、クオリティに関して問題がなさそうという事がわかったので、ここらで一気にリファクタ作業を進めようと仕様を決めました。 でも、このThree.jsは、環境構築のクセがすごいので、どうやったら、安定した環境が構築できるかを色々と物色していて、様々な問題点なども見えてきたので、とりあえず、環境構築で見えた問題点とその解決方法などを、ブログに書き残しておきたいと思います。

Three.jsは開発スピードも速く、流行りのライブラリである

Three.jsで検索すると、たくさんの解説ページや、ブログなどが出てきますが、このブログを書いている2022年2月現在において、過去の記事はどれも、あまり参考にならなかったので、その点をまず説明したいと思います。 まずはじめに、今回やりたかった内容として」、Blenderで作成した3Dモデルをthree.jsを利用して、ブラウザで表示して、キーボード操作または、タッチアクションなど、通常のブラウザイベントを使って、3Dオブジェクトをコントロールするというのをやりたかったのですが、 表示するだけなら、基本的に次の工程をふめば、表示はできます。

1. Blenderでglbまたは、gltf形式で作ったオブジェクト形式をexportする。
2. 本家サイトよりthree.jsをダウンロード
3. 解凍したファイルの中から、次の2つをrootにjsフォルダを作ってコピーする。
   build/three.js examples/jsm/loaders/GLTFLoader.js
4. HTMLファイルに、three.jと、GLTFLoader.jsを、scriptタグで記述（どのサイトも大体同じソースが書いてあるのでそれをコピー）
5. js記述でglftファイルを読み込む記述をして完了

うまくいけば、これだけでブラウザに3Dモデルが表示されると思います。 ・・・が、ユゲタの場合は、JSエラーが出て表示されませんでした。 いくつかエラーの原因があったのでそれをまとめてみると、

1. three.jsのバージョンが、r128以降のものは、examples内モジュールの記述が、cdn専用の記述になってローカルに保存してあるモジュールは読み込むとエラーになる。
2. タグ記述ではなく、js内でimport記述をしないと、クラスの継承ができない。
3. nodeサーバーを立てて、自作のrequest-responceで表示した際に、glbファイルのフォーマットが特殊すぎて、読み込みが完了できない。（gbtfファイルは問題なく表示できた。）

とりあえず、この２点で3日ぐらい費やしたんですが、なんとか無事に解決して思った通りの3D表示がブラウザでできるようになりました。 何より、3Dオブジェクトを表示しているのに非常に軽いというのが特徴かもしれませんね。 ゲーム作成用のフレームワークなどを使うと、立ち上がるまでに10秒以上かかったりしますが、three.js単体でやると、読み込み速度も早いし、動作速度もかなりのポリゴン数でも捌けている様です。 ※ブラウザ表示をしているPCやスマホなどの端末スペックにもよりますが・・・ とにかく、自分でWebGLレンダリングを自作するよりは効率的に作業が進められそうだということがわかり、このライブラリ採用！となりました。

安定した環境とは？

いくつかのサーバーや、実行環境を試した時に、安定した環境を構築するために、three.jsをnodejsのnpmでバージョン指定して（@0.127.0）インストールするとエラーに悩まされずにサーバー上で安定したWebGLが表示できるでしょう。 ただし、最新バージョンの恩恵が受けられないので、この点の修正をどうやっていくかは今後考えたいですね。 ちなみに、npmインストールしたものとダウンロードするthreejsフォルダ内は、基本的に同じ構成、（現時点では）同じモジュール構成なので、固定化したいのであれば、ダウンロード版でもいいかもと思いましたが、 最新版しかダウンロードできないので、この点要注意です。

Before 2D After 3D

そして以前に作ったゲーム画面と今回簡易にレンダリングした画面を比較してみましょう。

before

after

好みはあるかと思いますが、実は表示するまでのコードは、web3Dライブラリを使うと、100行程度で完了できたのに対して以前のコードは、1000行以上は書いているので、はるかに楽になりそうです。 2Dバージョンで少し悩みの種だった、オブジェクトの回り込みができずに、裏に隠れているオブジェクトが永遠に見る事ができなかったのが、3Dであれば、カメラを回り込ませることもできますからね。 アニメーションをセットすると、2Dと3Dの差は歴然となります。これまでセットしていたアニメーションが、3Dで表示すると、カクカクしていて、全部作り直しになることは分かりましたが、モーションの管理さえしっかりとすれば、これまで手作業で管理していたモーション管理と、アニメーションパターンの画像管理が一気になるなるので、これも楽できそうです。 よし、これで、ぶつもりを作れる題材はそろったので、この環境で大規模リファクタリングをかけたいと思います。 乞うご期待！