Submit Search
Upload
WebVR空間の巨大スクリーンでteratailを見れるか試してみた話
•
1 like
•
721 views
Yusaku Kinoshita
Follow
これで話しました:) http://web3dj.connpass.com/event/32568/
Read less
Read more
Engineering
Report
Share
Report
Share
1 of 50
Download now
Download to read offline
Recommended
【非エンジニアが 「明日からDevRelやってよ」って 突然言われて1年半やってきたこと ~teratailのDevRel担当、ゼロからの奮闘記~ @a...
【非エンジニアが 「明日からDevRelやってよ」って 突然言われて1年半やってきたこと ~teratailのDevRel担当、ゼロからの奮闘記~ @a...
Yusaku Kinoshita
エンジニアじゃなくても 3Dゲームが3時間できた話。 ~three.jsで3D糸通しをつくってみた~
エンジニアじゃなくても 3Dゲームが3時間できた話。 ~three.jsで3D糸通しをつくってみた~
Yusaku Kinoshita
データ分析-の波乗り遅れた気がしてる人のための Python×データ分析の超基礎の基礎 v1.0-20160831
データ分析-の波乗り遅れた気がしてる人のための Python×データ分析の超基礎の基礎 v1.0-20160831
Yusaku Kinoshita
エンジニアじゃなくてもAngularJS×milkcocoaでチャットアプリが1時間!? 非エンジニアから見たAngularJSの感動するポイント3つ
エンジニアじゃなくてもAngularJS×milkcocoaでチャットアプリが1時間!? 非エンジニアから見たAngularJSの感動するポイント3つ
Yusaku Kinoshita
非エンジニアが MENstackでWebアプリをつくった話 #nodejs
非エンジニアが MENstackでWebアプリをつくった話 #nodejs
Yusaku Kinoshita
「ゼロから構築するDev rel体制」20160316@devrelmeetup
「ゼロから構築するDev rel体制」20160316@devrelmeetup
Yusaku Kinoshita
77枚の資料を5分で発表してみたやつ【G’s academy 卒業制作」発表資料(016.03.02) 】
77枚の資料を5分で発表してみたやつ【G’s academy 卒業制作」発表資料(016.03.02) 】
Yusaku Kinoshita
GopherJS + Nashorn
GopherJS + Nashorn
Takuya Ueda
Recommended
【非エンジニアが 「明日からDevRelやってよ」って 突然言われて1年半やってきたこと ~teratailのDevRel担当、ゼロからの奮闘記~ @a...
【非エンジニアが 「明日からDevRelやってよ」って 突然言われて1年半やってきたこと ~teratailのDevRel担当、ゼロからの奮闘記~ @a...
Yusaku Kinoshita
エンジニアじゃなくても 3Dゲームが3時間できた話。 ~three.jsで3D糸通しをつくってみた~
エンジニアじゃなくても 3Dゲームが3時間できた話。 ~three.jsで3D糸通しをつくってみた~
Yusaku Kinoshita
データ分析-の波乗り遅れた気がしてる人のための Python×データ分析の超基礎の基礎 v1.0-20160831
データ分析-の波乗り遅れた気がしてる人のための Python×データ分析の超基礎の基礎 v1.0-20160831
Yusaku Kinoshita
エンジニアじゃなくてもAngularJS×milkcocoaでチャットアプリが1時間!? 非エンジニアから見たAngularJSの感動するポイント3つ
エンジニアじゃなくてもAngularJS×milkcocoaでチャットアプリが1時間!? 非エンジニアから見たAngularJSの感動するポイント3つ
Yusaku Kinoshita
非エンジニアが MENstackでWebアプリをつくった話 #nodejs
非エンジニアが MENstackでWebアプリをつくった話 #nodejs
Yusaku Kinoshita
「ゼロから構築するDev rel体制」20160316@devrelmeetup
「ゼロから構築するDev rel体制」20160316@devrelmeetup
Yusaku Kinoshita
77枚の資料を5分で発表してみたやつ【G’s academy 卒業制作」発表資料(016.03.02) 】
77枚の資料を5分で発表してみたやつ【G’s academy 卒業制作」発表資料(016.03.02) 】
Yusaku Kinoshita
GopherJS + Nashorn
GopherJS + Nashorn
Takuya Ueda
Electronからはじめるnodejs
Electronからはじめるnodejs
Hirata Tomoko
エンジニアが Webを学ぶために やっててよかったこと
エンジニアが Webを学ぶために やっててよかったこと
Hirata Tomoko
20160219 Developers Summit 2016 gusukuハンズオン
20160219 Developers Summit 2016 gusukuハンズオン
Midori Ikegami
Electron を知る
Electron を知る
Tomoya Shibata
20160220 座駆動LT大会 合同勉強会in大都会岡山
20160220 座駆動LT大会 合同勉強会in大都会岡山
Midori Ikegami
Javaから見たRubyの世界
Javaから見たRubyの世界
Takafumi Yoshida
JSRとJEPとJBSの見方や調べ方について
JSRとJEPとJBSの見方や調べ方について
Aya Ebata
JavaScriptで出来る、あんなことこんなこと
JavaScriptで出来る、あんなことこんなこと
Mayu Kimura
IT業界における伝統芸能の継承 #hachiojipm
IT業界における伝統芸能の継承 #hachiojipm
鉄次 尾形
20160430 kintone Café 沖縄女子会 Vol.1 kintoneデモ環境紹介
20160430 kintone Café 沖縄女子会 Vol.1 kintoneデモ環境紹介
Midori Ikegami
スケジュールに意志を込める〜納期と品質、立ちはだかる優先度。 その時君は何をすべきか。〜
スケジュールに意志を込める〜納期と品質、立ちはだかる優先度。 その時君は何をすべきか。〜
Syun Fuji
20120830 DBリファクタリング読書会第三回
20120830 DBリファクタリング読書会第三回
都元ダイスケ Miyamoto
Node.js 奮闘日記
Node.js 奮闘日記
sasaron 397
30億のデバイスで走るjavaを支えるjavaエコシステム
30億のデバイスで走るjavaを支えるjavaエコシステム
Shinya Mochida
Scala、play初心者が触った感想 share用
Scala、play初心者が触った感想 share用
amkt922
ぼくのビルドはにゃあとなく
ぼくのビルドはにゃあとなく
Tomoki YAMASHITA
第6回 学生エンジニア限定LT大会 in 大阪の白虎のスライド
第6回 学生エンジニア限定LT大会 in 大阪の白虎のスライド
Takemori Masaki
どう見る?Class Reference
どう見る?Class Reference
Tadahisa Motooka
20130927 perlbeginners 10 time-piece
20130927 perlbeginners 10 time-piece
Syun Fuji
HTML5 Conference 2015 WebGLハンズオン資料
HTML5 Conference 2015 WebGLハンズオン資料
Kazuya Hiruma
Getting start with knockout.js
Getting start with knockout.js
Akio Ishida
今さら始めるJavaScript
今さら始めるJavaScript
Ashitaba YOSHIOKA
More Related Content
What's hot
Electronからはじめるnodejs
Electronからはじめるnodejs
Hirata Tomoko
エンジニアが Webを学ぶために やっててよかったこと
エンジニアが Webを学ぶために やっててよかったこと
Hirata Tomoko
20160219 Developers Summit 2016 gusukuハンズオン
20160219 Developers Summit 2016 gusukuハンズオン
Midori Ikegami
Electron を知る
Electron を知る
Tomoya Shibata
20160220 座駆動LT大会 合同勉強会in大都会岡山
20160220 座駆動LT大会 合同勉強会in大都会岡山
Midori Ikegami
Javaから見たRubyの世界
Javaから見たRubyの世界
Takafumi Yoshida
JSRとJEPとJBSの見方や調べ方について
JSRとJEPとJBSの見方や調べ方について
Aya Ebata
JavaScriptで出来る、あんなことこんなこと
JavaScriptで出来る、あんなことこんなこと
Mayu Kimura
IT業界における伝統芸能の継承 #hachiojipm
IT業界における伝統芸能の継承 #hachiojipm
鉄次 尾形
20160430 kintone Café 沖縄女子会 Vol.1 kintoneデモ環境紹介
20160430 kintone Café 沖縄女子会 Vol.1 kintoneデモ環境紹介
Midori Ikegami
スケジュールに意志を込める〜納期と品質、立ちはだかる優先度。 その時君は何をすべきか。〜
スケジュールに意志を込める〜納期と品質、立ちはだかる優先度。 その時君は何をすべきか。〜
Syun Fuji
20120830 DBリファクタリング読書会第三回
20120830 DBリファクタリング読書会第三回
都元ダイスケ Miyamoto
Node.js 奮闘日記
Node.js 奮闘日記
sasaron 397
30億のデバイスで走るjavaを支えるjavaエコシステム
30億のデバイスで走るjavaを支えるjavaエコシステム
Shinya Mochida
Scala、play初心者が触った感想 share用
Scala、play初心者が触った感想 share用
amkt922
ぼくのビルドはにゃあとなく
ぼくのビルドはにゃあとなく
Tomoki YAMASHITA
第6回 学生エンジニア限定LT大会 in 大阪の白虎のスライド
第6回 学生エンジニア限定LT大会 in 大阪の白虎のスライド
Takemori Masaki
どう見る?Class Reference
どう見る?Class Reference
Tadahisa Motooka
20130927 perlbeginners 10 time-piece
20130927 perlbeginners 10 time-piece
Syun Fuji
HTML5 Conference 2015 WebGLハンズオン資料
HTML5 Conference 2015 WebGLハンズオン資料
Kazuya Hiruma
What's hot
(20)
Electronからはじめるnodejs
Electronからはじめるnodejs
エンジニアが Webを学ぶために やっててよかったこと
エンジニアが Webを学ぶために やっててよかったこと
20160219 Developers Summit 2016 gusukuハンズオン
20160219 Developers Summit 2016 gusukuハンズオン
Electron を知る
Electron を知る
20160220 座駆動LT大会 合同勉強会in大都会岡山
20160220 座駆動LT大会 合同勉強会in大都会岡山
Javaから見たRubyの世界
Javaから見たRubyの世界
JSRとJEPとJBSの見方や調べ方について
JSRとJEPとJBSの見方や調べ方について
JavaScriptで出来る、あんなことこんなこと
JavaScriptで出来る、あんなことこんなこと
IT業界における伝統芸能の継承 #hachiojipm
IT業界における伝統芸能の継承 #hachiojipm
20160430 kintone Café 沖縄女子会 Vol.1 kintoneデモ環境紹介
20160430 kintone Café 沖縄女子会 Vol.1 kintoneデモ環境紹介
スケジュールに意志を込める〜納期と品質、立ちはだかる優先度。 その時君は何をすべきか。〜
スケジュールに意志を込める〜納期と品質、立ちはだかる優先度。 その時君は何をすべきか。〜
20120830 DBリファクタリング読書会第三回
20120830 DBリファクタリング読書会第三回
Node.js 奮闘日記
Node.js 奮闘日記
30億のデバイスで走るjavaを支えるjavaエコシステム
30億のデバイスで走るjavaを支えるjavaエコシステム
Scala、play初心者が触った感想 share用
Scala、play初心者が触った感想 share用
ぼくのビルドはにゃあとなく
ぼくのビルドはにゃあとなく
第6回 学生エンジニア限定LT大会 in 大阪の白虎のスライド
第6回 学生エンジニア限定LT大会 in 大阪の白虎のスライド
どう見る?Class Reference
どう見る?Class Reference
20130927 perlbeginners 10 time-piece
20130927 perlbeginners 10 time-piece
HTML5 Conference 2015 WebGLハンズオン資料
HTML5 Conference 2015 WebGLハンズオン資料
Similar to WebVR空間の巨大スクリーンでteratailを見れるか試してみた話
Getting start with knockout.js
Getting start with knockout.js
Akio Ishida
今さら始めるJavaScript
今さら始めるJavaScript
Ashitaba YOSHIOKA
10/12 WordBench神戸 WordPressの学習方法
10/12 WordBench神戸 WordPressの学習方法
Yoshiko Sarakai
第六回 #渋谷java Javaを書き始めて 1年半が経って思うこと
第六回 #渋谷java Javaを書き始めて 1年半が経って思うこと
Kazuhiro Serizawa
my-spirit-of-tdd
my-spirit-of-tdd
Yu Asano
Rails5クイックスタート
Rails5クイックスタート
Hirata Tomoko
DevLove四国_LT_yohhatu
DevLove四国_LT_yohhatu
Yoh Nakamura
辛い開発を色々使って迂回した話
辛い開発を色々使って迂回した話
s2otsa
JSつまみぐい
JSつまみぐい
Syoko Matsumura
これからはじめるための JavaScript 開発環境
これからはじめるための JavaScript 開発環境
Ryo Higashigawa
クローズドソースから始めるオープンソース
クローズドソースから始めるオープンソース
Takafumi ONAKA
Similar to WebVR空間の巨大スクリーンでteratailを見れるか試してみた話
(11)
Getting start with knockout.js
Getting start with knockout.js
今さら始めるJavaScript
今さら始めるJavaScript
10/12 WordBench神戸 WordPressの学習方法
10/12 WordBench神戸 WordPressの学習方法
第六回 #渋谷java Javaを書き始めて 1年半が経って思うこと
第六回 #渋谷java Javaを書き始めて 1年半が経って思うこと
my-spirit-of-tdd
my-spirit-of-tdd
Rails5クイックスタート
Rails5クイックスタート
DevLove四国_LT_yohhatu
DevLove四国_LT_yohhatu
辛い開発を色々使って迂回した話
辛い開発を色々使って迂回した話
JSつまみぐい
JSつまみぐい
これからはじめるための JavaScript 開発環境
これからはじめるための JavaScript 開発環境
クローズドソースから始めるオープンソース
クローズドソースから始めるオープンソース
More from Yusaku Kinoshita
集まっTail(集まっている)#8
集まっTail(集まっている)#8
Yusaku Kinoshita
Bridging the Gap for Beginners in Developer Communities@DevRelConTokyo_20170729
Bridging the Gap for Beginners in Developer Communities@DevRelConTokyo_20170729
Yusaku Kinoshita
集まっtail#7「teratailより」
集まっtail#7「teratailより」
Yusaku Kinoshita
Motohashi.#3
Motohashi.#3
Yusaku Kinoshita
個人開発アプリのご紹介とあり得ない不具合に対する掲示板の活用事例
個人開発アプリのご紹介とあり得ない不具合に対する掲示板の活用事例
Yusaku Kinoshita
G'sアカデミー2期入学式資料(投影資料版)
G'sアカデミー2期入学式資料(投影資料版)
Yusaku Kinoshita
5分でわかるphalcon php
5分でわかるphalcon php
Yusaku Kinoshita
効率的かつユニークな学習法
効率的かつユニークな学習法
Yusaku Kinoshita
150612 middleman(ikuwow)
150612 middleman(ikuwow)
Yusaku Kinoshita
Google先生との付き合い方(lightwill氏)
Google先生との付き合い方(lightwill氏)
Yusaku Kinoshita
20150226 炎上を防ぐためにフロントエンドエンジニアとしてできること
20150226 炎上を防ぐためにフロントエンドエンジニアとしてできること
Yusaku Kinoshita
More from Yusaku Kinoshita
(11)
集まっTail(集まっている)#8
集まっTail(集まっている)#8
Bridging the Gap for Beginners in Developer Communities@DevRelConTokyo_20170729
Bridging the Gap for Beginners in Developer Communities@DevRelConTokyo_20170729
集まっtail#7「teratailより」
集まっtail#7「teratailより」
Motohashi.#3
Motohashi.#3
個人開発アプリのご紹介とあり得ない不具合に対する掲示板の活用事例
個人開発アプリのご紹介とあり得ない不具合に対する掲示板の活用事例
G'sアカデミー2期入学式資料(投影資料版)
G'sアカデミー2期入学式資料(投影資料版)
5分でわかるphalcon php
5分でわかるphalcon php
効率的かつユニークな学習法
効率的かつユニークな学習法
150612 middleman(ikuwow)
150612 middleman(ikuwow)
Google先生との付き合い方(lightwill氏)
Google先生との付き合い方(lightwill氏)
20150226 炎上を防ぐためにフロントエンドエンジニアとしてできること
20150226 炎上を防ぐためにフロントエンドエンジニアとしてできること
WebVR空間の巨大スクリーンでteratailを見れるか試してみた話
1.
WebVR空間の巨大スクリーンで teratailを見れるか試してみた話 @afroscript
2.
いつもは スライド70枚以上話しますが、 今日は50枚しかありません
3.
ちょい早くらいでいきます
4.
まずは…
5.
自己紹介 ■名前: 木下 雄策(27歳・福岡出身) @afroscript10 ■略歴: 九州大学大学院で宇宙の研究 2013年 レバレジーズ入社 ■今のお仕事: 日本のエンジニア業界を最強にすること!! →エンジニア特化型Q&Aサイト【teratail】のDevRel担当 ■その他 ・Gs'ACADEMY2期生/WebGLスクール3期生 ・LIGブログ「0エンジニアから0.5エンジニアへ」連載中 ・元アフロ、フリースタイルバスケットボーラー ・最近は、Web3DやWebVRが好き
6.
では、さっそく
7.
今回やりたかったこと
8.
VR空間でWebサイトを見たいっ!!
9.
・VR空間でWebサイト見れたらなんか近未来っぽくて楽しそう VR空間でWebサイトを見たいっ!!
10.
・VR空間でWebサイト見れたらなんか近未来っぽくて楽しそう ・YoutubeもVR空間の巨大スクリーンで見れたら、超大迫力で楽しめそう、 もはや大型テレビなんて足元にも及ばない VR空間でWebサイトを見たいっ!!
11.
・VR空間でWebサイト見れたらなんか近未来っぽくて楽しそう ・YoutubeもVR空間の巨大スクリーンで見れたら、超大迫力で楽しめそう、 もはや大型テレビなんて足元にも及ばない VR空間でWebサイトを見たいっ!!
12.
・VR空間でWebサイト見れたらなんか近未来っぽくて楽しそう ・YoutubeもVR空間の巨大スクリーンで見れたら、超大迫力で楽しめそう、 もはや大型テレビなんて足元にも及ばない ・リープモーションとかとかけ合わせて、宙にういたWeb画面を 手の動きで操作できたらSF映画っぽくてかっこよさそう... VR空間でWebサイトを見たいっ!!
13.
・VR空間でWebサイト見れたらなんか近未来っぽくて楽しそう ・YoutubeもVR空間の巨大スクリーンで見れたら、超大迫力で楽しめそう、 もはや大型テレビなんて足元にも及ばない ・リープモーションとかとかけ合わせて、宙にういたWeb画面を 手の動きで操作できたらSF映画っぽくてかっこよさそう... VR空間でWebサイトを見たいっ!!
14.
ということで、 teratailを使ってVR空間の巨大スクリーンで Webページを見れないか挑戦してみました
15.
どうやら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
16.
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
17.
これらを使って、初心者なりにモガいてみた
18.
結果!!
19.
VR化までは至らず、失敗…orz (サクっと実現できるものではなさげ)
20.
現在teratailで回答募集中... WebVR BoilerplateがCSS3DRenderer.jsにまだ対応してない...?? そこを自力で頑張る必要がありそう、three.js内でできるだろうか…?? ■teratail質問ページ: https://teratail.com/questions/43627
21.
しかし!
22.
CSS3DRenderer.jsを用いて、 3D空間でWebページを表現することは できました:)
23.
こんな感じ。 ↓ Demo:http://usaqwako.sakura.ne.jp/3Dteratail/ ソースコード:https://github.com/afroscript/3Dteratail
24.
ということで、
25.
きっとそのうちWebVR Boilerplateなどが、 CSS3DRenderer.jsにも対応してくれるだとうと 勝手に期待を込めて、
26.
今回は、CSS3DRenderer.jsの使い方を ご紹介しようと思います:)
27.
まずはThree.jsとCSS3DRenderer.jsを読み込む
28.
まずは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>
29.
レンダラーは WebGLRendererとCSS3DRendererの2つを用意
30.
WebGLを用いたレンダラーを new THREE.WebGLRenderer()で生成。 レンダラーの生成 <main.js>
31.
同様に、CSS3Dを用いたレンダラーを new THREE.CSS3DRenderer()で生成。 CSS3Dレンダラーの生成 <main.js>
32.
シーンも2つ用意する
33.
THREE.SceneでWebGLレンダラー用のシーンとCSS3Dレンダラー用のシーン、 2つをつくります。 シーンは2つ生成 <main.js>
34.
カメラは1つでOK
35.
カメラは普通に1つ用意します カメラは1つでOK <main.js>
36.
OrbitControls.jsは、 マウスでグリグリうごいて便利なので 入れときましょう
37.
OrbitControls.jsを使うと簡単にマウスでグリグリ動くように:) ※OrbitControls.jsのGitHub: https://github.com/mrdoob/three.js/blob/dev/examples/js/controls/OrbitControls.js マウスでグリグリ動かす <index.html> <main.js>
38.
WebGLのシーンに平面オブジェクトを追加する
39.
THREE.PlaneGeometryで平面オブジェクトを生成してWebGLのシーンに追加。 これをあとでWebページのレンダリングと合体させます。 WebGLのシーンに平面オブジェクトを追加
40.
CSSのシーンに、 iframe要素を持ったCSS3Dオブジェクトを 追加して、 さっきの平面オブジェクトと連動させる
41.
iframe要素(参照先はteratail)を持つCSS3Dオブジェクトを生成。 CSS3Dのシーンにもオブジェクトを追加 ここで表示したい URLを指定!
42.
さっきの平面オブジェクトと座標とrotationを一致させて、CSSシーンに追加 CSS3Dのシーンにもオブジェクトを追加
43.
レンダリングは2つ重ねてやります。
44.
WebGL用のレンダラーでWebGLのシーンをレンダリング、 そこにCSS3D用のレンダラーでCSSシーンをレンダリング レンダリングは2つ重ねる感じ
45.
完成っ! ※Lightとかちょっとだけ説明省いてます!
46.
簡単でしょ??:)
47.
まとめ
48.
・VR空間でWebサイトは見れなかったけど、 3D空間でWebサイト見れるだけでもけっこうテンション上がる ・CSS3DRenderer.js便利 ・ポイントは座標と回転を一致させてレンダリングを重ねるってとこ ・Three.jsのヴァージョン違いには注意!!(1週間無駄にした…orz) まとめ
49.
teratailで回答お待ちしておりますm(_ _)m ■teratail質問ページ: https://teratail.com/questions/43627
50.
ご清聴ありがとうございましたm(_ _)m
Download now