CSS 3Dトランスフォームで実現する回転する3D分子モデル

3D Rotating Molecules on the iPhone/iPad - jackadamblogに3Dレンダリングにおけるビルボード処理と似たような処理をCSS3の3Dトランスフォームで実現するという面白いテクニックが掲載されている。現在のiPadやiPhoneで実現的な3D処理を実現する方法のひとつとして紹介されている。

jackadamblogに掲載されている一連の記事は、これまでFlashを使って開発していたゲームをHTML5、CSS3、JavaScriptといった技術を使って実現するための連載記事になっている。当初はCanvasでこれを実現しようとしたものの、現在のiPadやiPhoneで実現されているCanvas実装は、H/Wアクセラレーションが弱くクリアメカニズムの効率も悪い。このため、満足なフレームレートを得られないため現実的な方法とはいえないという。その代わり、CSS3の3Dトランスフォーム機能を使うことで、同様のレンダリングが実現できることを指摘している。

3D Rotating Molecules on the iPhone/iPadに掲載されている分子モデルデモにiPadやiPhoneからアクセスすると、3Dでレンダリングされたように見える分子モデルを指で回転させたりピッチでズームインやズームアウトを実施できることを確認できる。動きは許容できるレベルに滑らかだ。PCから確認する場合、最新のSafariやChrome開発版を使う必要がある。

一見すると3Dモデルのようだが、これはCSS3の3Dトランスフォームを使ってビルボード処理に類似した処理を実施することで実現している。これは3D Rotating Molecules on the iPhone/iPadに掲載されているサンプルコードと回転デモ1および回転デモ2を比較するとわかりやすい。なお、こちらのデモを動作させるのにもSafariかChrome開発版が必要。

平面をY軸を軸にして回転させるには、次のようなCSSを用意する。3D Rotating Molecules on the iPhone/iPad に掲載されているサンプルコードと回転デモ1がそのデモンストレーションになっている。面とボールが回転しているようすを確認できる。

#container {
    [...]
    -webkit-transform-style: preserve-3d;
    -webkit-animation-name: spin;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}
@-webkit-keyframes spin {
    0%    { -webkit-transform: rotateY(0deg); }
    100%  { -webkit-transform: rotateY(360deg); }
}

ここでボールに対してビルボード処理を実施してやる。CSS3 3Dトランスフォームそのものにはビルボード処理を実施するためのメソッドは定義されていないが、若干の工夫をするとこれを実現できる。keyframesにおける回転角度の指定を面に対する処理と真逆にしてやればいいというわけだ。面が回転するのにあわせて、ボールを逆の方向に回転させる。結果として、ボールは常にその正面をユーザ側に向けたままになる。回転デモ2を見ると説明の意味を理解しやすい。

.ball {
    [...]
    -webkit-transform-style: preserve-3d;
    -webkit-animation-name: reverse-spin;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}
@-webkit-keyframes reverse-spin {
    0%    { -webkit-transform: rotateY(360deg); }
    100%  { -webkit-transform: rotateY(0deg); }
}

3Dレンダリングにおいて、3Dっぽい表面を張り付けた2Dを常に正面で表示させ、あたかも3Dオブジェクトのようにレンダリングすることをビルボーディング、または、ビルボード処理といった名称で呼ぶが、真逆に回転させることでこれと似たようなことを実施したのがこの記事でのポイントとなる。レンダリングするボールを3Dっぽいものにしておけば、あたかも3Dオブジェクトが移動しているかのような錯覚を覚えるというわけだ。分子モデルデモはこのテクニックを使って制作されている。