CSSで本当にクリアできるルービックキューブを作ったので3Dについて色々解説してみる その1

カテゴリ:3D 2013年8月20日 09:04

しばらくぶりの更新です。
最近はWebGLやCSS Shaderを始め、3D関係のことをメインに勉強しています。
おかげでだいぶ詳しくなってきました。

ちなみに、CSSでクリアできる、と書いていますが「CSSだけで」ではないので当然JavaScriptもてんこ盛りですw

最近はインプットばかりだったので、備忘録も兼ねて以前案件で制作したCSS Rubik Cubeを解説を交えながら書いていきたいと思います。
CSS Rubik CubeはMaxellの商品のキャンペーンで、エビ中キューブと名付けられたコンテンツです。

エビ中キューブは、エビ中というアイドルグループの動画を、ルービックキューブで操作して自分好みのものに揃えて見る、というものです。
PCだけでも操作可能ですが、これをWebSocketでスマホと接続してスマホからPCに表示されているルービックキューブを操作する、というのがメインコンテンツです。
この「スマホでルービックキューブ」のコントローラ部分の制作を担当しました。

今回はこの「スマホ向けルービックキューブコントローラ」を細かく解説していこうと思っています。(ただ、結構長くなりそうなので何回かに分けて書く予定です)
ちなみにこのコントローラ部分をjsdo.itにあげて、さらに何分でクリアできるか、というゲーム仕立てにしたものをアップしておきました。

以下のデモは、マウスでドラッグするか、スマホでフリップすることでルービックキューブを操作することができます。画面外をドラッグすることでルービックキューブ自体を回転することができるので、全体の状態がどうなっているかも確認することができます。(ただ、これでクリアは相当大変ですが・・w)

実際のルービックキューブサンプル

3Dに関するメモ書き

3Dグラフィクスに関してはインターネット上の記事をメインに、書籍などを参考にしつつ勉強しました。
そのときに集めたメモ書きをqiitaに投稿しているので、そちらも参考にしてみてください。

自作3Dライブラリのデモ

勉強の理解を深めるために、1から自作の3Dライブラリを作ってみたものが以下のデモです。
座標変換、ライティングがメインなので複雑なモデルは作れていませんが、ドラッグなどで3Dの感じを味わえる作りになっています。
またデモは、2D Canvasにレンダリングするものなので、(かなり重いですが)スマホでも見ることができます。

参考書籍

書籍は以下のもの(実例で学ぶゲーム3D数学)を熟読しました。

参考記事リンク

自分が勉強してきた記事で、ブックマークしたものをまとめておきました。
ただひとつ注意点があって、ググって出てくる記事には2通りの種類があるということを覚えておいてください。

どういうことかというと、OpenGLをベースに解説している記事なのか、DirectXをベースにしている記事なのか、です。
次回以降で詳しく解説する予定ですが、このふたつはどちらも3Dを実現する技術です。
なにを注意するかというと、実はこのふたつ、どちらも同じ3D関係の技術ではあるものの、3Dには欠かせない行列による計算がまったく逆なのです。

そのため、これを知らずに行列を計算すると期待と違った結果になってしまいます。
色々な記事を参考にしていて、実はここが地味に大変でした。この行列はどっちのなの!? というw
なので、ここに挙げた記事以外に他のものを参考にする際はその点に注意して参考にしてください。(ちなみに解説する予定の行列の計算はOpenGLの方式をベースにしています)

今回は参考リンクや触り部分だけになりましたが、意外と参考記事を見つけるだけでも大変だったので有用だと思うものをまとめておきました。
次回はいよいよ本格的に解説に入って行きたいと思います。

この記事のカテゴリー一覧を見る⇒3D

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/215