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
A-FrameでWebVR
Search
dala00
July 17, 2019
Programming
220
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
A-FrameでWebVR
dala00
July 17, 2019
More Decks by dala00
See All by dala00
Freelance Talk Session Kansai
dala00
0
57
Nuxt.jsとExpressでWebサービスを作ってみた
dala00
0
1.8k
Laravelでサービスを作った時にやったこと
dala00
1
820
Laravel + Vue.jsでサービスを作成&運営してみて
dala00
1
560
何でも書ける技術者向けコミュニティCrieit - 制作物天下一武道会
dala00
0
80
Other Decks in Programming
See All in Programming
LL言語やWebフレームワークのPostgreSQL対応 〜DBの機能がユーザーに届くまで〜
kentaroutakeda
0
130
AI に Inclusive UI を書かせよう — Design Rules Skill で Compose UI を作り直す
theoriatec2024
1
430
GraphRAGのKnowledge Graphを 直接!見る/View-GraphRAG's-KnowledgeGraph-directly!
tyumugi1113
0
180
型解析で実現する Go の言語内 DSL / Conference に Go! タイムテーブルの歩き方 for Gophers
mazrean
0
120
高専、大学編入、そして未踏へ〜プロダクト開発とキャリアの歩み - Technical College, University Transfer, and On to “Mitou” / My Journey in Product Development and Career
pkmiya
0
130
ハーネス設計入門 〜プロンプト、コンテキストの次〜
kinopeee
53
35k
承認済みなのに差戻しできてしまうバグ、型で潰せます
shinchit
0
140
KotlinConf Extended South Korea 2026 Keynote
l2hyunwoo
0
130
FDEとは、何者なのか?
masapyon1212
0
130
What We Talk About When We Talk About XP
m_seki
2
330
GKE アップグレード前に知っておきたい Blue/Green と PDB の関係
stkk
0
140
MySQLとPostgreSQLって何が違うの?
akagami
PRO
0
160
Featured
See All Featured
The B2B funnel & how to create a winning content strategy
katarinadahlin
PRO
1
500
Fashionably flexible responsive web design (full day workshop)
malarkey
408
67k
Automating Front-end Workflow
addyosmani
1369
210k
Marketing Yourself as an Engineer | Alaka | Gurzu
gurzu
0
290
AI: The stuff that nobody shows you
jnunemaker
PRO
9
970
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
360
30k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
254
22k
Designing Experiences People Love
moore
143
24k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.9k
New Earth Scene 8
popppiees
3
2.5k
The SEO Collaboration Effect
kristinabergwall1
1
550
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
47
8.3k
Transcript
A-FrameでWebVR
自己紹介 Twitter: dala00 個人で色々とサービスを作ってつぶやいたりしています
Oculus Quest買いました! • VR空間の居心地が想像以上に良かった • 多分実際に使ってみないと想像できない
VR用のアプリもなにか作ってみたい しかし…… → Oculus Questのアプリをストアに出すための審査がすごく厳しいらしい …… → 今のところ個人で出すのは厳しそう ……? 無料の軽いアプリとかなおさら ……
→ 悲しい
ブラウザのホーム画面に色々リンクが。
ブラウザでもVR!? • 普通にVRできる • 物を召喚したり • 掴んだり • 投げたり •
ワープで移動したり
どうやってるの!? A-FrameというMozilla製のOSSフレームワークを使っているっぽい WebVRという技術を用いているっぽい WebVR(ウェブブイアール)とは、ウェブブラウザ上で VRデバイスの位置,向き,加速度などの情報を 取得するために用いられる JavaScriptのアプリケーションプログラミングインタフェース( API)のことで ある。(Wikipediaより)
WebVRで調べたら他にも色々サンプルが
WebVRすごく良いのでは? • ブラウザなので適当に作ったものをインストール不要で誰にでも簡単に使ってもらえる • A-FrameならHTMLだけでもとりあえず空間作れる • JavaScriptも使えばゲームとかも作れる • 普通にStripeとかで決済を導入すればVRアプリでマネタイズも簡単かも?
WebVRできるライブラリ • MozillaのA-Frame とにかく今よく使われてるっぽい • React 360 Facebook製なので期待 今はA-Frameの方が便利そう
A-Frameを使ってみる
サンプル
サンプル
WebVRポートフォリオ • 成果物を貼ってリンク • ワープで移動できる
Super Hands • ものをつかめる • 両手で縮小したりも • 物理エンジンとの組み合わせに対応
ラジコン • Oculus Questのスティックで操作して遊ぶ • ブラウザなのでキーボードでも可能
音ゲーも作ってみてる 適当なデザインでも VRというだけでかっこよく見える 完成したら簡単に公開できるので マネタイズ試したい
まとめ • とにかく楽なので楽しい • まだゲームも少ないので需要はかなり高いのでは? • Steam+VirtualDesktopでもVRゲームできるのでそちらとの棲み分けどうなるか • 人気がでるくらい良いものが作れるならそもそも Oculusストアに出したほうが良かったと後悔し
そう?(価格やマネタイズ方法が自由なのでどちらがベスト、というのは今後もなさそう?) • 小さいものを公開するならこれ一択? • UnityでWebVR書き出しできるのでプラットフォーム変更を考慮したら一番堅実かも • Unreal Engineは今のところ未対応???? • とにかくWebVR気になる存在