Inverse Kinematics によるボーンの挙動をとてもわかりやすく可視化する three.js 製の WebGL 技術デモ
インバースキネマティクスがよくわかる
今回ご紹介するのは、通称 IK として呼ばれることも多い、インバースキネマティクス（inverse kinematics）の実装を three.js で行った技術デモです。
WebGL 界隈には、まだまだしっかりとした技術力を持った人が少ない印象があります。私も、もちろんまだまだ力不足だなと感じることが多いのですが、それだけに WebGL の IK 実装はあまり見かけることが無いような気がします。
ゲームプログラマの方々からすれば、IK なんて理解できていて当たり前、というものなのかもしれませんが、しかし数学を駆使する IK の実装が、それなりに難易度の高いものであることは確かでしょう。
今回のデモは、IK がどのような動きをするものなのか、デモを通して視覚的にわかりやすく示してくれています。
関節のような動きが面白い
IK は、人間などの関節を持ったオブジェクトを動かす上で欠かせない概念です。
たとえば、地面に人間が立っている状態では、その人間の全体の位置は当然ながら地面に接している足の位置によって変化しますよね。足を大きく前に踏み出している姿勢なら、頭の位置は本来の位置よりも下がった位置にくるはずです。
かなりざっくりとした説明ですが、このように終端の位置から逆算するようにして全体の座標を求めたり回転させたりすることで、より自然な姿勢を持ったオブジェクトの座標を決める概念が IK です。（中心となる部分から計算していく場合は FK と呼びますね）
今回のデモは、そんな IK を気軽に体験できるものとなっています。
トップに掲載している画像にも映っている、黄色い色のオブジェクトが、ページを開くと規定で表示された状態になっています。
このオブジェクトを横から見たのが、上の図ですね。手前に向かって弧を描くようにして湾曲した形をしています。
このデモにはいくつかのプリセットのシーンが入っていますが、それらの全ては、画面の右上にあるスライダーによって操作することが可能となっています。
赤い基準となるキューブを先端として、そこに向かって関節が連なるようにして動きます。
スライダに対する操作が結構大きなステップで変化するので、少しずつ、XYZ の各方向に赤いキューブを動かしてみると、意味がわかりやすいのではないかなと思います。
私個人は二次元で IK っぽい計算を行ったことがありますが、結構慣れてしまうと、考え方そのものはそんなに難しくはありません。ゲームなどに自作のモーションを組み込むとなるとまた話は別ですが……
プリセットのシーンを適当に動かしているだけでも、関節のような動きが自然に再現されているのがわかると思います。
IK のような概念は、初めて目にした時はとても頭のなかで整理してイメージするのが難しいかもしれません。そういう時は、動画などで inverse kinematics をキーワードに検索してみると、もっと直感的に理解できるものがあると思います。
最低限の理解を持った状態でこのデモを動かしてみれば、なるほど納得と感じるのではないでしょうか。
見た目は結構地味ですが、three.js で IK だけをテーマにして作られているデモは珍しかったのでご紹介しました。
興味のある方は、ぜひチェックしてみてください。
