初めに

フリック(https://twitter.com/TewiEwi_no96) ですω
モノづくりが好きな人はフォローをよろしくお願いします！

動機

Elixir/PhoenixでもWebGL出来ないかな～と思い至り環境を整えてみましたω

結果

必要知識

・Phoenixサーバーを構築する知識
↓@piacerexさんの記事がお勧めです。
https://qiita.com/piacerex/items/a7558adc6856e3577dc6
・WebGLをBuild出来る知識
https://docs.unity3d.com/ja/2018.3/Manual/webgl-building.html

実施環境

・Unity(2019.4.14f1)
・Phoenix v1.5.6

手順

①新規にUnityのプロジェクトを作成しWebGLでBuild
Unityを立ち上げたら、File->Build Settings...を押してWebGLを選択、Buildを押してください。
余談：今回は適当にボックスを配置して、WASDでカメラを移動させるだけのものをサンプルとして作成しました。

②Buildした結果を格納するフォルダーを作成
新しいフォルダーを押して、フォルダを作成し、フォルダーの作成を押してください。
そうするとBuildされ、index.htmlファイルとBuildフォルダ、TemplateDataフォルダが生成されます。
今回使うのは、BuildフォルダとTemplateDataフォルダの二つですω
余談:今回のフォルダ名はbuildにしました。

③Phoenixサーバーを構築&起動
構築

mix phx.new webgl_sample --no-ecto
…
Fetch and install dependencies? [Yn] Y
…
cd webgl_sample

起動

iex -S mix phx.server

確認
ブラウザで「http://localhost:4000 」にアクセスすると、Phoenixで作られたWebページが見れます。

④UnityでBuildしたファイルをPhoenixサーバーにコピペ
BuildフォルダとTemplateDataフォルダを以下のフォルダにコピペ
webgl_sample/priv/static/js

⑤htmlと紐づけ
app.html.eexに下記のように追記する。

webgl_sample/lib/webgl_sample_web/templates/layout/app.html.eex

<!DOCTYPE html>
<html lang="en">
  <head>
    ...

    <link rel="shortcut icon" href="<%= Routes.static_path(@conn, "/js/TemplateData/favicon.ico") %>"/>
    <link rel="stylesheet" href="<%= Routes.static_path(@conn, "/js/TemplateData/style.css") %>"/>
    <script src="<%= Routes.static_path(@conn, "/js/TemplateData/UnityProgress.js") %>"></script>
    <script src="<%= Routes.static_path(@conn, "/js/Build/UnityLoader.js") %>"></script>
    <script>
      var unityInstance = UnityLoader.instantiate("unityContainer", "/js/Build/build.json");
    </script>

  </head>
  <body>
    ...
  </body>
</html>

index.html.eexに下記のように記載する。

webgl_sample/lib/webgl_sample_web/templates/page/index.html.eex

<div class="webgl-content" style="margin-top: 350px;">
  <div id="unityContainer" style="width: 960px; height: 600px"></div>
  <div class="footer">
    <div class="webgl-logo"></div>
    <div class="fullscreen" onclick="unityInstance.SetFullscreen(1)"></div>
    <div class="title">WebGL_test</div>
  </div>
</div>

完成

終わりに

後はUnityのプラグインでjavascriptが動かせるのかやElixirの恩恵をどのように受けるのか試行錯誤できればな～って思う～
見てくれてありがとうごさいましたｂ

FUNBOXで支援してもらえると記事を書く励みになりますω

Elixir/PhoenixでWebGLを動かしてみる

初めに

動機

結果

必要知識

実施環境

手順

完成

終わりに