Building Your Own Pokemon-World in Web Based Virtual Reality- WeAreDevelopers Conference
Virtual Reality is the next big thing in building realistic applications, games, communication tools, and entertainment experiences. A-Frame is a web-based VR framework used to create wonderful VR Scenes and VR applications. With a-frame, you can run your VR applications using your browser on any VR devices, including Oculus rift, Cardboard, Procus pro, etc. This talk will enable the participants to get started with Virtual Reality and a-frame, developing VR applications and ultimately create their own Pokemon World in Virtual Reality. Any person with knowledge of HTML, CSS, and Javascript can easily start creating their own VR applications. We will also go through a few web-based VR projects like a-frame painter, 360-degree photo albums, and 3D gallery. By the end of this session, the participant will have a complete understanding of what webVR is, practical knowledge on how to build VR applications, popular webVR projects, and finally be able to build their own Pokemon world in VR.
Recommandé
Contenu connexe
Dernier
Dernier (20)
En vedette
En vedette (20)
Building Your Own Pokemon-World in Web Based Virtual Reality- WeAreDevelopers Conference
- 1. SANTOSH VISWANATHAM @isantoshv Mozilla Tech Speaker/Rep Software Engineer at Infosys Web Developer http://viswanathamsantosh.github.io
- 2. Building Your Own Pokemon-World in Web Based Virtual Reality ( A-FRAME )
- 4. Where is it used? • Fashion • Real Estate • Entertainment • Games • Engineering • Scientific visualizations • Health Care
- 5. Frictions in VR Ecosystems GATE KEEPERS INSTALLS CLOSED
- 6. WebVR An open virtual reality platform with the advantages of the Web OPEN CONNECTED INSTANT
- 7. Browser APIs that enable WebGL rendering to headsets and access to VR sensors https://w3c.github.io/webvr/
- 8. A-FRAME A declarative framework for building virtual reality experiences on the Web https://aframe.io/
- 9. <html> <head> <title>My First VR Scene</title> </head> <body> <a-scene> </a-scene> <script src="https://aframe.io/releases/0.3.2/aframe.min.js"></script> </body> </html> Hello World
- 10. <html> <body> <a-scene> <a-box color="#4CC3D9" position="-1 0.5 -3" rotation="0 45 0"></a-box> <a-cylinder color="#FFC65D" position="1 0.75 -3" radius="0.5" height="1.5"></a-cylinder> <a-sphere color="#EF2D5E" position="0 1.25 -5" radius="1.25"></a-sphere> <a-plane color="#7BC8A4" position="0 0 -4" rotation="-90 0 0" width="4" height="4"></a-plane> <a-sky color="#ECECEC"></a-sky> </a-scene> <script src="https://aframe.io/releases/0.3.2/aframe.min.js"></script> </body> </html> Hello World
- 11. Hello World
- 12. <!– Add a-frame particle system script --> <script src="https://rawgit.com/ngokevin/aframe-particle-system- component/d58edfe4e8f84a04eeb50c4e4cebf081d4e26e2d/dist/aframe-particle-system- component.min.js"></script> <!– Add a-frame particle system entity --> <a-entity particle-system="particleCount: 3000; preset: dust; maxAge: 3; texture: https://ucarecdn.com/d9699a61-4bd8-4699-9966-4118715db5f8/; size: 1.4; velocityValue: 0 4 0" position="0 15 -5"></a-entity>
- 14. <!– Add a-frame animation--> <a-animation attribute="rotation" dur="1000" to="-90 360 0" repeat="indefinite"></a-animation>
- 16. Now we learnt a little about… • A-frame entities • Positioning objects • Rain in your a-frame scene • Adding Background to your a-frame scene • A-frame animations Lets build our Pokemon World
- 17. HOW DID I MADE THIS?
- 18. aframe.io 150+ contributors 5400+ stargazers 1800 Members on Slack 100’s of featured Projects
- 19. THANK YOU -Santosh ( @isantoshv ) MOZILLA TECH SPEAKER