WebGL
Unity
GoogleDrive
Revit

WebブラウザでUnityで作ったシーンを歩き廻ろう!

UnityのシーンをWebGLでビルドするとこんなページが簡単にできたのでやり方をメモしておきます。

移動方法はキーボードで「W→前進・A→左・S→後退・D→右・Space→ジャンプ・マウス移動→見廻す」です。

※PCで見てね


はじめに


  1. この記事ではこのサイトのような、Webブラウザで3Dモデルの中に入って歩き廻れるようにする手順を説明します。

  2. 3Dモデル、Unityのシーンの作り方はこの記事では説明しません。公式チュートリアルなどを参考にしてください。

  3. 他の用途で使ったUnityプロジェクトを流用する場合はバックアップをとってから作業してください。

  4. Unityのバージョンは2017.4.15f1でしか試していないので(VRC用に作ったワールドを持っていきたかった)、他のバージョンとは異なる部分があるかも知れません。

  5. Unity初心者なので間違ってることがあったら教えてくれると嬉しいです!

  6. ご連絡は@matsumtobimまで


準備するもの


  1. Unityのシーン(バージョンは2017.4.15f1でしか試してないのですがたぶん他のバージョンでもいけるかも)

  2. Googleアカウント(今回はお手軽サーバーとしてGoogleDrive使います)


既存のVRChat用のワールドを持っていきたい人へ(違う人は読み飛ばしてね)


  1. VRChat用のProjectフォルダをコピーして、WebGL用のProjectを作ってください。WebGL用のProject・VRChat用のProjectは完全に分かれます。

    00.PNG

  2. ここからはWebGL用のProjectでの作業です。残念ながらVRCSDKはWebGLでビルドできません。「Assets」内の「VRCSDK」・「VRCSDK.meta」と「Assets>Plugins」内の「VRCSDK」・「VRCSDK.meta」を削除します。

  3. シーン内のVRCSDK関連のオブジェクト、Triggerを全て削除してください。


Packageをインポートする


  1. メニューの「Assets>Import Paclage」から「Caracters」と「CrossPlatformInput」をインポートします。   
    01.png

  2. Assets内にこの二つのフォルダができたことを確認します。

    02.PNG


FPSControllerを配置する


  1. 「Assets>Standard Assets>Characters>FirstPersonCharacter>Prefabs>FPSController.prefab」をシーンに配置します。地面にめり込ませずに少し浮くくらいの高さがおすすめです。このprefabの位置が起動したときのスタート地点になります。
    03.PNG

  2. FPSController.prefabのInspectorで歩く速さなどを設定します。足音など音がいらない場合は「Audio Source」のチェックをはずします。

    04.png


ビルドする


  1. 「File>Build Setting」を開きます。

    05.png

  2. 「WebGL」を選択して、「Player Setting」をクリックします。

    07.png

  3. 「Inspector>Other Settings」の「Auto Graphics API」のチェックを外し、「WebGL1.0」を削除します。
    「WebGL2.0」のみにしてください。

    08.PNG
    09.PNG

  4. 「WebGL」を選択した状態で「Switch Platform」をクリックします。
    10.PNG

  5. 「WebGL」の横にUnityのアイコンが付けばプラットフォームの変更が完了です。
    11.PNG

  6. Scenes In Buildにドラッグ&ドロップでシーンを追加します。
    13.png

  7. 「Build」をクリックするとビルドが始まります!
    14.png

  8. ビルドが終わると7で指定した場所にファイルが3つ作られます!
    15.PNG


サーバーに置いて公開


  1. Googleドライブに任意のフォルダを作り、先ほどビルドした3つのファイルをアップロードします。(2019/02/27追記:残念ながらEditeyは有料になってしまったようです汗)

    16.PNG

  2. 「Editey」をインストールします。「新規」をクリックし、「その他>アプリを追加」をクリックします。
    19.PNG
    17.png

  3. 「Editey」で検索し、「接続」をクリックするとインポートされます。
    18.PNG

  4. フォルダを右クリック「アプリで開く>Editey」を選択します。
    20.png

  5. 「index.html」にチェックを入れて「OK」します。
    21.PNG

  6. よくわからないエラーが出るので「Reload file」します。

    22.PNG

  7. publishします。

    23.PNG

  8. ドメイン設定もできるみたいですが、必要ないときは「Publish Project」をクリックします。
    24.PNG

  9. しばらくするとpublishが完了します!このリンクを開くと建築の中に入れます!!
    25.PNG


おわり

けっこう簡単じゃないですか?

VRほどの没入感はないかもしれないけど、これならVR機器やアプリのインストールも必要ないし、他の人にurlを教えるだけで簡単に空間デザインを共有できます。まだVR環境が整っている人はごく一部なので…

建築のポートフォリオとか、いろいろ活用の場面があるんじゃないかなぁと思いました!

ぜひ全国の建築学生に使ってほしい!!

また、近々STYLYさんが同じような機能を追加するそうなので、更に気軽にWebGLでのウォークスルーができるようになりそうです。自力では画面の大きさ変更やスマホ対応などの実装が難しかったので、STYLYさんの新しいリリースにとても期待しいます♪


参考

http://pineplanter.moo.jp/non-it-salaryman/2016/07/06/editey-google-drive/

https://unity-code.com/webgl/


追記

さらにこのパッケージを使えば、最初からブラウザサイズいっぱいに表示することができます✨