Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
How	to	Use	WebVR	to	
Enhance	the		
Web	Experience	
Kevin	Vandecar	
Disorganized	Tinkerer	+		
Autodesk	Forge	Developer	Advo...
Kevin Vandecar – Disorganized Tinkerer
What is WebVR?
• 3D	(but	content	does	not	have	to	be…)	
• Virtual	Reality	experiences		
from	your		browser	
• JavaScript	A...
Why WebVR?
• a	way	to	push	VR	
to	many	devices	
• mobile	phones	+	tablets!	
• even	kids	have	a	device…	
hTps://nearpod.com...
3D experience
…but content does not have to be…
•  Stereo	Images	
•  Ex:	Cardboard	Camera	VR	Photo	Format	
•  Sample:	
file...
3D experience
•  Authoring	Tools	
•  CAD	
•  Ex:	Solidworks,	Fusion	360,	Revit	
•  M+E	
•  Ex:	Blender,	3ds	Max,	Maya	
•  ...
3D experience
…but content does not have to be…
• Pseudo	3D	(images)	
• True	3D	(models)	
• Example:	hTps://ironmanviewer....
Virtual Reality via WebVR
• Browsers	
• Devices
Virtual Reality WebVR compatible
Browsers
• 		
Source:	
hTp://createwebvr.com/
Virtual Reality WebVR compatible
Browsers
• 		 Source:	
hTps://webvr.rocks/
Virtual Reality
WebVR Devices
© 2017 Autodesk, Inc.
Virtual Reality - WebVR Devices
•  Google	Cardboard	
•  Google	Daydream	
•  Samsung	VR	Gear	
•  HTC	Vive	
•  Oculus	Ri[	
•...
WebVR Devices – Google Cardboard
• Make	it	yourself?	
• Find	a	free	one!
Virtual Reality - WebVR Devices
Cardboard - Promotional and/or Creative
WebVR Devices – Google Cardboard
• Device	needs	to		
•  support	WebGL	
•  have	proper	Sensors
WebVR Devices – Google Daydream
• Not	many	yet…	
•  hTps://vr.google.com/	
daydream/smartphonevr/phones/
Google Cardboard vs. Daydream
•  Hardware	and	So[ware	
•  Cardboard…	no	real	“current”	requirements	except	sensors	
•  Gyr...
WebVR Devices
•  Samsung	VR	–	by	Oculus	
•  Good	and	affordable	experience	
•  Limited	to	Samsung	hardware	(note	5,	s6,	s7,...
WebVR Devices
•  HTC	Vive	
•  Oculus	Ri[	
•  Playstaon	VR
WebVR Devices – Controllers?
•  Proprietary	
•  Gear	VR	
•  Playstaon	VR	
•  Generic	
•  xbox	One	
•  Others
How about a interesting demo?
• three.js:	hTp://graphics.wsj.com/3d-nasdaq/
JavaScript API
• Frameworks	for	coding	
• Authoring	Soluons
Frameworks – some examples
• three.js	
• A-Frame	
• React	VR	
• Autodesk	Forge	Viewer
three.js
•  Thorough	and	well	
documented	
•  open	source	
•  assets	can	be	directly	loaded/
imported	
•  potenally	a	lot	...
three.js
• Demo:	
hTps://borismus.github.io/
webvr-boilerplate/		
• Code	sample:	
•  Demo	of	boilerplate
A-Frame
•  A-Frame	is	a	web	framework	for		
building	virtual	reality	(VR)	experiences	
•  Originally	from	Mozilla	
•  open...
A-Frame
• Demo:	
•  hTps://ngokevin.github.io/kframe	
/scenes/aincra[/	
• Code	Sample:	
•  A-frame.html
React VR
•  Powered	by	Facebook		
•  What	VR	company	does	facebook	own?	
•  React	VR	is	now	open	source	
•  assets	can	be	...
React VR
• Easy	geqng	started:	
•  hTps://developer.oculus.com/webvr/	
• Demo:	
•  hTps://ironmanviewer.herokuapp.com/		
•...
Autodesk Forge Viewer
•  Uses	three.js,	so	can	mix	
•  subscripon	model	
•  assets	via	SVF	format	
•  potenally	small	amou...
Autodesk Forge Viewer
Autodesk Forge Viewer
Autodesk Forge Viewer
• Simple	viewer	instanaon	code	
• WebVR	enabled	through	a	viewer	“extension”
• Demo:		
•  www.vrok.it/v2	
• Code	Sample:	
•  hTps://github.com/JohnOnSo[ware/Forge-Viewer-
WebVR-Sample
Authoring Solutions
•  No	direct	coding	required	
•  Autodesk	Play:	hTps://play.autodesk.com		
•  Vizor:	hTps://vizor.io/	...
What about AR?
• WebAR?	
• Microso[	–	Just	use	Unity	
• ARkit	from	apple	
• ARCore	from	google
What is WebVR?
• 3D	experience	(but	content	does	not	have	to	be…)	
• Virtual	Reality	experiences	in	your		browser	
• JavaS...
Resources:
•  WebVR	Info:	hTps://webvr.info		
•  Create	WebVR:	hTps://createwebvr.com		
•  WebVR	Rocks:	hTps://webvr.rocks...
How to Use WebVR to Enhance the Web Experience
How to Use WebVR to Enhance the Web Experience
How to Use WebVR to Enhance the Web Experience
Upcoming SlideShare
Loading in …5
×

How to Use WebVR to Enhance the Web Experience

298 views

Published on

Presented at Web Unleashed 2017. More info at www.fitc.ca/webu

Presented by Kevin Vandecar, Autodesk

Overview

With different virtual reality (VR) devices in the market, the VR experience is getting more and more popular by consumers. WebVR brings the VR concept to the web by providing interfaces to VR hardware. This makes it much easier to build a VR experience with content delivered through a web browser. This topic will introduce the WebVR specification, and will show some interesting demos of how it can be used. There are several frameworks you can work with and even mix together. Kevin will discuss some different frameworks including Three.js, Autodesk Forge Viewer, and ReactVR. The talk will feature live demos, and the code behind the different examples.

Objective

Learn what WebVR is and how it could help your web experience.

Target Audience

Front-end developers who are interested in VR/AR experiences.

Assumed Audience Knowledge

Basic web dev skills

Five Things Audience Members Will Learn

What is WebVR
Introduction to a few WebVR frameworks
Different WebVR hardware experiences
Options to author/obtain content for WebVR experiences
Touch on AR possibilities

Published in: Technology
  • Does Penis Size REALLY Matter? The truth comes out... ➤➤ https://bit.ly/30G1ZO1
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

How to Use WebVR to Enhance the Web Experience

  1. 1. How to Use WebVR to Enhance the Web Experience Kevin Vandecar Disorganized Tinkerer + Autodesk Forge Developer Advocate FITC Web Unleashed 2017
  2. 2. Kevin Vandecar – Disorganized Tinkerer
  3. 3. What is WebVR? • 3D (but content does not have to be…) • Virtual Reality experiences from your browser • JavaScript API Spec: hTps://w3c.github.io/webvr/
  4. 4. Why WebVR? • a way to push VR to many devices • mobile phones + tablets! • even kids have a device… hTps://nearpod.com/
  5. 5. 3D experience …but content does not have to be… •  Stereo Images •  Ex: Cardboard Camera VR Photo Format •  Sample: file:///C:/work/GitHub/Forge/JohnOnSo[ware/IronmanViewer/ stac_assets/sky.jpg •  Panorama formats •  Ex: PTGui and Panotools •  Spherical images
  6. 6. 3D experience •  Authoring Tools •  CAD •  Ex: Solidworks, Fusion 360, Revit •  M+E •  Ex: Blender, 3ds Max, Maya •  Online •  Turbo Squid •  Creave Market
  7. 7. 3D experience …but content does not have to be… • Pseudo 3D (images) • True 3D (models) • Example: hTps://ironmanviewer.herokuapp.com/
  8. 8. Virtual Reality via WebVR • Browsers • Devices
  9. 9. Virtual Reality WebVR compatible Browsers •  Source: hTp://createwebvr.com/
  10. 10. Virtual Reality WebVR compatible Browsers •  Source: hTps://webvr.rocks/
  11. 11. Virtual Reality WebVR Devices
  12. 12. © 2017 Autodesk, Inc.
  13. 13. Virtual Reality - WebVR Devices •  Google Cardboard •  Google Daydream •  Samsung VR Gear •  HTC Vive •  Oculus Ri[ •  Others: Windows AR/MR, PlayStaon VR
  14. 14. WebVR Devices – Google Cardboard • Make it yourself? • Find a free one!
  15. 15. Virtual Reality - WebVR Devices Cardboard - Promotional and/or Creative
  16. 16. WebVR Devices – Google Cardboard • Device needs to •  support WebGL •  have proper Sensors
  17. 17. WebVR Devices – Google Daydream • Not many yet… •  hTps://vr.google.com/ daydream/smartphonevr/phones/
  18. 18. Google Cardboard vs. Daydream •  Hardware and So[ware •  Cardboard… no real “current” requirements except sensors •  Gyroscope, accelerometer, compass •  Android 4.1, iOS 8, Windows Phone 10. •  Daydream… •  More specific: hTps://vr.google.com/daydream/smartphonevr/phones/ •  Material •  Cardboard… well, made of cardboard •  Daydream… beTer material, with cloth that can be removed/washed •  Communicaon •  Cardboard… a washer/magnet •  Daydream… NFC •  Controllers •  Cardboard… a washer/magnet •  Daydream… A specially deigned controller
  19. 19. WebVR Devices •  Samsung VR – by Oculus •  Good and affordable experience •  Limited to Samsung hardware (note 5, s6, s7, s8) •  Typical WebVR requirement is to use Samsung Browser – but doesn’t work generically… •  Oculus Store provides apps •  hTps://www.oculus.com/gear-vr/
  20. 20. WebVR Devices •  HTC Vive •  Oculus Ri[ •  Playstaon VR
  21. 21. WebVR Devices – Controllers? •  Proprietary •  Gear VR •  Playstaon VR •  Generic •  xbox One •  Others
  22. 22. How about a interesting demo? • three.js: hTp://graphics.wsj.com/3d-nasdaq/
  23. 23. JavaScript API • Frameworks for coding • Authoring Soluons
  24. 24. Frameworks – some examples • three.js • A-Frame • React VR • Autodesk Forge Viewer
  25. 25. three.js •  Thorough and well documented •  open source •  assets can be directly loaded/ imported •  potenally a lot of 3d graphics coding!
  26. 26. three.js • Demo: hTps://borismus.github.io/ webvr-boilerplate/ • Code sample: •  Demo of boilerplate
  27. 27. A-Frame •  A-Frame is a web framework for building virtual reality (VR) experiences •  Originally from Mozilla •  open source •  assets can be directly loaded/imported •  based on top of HTML
  28. 28. A-Frame • Demo: •  hTps://ngokevin.github.io/kframe /scenes/aincra[/ • Code Sample: •  A-frame.html
  29. 29. React VR •  Powered by Facebook •  What VR company does facebook own? •  React VR is now open source •  assets can be directly loaded/imported •  Natural plaporm: •  if you know React already •  want to mix 2D 360 content with 3D content
  30. 30. React VR • Easy geqng started: •  hTps://developer.oculus.com/webvr/ • Demo: •  hTps://ironmanviewer.herokuapp.com/ • Code Sample: •  hTps://github.com/JohnOnSo[ware/SolarSystemWebVR
  31. 31. Autodesk Forge Viewer •  Uses three.js, so can mix •  subscripon model •  assets via SVF format •  potenally small amount of code •  Many 3D navigaon, viewing and data aspects provided •  Meta data included •  Handles very large models/data sets
  32. 32. Autodesk Forge Viewer
  33. 33. Autodesk Forge Viewer
  34. 34. Autodesk Forge Viewer • Simple viewer instanaon code • WebVR enabled through a viewer “extension”
  35. 35. • Demo: •  www.vrok.it/v2 • Code Sample: •  hTps://github.com/JohnOnSo[ware/Forge-Viewer- WebVR-Sample
  36. 36. Authoring Solutions •  No direct coding required •  Autodesk Play: hTps://play.autodesk.com •  Vizor: hTps://vizor.io/ •  Insta VR: hTp://www.instavr.co/ •  AEC market specific: •  Enscape: hTps://enscape3d.com/ •  Revit Live: hTp://www.autodesk.com/live
  37. 37. What about AR? • WebAR? • Microso[ – Just use Unity • ARkit from apple • ARCore from google
  38. 38. What is WebVR? • 3D experience (but content does not have to be…) • Virtual Reality experiences in your browser • JavaScript API
  39. 39. Resources: •  WebVR Info: hTps://webvr.info •  Create WebVR: hTps://createwebvr.com •  WebVR Rocks: hTps://webvr.rocks •  ThreeJS: hTps://threejs.org •  A-Frame: hTps://aframe.io •  React VR: hTps://facebook.github.io/react-vr/ •  Autodesk Forge Viewer: hTps://developer.autodesk.com •  WebVR Slack @hTps://webvr.slack.com

×