Download to read offline
Uploaded byAnkitkumar Singh
WEB-VR by Ankitkumar Singh
The document presents a seminar on WebVR, covering its introduction, key technologies, architectural details, and development frameworks like A-Frame. It explores the advantages and limitations of virtual reality, as well as its applications across various fields such as education, healthcare, and gaming. The seminar also discusses community engagement and future prospects for WebVR technology.
WEB-VR by Ankitkumar Singh
- 1. GESCOE, Department ofComputer 1 Seminar on, WebVR Computer Engineering By Ankitkumar Singh
- 2. 1. Introduction 2. LiteratureReview 3. Problem Statement 4. Topic / Technology Necessity 5. Algorithm / Working/Architecture 6. Results 7. Applications 8. Advantages & Disadvantages 9. Future Work & Conclusion 10.References 2GESCOE, Department of Computer WebVR: index()
- 3. 3GESCOE, Department ofComputer WebVR: Virtual_Reality()
- 4.
- 5. 2010 Google Street view 2014 SonyPlayStation VR. 2014 Facebook Oculus Rift. 2015 HTC Vive Till now 230 companies developing VR-related products WebVR: Device_timeline()
- 6. WebVR: Limitations_of_VR() Gatekeepers InstallsClosed Friction of VR Ecosystems:
- 7. 7GESCOE, Department ofComputer WebVR: VR_on_Web() An open virtual reality platform with the advantages of the Web. Open Connected Instant
- 8. GESCOE, Department ofComputer WebVR: Why_HTML_and_CSS() • Modern CSS has lots of features • Gradients • Complex Backgrounds • 3D Transform • Animations HTML/CSS is well-suited for a lot of content CSS 3D Transforms:
- 9. GESCOE, Department ofComputer WebVR: Browser_Support() Firefox Chrome Samsung Internet
- 10. GESCOE, Department ofComputer WebVR: A-Frame() A-Frame: A web framework for building virtual reality experiences with HTML
- 11. GESCOE, Department ofComputer WebVR: Hello_World() <a-scene> </a-scene> A-Frame: Step1: incuding java script. Step2: Scene declaration <script src="js/aframe.min.js"> </script>
- 12. GESCOE, Department ofComputer WebVR: Hello_World() <a-scene> <a-box color="red" position="10 0 10"> </a-box> </a-scene> A-Frame: Step3: Entity Declaration
- 13. GESCOE, Department ofComputer WebVR: Hello_World() <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" rotation="-90 0 0" position="0 0 - 4" width="4" height="4"></a-plane> <a-sky color="#ECECEC"></a-sky> </a-scene> A-Frame: Step3: Complete hello words in few lines of code.
- 14. GESCOE, Department ofComputer WebVR: Hello_World() Output:
- 15. GESCOE, Department ofComputer WebVR: Languages_And_Tools_We_Know() • HTML • JavaScript and DOM APIs • Integrates with existing frameworks and libraries veu.jsd3.jsReact & Redux
- 16. GESCOE, Department ofComputer WebVR: Languages_And_Tools_We_Know() • Not Just For developer • Also for Designer BlenderMaya
- 17. GESCOE, Department ofComputer WebVR: Own_Component() <a-sphere crazy-position="min: -1 -1 -1; max: 1 1 1"> </a-sphere> Step1: incuding java script. AFRAME.registerComponent('crazy-position', { schema: { min: {type: 'vec3'}, max: {type: 'vec3'} }, tick: function () { } var data = this.data; var randomPosition = __getRandomPosition(min, max); this.el.object3D.position.copy(randomPosition); } );
- 18. GESCOE, Department ofComputer WebVR: WebVR_World() • Mixed Reality • Gaming A-Blast • A-frame element Inspector HTML/CSS is well-suited for a lot of content
- 19. GESCOE, Department ofComputer WebVR: Dev_Community() •Github: 60+ contributors, 2900+ stargazers •Slack: 1400+ members •Content: Hundreds of projects featured on awesome-aframe repository and A Week of A-Frame •StackOverflow: Community is very active on StackOverflow.
- 20. GESCOE, Department ofComputer WebVR: Future() 1) Military (army, navy and air force) 3) Education 5) Healthcare 4) Fashion 6) Business /Engineering 2) Media / Entertainment
- 21. GESCOE, Department ofComputer WebVR: World of VR Websites () 1) http://www.360syria.com 2) https://site.vizor.io 3) https://discoveryour6thsense.com 4) http://www.thevrara.com 5) http://www.firstparallel.com/en/
- 22. GESCOE, Department ofComputer WebVR: Reference() 1. https://mozvr.com/ 2. http://vr.chromeexperiments.com/ 3. https://experiments.withgoogle.com/we bvr 4. https://vr.mozilla.org 5. https://en.wikipedia.org/wiki/WebVR 6. https://aframe.io 7. https://webvr.info/developers/
- 23. GESCOE, Department ofComputer WebVR: End() Thank you