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
50

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
130
Inside the Web
devthiago
1
59
Cenário atual do Front-End do ponto de vista de um desenvolvedor
devthiago
0
140
Johnny Five for noobs
devthiago
0
110
Ecossistema Front-End
devthiago
0
72
React Behind The Scenes
devthiago
1
140
Testando o seu CSS
devthiago
0
130
Repense, Recrie... React
devthiago
0
69
O ecossistema Front-End
devthiago
0
160

Other Decks in Technology

See All in Technology
IaCジェネレーターとBedrockで詳細設計書を生成してみた
tsukasa_ishimaru
4
940
令和最新版 Ruby プロファイラ "Pf2" のご紹介
osyoyu
0
160
AWSに詳しくない人でも始められるコスト最適化ガイド
yuhta28
2
410
Building a RAG-powered AI chat app with Python and VS Code
pamelafox
0
180
ルーターでプレゼンする
puhitaku
1
3.4k
個人のAWSアカウントをマルチ運用してみた
miura55
2
250
認知症フレンドリーテックとスタックチャン
naokiuc
0
360
中年男性がメインフレームから クラウドへキャリアシフトしてみた
uechishingo
1
420
しくじり先生、PharmaXのLLMアプリケーション開発の失敗を語る
pharma_x_tech
0
130
uvを使ってストレスフリーな Python開発をしよう！
r74tech
0
250
M5stackで使用できるpHセンサの開発
shinrinakamura
1
280
競技としてのKaggle、役に立つKaggle
yu4u
7
2.5k

Featured

See All Featured
Statistics for Hackers
jakevdp
790
220k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
Teambox: Starting and Learning
jrom
128
8.4k
Stop Working from a Prison Cell
hatefulcrawdad
267
19k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
358
22k
GitHub's CSS Performance
jonrohan
1025
450k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Thoughts on Productivity
jonyablonski
60
3.9k
Designing for Performance
lara
601
67k
In The Pink: A Labor of Love
frogandcode
138
21k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
[RailsConf 2023] Rails as a piece of cake
palkan
28
4k

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