Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building Your Own Pokemon-World in Web Based Virtual Reality- WeAreDevelopers Conference

170 views

Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Building Your Own Pokemon-World in Web Based Virtual Reality- WeAreDevelopers Conference

  1. 1. SANTOSH VISWANATHAM @isantoshv Mozilla Tech Speaker/Rep Software Engineer at Infosys Web Developer http://viswanathamsantosh.github.io
  2. 2. Building Your Own Pokemon-World in Web Based Virtual Reality ( A-FRAME )
  3. 3. VIRTUAL REALITY?
  4. 4. Where is it used? • Fashion • Real Estate • Entertainment • Games • Engineering • Scientific visualizations • Health Care
  5. 5. Frictions in VR Ecosystems GATE KEEPERS INSTALLS CLOSED
  6. 6. WebVR An open virtual reality platform with the advantages of the Web OPEN CONNECTED INSTANT
  7. 7. Browser APIs that enable WebGL rendering to headsets and access to VR sensors https://w3c.github.io/webvr/
  8. 8. A-FRAME A declarative framework for building virtual reality experiences on the Web https://aframe.io/
  9. 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. 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. 11. Hello World
  12. 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>
  13. 13. <!– Add a-frame animation--> <a-animation attribute="rotation" dur="1000" to="-90 360 0" repeat="indefinite"></a-animation>
  14. 14. 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
  15. 15. HOW DID I MADE THIS?
  16. 16. aframe.io 150+ contributors 5400+ stargazers 1800 Members on Slack 100’s of featured Projects
  17. 17. THANK YOU -Santosh ( @isantoshv ) MOZILLA TECH SPEAKER

×