icon-cbCSSでwebVRしてみるTweetcss3だけでVR表現してみる。webVRといえば、基本的にはThree.jsなどを使用して作る方法が一般的です。A-Frameなどを使用して、難しいjsを書かなくても作れたり、Solufaなどの独自ライブラリも出てきていますが、みなさん、htmlで、もうひとつ、3D表現をする方法を忘れてはいませんか?そう、CSS3です。最近は、大手サイトの推奨環境からもIE8/IE9の名前が消えてきて、jsを使わずcss3でリッチな3D表現をするコンテンツも増えてきました。これをwebVRに使えないかと。いうか、webVRが一般的になってきたら、普通のサイトもVRモードとか対応しだしてくるかもしれないと。そんなことを考えてみました。最初に断っておきますが、今のところ全く実用性がありませんwwebVRの可能性の模索って感じで、生暖かい目でみてください。作ってみたで、ざっくり作ってみたのがこちら。Chromeでのみ動作します。FirefoxやIEでは動かないです。※また、スマホでもそれなりにスペック高いものじゃないと動かないかもです。※視差の調整甘いので、気持ち悪くなったらすみません。※スマホ横持ちにしてメニューバーが出てしまったら、上にスワイプすると消せます。単純なオブジェクト並べただけですが、(左右のアニメーションを同時にスタートしないといけないのでその部分だけjQueryで同時にクラス当てしてますが、それ以外の)カメラの動きや左右の視差などは全てdivタグとcssで表現しています。オブジェクトの動きや色のランダムっぽいところは、sassのランダム関数を使用して書き出しています。(なのでコンパイル毎に微妙に表情変わりますw)ほんとはもっとオブジェクト置いてみたり演出つけてみたりしたかったのですが、オブジェクト(divタグ)の数とかの問題で、このくらいがギリでした・・・やったことまずCSSでオブジェクトをつくり、配置して動きをつけました。animationの応用です。カメラの動きですが、当然cssだけなので「カメラ」という概念がありません。全体をdivタグで囲って、中身を逆方向に動かしています。Three.jsでいうと、3D空間まるごと1つにグループ化して、カメラを固定してグループを移動させる感じです。二眼も、カメラがないので中身を少し左右にずらしています。(後述参照)まあ、こういうの作るならThree.js使えばいいし、CSSでここまでやることはまず無いと思いますが・・・なんとなく、勢いでやっちゃった感じです。transform:rotationを紐づけて見回せるようにしたりも出来ます。現実的にはなんとなく思いついたのは、こういう、最近よくあるトランジションとかを、こうしたらどうだろう?ということでした。使いどころ無いと思いますが、一応、二眼変換の部分的なソースはこんな感じ。}}ざっくり説明すると、duplicate($disp)に渡したjQueryオブジェクトの中身を.sbsでくくり、さらに全体を複製。cssではwidthを50%にして、中の.sbsを左右それぞれ少し中心を左右にずらしています。厳密に言えばもう少し細かな調整いると思いますが、これだけでもVRゴーグルで立体視することができます。※ちなみに最初の頑張っちゃったやつは、.sbsのrotateYも少し角度つけて調整してます。スマホでみていただくとわかるかと思いますが、こんな単純な演出でも、ちょっと面白くなったと思います。実用的ではないですが、こんなふうに、three.jsを使わなくても、単純なサイトならhtmlとcssでVR対応なんてこともあったりなかったり。【途中経過】Solufaに触ってみる(ダウンロードからサンプルをアップしてみるまで。