Skip to content

gl.enchant.jsがクォータニオンに対応した0.3βにバージョンアップ!

続々と新しいプラグインやサンプルが充実しているgl.enchant.jsが0.3βへとバージョンアップした!
gl.enchant.js 0.3βのページ

今回の目玉機能はクォータニオンへの対応。
クォータニオンとは、物体の回転を便利にしちゃう凄い数学上のトリックだ。

もともとはオイラー角で3Dオブジェクトの姿勢制御をするのが普通だった。
オイラー角というのは、上図の右半分のように、X、Y、Zの三軸に対して、それぞれ、何度、何度、何度、と回転を与える方式だ。

普通に考えて、これで良さそうな気がする。

しかし、実は違う。
実はオイラー角の場合、最初にX軸から回転させるか、Y軸から回転させるか、など、回転させる順番によって結果が大きく変わってしまうのだ。

そのため、オイラー角と言っても単純にXに何度、Yに何度、Zに何度という単純な量を与えるのでは十分ではなく、回転させる順番によって得られる結果が大きく異なるのだ。

これはゲームなどを作る場合には不便きわまりない。
ゲームでは、むしろオブジェクトの主観的な角度で姿勢を変えたい(回転させたい)ことが多く、そういう目的にはオイラー角はほとんど実用に耐えなかった。

それでもオイラー角は、オブジェクトがヘディング角、つまりY軸の回転だけをする、などに限定すれば使えなくもなかった。

けれどもそれは非常に大きな制約だ。

せっかくコンピュータの中では三次元の空間を自由に扱えるというのに、オイラー角を使っている限りには常に「水平」という概念に縛られることになる。

それを一気に解決するのがクォータニオンだ。
X-Y-Zの三つの軸が9パターンで絡み合うオイラー角に比べ、クォータニオンには、一本のベクトルとそれを軸とした回転角の表現しかない。

これを「Q=(x,y,z,θ)」などと表現する。

実際のクォータニオンの中身は、3つの相異なる虚数単位からなる特殊な複素数だ。
けど、これを解説すると日が暮れるので、ざっくり飛ばしてenchant.jsではクォータニオンの美味しくて便利なところだけを簡単に使えるようにしたぞ。

    	//最初の姿勢をセット
    	cubeA.rotationSet(new Quat(1,0,0,Math.PI));

    	//クォータニオンを合成
    	cubeA.rotationApply(new Quat(0,1,0,Math.PI)); //ヘディング回転 

gl.enchant.jsのSprite3Dには、姿勢そのものをビシっと決めるrotationSetと、今の姿勢に新しい回転を適用するrotationApplyを追加した。

ビシっと予め決められた姿勢にしたいときはrotationSetを使い、ゲームキャラの動きなど、それまでの姿勢にさらに新しい姿勢をとるためにはrotationApplyを使うのだ。

どちらの場合も、引数としてQuatクラスのインスタンスを渡す。
Quatクラスは、(x,y,z,角度)という順番で渡すとそれに応じたクォータニオンを作ってくれる。

厳密なクォータニオンではさらにややこしい計算をする必要があるが、ここはgl.enchant.jsが隠蔽してくれてるからあまり考えなくてOK。

この機能追加を受けて、gl.enchant.jsのサンプルに新たに「クォータニオン」が追加された。

左がクォータニオンによる回転、右がオイラー角による回転を表現している。
プログラムの中では、オイラー角の回転もクォータニオンによって擬似的に再現しているので、二つの回転がどのように違うのか、実際に試すことが出来るぞ。

では週末のGGJに向けて英気を養おう!

このエントリーをはてなブックマークに追加
はてなブックマーク - gl.enchant.jsがクォータニオンに対応した0.3βにバージョンアップ!
Post to Google Buzz
Share on GREE

Related posts:

  1. gl.enchant.js開発者コミュニティが活発化!チュートリアルやサンプルが続々と
  2. 3D野郎は寄ってたかれ!WebGLでグリグリ遊べるgl.enchant.jsがついにβ公開!
  3. WebGL+enchant.jsでモグラ叩き!ゲームをつくる!(221行)
  4. enchant.jsで3Dの”ハコニワ”マップが簡単に創れる「ハコニワプラグイン」が凄すぎる
  5. enchant.js用物理シミュレーションプラグインPhySpriteが登場!

Facebook comments:

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*