elm-3d-sceneとは
elm-3d-sceneは、Elmで手軽に3DCGを描画できるライブラリです。ゲーム作成にも使えますが、物理演算や衝突判定などの機能1はなく、描画機能だけを持っています。
こんな感じのCGを作ることもできます。
早速いじってみましょう！
elm-3d-sceneのGetting startedに記載されている通り、まずはtutorialを読むと雰囲気が掴めると思います。examplesには難易度別にサンプルプログラムが用意されており、それぞれellieでも動かせるようになっていますので、気軽にいじってみることができます。各サンプルプログラム内のコメントには、そのプログラムで解説したいポイントが書かれており、理解を助けてくれます。
elm-3d-sceneの基本
tutorialを読むとわかりますが、entityと呼ばれるモノとcameraを用意してレンダリングする。基本的にはこれだけです。
entityを作る際には、elm-3d-sceneで用意されているブロックみたいなものや球みたいなものを取り扱うこともできますが、Meshと呼ばれる三角形の集合体で立体を表現することもできます。ただし難易度が上がるようなのでこの記事では取り扱いません。elm-3d-sceneの背景にあるwebglのドキュメントにMeshに関する説明があります。
つまずきやすい点
座標系
elm-3d-sceneのパッケージドキュメントを読んでいると、よく3つの値を引数に取ることがあります。3D空間上の座標X・Y・Zです。これらの値が大きくなるとどちらの方向に進んで行くのかがドキュメントには明記されていないようでしたが、実際に試してみたところ以下のようになっていました。
パッケージドキュメントの読み方
型の探し方
elm-3d-sceneは他のライブラリを使用しています。そのためか、elm-3d-sceneのパッケージドキュメントを読むとelm-3d-sceneで定義されていない型がいきなり登場します。使用しているライブラリはtutorialの冒頭に書いてありますので、elm-3d-sceneのパッケージドキュメントを検索しても見つからない場合は、これらのドキュメントも探してみてください。
例： point関数
Quantityってなに！？Plainってなに！？と混乱しました…
Quantityはelm-unitsに。Plainはelm-3d-sceneの中にありました。但しelm-3d-sceneのメインモジュールであるScene3dではなく別のモジュールに含まれていました。
関数の探し方
elm-3d-sceneの関数に必要な引数は大体何かの関数の結果なのですが、慣れるまではちょうど良い関数を見つけるのに苦労するかもしれません。期待している型を返す関数がなさそうに見えても、型エイリアスが定義されている場合が多いので探してみてください。
Plainを返す関数が見つからなかったのですが、型エイリアスを見たらちょうど良い関数を見つけることができました。
参考：Elm Game Jam #5
Elmでゲームを作るイベントElm Game Jam #5があります。今回のテーマは3Dです。3Dゲーム作りの参考になる情報もまとまっていますので、気軽に参加してみてはいかがでしょうか。
-
物理演算や衝突判定をしたい場合は、elm-physicsを組み合わせて使うことができるようです。これについては、はーなーさんの記事が参考になります。 ↩