CSS3D と WebGL を融合させた立体風の書籍ビューア！ プラグインとして提供もされてます
用途にマッチした 3D 表現の使い分け
今回ご紹介するのは、3D で PDF などの電子データを表示することができるプラグインのデモページです。
このプラグイン、Wordpress や jQuery のプラグインとして提供されているもののようで、そのデモ版として実際に動いている様子を見せるためのページですね。
ウェブにおける 3D の立体表現というと WebGL のイメージが先行しますが、CSS 3D をうまく利用したビューアの仕組みがなかなか見事です。このような仕組みは WebGL だけでは実現が難しいので、実に上手にウェブの技術を使っている一作だと思います。
立体的に見えても、それは DOM
WebGL は、Canvas エレメントの領域をスクリーンとして、あくまでも 3D API によるレンダリングを行ってシーンを描画します。
言い換えると、どれほど美しい立体表現であっても、それは既に描かれている「絵」としてそこに表示されているということでもあります。
一方で、CSS3D を利用すると、一見して同じように立体的な 3D 表現を行っている場合であっても、そこにはきちんと HTML の DOM が存在する形になります。DOM としてそこにあるわけですから、当然クリックなどのイベントを拾うこともできるのですね。
今回のビューアは、この仕組みを非常にうまく取り入れており、WebGL の 3D 描画と CSS3D の立体表現が見事に融合してひとつの作品になっています。
こちらのページは SPA（シングルページアプリケーション）になっており、クリック操作などでページ遷移することなく動作します。
並べられている書籍の表紙には、キャプチャでは見づらいと思いますが、上の部分に「3D」というタグが付いているものがいくつかあります。
このタグが付いている表紙のデータは、文字通り 3D モードでビューアとして起動させることができます。
実際に 3D ビューアとして見てみると、一見完全に WebGL のレンダリングのように見えるシーンが出てきます。
ページの部分をクリックするとページが次々とめくられていきますし、マウスの右ボタンを利用したドラッグ操作を行えば、上の画像のように少し斜めの角度から見るような、視点の操作を行うこともできます。
本の下の部分には影も落ちていますし、完全に WebGL っぽい見た目になっていると思います。
しかし、ここでは紙の部分はなんと DOM に対して CSS3D を適用して、CSS のちからによって三次元の見た目を実現しています。
その証拠に、書籍のなかに埋め込まれているリンク文字などは、通常のウェブページ上のリンク文字と同じようにクリックして動作する、正真正銘のリンク文字になっています。
マウスカーソルが見えていないのでわかりにくいですが、URL などのアンカーは通常のリンク同様に普通にクリックなどの操作が可能。
WebGL でクリックによって反応するコンテンツを作ることはもちろん可能ですが、一度自前で 3D の実装を行った経験があるのであれば、それがいかに面倒な処理だか想像できると思います。
既に完成された一枚の絵として描かれる WebGL の場合、特定のエリアがクリックされたことに反応するようにしたい場合、面倒な座標計算をたくさん行ってやる必要がありますが、CSS3D の場合は、そんな手間はありません。
なにせ、普通にそこにリンク文字が置いてあるわけですから、制御は従来通りブラウザにまかせてしまえばいいからですね。
CSS を利用するメリットをしっかり利用していると言えると思います。
今回のビューアは、目次を画面のはじに表示したり、PDF をダウンロードするためのリンクメニューを表示したりと、他にもいくつかの機能がバンドルされているみたいです。
WebGL だけでは実現できないことも、CSS3D を同時に利用し組み合わせることによって、こんな形でひとつの完成されたアプリケーションになるというのが、なんとも不思議で、魅力的だなと感じました。
正直なところ、CSS3D は WebGL と比較してもなかなか扱うのが面倒なので万人におすすめはできませんが、今回のビューアの完成度はかなり高いと言っていいのではないでしょうか。
興味のある方はぜひご覧になってみてください。
