Babylon.js でイージング

標準機能でイージング

まず、「Babylon.js easing」といったキーワードで検索をしてみたら、すぐに公式ドキュメントなどに行き当たりました。

●EasingFunction | Babylon.js Documentation
　https://doc.babylonjs.com/typedoc/classes/BABYLON.EasingFunction

●Advanced Animation Methods | Babylon.js Documentation
　https://doc.babylonjs.com/features/featuresDeepDive/animation/advanced_animations

プレイグラウンドのサンプル

さらに見ていくと、プレイグラウンドのサンプルもありました。

●PGDemo | Babylon.js Playground
　https://playground.babylonjs.com/#8ZNVGR

3つのオブジェクトがあり、1つはイージングを適用していない動きで、残り2つは異なるイージングが適用されているもののようですた。
コードの内容は、以下のとおりです。

var createScene = function () {
    var scene = new BABYLON.Scene(engine);

    var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 100, 100), scene);
    var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, BABYLON.Vector3.Zero(), scene);
    camera.attachControl(canvas, true);

    // Torus
    var torus = BABYLON.Mesh.CreateTorus("torus", 8, 2, 32, scene, false);
    torus.position.x = 25;
    torus.position.z = 30;

    var materialBox = new BABYLON.StandardMaterial("texture1", scene);
    materialBox.diffuseColor = new BABYLON.Color3(0, 1, 0);//Green

    // -----------------------------------------
    // Creation of an easing animation within predefined easing functions
    // ------------------------------------------

    //Create a Vector3 animation at 30 FPS
    var animationTorus = new BABYLON.Animation("torusEasingAnimation", "position", 30, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

    // the torus destination position
    var nextPos = torus.position.add(new BABYLON.Vector3(-80, 0, 0));

    // Animation keys
    var keysTorus = [];
    keysTorus.push({ frame: 0, value: torus.position });
    keysTorus.push({ frame: 120, value: nextPos });
    animationTorus.setKeys(keysTorus);

    // Adding an easing function
    // You can use :
    //1.	CircleEase()
    //2.	BackEase(amplitude)
    //3.	BounceEase(bounces, bounciness)
    //4.	CubicEase()
    //5.	ElasticEase(oscillations, springiness)
    //6.	ExponentialEase(exponent)
    //7.	PowerEase(power)
    //8.	QuadraticEase()
    //9.	QuarticEase()
    //10.	QuinticEase()
    //11.	SineEase()
    // And if you want a total control, you can use a Bezier Curve animation
    //12.   BezierCurveEase(x1, y1, x2, y2)
    var easingFunction = new BABYLON.CircleEase();

    // For each easing function, you can choose beetween EASEIN (default), EASEOUT, EASEINOUT
    easingFunction.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);

    // Adding easing function to my animation
    animationTorus.setEasingFunction(easingFunction);

    // Adding animation to my torus animations collection
    torus.animations.push(animationTorus);

    //Finally, launch animations on torus, from key 0 to key 120 with loop activated
    scene.beginAnimation(torus, 0, 120, true);

    // ------------------------------------------
    // Using Bezier curve to create a custom easing function
    // See here to see some samples and values : http://cubic-bezier.com/
    // -----------------------------------------

    // Torus
    var bezierTorus = BABYLON.Mesh.CreateTorus("torus", 8, 2, 32, scene, false);
    bezierTorus.position.x = 25;
    bezierTorus.position.z = 0;

    // Create the animation
    var animationBezierTorus = new BABYLON.Animation("animationBezierTorus", "position", 30, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
    var keysBezierTorus = [];
    keysBezierTorus.push({ frame: 0, value: bezierTorus.position });
    keysBezierTorus.push({ frame: 120, value: bezierTorus.position.add(new BABYLON.Vector3(-80, 0, 0)) });
    animationBezierTorus.setKeys(keysBezierTorus);
    var bezierEase = new BABYLON.BezierCurveEase(0.32, -0.73, 0.69, 1.59);
    animationBezierTorus.setEasingFunction(bezierEase);
    bezierTorus.animations.push(animationBezierTorus);
    scene.beginAnimation(bezierTorus, 0, 120, true);

    // ------------------------------------------
    // Create a simple animation without easing functions
    // ------------------------------------------

    var torus0 = BABYLON.Mesh.CreateTorus("torus", 8, 2, 32, scene, false);
    torus0.position.x = 25;
    torus0.position.z = -30;
    torus0.material = materialBox;

    BABYLON.Animation.CreateAndStartAnimation("anim", torus0, "position", 30, 120,
             torus0.position, torus0.position.add(new BABYLON.Vector3(-80, 0, 0)));

    return scene;
}

ポイントになりそうな部分を見てみる

イージングを実現する場合の構成としては、始点と終点を決めて、「その始点・終点の間の動きを、線形・非線形な関数でどのようにつなぐか」を設定する感じかと思います。

上記のサンプルでは、イージングを適用したものが 3つのうち 2つあるようだったので、1つずつ見ていきます。

まずは片方のイージングに関する処理を見てみます。
イージングの始点・終点の位置を決める部分は、以下が該当しそうです（フレーム数と場所が設定されているようです）。

また、Babylon.js で用意された複数のイージングの種類の中の 1つを指定して、それを適用する部分は以下が関連しそうです（※ 細かく見ると、他の部分も関連しそうですが）。

上記で 1つ目のイージングの処理に関連した部分を見ていったので、残ったもう片方も見ていきます。
関連しそうな部分は、以下のようです。

上記の　2つのイージングでは、ドキュメントで掲載されているものの中でいうと、以下の赤矢印で示した 2つが利用されていたようでした。

なお、2つあるうちの BezierCurveEase(0.32, -0.73, 0.69, 1.59) と、引数が指定されているほうについては、それがどんな意味になっているかは公式ドキュメントを見ると分かりやすそうでした。
具体的には以下の部分で、アニメーションにおけるイージングを使った変化の様子が、視覚的に分かりやすく理解できそうでした。

変更を加えてみる

上記のサンプルにほんの少しだけ変更を加えて、イージングを使った処理の挙動を変化させてみます。

具体的には、イージングの種類を別のものに変えてみます。行うことは、上記で CircleEase()・BezierCurveEase() が使われている部分を、別のものにいれかえるだけです。

その際に、引数指定が不要のものを選んで試すのが手軽だと思うので、それに該当しそうなものを適当に選んでみました。具体的には QuadraticEase()・SineEase() です。
それらを、サンプルで使われている CircleEase()・BezierCurveEase() と入れかえてみた結果、アニメーションする物体の動きが変わったことが確認できました。

Babylon.js でのアニメーション

今回の標準機能を使ったイージングは、Babylon.js標準のアニメーションの機能と組み合わせられているようです。

今回用いたイージングを使う場合は、そもそも Babylon.js でのアニメーションを標準機能で扱う、という話もセットで見ておくと良さそうでした（※今回の記事では、その部分は割愛）。

●Animation | Babylon.js Documentation
　https://doc.babylonjs.com/typedoc/classes/BABYLON.Animation

●Designing Animations | Babylon.js Documentation
　https://doc.babylonjs.com/features/featuresDeepDive/animation/animation_design

●3-06: キャラクターのアニメーション (Character Animation)
　https://zenn.dev/chomado/books/babylonjs-tutorial-ja/viewer/3-06

●Babylon.jsでアニメーション作成
　https://zenn.dev/ricky/articles/c8c79e52bbd11d