Introduction to A-frame and WEB-VR.WebVR is an open specification that makes it possible to experience VR in your browser. The goal is to make it easier for everyone to get into VR experiences, no matter what device you have. Make WebVR with HTML and Entity-Component Works on Vive, Rift, Daydream, GearVR, desktop

1. GESCOE, Department of Computer 1
Seminar on,
WebVR
Computer Engineering
By
Ankitkumar Singh

2. 1. Introduction
2. Literature Review
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 of Computer
WebVR: Virtual_Reality()

4. WebVR: Device()

5. 2010
Google Street view
2014
Sony PlayStation 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 Installs Closed
Friction of VR Ecosystems:

7. 7GESCOE, Department of Computer
WebVR: VR_on_Web()
An open virtual reality platform with the advantages
of the Web.
Open Connected Instant

8. GESCOE, Department of Computer
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 of Computer
WebVR: Browser_Support()
Firefox Chrome Samsung Internet

10. GESCOE, Department of Computer
WebVR: A-Frame()
A-Frame:
A web framework for building virtual reality experiences with
HTML

11. GESCOE, Department of Computer
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 of Computer
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 of Computer
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 of Computer
WebVR: Hello_World()
Output:

15. GESCOE, Department of Computer
WebVR: Languages_And_Tools_We_Know()
• HTML
• JavaScript and DOM APIs
• Integrates with existing frameworks and libraries
veu.jsd3.jsReact & Redux

16. GESCOE, Department of Computer
WebVR: Languages_And_Tools_We_Know()
• Not Just For developer
• Also for Designer
BlenderMaya

17. GESCOE, Department of Computer
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 of Computer
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 of Computer
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 of Computer
WebVR: Future()
1) Military
(army, navy and air force)
3) Education
5) Healthcare
4) Fashion
6) Business /Engineering
2) Media / Entertainment

21. GESCOE, Department of Computer
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 of Computer
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 of Computer
WebVR: End()
Thank you