Particles & trails

Ribbon / Trail Renderer

リボン・トレイル

点列を帯にして剣閃やレーザーの残光を描く。

3 / 10

Interactive demo

Preparing the demo…

Ribbon / Trail Renderer

Drag to orbit, Ctrl/⌘ + scroll to zoom. Use two fingers on touch screens.

This explanation is currently available in Japanese.

ひとことで

移動する物体の過去の位置を点列として記録し、隣り合う点どうしを三角形の帯(リボン)でつないで描く手法です。剣の軌跡(剣閃)、レーザーや弾の軌跡、車のテールランプの光跡、魔法の帯など、「通った跡が残る」表現の定番です。Unity の Trail Renderer、Unreal の Ribbon Emitter がこれにあたります。

ゲームでの使いどころ

  • 剣閃・武器の軌跡:アクションゲームの攻撃に速さと重さを与える最も効果的な演出の一つ。
  • 弾・ミサイルの軌跡:飛行経路が分かり、プレイヤーが攻撃の出どころを把握しやすくなります。
  • 乗り物:スピード感を出すテールライトの光跡、飛行機の翼端雲。
  • UI・カーソルエフェクト:タッチやマウスの軌跡を光の帯で表示する。

しくみ

剣閃の場合、毎フレーム(または一定間隔で)刃の根元と先端の 2 点を記録します。ii 番目の記録を (bi,ti)(\mathbf{b}_i, \mathbf{t}_i) とすると、隣り合う記録 i,i+1i, i+1 の 4 点から 2 枚の三角形を作ります。

△(bi,ti,bi+1),△(ti,ti+1,bi+1)\triangle(\mathbf{b}_i, \mathbf{t}_i, \mathbf{b}_{i+1}), \qquad \triangle(\mathbf{t}_i, \mathbf{t}_{i+1}, \mathbf{b}_{i+1})

各頂点には「新しさ」(最新 = 1、最古 = 0)と「帯の横方向の位置」(根元 = 0、先端 = 1)を持たせ、シェーダーで透明度や色のグラデーションに使います。古い部分ほど透明にすると、自然に尾を引いて消えていきます。

弾やレーザーのように点 1 つしか持たないものは、帯の幅方向を自分で決める必要があります。一般には、記録点ごとに「進行方向」と「カメラへの方向」の外積で幅方向を求め、帯が常にカメラの方を向くようにします(ビルボードのリボン版)。

実装のポイント

  • 記録の間を補間する:記録間隔より速く振ると、帯がカクカクの多角形になります。記録点の間をカトマル・ロム曲線で補間して分割すると、少ない記録でも滑らかな円弧になります(デモの「記録の間を曲線で補間」)。
  • 時間で消す:記録数ではなく「記録からの経過時間」で透明度と寿命を決めると、フレームレートが変わっても軌跡の長さが一定になります。
  • 加算合成とブルーム:剣閃は加算合成で描き、ブルームを少しかけると光の帯らしくなります。

つまずきやすい点

  • 帯がねじれる:点 1 つの軌跡で幅方向を毎フレーム独立に決めると、急旋回したときに帯が裏返ってねじれます。前の記録の幅方向と向きをそろえます。
  • 止まっているときの扱い:動いていないときも記録し続けると、同じ位置に三角形が重なって明るい点ができます。移動量が小さいときは記録をスキップします。
  • UV の伸び:テクスチャを貼る場合、記録間隔の距離が不均一だと模様が伸び縮みします。累積距離から UV を計算します。

デモで試すこと

  1. 「表示」を記録した点だけにすると、帯の元になっている根元と先端の点列が見えます。
  2. 「振りの速さ」を上げたまま「記録の間を曲線で補間」をオフにすると、帯が折れ線状になります。オンに戻すと滑らかな弧になります。
  3. 「軌跡の長さ」を変えると、剣閃の尾の長さが変わります。短いと鋭い斬撃、長いと大振りの一撃の印象になります。

References

Unity Particle System Renderer ↗

A general reference for this subcategory.