Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Unity3DとOculus Riftで VR空間にWebコンテンツを表現する
Search
GMO次世代
October 13, 2016
Technology
0
1.5k
Unity3DとOculus Riftで VR空間にWebコンテンツを表現する
2016年10月12日 GMOエンジニアトークにて公開
GMO次世代
October 13, 2016
Tweet
Share
More Decks by GMO次世代
See All by GMO次世代
ソース公開を通じて分かった非中央集権型アプリケーション(DApp)とは
jisedai
0
4.2k
AppleのARkitとGoogleの最新のARプラットフォーム ARCore 可能性と応用
jisedai
2
1.3k
IoT領域でのブロックチェーン実践
jisedai
1
1.9k
モバイルAR技術の最先端 Google Tangoを活用してバーチャル道案内スタッフを実現してみた
jisedai
1
1.4k
深層学習は金融市場をシミュレーションすることができるか?
jisedai
1
6.4k
ブロックチェーンを利用したサービス開発について
jisedai
1
1.2k
Deep Learningによる株価変動の予想
jisedai
0
1.8k
Other Decks in Technology
See All in Technology
「Linux」という言葉が指すもの
sat
PRO
4
130
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
250
JTCにおける内製×スクラム開発への挑戦〜内製化率95%達成の舞台裏/JTC's challenge of in-house development with Scrum
aeonpeople
0
230
企業の生成AIガバナンスにおけるエージェントとセキュリティ
lycorptech_jp
PRO
2
170
職種の壁を溶かして開発サイクルを高速に回す~情報透明性と職種越境から考えるAIフレンドリーな職種間連携~
daitasu
0
170
5年目から始める Vue3 サイト改善 #frontendo
tacck
PRO
3
220
生成AI時代のデータ基盤設計〜ペースレイヤリングで実現する高速開発と持続性〜 / Levtech Meetup_Session_2
sansan_randd
1
150
AI時代を生き抜くエンジニアキャリアの築き方 (AI-Native 時代、エンジニアという道は 「最大の挑戦の場」となる) / Building an Engineering Career to Thrive in the Age of AI (In the AI-Native Era, the Path of Engineering Becomes the Ultimate Arena of Challenge)
jeongjaesoon
0
130
Codeful Serverless / 一人運用でもやり抜く力
_kensh
7
420
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
410
Django's GeneratedField by example - DjangoCon US 2025
pauloxnet
0
150
Rustから学ぶ 非同期処理の仕組み
skanehira
1
140
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
Site-Speed That Sticks
csswizardry
10
820
It's Worth the Effort
3n
187
28k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Navigating Team Friction
lara
189
15k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
What's in a price? How to price your products and services
michaelherold
246
12k
Transcript
1 Unity3DとOculus Riftで VR空間にWebコンテンツを表現する GMOインターネット株式会社 次世代システム研究室 2016年10月12日
2 最初に質問
3 なにかしらVRを体験したことがある方
4 Oculus Rift, HTC Vive, PS VRなどの ハイエンドVRを体験したことがある方
5 体験しないとわからない
6 ・・・ これが
7 こうなる
8 • ゲーム・エンタメ以外のVR活用したい • VR空間内でウェブコンテンツを表現した い • Oculus Riftを利用したハイエンドVRア プリを開発したい
動機とゴール - Motivation & Goal -
9 複数のディスプレイをVR空間に再現
10 さっそくデモします
11 demo
12 外部ウェブコンテンツ Youtube / 各種webサイト Internet システム構成 Leap Motion Oculus
Rift 外部サービスAPI Awesomium VR-Ready PC 仮想サーバ
13 (メモリ2GBプラン) ×2month コスト
14 開発の話
15 ・Unity 3D 5.4.1 ・Oculus Runtime ・Awesomium SDK 1.7.5.1 WebViewテクスチャプラグイン
・Leap Motion SDK 3.1.3 VRに最適化されたハンドトラッキングエンジン Orion 開発環境 : VR-Ready PC
16 ウェブサーバー ・Cent OS 7 ・LAMP ・Yii2 フレームワーク ・HighCharts 開発環境
: 仮想サーバ(ConoHa)
17 VRを 構成する 3要素 没入感 インタラク ティブ性 リアル タイム 開発ポイント
1. 空間作り ライティング オブジェクトの色・配置 2. 違和感のない演出 オブジェクトの動き 情報のリアルタイム性 3. インタラクション オブジェクトの選択 オブジェクトの操作
18 VR空間のバックグラウンド カメラ・ライティング オブジェクトの配置 空間作り 3Dデータが作れる 無料のソフト
19 違和感のない演出 ズームアニメーション リアルタイム更新
20 線形補完 球面線形補完 spherical linear interpolation linear interpolation 違和感のない演出 ズームアニメーションの工夫
縮小 2点の座標と角度の中間を求め アニメーションの軌跡を算出 奥でも手前でも視認性を 保つためにスケールを調整
21 インタラクション-ウェブオブジェクトの選択 視線が合ったオブジェクトの色を変えて視認させる ActiveIndicator ゲームオブジェクト(Quad)を追加 ActiveIndicator スクリプトでフォーカスイベントを管理
22 入⼒の仕組みの変更が必要 ◎ リモコンで入⼒、クリック VRでマウスを使えない インタラクション : ウェブリンクをクリックする 視線をトラッキング する必要がある
ユーザーの視線でクリックする処理を実現
23 LeapMotionを活用し、手と指による入⼒操作。 ウェブオブジェクトをタッチすることで、 表⽰するコンテンツが切り替わる。 インタラクション : ウェブオブジェクトの操作 プレイヤーの手として使うので、 カメラの子オブジェクトとして設定
24 インタラクション-オブジェクトの操作 ・ボタンを押下する処理 タッチするX,Y座標にAwesomiumのクリックイベントを 発火 ・新ページの切り替え AwesomiumのLoadURL機能を利用
25 ハイエンドVRコンテンツの開発紹介 VR空間内でのウェブコンテンツの表現 ・ウェブページ ・動画 ・実装した独自なウェブコンテンツ VR空間内でのインタラクション ※センサーの精度が若干の物足りなさを感じた 本日のまとめ
26 ご清聴ありがとうございました!