【Unity】動画で見るSlerp

Vector3のSLerpを動画にしました。
SLerpをなんとなく使っている人に見ていただけると幸いです。
動画で見るLerpも投稿していますのそちらも参考に。

動画

投稿用
Slerpサンプル1 pic.twitter.com/mHnTSWlUk7

— TANUKEINA (@FH1b4mzzirXPoiM) September 13, 2020

投稿用
Slerpサンプル2 pic.twitter.com/tmpvOFXeS6

— TANUKEINA (@FH1b4mzzirXPoiM) September 13, 2020

オブジェクトの色も線形補間(Color.Lerp)によって変化させています。

Slerp(Vector3 a, Vector3 b, float t);

引数

• Vector3 a :開始点
• Vector3 b :終了点
• float t :二点の補間値

計算式は

\text{Slerp}(a,b;t) = \frac{\sin[(1-t)Ω]}{\sin Ω}a + \frac{\sin[tΩ]}{\sin Ω}b

a,bの二点間を球面的に補間するということを表してるわけですが、
これだけ見るとなんだかよくわかりませんね。
この辺は私がわざわざ説明するより、先人達の記事の方が何倍もわかりやすいので以下にリンクを貼っておきます。

○×つくろ〜ドットコム　その57 クォータニオンを"使わない"球面線形補間

SlerpExample

SlerpExample.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class SlerpExample : MonoBehaviour
{
    public Transform sunrise;
    public Transform sunset;

    //始点から終点までの時間
    public float journeyTime = 1.0f;

    [System.NonSerialized]
    public float fracComplete;

    private float startTime;

    private void Start()
    {
        startTime = Time.time;
    }

    private void Update()
    {
        //弧の中心
        Vector3 center = (sunrise.position + sunset.position) * 0.5f;

        //弧を中心にするため調整
        center -= new Vector3(0, -1, 0);

        //中心を基準として円弧を補間する
        Vector3 riseRelCenter = sunrise.position - center;
        Vector3 setRelCenter = sunset.position - center;

        fracComplete = (Time.time - startTime) / journeyTime;

        transform.position = Vector3.Slerp(riseRelCenter, setRelCenter, fracComplete);
        transform.position += center;
    }
}

ColorLerp

Lerpの記事から少し改良しています。

ColorLerp.cs

sing System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class ColorLerp : MonoBehaviour
{
    public enum LerpType
    {
        Lerp,
        Slerp
    }

    public LerpType lerpType;

    private LerpExample lerpExample;
    private SlerpExample slerpExample;
    private Material mat;

    private void Start()
    {
        mat = this.GetComponent<Renderer>().material;
        lerpExample = GetComponent<LerpExample>();
        slerpExample = GetComponent<SlerpExample>();
    }

    void Update()
    {
        switch (lerpType)
        {
            case LerpType.Lerp:
                mat.color = Color.Lerp(Color.blue, Color.red, lerpExample.fractionOfJourney);
                break;
            case LerpType.Slerp:
                mat.color = Color.Lerp(Color.blue, Color.red, slerpExample.fracComplete);
                break;
        }
    }
}

まとめ

• Slerpは球面線形補間をするメソッド
• 回転表現に使用できる
• Quaternionだと理解しにくいので動画を見て、直感的に理解してくれたら幸いです