webvr空間の巨大スクリーンでteratailを見れるか試してみた話
TRANSCRIPT
WebVR空間の巨大スクリーンで
teratailを見れるか試してみた話
@afroscript
いつもは
スライド70枚以上話しますが、
今日は50枚しかありません
ちょい早くらいでいきます
まずは…
自己紹介
■名前：
木下 雄策(27歳・福岡出身) @afroscript10
■略歴：
九州大学大学院で宇宙の研究
2013年 レバレジーズ入社
■今のお仕事：
日本のエンジニア業界を最強にすること!!
→エンジニア特化型Q&Aサイト【teratail】のDevRel担当
■その他
・Gs'ACADEMY2期生/WebGLスクール3期生
・LIGブログ「0エンジニアから0.5エンジニアへ」連載中
・元アフロ、フリースタイルバスケットボーラー
・最近は、Web3DやWebVRが好き
では、さっそく
今回やりたかったこと
ＶＲ空間でWebサイトを見たいっ！！
・VR空間でWebサイト見れたらなんか近未来っぽくて楽しそう
ＶＲ空間でWebサイトを見たいっ！！
・VR空間でWebサイト見れたらなんか近未来っぽくて楽しそう
・YoutubeもVR空間の巨大スクリーンで見れたら、超大迫力で楽しめそう、
もはや大型テレビなんて足元にも及ばない
ＶＲ空間でWebサイトを見たいっ！！
・VR空間でWebサイト見れたらなんか近未来っぽくて楽しそう
・YoutubeもVR空間の巨大スクリーンで見れたら、超大迫力で楽しめそう、
もはや大型テレビなんて足元にも及ばない
ＶＲ空間でWebサイトを見たいっ！！
・VR空間でWebサイト見れたらなんか近未来っぽくて楽しそう
・YoutubeもVR空間の巨大スクリーンで見れたら、超大迫力で楽しめそう、
もはや大型テレビなんて足元にも及ばない
・リープモーションとかとかけ合わせて、宙にういたWeb画面を
手の動きで操作できたらSF映画っぽくてかっこよさそう...
ＶＲ空間でWebサイトを見たいっ！！
・VR空間でWebサイト見れたらなんか近未来っぽくて楽しそう
・YoutubeもVR空間の巨大スクリーンで見れたら、超大迫力で楽しめそう、
もはや大型テレビなんて足元にも及ばない
・リープモーションとかとかけ合わせて、宙にういたWeb画面を
手の動きで操作できたらSF映画っぽくてかっこよさそう...
ＶＲ空間でWebサイトを見たいっ！！
ということで、teratailを使ってVR空間の巨大スクリーンでWebページを見れないか挑戦してみました
どうやらThree.jsの中に、「CSS3DRenderer.js」というものがあって、
3D空間にHTML要素をレンダリングできるらしい
■CSS3DRenderer.jsのGitHub： https://github.com/mrdoob/three.js/ blob/master/examples/js/renderers/CSS3DRenderer.js■参照ネタ： http://learningthreejs.com/blog/2013/04/30/closing-the-gap-between-html-and-webgl/■参照先のDemo： http://learningthreejs.com/data/2013-04-30-closing-the-gap-between-html-and-webgl/index.html
VR化は「WebVR Boilerplate」を使うと簡単そう
■WebVR BoilerplateのGitHub： https://github.com/borismus/webvr-boilerplate■参照ネタ： https://html5experts.jp/edo_m18/18552/■参照先のDemo： https://github.com/edom18/html5-exp-webvr-demo■参照先のソースコード： https://github.com/edom18/html5-exp-webvr-demo
これらを使って、初心者なりにモガいてみた
結果！！
VR化までは至らず、失敗…orz(サクっと実現できるものではなさげ)
現在teratailで回答募集中...
WebVR BoilerplateがCSS3DRenderer.jsにまだ対応してない...？？そこを自力で頑張る必要がありそう、three.js内でできるだろうか…？？
■teratail質問ページ： https://teratail.com/questions/43627
しかし！
CSS3DRenderer.jsを用いて、3D空間でWebページを表現することは
できました：）
こんな感じ。↓
Demo:http://usaqwako.sakura.ne.jp/3Dteratail/
ソースコード：https://github.com/afroscript/3Dteratail
ということで、
きっとそのうちWebVR Boilerplateなどが、CSS3DRenderer.jsにも対応してくれるだとうと
勝手に期待を込めて、
今回は、CSS3DRenderer.jsの使い方をご紹介しようと思います：）
まずはThree.jsとCSS3DRenderer.jsを読み込む
まずはThree.jsとCSS3DRenderer.jsを読み込む。(※Three.jsはr79を使用)
※Three.js：
https://github.com/mrdoob/three.js
※CSS3DRenderer.js
https://github.com/mrdoob/three.js/blob/master/examples/js/renderers/CSS3DRenderer.js
まずは読み込む<index.html>
レンダラーはWebGLRendererとCSS3DRendererの2つを用意
WebGLを用いたレンダラーを new THREE.WebGLRenderer()で生成。
レンダラーの生成<main.js>
同様に、CSS3Dを用いたレンダラーを new THREE.CSS3DRenderer()で生成。
CSS3Dレンダラーの生成<main.js>
シーンも2つ用意する
THREE.SceneでWebGLレンダラー用のシーンとCSS3Dレンダラー用のシーン、
2つをつくります。
シーンは2つ生成<main.js>
カメラは1つでOK
カメラは普通に1つ用意します
カメラは1つでOK<main.js>
OrbitControls.jsは、マウスでグリグリうごいて便利なので
入れときましょう
OrbitControls.jsを使うと簡単にマウスでグリグリ動くように：)
※OrbitControls.jsのGitHub：
https://github.com/mrdoob/three.js/blob/dev/examples/js/controls/OrbitControls.js
マウスでグリグリ動かす<index.html>
<main.js>
WebGLのシーンに平面オブジェクトを追加する
THREE.PlaneGeometryで平面オブジェクトを生成してWebGLのシーンに追加。
これをあとでWebページのレンダリングと合体させます。
WebGLのシーンに平面オブジェクトを追加
CSSのシーンに、iframe要素を持ったCSS3Dオブジェクトを
追加して、さっきの平面オブジェクトと連動させる
iframe要素(参照先はteratail)を持つCSS3Dオブジェクトを生成。
CSS3Dのシーンにもオブジェクトを追加
ここで表示したいURLを指定！
さっきの平面オブジェクトと座標とrotationを一致させて、CSSシーンに追加
CSS3Dのシーンにもオブジェクトを追加
レンダリングは2つ重ねてやります。
WebGL用のレンダラーでWebGLのシーンをレンダリング、
そこにCSS3D用のレンダラーでCSSシーンをレンダリング
レンダリングは2つ重ねる感じ
完成っ！
※Lightとかちょっとだけ説明省いてます！
簡単でしょ？？：）
まとめ
・VR空間でWebサイトは見れなかったけど、
3D空間でWebサイト見れるだけでもけっこうテンション上がる
・CSS3DRenderer.js便利
・ポイントは座標と回転を一致させてレンダリングを重ねるってとこ
・Three.jsのヴァージョン違いには注意！！(1週間無駄にした…orz)
まとめ
teratailで回答お待ちしておりますm(_ _)m
■teratail質問ページ： https://teratail.com/questions/43627
ご清聴ありがとうございましたm(_ _)m