WebVR作ってみた

連休を頂いたので、久しぶりに何か作ろうと思い立ち、こんなのを作ってみたです。

(今んとこiPhoneのみ対応です。自機の6でしか確かめてない…

Three.jsを使ってます。初めて触ったんですが、すごいねThree.jsマジすごい。

Three.jsどころかWebGLどころかcanvasすらまともに弄ったことないしそもそもJavaScriptもしばらく書いてなかったりで、

変なところで時間を食いましたが、やってることはそんなに難しくないと思われです。

【やりたいこと】

①キーワード入力するとWebGLの3D空間にツイートが表示される

②ハコスコとかGoogleCardboardとかに対応してるVR的なやつにしたい

③背景は全天球動画にしたい

なんか今っぽい！

【やったこと】

>>①キーワード入力すると3D空間にツイートが表示される

今回の肝。

最終的な方法は…

phpでTwitter search API叩いてDOMに出力、

CSSで装飾したら、そいつらをJSでひたすらcanvas化。

大体その処理が終わったら(ちなみに"大体って"言ってるようにここらへんの処理がとても甘い…)、Three.jsでシーン立ち上げて、取得したTweet数だけ奥行き0の立方体オブジェクトを追加。

Canvas化したものをテクスチャとしてそれぞれ貼り付ける。

という、なんとも強引な手を使っている(誰だこんなことやろうと思ったやつは！？)

DOMからCanvasに描画するのはHTML2CANVASなるJSライブラリでやりました。

すごいなー世界にはなんでもあるなー。

ハマったのは、プロフィールアイコンとか、投稿画像とか入れようとしたら、

Canvasが真っ白で何も映らないでござる！、だったこと。

要はSame Origin Policyに引っかかっていたのでした。Twitterさんの画像だからってことですね。というわけで画像周りは諦め。

あとCSS枠線に画像とか指定する場合もなんかうまくいかん模様。これはバージョンアップに期待。

ちなみにDOM→Canvas処理が多分一番端末に負荷かかってるんじゃないかと思う。

落ちる人はレポートおなしゃすください。

あとツイートの配置は今んところランダムなので、結構な確率で読めません。そこは運。

>>②ハコスコとかGoogleCardboardとかに対応してるVR的なやつにしたい

これはThree.jsのCardboardEffectであっさり実装。簡単すぎてわろた。

ハマったこととしては、おそらくCardboardEffectとpostprocessing系は共存できない。

多分。

>>③背景は全天球動画にしたい

全天球静止画や、PCだけならできるのだが、

iPhoneは動画がインライン再生できない問題が…

最終的はこの方法で実装。けどAndroidはなんか動かない。

眠かったからかな？（すっとぼけ

そしてiOS10からは普通に動画がインライン再生できるとか。

ちなみに動画を荒らしてるのはわざとです。グリッチ好きなんです。

あとはいろんな細かい処理とか調整とかパーツデザインしたりとか動画と音作ったりとか…

というカンジで割と連休を使い切りました。

旅行とか…いいよね…

オブジェクトの位置を掴むのに久しぶりに三角関数が必要になりました。文系脳なのでググりました。

最後に参考にさせて頂いた記事やらサイトやらいろいろ