Babylon.jsのTrail Meshを使ってきれいな軌跡を描く方法

Babylon.jsにはTrailMeshという機能があります。これを使うと、何かが動いた時の軌跡を表示できます。
しかしTrailMesh単独で使うだけだと、見た目があまりきれいではありませんでした。(やり方次第かもしれませんが)

今回はGlow Layerという別の機能と組み合わせて、TrailMeshをきれいに表示する方法を整理しました。

1. TrailMeshとは？

公式ドキュメントで解説されています。対象メッシュとは別のメッシュを作り、軌跡を表現するものです。

TrailMesh creates a new Mesh that trails another.

UnityのTrail Rendererと同じような機能と考えていただければイメージしやすいと思います。

使い方はシンプルで、TrailMeshとStandardMaterialを宣言して、それぞれ値を設定するだけです。
gist.github.com

追加でPhysicsImposterという物理演算を使ってsphereを動かす処理を入れると、このようになります。

diffuseColorの箇所を変えると色を変化させることができます。

しかし、TrailMeshだけだといまいちきれいになりません。

Babylon.jsにはGlow Layerという機能があります。対象物を発光させる機能です。

以下のPlayground (ブラウザ上で動作確認できるサイト) をみていただくとわかりますが、数行のコードできれいに発光している電気の配管？を確認できます。

Glow Layerはメッシュに対して適用されます。customEmissiveColorSelectorというメソッドを使うと、特定のメッシュのときだけGlow Layerの機能を発動させることもできます。

この例は、"shockWave"という名前のメッシュだけglow layerを発動、scene内のそれ以外のメッシュには何もしないという処理です。

この処理をつけると、先ほどの例がこのように変化します。

Playgroundに書きましたので、詳細はこちらをご確認ください。

さきほどの場合、TrailMesh単独よりは綺麗になりましたが中心が灰色っぽいままになっています。
PointLightを子オブジェクトにする例を見つけたので試してみました。

これで中心の黒っぽい部分も見えなくなりました。

Babylon.js Editorでも同じことができます。縮尺や速さなどを変えたので見た目が少し違っています。また、Pointlightは使っていませんが基本的に同じ処理です。

このようなコードで書いています。

Playgroundは他の人の書いたコードと結果を共有できる仕組みです。Playground Searchを使うとそれらを検索できます。調べたところ、Trail Meshをきれいに見せる方法は他にもありそうです。また何か見つかれば書きたいと思います。

また、これで剣を振ったときの衝撃波を表現できそうです。順番が変わりましたが、次は剣を正面に振ったタイミングで今回のTrailMeshを出せるようにしたいと思います。