Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How to enjoy WebVR right now

Thiago Alves Luiz
September 29, 2017
Technology
0
63

How to enjoy WebVR right now

WebVR is an open standard that makes it possible to experience VR in your browser. There are some limits to use this technology in browsers but it is already possible. Lets see how to start VR studies, produce content to use within, some possibilities that it brings and how to enjoy it right now.

Thiago Alves Luiz

September 29, 2017
Tweet

More Decks by Thiago Alves Luiz

See All by Thiago Alves Luiz
Muito prazer! Mercado de Trabalho de TI
devthiago
0
140
Inside the Web
devthiago
1
59
Cenário atual do Front-End do ponto de vista de um desenvolvedor
devthiago
0
150
Johnny Five for noobs
devthiago
0
120
Ecossistema Front-End
devthiago
0
78
React Behind The Scenes
devthiago
1
140
Testando o seu CSS
devthiago
0
140
Repense, Recrie... React
devthiago
0
69
O ecossistema Front-End
devthiago
0
170

Other Decks in Technology

See All in Technology
これまでの計測・開発・デプロイ方法全部見せます！ / Findy ISUCON 2024-11-14
tohutohu
3
310
freeeのモバイルエンジニアについて
freee
1
110
QAEチームが辿った3年 ボクらが改善業務にスクラムを選んだワケ / 20241108_cloudsign_ques23
bengo4com
0
1.3k
End of Barrel Files: New Modularization Techniques with Sheriff
rainerhahnekamp
0
290
エンジニア候補者向け資料2024.11.07.pdf
macloud
0
4.6k
DMARC 対応の話 - MIXI CTO オフィスアワー #04
bbqallstars
1
140
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
2
3.1k
SREによる隣接領域への越境とその先の信頼性
shonansurvivors
1
440
Redmine 6.0 新機能評価ガイド
vividtone
0
300
Deno+JSRでパッケージを作って公開する
askua
0
120
利きプロセススケジューラ
sat
PRO
4
2.7k
dev 補講: プロダクトセキュリティ / Product security overview
wa6sn
0
1.7k

Featured

See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
24k
Done Done
chrislema
181
16k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
How STYLIGHT went responsive
nonsquared
95
5.2k
Designing Experiences People Love
moore
138
23k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Music & Morning Musume
bryan
46
6.2k
A Philosophy of Restraint
colly
203
16k
Building Better People: How to give real-time feedback that sticks.
wjessup
364
19k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Agile that works and the tools we love
rasmusluckow
327
21k
The Pragmatic Product Professional
lauravandoore
31
6.3k

Transcript

  1. None

  2. How to ENJOY WEBVR right now

  3. Thiago Alves Luiz @taltk9

  4. codeminer42.com

  5. [email protected]

  6. lets talk ABOUT

  7. Virtual Reality

  8. Oculus Rift

  9. Gaming

  10. Education/Training

  11. much more...

  12. WEBVR API w3c.github.io/WEBVR

  13. caniuse.com/WEBVR

  14. How to enjoy?

  15. WEBVR polyfill github.com/googlevr/webvr-polyfill

  16. AFRAME.io

  17. generating content

  18. 360° cameras

  19. interactions

  20. VR devices

  21. None

  22. GAME OVER ?

  23. How to ENJOY WEBVR right now

  24. How we SHOULD ENJOY WEBVR right now

  25. CARDBOARD

  26. +

  27. None

  28. can we do more than just 360° visualizations?

  29. None

  30. BOILERPLATE github.com/envronment/envronment-boilerplate

  31. None
  32. None
  33. None
  34. None
  35. None

  36. BABEL & WEBPACK

  37. NUNJUCKS

  38. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>{{ title }}</title>

    <meta name="apple-mobile-web-app-capable" content="yes"> </head> <body> <a-scene {{ scene_properties }}> <a-assets> {% block assets %}{% endblock %} </a-assets> {% block content %}{% endblock %} </a-scene> </body> </html>

  39. {% set title = "360 Image - Envronment Boilerplate" %}

    {% extends "layouts/default.tmpl" %} {% block assets %} <img id="image-360" src="assets/image-360.jpg"> {% endblock %} {% block content %} <a-sky src="#image-360" rotation="0 -130 0" rotate-image="speed: .3"></a-sky> {% endblock %}

  40. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>360 Image -

    Envronment Boilerplate</title> <meta name="apple-mobile-web-app-capable" content="yes"> <script type="text/javascript" src="assets/index.js"></script></head> <body> <a-scene> <a-assets> <img id="image-360" src="assets/image-360.jpg"> </a-assets> <a-sky src="#image-360" rotation="0 -130 0" rotate-image="speed: .3"></a-sky> </a-scene> </body> </html>

  41. DRY don't repeat yourself

  42. improving experience

  43. None

  44. lets try

  45. None

  46. MOVING

  47. noise removing needed

  48. None

  49. calibrating accelerometer

  50. normalizing accelerometer

  51. RESULT

  52. FAILED :(

  53. None

  54. youtu.be/zKb29TWG8O4

  55. youtu.be/o5V1pGUFsmM

  56. youtu.be/3sN9VkZJOSE

  57. it's really HARD

  58. not accurated

  59. CONCLUSIONS

  60. ▸ VR gadgets are expensive ▸ Think of your users

    ▸ Figure out different web alternatives to interaction

  61. boilerplates are much useful

  62. accelerometer is not a good option for moving

  63. FUTURE PROJECTS

  64. BOILERPLATE + WEBSOCKET

  65. ENVRONMENT CLI

  66. ACCELEROMETER NORMALIZER

  67. How should we enjoy...?

  68. making easier user accessibility

  69. Thank You! @taltk9