SlideShare une entreprise Scribd logo
1  sur  32
Building Your Virtual Chat Room , No
App needed .
IEEE Women In Engineering Palestinian Leadership Conference
2019
1
2
Yamama
Shakaa
Teaching Assistant , CS Dep, An-Najah National University.
Mozilla Tech Speaker, ArabWIC, Techwomen, PalestineTM, Technovation
www.presentatiostemplate.com
www.presentatiostemplate.com 3
Mozilla’s Mission Internship Opportunity
Volunteering
Opportunity
Get In Touch
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
www.presentatiostemplate.com 5
www.presentatiostemplate.com 6
Internship Opportunity
https://careers.mozilla.org/listings
https://www.outreachy.org/
www.presentatiostemplate.com 3
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
Agenda
This presentation includes :
www.presentatiostemplate.com
• The need of immersive content on the web
• Spoke and hubs
• Architecture Kit
3
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.
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
https://poplar.studio/blog/augmented-reality-stats-infographic/ 12
2022
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
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
How to create the webXR
content?
12www.presentatiostemplate.com
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.
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.
Tools
www.presentatiostemplate.com 16
• AFrame.
• Mozilla Hubs
• Spoke
• Amazon Sumerian
• Google Model viewer
Mozilla Hubs
www.presentatiostemplate.com 19
Mozilla Hubs Provides
Online Social Virtual
Reality Experience.
17
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
www.presentatiostemplate.com 21
www.presentatiostemplate.com 22
Hubs Demo
• `
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
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
https://hubs.mozilla.com/spoke
www.presentatiostemplate.com 25
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
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
Architecture kit
www.presentatiostemplate.com 28
Getting Started
www.presentatiostemplate.com 21
https://hubs.mozilla.com/
https://hubs.mozilla.com/spoke
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/
Thank you
Email: Yamama.shakaa@gmail.com
Twitter : @yamama_sh
23
Credits
• Pexels
• Flaticons
www.presentatiostemplate.com 24

Contenu connexe

Tendances

GitOps for Helm Users by Scott Rigby
GitOps for Helm Users by Scott RigbyGitOps for Helm Users by Scott Rigby
GitOps for Helm Users by Scott Rigby
Weaveworks
 

Tendances (20)

Migration d'une Architecture Microservice vers une Architecture Event-Driven ...
Migration d'une Architecture Microservice vers une Architecture Event-Driven ...Migration d'une Architecture Microservice vers une Architecture Event-Driven ...
Migration d'une Architecture Microservice vers une Architecture Event-Driven ...
 
Flutter Tutorial For Beginners | Edureka
Flutter Tutorial For Beginners | EdurekaFlutter Tutorial For Beginners | Edureka
Flutter Tutorial For Beginners | Edureka
 
What is flutter and why should i care?
What is flutter and why should i care?What is flutter and why should i care?
What is flutter and why should i care?
 
Microservices-DDD-Telosys-Devoxx-FR-2022
Microservices-DDD-Telosys-Devoxx-FR-2022Microservices-DDD-Telosys-Devoxx-FR-2022
Microservices-DDD-Telosys-Devoxx-FR-2022
 
Encode Club - Sandbox
Encode Club - SandboxEncode Club - Sandbox
Encode Club - Sandbox
 
Luis cataldi-ue4-vr-best-practices2
Luis cataldi-ue4-vr-best-practices2Luis cataldi-ue4-vr-best-practices2
Luis cataldi-ue4-vr-best-practices2
 
Backstage at CNCF Madison.pptx
Backstage at CNCF Madison.pptxBackstage at CNCF Madison.pptx
Backstage at CNCF Madison.pptx
 
GitOps for Helm Users by Scott Rigby
GitOps for Helm Users by Scott RigbyGitOps for Helm Users by Scott Rigby
GitOps for Helm Users by Scott Rigby
 
Openshift Container Platform
Openshift Container PlatformOpenshift Container Platform
Openshift Container Platform
 
Bases de Datos en Kubernetes
Bases de Datos en KubernetesBases de Datos en Kubernetes
Bases de Datos en Kubernetes
 
Flutter for web
Flutter for webFlutter for web
Flutter for web
 
Unity 3d Basics
Unity 3d BasicsUnity 3d Basics
Unity 3d Basics
 
The Mobile Future of Extended Reality
The Mobile Future of Extended RealityThe Mobile Future of Extended Reality
The Mobile Future of Extended Reality
 
Linux Environment- Linux vs Unix
Linux Environment- Linux vs UnixLinux Environment- Linux vs Unix
Linux Environment- Linux vs Unix
 
Cloud Native: what is it? Why?
Cloud Native: what is it? Why?Cloud Native: what is it? Why?
Cloud Native: what is it? Why?
 
{Re}designing a Developer Portal
{Re}designing a Developer Portal{Re}designing a Developer Portal
{Re}designing a Developer Portal
 
Microservice 4.0 Journey - From Spring NetFlix OSS to Istio Service Mesh and ...
Microservice 4.0 Journey - From Spring NetFlix OSS to Istio Service Mesh and ...Microservice 4.0 Journey - From Spring NetFlix OSS to Istio Service Mesh and ...
Microservice 4.0 Journey - From Spring NetFlix OSS to Istio Service Mesh and ...
 
ABN AMRO DevSecOps Journey
ABN AMRO DevSecOps JourneyABN AMRO DevSecOps Journey
ABN AMRO DevSecOps Journey
 
Flutter
FlutterFlutter
Flutter
 
Cloud-Native Fundamentals: An Introduction to 12-Factor Applications
Cloud-Native Fundamentals: An Introduction to 12-Factor ApplicationsCloud-Native Fundamentals: An Introduction to 12-Factor Applications
Cloud-Native Fundamentals: An Introduction to 12-Factor Applications
 

Similaire à Building your virtual chat room (Mozilla hubs and spoke)

Creative spaces design_final
Creative spaces design_finalCreative spaces design_final
Creative spaces design_final
Siirus
 
夜宴8期《Dive into Mozilla Labs》
夜宴8期《Dive into Mozilla Labs》夜宴8期《Dive into Mozilla Labs》
夜宴8期《Dive into Mozilla Labs》
Koubei Banquet
 
Creative spaces design_170610
Creative spaces design_170610Creative spaces design_170610
Creative spaces design_170610
Siirus
 
Fennec case study - Design for Mobile 2009
Fennec case study - Design for Mobile 2009Fennec case study - Design for Mobile 2009
Fennec case study - Design for Mobile 2009
Madhava Enros
 
Introduction to Web2.0 & Language Learning, LaProf Summer School 2010
Introduction to Web2.0 & Language Learning, LaProf Summer School 2010Introduction to Web2.0 & Language Learning, LaProf Summer School 2010
Introduction to Web2.0 & Language Learning, LaProf Summer School 2010
Maria Perifanou
 

Similaire à Building your virtual chat room (Mozilla hubs and spoke) (20)

2011 07 Malaysia Open Source Conference
2011 07 Malaysia Open Source Conference2011 07 Malaysia Open Source Conference
2011 07 Malaysia Open Source Conference
 
IT Event Report of TC Disrupt/GMIC
IT Event Report of TC Disrupt/GMICIT Event Report of TC Disrupt/GMIC
IT Event Report of TC Disrupt/GMIC
 
Effective virtual meetings for project success
Effective virtual meetings for project successEffective virtual meetings for project success
Effective virtual meetings for project success
 
Creative spaces design_final
Creative spaces design_finalCreative spaces design_final
Creative spaces design_final
 
Developing for Firefox
Developing for FirefoxDeveloping for Firefox
Developing for Firefox
 
Office 2010 cloud computing farhad_javidi
Office 2010 cloud computing farhad_javidiOffice 2010 cloud computing farhad_javidi
Office 2010 cloud computing farhad_javidi
 
夜宴8期《Dive into Mozilla Labs》
夜宴8期《Dive into Mozilla Labs》夜宴8期《Dive into Mozilla Labs》
夜宴8期《Dive into Mozilla Labs》
 
Banquet 08
Banquet 08Banquet 08
Banquet 08
 
Citizen Developer Tools - session at SPS New England 10/20/2018
Citizen Developer Tools - session at SPS New England 10/20/2018Citizen Developer Tools - session at SPS New England 10/20/2018
Citizen Developer Tools - session at SPS New England 10/20/2018
 
Maker Boot Camp
Maker Boot CampMaker Boot Camp
Maker Boot Camp
 
Creative spaces design_170610
Creative spaces design_170610Creative spaces design_170610
Creative spaces design_170610
 
Citizen Developer Tools are not just for Citizen Developers (session at Share...
Citizen Developer Tools are not just for Citizen Developers (session at Share...Citizen Developer Tools are not just for Citizen Developers (session at Share...
Citizen Developer Tools are not just for Citizen Developers (session at Share...
 
ESPC Teams week Microsoft Teams & Bot Framework – a Developer’s Perspective
ESPC Teams week Microsoft Teams & Bot Framework – a Developer’s PerspectiveESPC Teams week Microsoft Teams & Bot Framework – a Developer’s Perspective
ESPC Teams week Microsoft Teams & Bot Framework – a Developer’s Perspective
 
Fennec case study - Design for Mobile 2009
Fennec case study - Design for Mobile 2009Fennec case study - Design for Mobile 2009
Fennec case study - Design for Mobile 2009
 
FPC-Virtual Business
FPC-Virtual BusinessFPC-Virtual Business
FPC-Virtual Business
 
web2.0 forum presentation
web2.0 forum presentationweb2.0 forum presentation
web2.0 forum presentation
 
Rtp bluemix meetup june 2016 anki and node red
Rtp bluemix meetup june 2016 anki and node redRtp bluemix meetup june 2016 anki and node red
Rtp bluemix meetup june 2016 anki and node red
 
Stronger than Chuck Norris: SharePoint in clouds, on earth, in subway and in ...
Stronger than Chuck Norris: SharePoint in clouds, on earth, in subway and in ...Stronger than Chuck Norris: SharePoint in clouds, on earth, in subway and in ...
Stronger than Chuck Norris: SharePoint in clouds, on earth, in subway and in ...
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
 
Introduction to Web2.0 & Language Learning, LaProf Summer School 2010
Introduction to Web2.0 & Language Learning, LaProf Summer School 2010Introduction to Web2.0 & Language Learning, LaProf Summer School 2010
Introduction to Web2.0 & Language Learning, LaProf Summer School 2010
 

Dernier

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Dernier (20)

Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 

Building your virtual chat room (Mozilla hubs and spoke)