This document discusses opportunities to get involved with Mozilla through internships, volunteering, or contributing to open source projects. It also provides an overview of developing immersive web content using tools like Mozilla Hubs, Spoke, and the Architecture Kit. Hubs allows for shared social VR experiences, while Spoke is a 3D editor for creating scenes. The Architecture Kit includes pre-built 3D models that can be used to compose virtual buildings and spaces. Instructions and resources are provided for getting started with these tools to build immersive web content.

1. Building Your Virtual Chat Room , No
App needed .
IEEE Women In Engineering Palestinian Leadership Conference
2019
1

2. 2
Yamama
Shakaa
Teaching Assistant , CS Dep, An-Najah National University.
Mozilla Tech Speaker, ArabWIC, Techwomen, PalestineTM, Technovation
www.presentatiostemplate.com

3. www.presentatiostemplate.com 3
Mozilla’s Mission Internship Opportunity
Volunteering
Opportunity
Get In Touch

4. Some Contribution Opportunities
www.presentatiostemplate.com 4
https://support.mozilla.org/en-
US/get-involved
https://events.mozilla.org/tech
speakers
https://voice.mozilla.org

5. www.presentatiostemplate.com 5

6. www.presentatiostemplate.com 6

7. Internship Opportunity
https://careers.mozilla.org/listings
https://www.outreachy.org/
www.presentatiostemplate.com 3

8. Mozilla Community in Palestine
• Join us on Facebook
https://bit.ly/2roYe2U
• Fill this short form :
https://forms.gle/beBkXSzSNXiw1LTW9
• Follow the blog
https://mozilla.ps/
www.presentatiostemplate.com 8

9. Agenda
This presentation includes :
www.presentatiostemplate.com
• The need of immersive content on the web
• Spoke and hubs
• Architecture Kit
3

10. App over crowded !
10
https://medium.com/@axaq/the-state-of-immersive-web-in-2019-
df4caa6069d3
www.presentatiostemplate.com
Downloading an app adds step between
the “Call To Action” and getting the user
using the application.

11. Web instead of native apps
Using native web browser to serve the AR and
VR experience allowing it to work across all
platforms, devices, and mobile OS.
https://medium.com/agora-io/web-vs-app-ar-edition-d9aafe988ba2 4

12. https://poplar.studio/blog/augmented-reality-stats-infographic/ 12
2022

13. Browsers Support
13
All modern browsers support
webGL and more and more
native device features become
available to browsers
https://medium.com/@axaq/the-state-of-immersive-web-in-2019-
df4caa6069d3
www.presentatiostemplate.com

14. Hardware Support
14
1.Mobile device hardware become stronger
in terms of 3D rendering.
1. Hardware becomes more affordable.
3. more powerful standalone headsets are
introduced to the market,
https://medium.com/@axaq/the-state-of-immersive-web-in-2019-
df4caa6069d3
www.presentatiostemplate.com

15. How to create the webXR
content?
12www.presentatiostemplate.com

16. Three.js
www.presentatiostemplate.com 14
The most popular open source for 3D graphics on the web.
Built on top of WebGL and supported by several large
companies.

17. WebXR
www.presentatiostemplate.com 15
• WebXR is a new set of standard Web APIs for building immersive
experiences on the web.
• It has support from all the major browser vendors, and version one
will be finished before the end of 2019.

18. Tools
www.presentatiostemplate.com 16
• AFrame.
• Mozilla Hubs
• Spoke
• Amazon Sumerian
• Google Model viewer

19. Mozilla Hubs
www.presentatiostemplate.com 19
Mozilla Hubs Provides
Online Social Virtual
Reality Experience.
17

20. Mozilla Hubs
www.presentatiostemplate.com 20
Hubs is built on top of WebRTC
and supports real-time
conversations between users in a
shared environment.
Users embody 3D models in the
glTF format called avatars, and
they can control vision and
movements using WASD keys or
through the application’s
teleportation controls
18

21. www.presentatiostemplate.com 21

22. www.presentatiostemplate.com 22
Hubs Demo
• `

23. Spoke
www.presentatiostemplate.com 23
Spoke is an online 3D editor that
can be used to create scenes for
Hubs rooms.
It allows users to compose spaces
using 3D models and traditional
web content like videos, images,
gifs, and PDFs.
Other Hubs users can then use
these scenes as templates for
their own content.
19

24. Why Spoke ?
Browser based 3D Composition tools for creating 3D and VR scene
Very good iteration time, scene come to the screen very quickly
without complicating build process
www.presentatiostemplate.com 24

25. https://hubs.mozilla.com/spoke
www.presentatiostemplate.com 25

26. Architecture Kit
• build custom content for their 3D scenes without using an external
tool.
• Over 400 different pieces that are designed to be used together to
create buildings - the kit includes wall, floor, ceiling, and roof
pieces, as well as windows, trim, stairs, and doors.
• The different components of the Architecture Kit were created in
Blender so that each piece would align together to create
seamless connections while mesh overlap avoided.
www.presentatiostemplate.com 26

27. Architecture Kit
• Many of the Architecture Kit pieces were made single-sided, which
reduces the number of faces that need to be rendered.
• different pieces of the Kit can have one or more material slots with
unique textures and materials that can be applied
www.presentatiostemplate.com 27

28. Architecture kit
www.presentatiostemplate.com 28

29. Getting Started
www.presentatiostemplate.com 21
https://hubs.mozilla.com/
https://hubs.mozilla.com/spoke

30. Resources:
www.presentatiostemplate.com 22
Space Tutorial :
https://bit.ly/33t5Dwn
Architecture kit tutorial
https://bit.ly/2CnNELA
More About Architecture kit
https://blog.mozvr.com/year-with-spoke-architecture-kit/

31. Thank you
Email: Yamama.shakaa@gmail.com
Twitter : @yamama_sh
23

32. Credits
• Pexels
• Flaticons
www.presentatiostemplate.com 24