Submit Search
Upload
Getting Started with WebVR
•
0 likes
•
1,419 views
AI-enhanced title
Chris Swan
Follow
Lightning talk on Web Virtual Reality
Read less
Read more
Technology
Report
Share
Report
Share
1 of 11
Download now
Download to read offline
Recommended
AppSec USA 2014 talk by Chris Swan "Implications & Opportunities at the Bleed...
AppSec USA 2014 talk by Chris Swan "Implications & Opportunities at the Bleed...
Cohesive Networks
Deploying Security at Scale
Deploying Security at Scale
Chris Swan
Security protocols in constrained environments
Security protocols in constrained environments
Chris Swan
IPexpo - What is DevOps, and why should infrastructure operations care?
IPexpo - What is DevOps, and why should infrastructure operations care?
Chris Swan
Docker Chicago Meetup - July 2014
Docker Chicago Meetup - July 2014
Cohesive Networks
Forecast 2014: Software Defined Networking - What's New?
Forecast 2014: Software Defined Networking - What's New?
Open Data Center Alliance
Chris Swan ONUG Academy - Container Networks Tutorial
Chris Swan ONUG Academy - Container Networks Tutorial
Cohesive Networks
Chris Swan at Container.Camp: Docker networking
Chris Swan at Container.Camp: Docker networking
Cohesive Networks
Recommended
AppSec USA 2014 talk by Chris Swan "Implications & Opportunities at the Bleed...
AppSec USA 2014 talk by Chris Swan "Implications & Opportunities at the Bleed...
Cohesive Networks
Deploying Security at Scale
Deploying Security at Scale
Chris Swan
Security protocols in constrained environments
Security protocols in constrained environments
Chris Swan
IPexpo - What is DevOps, and why should infrastructure operations care?
IPexpo - What is DevOps, and why should infrastructure operations care?
Chris Swan
Docker Chicago Meetup - July 2014
Docker Chicago Meetup - July 2014
Cohesive Networks
Forecast 2014: Software Defined Networking - What's New?
Forecast 2014: Software Defined Networking - What's New?
Open Data Center Alliance
Chris Swan ONUG Academy - Container Networks Tutorial
Chris Swan ONUG Academy - Container Networks Tutorial
Cohesive Networks
Chris Swan at Container.Camp: Docker networking
Chris Swan at Container.Camp: Docker networking
Cohesive Networks
Mixed Realities for Web - Carsten Sandtner - Codemotion Amsterdam 2018
Mixed Realities for Web - Carsten Sandtner - Codemotion Amsterdam 2018
Codemotion
Free VR
Free VR
Stephanie Mendoza
HTML5 تکنولوژی های موجود در
HTML5 تکنولوژی های موجود در
Shiraz LUG
Build the Virtual Reality Web with A-Frame
Build the Virtual Reality Web with A-Frame
Mozilla VR
Getting Started with Web VR
Getting Started with Web VR
Saurabh Badhwar
How to build a html5 websites.v1
How to build a html5 websites.v1
Bitla Software
Design+Performance Velocity 2015
Design+Performance Velocity 2015
Steve Souders
Design & Performance - Steve Souders at Fastly Altitude 2015
Design & Performance - Steve Souders at Fastly Altitude 2015
Fastly
WebVR, an offspring of two worlds
WebVR, an offspring of two worlds
Luis Diego González-Zúñiga, PhD
Introduction to WebVR Autodesk Forge 2016
Introduction to WebVR Autodesk Forge 2016
Tony Parisi
RaphaëlJS magic
RaphaëlJS magic
Kseniya Redunova
Creating Beautiful CSS3 Animations - FITC Amsterdam 2016
Creating Beautiful CSS3 Animations - FITC Amsterdam 2016
Rami Sayar
A HTML5 platform demókon keresztül
A HTML5 platform demókon keresztül
Zoltán Dávid
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
Remy Sharp
A New Vue for Web Development
A New Vue for Web Development
Chad Campbell
Atmosphere Conference 2015: Taming the Modern Datacenter
Atmosphere Conference 2015: Taming the Modern Datacenter
PROIDEA
HTML5 & Friends
HTML5 & Friends
Remy Sharp
WEB SOCKET 應用
WEB SOCKET 應用
Jerromy Lee
Top 10 HTML5 features
Top 10 HTML5 features
Gill Cleeren
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
Thomas Fuchs
LNETM - Atsign - Privacy with Personal Data Services
LNETM - Atsign - Privacy with Personal Data Services
Chris Swan
SOOCon24 - Showing that you care about security - OpenSSF Scorecards
SOOCon24 - Showing that you care about security - OpenSSF Scorecards
Chris Swan
More Related Content
Similar to Getting Started with WebVR
Mixed Realities for Web - Carsten Sandtner - Codemotion Amsterdam 2018
Mixed Realities for Web - Carsten Sandtner - Codemotion Amsterdam 2018
Codemotion
Free VR
Free VR
Stephanie Mendoza
HTML5 تکنولوژی های موجود در
HTML5 تکنولوژی های موجود در
Shiraz LUG
Build the Virtual Reality Web with A-Frame
Build the Virtual Reality Web with A-Frame
Mozilla VR
Getting Started with Web VR
Getting Started with Web VR
Saurabh Badhwar
How to build a html5 websites.v1
How to build a html5 websites.v1
Bitla Software
Design+Performance Velocity 2015
Design+Performance Velocity 2015
Steve Souders
Design & Performance - Steve Souders at Fastly Altitude 2015
Design & Performance - Steve Souders at Fastly Altitude 2015
Fastly
WebVR, an offspring of two worlds
WebVR, an offspring of two worlds
Luis Diego González-Zúñiga, PhD
Introduction to WebVR Autodesk Forge 2016
Introduction to WebVR Autodesk Forge 2016
Tony Parisi
RaphaëlJS magic
RaphaëlJS magic
Kseniya Redunova
Creating Beautiful CSS3 Animations - FITC Amsterdam 2016
Creating Beautiful CSS3 Animations - FITC Amsterdam 2016
Rami Sayar
A HTML5 platform demókon keresztül
A HTML5 platform demókon keresztül
Zoltán Dávid
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
Remy Sharp
A New Vue for Web Development
A New Vue for Web Development
Chad Campbell
Atmosphere Conference 2015: Taming the Modern Datacenter
Atmosphere Conference 2015: Taming the Modern Datacenter
PROIDEA
HTML5 & Friends
HTML5 & Friends
Remy Sharp
WEB SOCKET 應用
WEB SOCKET 應用
Jerromy Lee
Top 10 HTML5 features
Top 10 HTML5 features
Gill Cleeren
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
Thomas Fuchs
Similar to Getting Started with WebVR
(20)
Mixed Realities for Web - Carsten Sandtner - Codemotion Amsterdam 2018
Mixed Realities for Web - Carsten Sandtner - Codemotion Amsterdam 2018
Free VR
Free VR
HTML5 تکنولوژی های موجود در
HTML5 تکنولوژی های موجود در
Build the Virtual Reality Web with A-Frame
Build the Virtual Reality Web with A-Frame
Getting Started with Web VR
Getting Started with Web VR
How to build a html5 websites.v1
How to build a html5 websites.v1
Design+Performance Velocity 2015
Design+Performance Velocity 2015
Design & Performance - Steve Souders at Fastly Altitude 2015
Design & Performance - Steve Souders at Fastly Altitude 2015
WebVR, an offspring of two worlds
WebVR, an offspring of two worlds
Introduction to WebVR Autodesk Forge 2016
Introduction to WebVR Autodesk Forge 2016
RaphaëlJS magic
RaphaëlJS magic
Creating Beautiful CSS3 Animations - FITC Amsterdam 2016
Creating Beautiful CSS3 Animations - FITC Amsterdam 2016
A HTML5 platform demókon keresztül
A HTML5 platform demókon keresztül
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
A New Vue for Web Development
A New Vue for Web Development
Atmosphere Conference 2015: Taming the Modern Datacenter
Atmosphere Conference 2015: Taming the Modern Datacenter
HTML5 & Friends
HTML5 & Friends
WEB SOCKET 應用
WEB SOCKET 應用
Top 10 HTML5 features
Top 10 HTML5 features
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
More from Chris Swan
LNETM - Atsign - Privacy with Personal Data Services
LNETM - Atsign - Privacy with Personal Data Services
Chris Swan
SOOCon24 - Showing that you care about security - OpenSSF Scorecards
SOOCon24 - Showing that you care about security - OpenSSF Scorecards
Chris Swan
All Day DevOps 2023 - Implementing OSSF Scorecards Across an Organisation.pdf
All Day DevOps 2023 - Implementing OSSF Scorecards Across an Organisation.pdf
Chris Swan
Fluttercon Berlin 23 - Dart & Flutter on RISC-V
Fluttercon Berlin 23 - Dart & Flutter on RISC-V
Chris Swan
QConNY 2023 - Implementing OSSF Scorecards Across an Organisation
QConNY 2023 - Implementing OSSF Scorecards Across an Organisation
Chris Swan
Flutter SV Meetup Oct 2022 - End to end encrypted IoT with Dart and Flutter
Flutter SV Meetup Oct 2022 - End to end encrypted IoT with Dart and Flutter
Chris Swan
QConSF 2022 - Backends in Dart
QConSF 2022 - Backends in Dart
Chris Swan
London IoT Meetup Sep 2022 - End to end encrypted IoT
London IoT Meetup Sep 2022 - End to end encrypted IoT
Chris Swan
Flutter Vikings 2022 - End to end IoT with Dart and Flutter
Flutter Vikings 2022 - End to end IoT with Dart and Flutter
Chris Swan
EMFcamp2022 - What if apps logged into you, instead of you logging into apps?
EMFcamp2022 - What if apps logged into you, instead of you logging into apps?
Chris Swan
Devoxx UK 2022 - Application security: What should the attack landscape look ...
Devoxx UK 2022 - Application security: What should the attack landscape look ...
Chris Swan
Flutter Festival London 2022 - End to end IoT with Dart and Flutter
Flutter Festival London 2022 - End to end IoT with Dart and Flutter
Chris Swan
Full Stack Squared 2022 - Power of Open Source
Full Stack Squared 2022 - Power of Open Source
Chris Swan
Flutter Vikings 2022 - Full Stack Dart
Flutter Vikings 2022 - Full Stack Dart
Chris Swan
Droidcon London 2021 - Full Stack Dart
Droidcon London 2021 - Full Stack Dart
Chris Swan
Keeping a project going
Keeping a project going
Chris Swan
Dart on Arm - Flutter Bangalore June 2021
Dart on Arm - Flutter Bangalore June 2021
Chris Swan
TMS9995 on RC2014
TMS9995 on RC2014
Chris Swan
CloudCamp London Nov 2019 Intro
CloudCamp London Nov 2019 Intro
Chris Swan
DevSecOps Days London - Teaching 'Shift Left on Security'
DevSecOps Days London - Teaching 'Shift Left on Security'
Chris Swan
More from Chris Swan
(20)
LNETM - Atsign - Privacy with Personal Data Services
LNETM - Atsign - Privacy with Personal Data Services
SOOCon24 - Showing that you care about security - OpenSSF Scorecards
SOOCon24 - Showing that you care about security - OpenSSF Scorecards
All Day DevOps 2023 - Implementing OSSF Scorecards Across an Organisation.pdf
All Day DevOps 2023 - Implementing OSSF Scorecards Across an Organisation.pdf
Fluttercon Berlin 23 - Dart & Flutter on RISC-V
Fluttercon Berlin 23 - Dart & Flutter on RISC-V
QConNY 2023 - Implementing OSSF Scorecards Across an Organisation
QConNY 2023 - Implementing OSSF Scorecards Across an Organisation
Flutter SV Meetup Oct 2022 - End to end encrypted IoT with Dart and Flutter
Flutter SV Meetup Oct 2022 - End to end encrypted IoT with Dart and Flutter
QConSF 2022 - Backends in Dart
QConSF 2022 - Backends in Dart
London IoT Meetup Sep 2022 - End to end encrypted IoT
London IoT Meetup Sep 2022 - End to end encrypted IoT
Flutter Vikings 2022 - End to end IoT with Dart and Flutter
Flutter Vikings 2022 - End to end IoT with Dart and Flutter
EMFcamp2022 - What if apps logged into you, instead of you logging into apps?
EMFcamp2022 - What if apps logged into you, instead of you logging into apps?
Devoxx UK 2022 - Application security: What should the attack landscape look ...
Devoxx UK 2022 - Application security: What should the attack landscape look ...
Flutter Festival London 2022 - End to end IoT with Dart and Flutter
Flutter Festival London 2022 - End to end IoT with Dart and Flutter
Full Stack Squared 2022 - Power of Open Source
Full Stack Squared 2022 - Power of Open Source
Flutter Vikings 2022 - Full Stack Dart
Flutter Vikings 2022 - Full Stack Dart
Droidcon London 2021 - Full Stack Dart
Droidcon London 2021 - Full Stack Dart
Keeping a project going
Keeping a project going
Dart on Arm - Flutter Bangalore June 2021
Dart on Arm - Flutter Bangalore June 2021
TMS9995 on RC2014
TMS9995 on RC2014
CloudCamp London Nov 2019 Intro
CloudCamp London Nov 2019 Intro
DevSecOps Days London - Teaching 'Shift Left on Security'
DevSecOps Days London - Teaching 'Shift Left on Security'
Recently uploaded
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
Radu Cotescu
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
debabhi2
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
The Digital Insurer
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
Pixlogix Infotech
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
Khem
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
ThousandEyes
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
Igalia
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
Delhi Call girls
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Neo4j
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
Anna Loughnan Colquhoun
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
Delhi Call girls
How to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
naman860154
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
The Digital Insurer
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
Safe Software
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
RTylerCroy
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Katpro Technologies
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
Results
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
The Digital Insurer
Recently uploaded
(20)
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
How to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
Getting Started with WebVR
1.
WebVR Chris Swan @cpswan CTO,
GIS at CSC and another former RN WEO (there is no conspiracy)
2.
VR might seem
complex and expensive now
3.
But all you
need is a mobile phone and ‘cardboard’
4.
And a development
platform https://hub.docker.com/r/cpswan/webvr/ (or is.gd/WebVR)
5.
Basic Demo
6.
Basic Demo code <a-scene> <a-sphere
position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere> <a-cube position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depth="1" color="#4CC3D9"></a-cube> <a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> <a-plane rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> <a-sky color="#ECECEC"></a-sky> </a-scene>
7.
Track Demo
8.
Or swap the
spaceship for a dinosaur
9.
Trex code <a-scene inspector=""> <!--
Assets --> <a-assets> <a-asset-item id="Trex-obj" src="a-frame-assets/Trex_OBJ/Trex.obj"></a-asset-item> <a-asset-item id="Trex-mtl" src="a-frame-assets/Trex_OBJ/Trex.mtl"></a-asset-item> <a-asset-item id="race-track-obj" src="a-frame-assets/race-track/race-track.obj"></a-asset-item> <a-asset-item id="race-track-mtl" src="a-frame-assets/race-track/race-track.mtl"></a-asset-item> <img id="water-normal" src="https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/textures/waternormals.jpg" crossorigin="anonymous" /> <!-- Sky is free sample sky from cgskies, buy one for commecial use --> <img id="cgsky" src="a-frame-assets/sky/CGSkies_0347_free.jpg" crossorigin="anonymous" /> </a-assets> <!-- CAMERA --> <a-entity look-at="#trex" ada-follow="target: #trex-camera-target;"> <a-entity position="0 6 0" rotation="0 180 0"> <!-- Disable the default wasd controls we are using those to control the ship --> <a-camera wasd-controls="enabled: false;"></a-camera> </a-entity> </a-entity> <!-- TRex (from turbosquid) --> <a-entity ada-ship-controller="easing: 5; acceleration: 100;" rotation="0 90 0"> <a-entity id="trex-camera-target" position="0 0 15"></a-entity> <a-obj-model src="#Trex-obj" mtl="#Trex-mtl" rotation="0 180 0" position="0 1 0" scale="0.5 0.5 0.5" id="trex"></a-obj-model> </a-entity> <!-- ENVIRONMENT --> <a-entity light="color: #FFFFFF; intensity: 0.3; type: ambient;"></a-entity> <!-- SKY SHADER --> <!--<a-ada-sky control="#sun" inclination="0.49"> <a-entity light="color: #FFFFFF; intensity: 1.5" id="sun"></a-entity> </a-ada-sky>--> <!-- Prerendered for performance --> <a-sky src="#cgsky" position="0 -1 0" rotation="0 -90 0"> <a-entity light="color: #FFFFFF; intensity: 1.5" position="0 1 50"></a-entity> </a-sky> <a-ada-ocean position="0 0 0" src="#water-normal" width="1000" depth="1000" light="#sun"></a-ada-ocean> <!-- TRACK --> <a-curve id="track" type="CatmullRom"> <a-curve-point position="0 0 0"></a-curve-point> <a-curve-point position="1 0 0"></a-curve-point> <a-curve-point position="0 0 1"></a-curve-point> </a-curve> <a-draw-curve curve="#track" material="shader: line; color: red;"></a-draw-curve> <a-clone-along-curve a-obj-model="src: #race-track-obj; mtl: #race-track-mtl;" curve="#track" spacing="5"></a-clone-along-curve> </a-scene>
10.
I only made
a Dockerfile Ada Rose Edwards (@Lady_Ada_King), and the amazing A-Frame community did all of the hard work. Check out her presentation at https://ada.is/getting-started-with-webvr/ (or is.gd/AdaVR).
Download now