This explanation is currently available in Japanese.
ひとことで
移動する物体の過去の位置を点列として記録し、隣り合う点どうしを三角形の帯(リボン)でつないで描く手法です。剣の軌跡(剣閃)、レーザーや弾の軌跡、車のテールランプの光跡、魔法の帯など、「通った跡が残る」表現の定番です。Unity の Trail Renderer、Unreal の Ribbon Emitter がこれにあたります。
ゲームでの使いどころ
- 剣閃・武器の軌跡:アクションゲームの攻撃に速さと重さを与える最も効果的な演出の一つ。
- 弾・ミサイルの軌跡:飛行経路が分かり、プレイヤーが攻撃の出どころを把握しやすくなります。
- 乗り物:スピード感を出すテールライトの光跡、飛行機の翼端雲。
- UI・カーソルエフェクト:タッチやマウスの軌跡を光の帯で表示する。
しくみ
剣閃の場合、毎フレーム(または一定間隔で)刃の根元と先端の 2 点を記録します。 番目の記録を とすると、隣り合う記録 の 4 点から 2 枚の三角形を作ります。
各頂点には「新しさ」(最新 = 1、最古 = 0)と「帯の横方向の位置」(根元 = 0、先端 = 1)を持たせ、シェーダーで透明度や色のグラデーションに使います。古い部分ほど透明にすると、自然に尾を引いて消えていきます。
弾やレーザーのように点 1 つしか持たないものは、帯の幅方向を自分で決める必要があります。一般には、記録点ごとに「進行方向」と「カメラへの方向」の外積で幅方向を求め、帯が常にカメラの方を向くようにします(ビルボードのリボン版)。
実装のポイント
- 記録の間を補間する:記録間隔より速く振ると、帯がカクカクの多角形になります。記録点の間をカトマル・ロム曲線で補間して分割すると、少ない記録でも滑らかな円弧になります(デモの「記録の間を曲線で補間」)。
- 時間で消す:記録数ではなく「記録からの経過時間」で透明度と寿命を決めると、フレームレートが変わっても軌跡の長さが一定になります。
- 加算合成とブルーム:剣閃は加算合成で描き、ブルームを少しかけると光の帯らしくなります。
つまずきやすい点
- 帯がねじれる:点 1 つの軌跡で幅方向を毎フレーム独立に決めると、急旋回したときに帯が裏返ってねじれます。前の記録の幅方向と向きをそろえます。
- 止まっているときの扱い:動いていないときも記録し続けると、同じ位置に三角形が重なって明るい点ができます。移動量が小さいときは記録をスキップします。
- UV の伸び:テクスチャを貼る場合、記録間隔の距離が不均一だと模様が伸び縮みします。累積距離から UV を計算します。
デモで試すこと
- 「表示」を記録した点だけにすると、帯の元になっている根元と先端の点列が見えます。
- 「振りの速さ」を上げたまま「記録の間を曲線で補間」をオフにすると、帯が折れ線状になります。オンに戻すと滑らかな弧になります。
- 「軌跡の長さ」を変えると、剣閃の尾の長さが変わります。短いと鋭い斬撃、長いと大振りの一撃の印象になります。