unity）unityで作ったツールをWebGL版でビルドしてwebに公開してダウンロードもさせたい

はじめに

以下のジェネレーターを公開しました。公開する上でいくつか知見を得たので記事にまとめたいと思います。

tsururin.hatenablog.com

planeなmeshを作る

meshを作るスクリプトはいろいろな方が公開されているので借用します。今回は以下の記事を参考にさせていただきました。

knasa.hateblo.jp

meshを書き出す

エディターで書き出すには以下のコードでかんたんに実現できます。meshデータをシリアライズ化して.assetというファイル形式で保存できます。

var path = Path.Combine(dir, fileName + ".asset");
UnityEditor.AssetDatabase.CreateAsset(mesh, path);

memo

.assetファイルに関する細かい情報は得られなかったのですが、editor設定のAsset SerializationのModeによってテキスファイルになったりバイナリファイルになるんだと思います。デフォルトではテキストファイルなのでテキストエディタで中身を読むことができます。デフォルトがテキストファイルなのはバージョン管理ツールと相性がいいからみたいです。

docs.unity3d.com

ランタイムでmeshを書き出す

今回はエディターではなくビルドしたアプリからmeshを書き出す必要があります。シリアライズとデシリアラズの仕組みはエディター用の機能なので実行ファイルでは使えないようです。

.assetのフォーマットを解析してランタイムで作ることも出来そうですが、大変なので他の方法を考えます。.fbxなどのフォーマットも考えましたが.obj形式がシンプルに記述できるようなのでmeshデータから.obj形式に変換することにします。

tsubakit1.hateblo.jp

上記の記事によると「Unify Community Wiki」内にてmeshを.obj形式にエクスポートするスクリプトが公開されていたようですが、今現在サイトが存在しなく見ることができませんでした。

techblog.kayac.com

こちらの記事で自作されている方がいましたので参考にさせていただきました。

memo

以下のページの「エディターとランタイムのシリアライゼーションの違い」の項に詳しく説明されていました。

docs.unity3d.com

WebGL版でビルドする

ビルドすると以下のようなファイルが出来上がります。

index.htmlを開くと以下のようなエラーが表示されました。

Failed to download file Build/***.data.gz. Loading web pages via a file:// URL without a web server is not supported by this browser. Please use a local development web server to host Unity content, or use the Unity Build and Run option.

file://形式でアクセスしたhtmlからajaxで追加ファイルを読み込もうとすると、CORS制約で読み込めないようです。webサーバーを立ててアクセスすることにします。

memo

scrapbox.io

webサーバーを立てる

apacheやnginxやnodeを使ってサーバーを立ててもいいのですが、大変なのでpythonを使って簡易サーバーを立てることにします。macでの実行例になります。

$ cd Builds
$ python -m http.server 8080

http://localhost:8080/ にアクセスすると以下のエラーが表示されました。

Unable to parse Build/***.framework.js.gz! This can happen if build compression was enabled but web server hosting the content was misconfigured to not serve the file with HTTP Response Header "Content-Encoding: gzip" present. Check browser Console and Devtools Network tab to debug.