SlideShare a Scribd company logo

Ferguson VR Hackathon - May 6, 2017

Presentation Slides and A-Frame Workshop See git repo for demo files: https://github.com/rdub80/Ferguson-VR-Hackathon

1 of 36
Download to read offline
Introduc)on to WebVR
VR Setup*
*
Illustra*ons from Mozilla
VR Experiences
New considera-ons for VR app development
Focus on User Experience
- Stereoscopic vision & interpupillary distance (IPD)
- Head tracking & degrees of freedom (DoF)
- Cone of focus & field of view (FOV)
- 3D posi-onal audio
- Latency & frame rate (frames per second / FPS)
Focus on User Comfort
- Eye strain
- Mo-on sickness
Degrees of Freedom, Stereoscopic Vision & Interpupillary Distance*
*
Illustra*ons from Mozilla
Na#ve VR Devices (PC & Console)
HTC Vive (room-scale VR)
Oculus Ri6
Playsta:on VR
Fove
Razer OSVR
Mobile VR Devices (Smartphone)
Samsung Gear VR
Daydream
Cardboard
Hundreds of third-party headsets
VR Programming
• Unreal Engine (C++)
• Unity (C#)
• Source Engine (C++)
• WebVR (JS)
VR Distribu+on
• SteamVR
• Google Play
• Oculus Store
• The Ri8 Arcade
• V "open alterna>ve" to SteamVR
Why WebVR?
• No app store ecosystem, distribu3on via internet
• Mobile & desktop automa3cally supported
• Uses current tools and libraries for JS
• Easy switch between VR & non-VR mode
• Interfacing with hardware through the browser
Progressive Enhancement by Arturo Paracuellos
Virtual Reality on the Web
A Retrospec+ve 1/2
• 1994 VRML - first a0empt to create an internet-based 3D
language. (Mark Pesce presented the Labyrinth demo he
developed with Tony Parisi and Peter Kennard.)
• VRML2 (1997) - added many features (animaMon) and later was
succeeded by X3D
Problem of VRML: plugin-based technology that only came
preinstalled on IE
Virtual Reality on the Web
A Retrospec+ve 2/2
• 2003 OpenGL ES - cross-language and mul9-pla:orm 3D
graphics API.
Hardware accelerated rendering of 3D objects.
• WebGL 1.0 introduced by Mozilla based on OpenGL ES uses
DOM (canvas element)
• X3D introduced X3DOM
Most popular WebGL
Engines today
• Three.js by Ricardo Cabello in 2010
• Babylon.js
• PlayCanvas.js
• Goo Engine
• Scene.js
• Turbulenz
Stackoverflow score growth over 0me by tag comparison
WebGL Framework Comparison
What is WebVR?
WebVR is a experimental Javascript API that
provides interfaces to VR hardware to allow
developers to build compelling, comfortable
VR experiences on the web.
WebVR
WebVR v1.1 Editor’s Dra,, 04/05/17
- deviceOrienta-on
- VRDisplay object handles almost everything
- available on mul-ple pla<orms
..soon..
WebVR (2.0) Editor’s Dra,, 04/17/17
- not backwards compa-ble
- device support
- introduc-on of VRDevice & VRSession to replace VRDisplay
- read Explainer doc!
Goals of WebVR
• Detect available virtual reality devices.
• Query the device’s capabili6es.
• Poll the device’s posi6on and orienta6on.
• Display imagery on the device at the appropriate frame rate.
Non-goals of WebVR
• Define how a virtual reality browser would work.
• Take full advantage of augmented reality devices.
• Build “The Metaverse.”
Check out h*ps://webvr.rocks/ for support updates
WebVR Frameworks
• A-Frame by Mozilla
• ReactVR by Facebook
• ForgeJS by GoPro, Inc., great for 360 photo & video content
• Primrose great for collaboraIve VR web apps
• Janus VR VR browser/editor
• Vizor in-browser VR development, SocialVR
• GLAM (GL And Markup) declaraIve language for 3D web
Demo Comparison A & B
Three.js and WebVR
comparison with
A-Frame
A-Frame
• a 3DML (3D markup language) like X3Dom and GLAM
• DOM-based En>ty-Component System => declara>ve &
extensible (similar to Unity/UE4/PlayCanvas)
The A-Frame Stack:
A-Frame
En#ty-Component System
A-Frame
• En$$es are HTML elements (i.e., <a-entity>)
• Components are HTML a9ributes, set on the en$ty
<body>
<a-scene>
<a-entity geometry="primitive:box" material="color:#c00">
</a-entity>
</a-scene>
</body>
En#ty
• general purpose objects (e.g. create a player, ball, or field)
• they inherently have a posi;on, rota;on and scale in a scene
<a-entity
geometry="primitive:box;
width:0.2;
height:0.3;
depth:0.5;"
material="color:#c00"
position="0 0 -1"
rotation="0 30 30"
material="color:#c00">
</a-entity>
Primi%ves (concise, seman%c building blocks)
<a-entity geometry="primitive:box;
width:0.2;
height:0.3;
depth:0.5;"
material="color:#c00">
</a-entity>
<a-box width="0.2"
height="0.3"
depth="0.5"
material="color:#c00">
</a-box>
Mixins
<a-mixin id="box"
geometry="primitive:box;
width:0.2;
height:0.3;
depth:0.5;"
material="color:#c00">
</a-mixin>
<a-entity mixin="box">
</a-entity>
Custom Components
AFRAME.registerComponent('foo', {
schema: {
bar: {type: 'number'},
baz: {type: 'string'}
},
init: function () {
// Do something when component is plugged in.
},
update: function () {
// Do something when component's data is updated.
}
});
Gaze-Based Control
Gaze-Based Cursor Interac2ons
AFRAME.registerComponent('clickable', {
init: function () {
var el = this.el;
el.addEventListener('mouseenter', function () {
el.setAttribute('color', '#f00');
});
el.addEventListener('mouseleave', function () {
el.setAttribute('color', '#fff');
});
el.addEventListener('click', function () {
el.setAttribute('material', 'src' , 'assets/football.png');
});
}
});
<a-sphere clickable src="assets/basketball.png" radius="0.5" color="#fff"></a-sphere>
<a-camera><a-cursor></a-cursor></a-camera>
A-Frame Component Registry
h"ps://aframe.io/docs/0.5.0/
A-Frame Inspector
[control]+[option]+[i]
Create responsibly!
Resources
* A-Frame Slack
* A-Frame Component Registry
* mozvr.com
* VR Gets Real with WebVR
* WebVR API
* The UX of VR
Get In Touch
@rolanddubois
rolanddubois.com
It’s code *me! Here’s what we’re building:
• github.com/rdub80/Ferguson-VR-Hackathon
• XAMPP, MAMP or $ python -m SimpleHTTPServer
• JSBin

Recommended

Getting Started with Web VR
Getting Started with Web VR Getting Started with Web VR
Getting Started with Web VR Saurabh Badhwar
 
【Unite 2017 Tokyo】「日本列島VR」および「HoleLenz」の開発事例ご紹介
【Unite 2017 Tokyo】「日本列島VR」および「HoleLenz」の開発事例ご紹介【Unite 2017 Tokyo】「日本列島VR」および「HoleLenz」の開発事例ご紹介
【Unite 2017 Tokyo】「日本列島VR」および「HoleLenz」の開発事例ご紹介Unity Technologies Japan K.K.
 
Introduction to The VR Web
Introduction to The VR WebIntroduction to The VR Web
Introduction to The VR WebLiv Erickson
 
【Unite 2017 Tokyo】最適化をする前に覚えておきたい技術
【Unite 2017 Tokyo】最適化をする前に覚えておきたい技術【Unite 2017 Tokyo】最適化をする前に覚えておきたい技術
【Unite 2017 Tokyo】最適化をする前に覚えておきたい技術Unity Technologies Japan K.K.
 
Phaser Workshop Internet World 2014
Phaser Workshop Internet World 2014Phaser Workshop Internet World 2014
Phaser Workshop Internet World 2014Alvinsight
 
Introduction to A-Frame
Introduction to A-FrameIntroduction to A-Frame
Introduction to A-FrameDaosheng Mu
 
【Unite 2017 Tokyo】インスタンシングを用いた美麗なグラフィックの実現方法
【Unite 2017 Tokyo】インスタンシングを用いた美麗なグラフィックの実現方法【Unite 2017 Tokyo】インスタンシングを用いた美麗なグラフィックの実現方法
【Unite 2017 Tokyo】インスタンシングを用いた美麗なグラフィックの実現方法Unite2017Tokyo
 

More Related Content

What's hot

Making HTML5 Games with Phaser
Making HTML5 Games with PhaserMaking HTML5 Games with Phaser
Making HTML5 Games with PhaserIndieOutpost
 
【Unite 2017 Tokyo】Unity UI最適化ガイド 〜ベストプラクティスと新機能
【Unite 2017 Tokyo】Unity UI最適化ガイド 〜ベストプラクティスと新機能【Unite 2017 Tokyo】Unity UI最適化ガイド 〜ベストプラクティスと新機能
【Unite 2017 Tokyo】Unity UI最適化ガイド 〜ベストプラクティスと新機能Unity Technologies Japan K.K.
 
Scotland JS 2016 Keynote: The VR Web and the Future of the Browser
Scotland JS 2016 Keynote: The VR Web and the Future of the BrowserScotland JS 2016 Keynote: The VR Web and the Future of the Browser
Scotland JS 2016 Keynote: The VR Web and the Future of the BrowserLiv Erickson
 
Casper Fabricius (Cimmerse): WebVR with A-Frame, React and Redux
Casper Fabricius (Cimmerse): WebVR with A-Frame, React and ReduxCasper Fabricius (Cimmerse): WebVR with A-Frame, React and Redux
Casper Fabricius (Cimmerse): WebVR with A-Frame, React and ReduxAugmentedWorldExpo
 
The next frontier: WebGL and WebVR
The next frontier: WebGL and WebVRThe next frontier: WebGL and WebVR
The next frontier: WebGL and WebVRCodemotion
 
【Unite 2017 Tokyo】みんなのスマートフォンでここまでできる〜Kudan ARを使ったモバイルAR/MRの世界
【Unite 2017 Tokyo】みんなのスマートフォンでここまでできる〜Kudan ARを使ったモバイルAR/MRの世界【Unite 2017 Tokyo】みんなのスマートフォンでここまでできる〜Kudan ARを使ったモバイルAR/MRの世界
【Unite 2017 Tokyo】みんなのスマートフォンでここまでできる〜Kudan ARを使ったモバイルAR/MRの世界Unity Technologies Japan K.K.
 
【Unite 2017 Tokyo】Unity5.6での2D新機能解説
【Unite 2017 Tokyo】Unity5.6での2D新機能解説【Unite 2017 Tokyo】Unity5.6での2D新機能解説
【Unite 2017 Tokyo】Unity5.6での2D新機能解説Unity Technologies Japan K.K.
 
Building Multiplayer Games (w/ Unity)
Building Multiplayer Games (w/ Unity)Building Multiplayer Games (w/ Unity)
Building Multiplayer Games (w/ Unity)Noam Gat
 
Sergey Gonchar - Fast rendering with Starling
Sergey Gonchar - Fast rendering with StarlingSergey Gonchar - Fast rendering with Starling
Sergey Gonchar - Fast rendering with StarlingFlash Conference
 
Practical guide to optimization in Unity
Practical guide to optimization in UnityPractical guide to optimization in Unity
Practical guide to optimization in UnityDevGAMM Conference
 
Introduction to WebVR Autodesk Forge 2016
Introduction to WebVR Autodesk Forge 2016Introduction to WebVR Autodesk Forge 2016
Introduction to WebVR Autodesk Forge 2016Tony Parisi
 
【Unite 2017 Tokyo】Anima2Dについて語るで!2Dアニメーションの未来
【Unite 2017 Tokyo】Anima2Dについて語るで!2Dアニメーションの未来【Unite 2017 Tokyo】Anima2Dについて語るで!2Dアニメーションの未来
【Unite 2017 Tokyo】Anima2Dについて語るで!2Dアニメーションの未来Unite2017Tokyo
 
Breathing Life in Data Visualizations with Axure
Breathing Life in Data Visualizations with AxureBreathing Life in Data Visualizations with Axure
Breathing Life in Data Visualizations with AxureSvetlin Denkov
 
WebVR, not just Holograms in the web but powerful platform
WebVR, not just Holograms in the web but powerful platformWebVR, not just Holograms in the web but powerful platform
WebVR, not just Holograms in the web but powerful platformWindows Developer
 
HTML5 Mobile Game Development Workshop - Module 2 - HTML5 Developer Conferenc...
HTML5 Mobile Game Development Workshop - Module 2 - HTML5 Developer Conferenc...HTML5 Mobile Game Development Workshop - Module 2 - HTML5 Developer Conferenc...
HTML5 Mobile Game Development Workshop - Module 2 - HTML5 Developer Conferenc...Pablo Farías Navarro
 
My 10 days with Phaser.js - WarsawJS Meetup #13
My 10 days with Phaser.js - WarsawJS Meetup #13My 10 days with Phaser.js - WarsawJS Meetup #13
My 10 days with Phaser.js - WarsawJS Meetup #13Piotr Kowalski
 
Low Latency Networking on IOS and Android over Cloud by Oguz Bastemur
Low Latency Networking on IOS and Android over Cloud by Oguz BastemurLow Latency Networking on IOS and Android over Cloud by Oguz Bastemur
Low Latency Networking on IOS and Android over Cloud by Oguz BastemurCodemotion
 
Cross Game Dev with Corona
Cross Game Dev with CoronaCross Game Dev with Corona
Cross Game Dev with CoronaShawn Grimes
 

What's hot (19)

Making HTML5 Games with Phaser
Making HTML5 Games with PhaserMaking HTML5 Games with Phaser
Making HTML5 Games with Phaser
 
【Unite 2017 Tokyo】Unity UI最適化ガイド 〜ベストプラクティスと新機能
【Unite 2017 Tokyo】Unity UI最適化ガイド 〜ベストプラクティスと新機能【Unite 2017 Tokyo】Unity UI最適化ガイド 〜ベストプラクティスと新機能
【Unite 2017 Tokyo】Unity UI最適化ガイド 〜ベストプラクティスと新機能
 
Scotland JS 2016 Keynote: The VR Web and the Future of the Browser
Scotland JS 2016 Keynote: The VR Web and the Future of the BrowserScotland JS 2016 Keynote: The VR Web and the Future of the Browser
Scotland JS 2016 Keynote: The VR Web and the Future of the Browser
 
Casper Fabricius (Cimmerse): WebVR with A-Frame, React and Redux
Casper Fabricius (Cimmerse): WebVR with A-Frame, React and ReduxCasper Fabricius (Cimmerse): WebVR with A-Frame, React and Redux
Casper Fabricius (Cimmerse): WebVR with A-Frame, React and Redux
 
The next frontier: WebGL and WebVR
The next frontier: WebGL and WebVRThe next frontier: WebGL and WebVR
The next frontier: WebGL and WebVR
 
【Unite 2017 Tokyo】みんなのスマートフォンでここまでできる〜Kudan ARを使ったモバイルAR/MRの世界
【Unite 2017 Tokyo】みんなのスマートフォンでここまでできる〜Kudan ARを使ったモバイルAR/MRの世界【Unite 2017 Tokyo】みんなのスマートフォンでここまでできる〜Kudan ARを使ったモバイルAR/MRの世界
【Unite 2017 Tokyo】みんなのスマートフォンでここまでできる〜Kudan ARを使ったモバイルAR/MRの世界
 
【Unite 2017 Tokyo】Unity5.6での2D新機能解説
【Unite 2017 Tokyo】Unity5.6での2D新機能解説【Unite 2017 Tokyo】Unity5.6での2D新機能解説
【Unite 2017 Tokyo】Unity5.6での2D新機能解説
 
Building Multiplayer Games (w/ Unity)
Building Multiplayer Games (w/ Unity)Building Multiplayer Games (w/ Unity)
Building Multiplayer Games (w/ Unity)
 
Sergey Gonchar - Fast rendering with Starling
Sergey Gonchar - Fast rendering with StarlingSergey Gonchar - Fast rendering with Starling
Sergey Gonchar - Fast rendering with Starling
 
Practical guide to optimization in Unity
Practical guide to optimization in UnityPractical guide to optimization in Unity
Practical guide to optimization in Unity
 
Introduction to WebVR Autodesk Forge 2016
Introduction to WebVR Autodesk Forge 2016Introduction to WebVR Autodesk Forge 2016
Introduction to WebVR Autodesk Forge 2016
 
【Unite 2017 Tokyo】Anima2Dについて語るで!2Dアニメーションの未来
【Unite 2017 Tokyo】Anima2Dについて語るで!2Dアニメーションの未来【Unite 2017 Tokyo】Anima2Dについて語るで!2Dアニメーションの未来
【Unite 2017 Tokyo】Anima2Dについて語るで!2Dアニメーションの未来
 
Breathing Life in Data Visualizations with Axure
Breathing Life in Data Visualizations with AxureBreathing Life in Data Visualizations with Axure
Breathing Life in Data Visualizations with Axure
 
WebVR, not just Holograms in the web but powerful platform
WebVR, not just Holograms in the web but powerful platformWebVR, not just Holograms in the web but powerful platform
WebVR, not just Holograms in the web but powerful platform
 
Introduction to Phaser.js
Introduction to Phaser.jsIntroduction to Phaser.js
Introduction to Phaser.js
 
HTML5 Mobile Game Development Workshop - Module 2 - HTML5 Developer Conferenc...
HTML5 Mobile Game Development Workshop - Module 2 - HTML5 Developer Conferenc...HTML5 Mobile Game Development Workshop - Module 2 - HTML5 Developer Conferenc...
HTML5 Mobile Game Development Workshop - Module 2 - HTML5 Developer Conferenc...
 
My 10 days with Phaser.js - WarsawJS Meetup #13
My 10 days with Phaser.js - WarsawJS Meetup #13My 10 days with Phaser.js - WarsawJS Meetup #13
My 10 days with Phaser.js - WarsawJS Meetup #13
 
Low Latency Networking on IOS and Android over Cloud by Oguz Bastemur
Low Latency Networking on IOS and Android over Cloud by Oguz BastemurLow Latency Networking on IOS and Android over Cloud by Oguz Bastemur
Low Latency Networking on IOS and Android over Cloud by Oguz Bastemur
 
Cross Game Dev with Corona
Cross Game Dev with CoronaCross Game Dev with Corona
Cross Game Dev with Corona
 

Similar to Ferguson VR Hackathon - May 6, 2017

Build (Web)VR with A-Frame (COSCUP 2019 Taipei)
Build (Web)VR with A-Frame (COSCUP 2019 Taipei)Build (Web)VR with A-Frame (COSCUP 2019 Taipei)
Build (Web)VR with A-Frame (COSCUP 2019 Taipei)Robert 'Bob' Reyes
 
Building AR and VR Experiences for Web Apps with JavaScript
Building AR and VR Experiences for Web Apps with JavaScriptBuilding AR and VR Experiences for Web Apps with JavaScript
Building AR and VR Experiences for Web Apps with JavaScriptFITC
 
Foundations of the Immersive Web
Foundations of the Immersive WebFoundations of the Immersive Web
Foundations of the Immersive WebTony Parisi
 
Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!
Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!
Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!FITC
 
Introduction to WebGL - 1st WebGL meetup Amsterdam
Introduction to WebGL - 1st WebGL meetup AmsterdamIntroduction to WebGL - 1st WebGL meetup Amsterdam
Introduction to WebGL - 1st WebGL meetup AmsterdamThreeDee Media
 
sdc-2016-gvrf-and-io_public
sdc-2016-gvrf-and-io_publicsdc-2016-gvrf-and-io_public
sdc-2016-gvrf-and-io_publicRick Lau
 
Leaving Flatland: Getting Started with WebGL- SXSW 2012
Leaving Flatland: Getting Started with WebGL- SXSW 2012Leaving Flatland: Getting Started with WebGL- SXSW 2012
Leaving Flatland: Getting Started with WebGL- SXSW 2012philogb
 
Prototyping in aframe
Prototyping in aframePrototyping in aframe
Prototyping in aframeKumar Ahir
 
Windows Phone 7 and Windows Azure – A Match Made in the Cloud
Windows Phone 7 and Windows Azure – A Match Made in the CloudWindows Phone 7 and Windows Azure – A Match Made in the Cloud
Windows Phone 7 and Windows Azure – A Match Made in the CloudMichael Collier
 
Byte Conf React Native 2018
Byte Conf React Native 2018Byte Conf React Native 2018
Byte Conf React Native 2018Pulkit Kakkar
 
移动端Web app开发
移动端Web app开发移动端Web app开发
移动端Web app开发Zhang Xiaoxue
 
Webgl 기술동향 2011.8
Webgl 기술동향 2011.8Webgl 기술동향 2011.8
Webgl 기술동향 2011.8Seung Joon Choi
 
Sx sw speaker proposal slides
Sx sw speaker proposal slidesSx sw speaker proposal slides
Sx sw speaker proposal slidesMitch Williams
 
Building VR Applications For Google Cardboard
Building VR Applications For Google CardboardBuilding VR Applications For Google Cardboard
Building VR Applications For Google CardboardMark Billinghurst
 
HTML5 Intoduction for Web Developers
HTML5 Intoduction for Web DevelopersHTML5 Intoduction for Web Developers
HTML5 Intoduction for Web DevelopersSascha Corti
 
Mixed reality for Windows 10
Mixed reality for Windows 10Mixed reality for Windows 10
Mixed reality for Windows 10Jiri Danihelka
 
WordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebWordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebGeorge Kanellopoulos
 

Similar to Ferguson VR Hackathon - May 6, 2017 (20)

Build (Web)VR with A-Frame (COSCUP 2019 Taipei)
Build (Web)VR with A-Frame (COSCUP 2019 Taipei)Build (Web)VR with A-Frame (COSCUP 2019 Taipei)
Build (Web)VR with A-Frame (COSCUP 2019 Taipei)
 
Building AR and VR Experiences for Web Apps with JavaScript
Building AR and VR Experiences for Web Apps with JavaScriptBuilding AR and VR Experiences for Web Apps with JavaScript
Building AR and VR Experiences for Web Apps with JavaScript
 
Foundations of the Immersive Web
Foundations of the Immersive WebFoundations of the Immersive Web
Foundations of the Immersive Web
 
Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!
Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!
Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!
 
Immersed in the Web
Immersed in the WebImmersed in the Web
Immersed in the Web
 
Introduction to WebGL - 1st WebGL meetup Amsterdam
Introduction to WebGL - 1st WebGL meetup AmsterdamIntroduction to WebGL - 1st WebGL meetup Amsterdam
Introduction to WebGL - 1st WebGL meetup Amsterdam
 
sdc-2016-gvrf-and-io_public
sdc-2016-gvrf-and-io_publicsdc-2016-gvrf-and-io_public
sdc-2016-gvrf-and-io_public
 
Leaving Flatland: Getting Started with WebGL- SXSW 2012
Leaving Flatland: Getting Started with WebGL- SXSW 2012Leaving Flatland: Getting Started with WebGL- SXSW 2012
Leaving Flatland: Getting Started with WebGL- SXSW 2012
 
Prototyping in aframe
Prototyping in aframePrototyping in aframe
Prototyping in aframe
 
Windows Phone 7 and Windows Azure – A Match Made in the Cloud
Windows Phone 7 and Windows Azure – A Match Made in the CloudWindows Phone 7 and Windows Azure – A Match Made in the Cloud
Windows Phone 7 and Windows Azure – A Match Made in the Cloud
 
Byte Conf React Native 2018
Byte Conf React Native 2018Byte Conf React Native 2018
Byte Conf React Native 2018
 
The Enterprise Dilemma: Native vs. Web
The Enterprise Dilemma: Native vs. WebThe Enterprise Dilemma: Native vs. Web
The Enterprise Dilemma: Native vs. Web
 
Immersive Web
Immersive WebImmersive Web
Immersive Web
 
移动端Web app开发
移动端Web app开发移动端Web app开发
移动端Web app开发
 
Webgl 기술동향 2011.8
Webgl 기술동향 2011.8Webgl 기술동향 2011.8
Webgl 기술동향 2011.8
 
Sx sw speaker proposal slides
Sx sw speaker proposal slidesSx sw speaker proposal slides
Sx sw speaker proposal slides
 
Building VR Applications For Google Cardboard
Building VR Applications For Google CardboardBuilding VR Applications For Google Cardboard
Building VR Applications For Google Cardboard
 
HTML5 Intoduction for Web Developers
HTML5 Intoduction for Web DevelopersHTML5 Intoduction for Web Developers
HTML5 Intoduction for Web Developers
 
Mixed reality for Windows 10
Mixed reality for Windows 10Mixed reality for Windows 10
Mixed reality for Windows 10
 
WordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebWordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWeb
 

Recently uploaded

Vazquez_Gabriel_SPCASTNG_PB1_2024-02.pdf
Vazquez_Gabriel_SPCASTNG_PB1_2024-02.pdfVazquez_Gabriel_SPCASTNG_PB1_2024-02.pdf
Vazquez_Gabriel_SPCASTNG_PB1_2024-02.pdfgabev3104
 
Relationships in Teaching By Dr. Cherinet Aytenfsu Weldearegay (2023).pdf
Relationships in Teaching By Dr. Cherinet Aytenfsu Weldearegay (2023).pdfRelationships in Teaching By Dr. Cherinet Aytenfsu Weldearegay (2023).pdf
Relationships in Teaching By Dr. Cherinet Aytenfsu Weldearegay (2023).pdfDr. Cherinet Aytenfsu Weldearegay
 
Issues affecting LGBT as they grow older.pptx
Issues affecting LGBT as they grow older.pptxIssues affecting LGBT as they grow older.pptx
Issues affecting LGBT as they grow older.pptxbill846304
 
Monthly HSE Report March for overall HSE
Monthly HSE Report March for overall HSEMonthly HSE Report March for overall HSE
Monthly HSE Report March for overall HSEOlgaOliveaJohn
 
TheSimpsons_Fandom_Assignment_4.5pc.pptx
TheSimpsons_Fandom_Assignment_4.5pc.pptxTheSimpsons_Fandom_Assignment_4.5pc.pptx
TheSimpsons_Fandom_Assignment_4.5pc.pptxStevenLuker3
 
Reflection Vs Technical Rationality - By Dr. Cherinet Aytenfsu Weldearegay (2...
Reflection Vs Technical Rationality - By Dr. Cherinet Aytenfsu Weldearegay (2...Reflection Vs Technical Rationality - By Dr. Cherinet Aytenfsu Weldearegay (2...
Reflection Vs Technical Rationality - By Dr. Cherinet Aytenfsu Weldearegay (2...Dr. Cherinet Aytenfsu Weldearegay
 
Exploring Wisdom-Based Leadership.pptx
Exploring Wisdom-Based Leadership.pptxExploring Wisdom-Based Leadership.pptx
Exploring Wisdom-Based Leadership.pptxAkash Das
 
Garcia_RobertDaniel_SPCSTA_PB1_2024-02.pptx
Garcia_RobertDaniel_SPCSTA_PB1_2024-02.pptxGarcia_RobertDaniel_SPCSTA_PB1_2024-02.pptx
Garcia_RobertDaniel_SPCSTA_PB1_2024-02.pptx0461620
 
Freeman_Abigail Personal Brand Exploration
Freeman_Abigail Personal Brand ExplorationFreeman_Abigail Personal Brand Exploration
Freeman_Abigail Personal Brand Explorationabbytoliver
 

Recently uploaded (10)

Vazquez_Gabriel_SPCASTNG_PB1_2024-02.pdf
Vazquez_Gabriel_SPCASTNG_PB1_2024-02.pdfVazquez_Gabriel_SPCASTNG_PB1_2024-02.pdf
Vazquez_Gabriel_SPCASTNG_PB1_2024-02.pdf
 
Relationships in Teaching By Dr. Cherinet Aytenfsu Weldearegay (2023).pdf
Relationships in Teaching By Dr. Cherinet Aytenfsu Weldearegay (2023).pdfRelationships in Teaching By Dr. Cherinet Aytenfsu Weldearegay (2023).pdf
Relationships in Teaching By Dr. Cherinet Aytenfsu Weldearegay (2023).pdf
 
Tethex Cards - Crypto VISA Card - Invest 2 ENGLISH
Tethex Cards - Crypto VISA Card - Invest 2 ENGLISHTethex Cards - Crypto VISA Card - Invest 2 ENGLISH
Tethex Cards - Crypto VISA Card - Invest 2 ENGLISH
 
Issues affecting LGBT as they grow older.pptx
Issues affecting LGBT as they grow older.pptxIssues affecting LGBT as they grow older.pptx
Issues affecting LGBT as they grow older.pptx
 
Monthly HSE Report March for overall HSE
Monthly HSE Report March for overall HSEMonthly HSE Report March for overall HSE
Monthly HSE Report March for overall HSE
 
TheSimpsons_Fandom_Assignment_4.5pc.pptx
TheSimpsons_Fandom_Assignment_4.5pc.pptxTheSimpsons_Fandom_Assignment_4.5pc.pptx
TheSimpsons_Fandom_Assignment_4.5pc.pptx
 
Reflection Vs Technical Rationality - By Dr. Cherinet Aytenfsu Weldearegay (2...
Reflection Vs Technical Rationality - By Dr. Cherinet Aytenfsu Weldearegay (2...Reflection Vs Technical Rationality - By Dr. Cherinet Aytenfsu Weldearegay (2...
Reflection Vs Technical Rationality - By Dr. Cherinet Aytenfsu Weldearegay (2...
 
Exploring Wisdom-Based Leadership.pptx
Exploring Wisdom-Based Leadership.pptxExploring Wisdom-Based Leadership.pptx
Exploring Wisdom-Based Leadership.pptx
 
Garcia_RobertDaniel_SPCSTA_PB1_2024-02.pptx
Garcia_RobertDaniel_SPCSTA_PB1_2024-02.pptxGarcia_RobertDaniel_SPCSTA_PB1_2024-02.pptx
Garcia_RobertDaniel_SPCSTA_PB1_2024-02.pptx
 
Freeman_Abigail Personal Brand Exploration
Freeman_Abigail Personal Brand ExplorationFreeman_Abigail Personal Brand Exploration
Freeman_Abigail Personal Brand Exploration
 

Ferguson VR Hackathon - May 6, 2017

  • 3. VR Experiences New considera-ons for VR app development Focus on User Experience - Stereoscopic vision & interpupillary distance (IPD) - Head tracking & degrees of freedom (DoF) - Cone of focus & field of view (FOV) - 3D posi-onal audio - Latency & frame rate (frames per second / FPS) Focus on User Comfort - Eye strain - Mo-on sickness
  • 4. Degrees of Freedom, Stereoscopic Vision & Interpupillary Distance* * Illustra*ons from Mozilla
  • 5. Na#ve VR Devices (PC & Console) HTC Vive (room-scale VR) Oculus Ri6 Playsta:on VR Fove Razer OSVR
  • 6. Mobile VR Devices (Smartphone) Samsung Gear VR Daydream Cardboard Hundreds of third-party headsets
  • 7. VR Programming • Unreal Engine (C++) • Unity (C#) • Source Engine (C++) • WebVR (JS)
  • 8. VR Distribu+on • SteamVR • Google Play • Oculus Store • The Ri8 Arcade • V "open alterna>ve" to SteamVR
  • 9. Why WebVR? • No app store ecosystem, distribu3on via internet • Mobile & desktop automa3cally supported • Uses current tools and libraries for JS • Easy switch between VR & non-VR mode • Interfacing with hardware through the browser
  • 10. Progressive Enhancement by Arturo Paracuellos
  • 11. Virtual Reality on the Web A Retrospec+ve 1/2 • 1994 VRML - first a0empt to create an internet-based 3D language. (Mark Pesce presented the Labyrinth demo he developed with Tony Parisi and Peter Kennard.) • VRML2 (1997) - added many features (animaMon) and later was succeeded by X3D Problem of VRML: plugin-based technology that only came preinstalled on IE
  • 12. Virtual Reality on the Web A Retrospec+ve 2/2 • 2003 OpenGL ES - cross-language and mul9-pla:orm 3D graphics API. Hardware accelerated rendering of 3D objects. • WebGL 1.0 introduced by Mozilla based on OpenGL ES uses DOM (canvas element) • X3D introduced X3DOM
  • 13. Most popular WebGL Engines today • Three.js by Ricardo Cabello in 2010 • Babylon.js • PlayCanvas.js • Goo Engine • Scene.js • Turbulenz
  • 14. Stackoverflow score growth over 0me by tag comparison WebGL Framework Comparison
  • 15. What is WebVR? WebVR is a experimental Javascript API that provides interfaces to VR hardware to allow developers to build compelling, comfortable VR experiences on the web.
  • 16. WebVR WebVR v1.1 Editor’s Dra,, 04/05/17 - deviceOrienta-on - VRDisplay object handles almost everything - available on mul-ple pla<orms ..soon.. WebVR (2.0) Editor’s Dra,, 04/17/17 - not backwards compa-ble - device support - introduc-on of VRDevice & VRSession to replace VRDisplay - read Explainer doc!
  • 17. Goals of WebVR • Detect available virtual reality devices. • Query the device’s capabili6es. • Poll the device’s posi6on and orienta6on. • Display imagery on the device at the appropriate frame rate.
  • 18. Non-goals of WebVR • Define how a virtual reality browser would work. • Take full advantage of augmented reality devices. • Build “The Metaverse.” Check out h*ps://webvr.rocks/ for support updates
  • 19. WebVR Frameworks • A-Frame by Mozilla • ReactVR by Facebook • ForgeJS by GoPro, Inc., great for 360 photo & video content • Primrose great for collaboraIve VR web apps • Janus VR VR browser/editor • Vizor in-browser VR development, SocialVR • GLAM (GL And Markup) declaraIve language for 3D web
  • 22. A-Frame • a 3DML (3D markup language) like X3Dom and GLAM • DOM-based En>ty-Component System => declara>ve & extensible (similar to Unity/UE4/PlayCanvas) The A-Frame Stack:
  • 24. A-Frame • En$$es are HTML elements (i.e., <a-entity>) • Components are HTML a9ributes, set on the en$ty <body> <a-scene> <a-entity geometry="primitive:box" material="color:#c00"> </a-entity> </a-scene> </body>
  • 25. En#ty • general purpose objects (e.g. create a player, ball, or field) • they inherently have a posi;on, rota;on and scale in a scene <a-entity geometry="primitive:box; width:0.2; height:0.3; depth:0.5;" material="color:#c00" position="0 0 -1" rotation="0 30 30" material="color:#c00"> </a-entity>
  • 26. Primi%ves (concise, seman%c building blocks) <a-entity geometry="primitive:box; width:0.2; height:0.3; depth:0.5;" material="color:#c00"> </a-entity> <a-box width="0.2" height="0.3" depth="0.5" material="color:#c00"> </a-box>
  • 28. Custom Components AFRAME.registerComponent('foo', { schema: { bar: {type: 'number'}, baz: {type: 'string'} }, init: function () { // Do something when component is plugged in. }, update: function () { // Do something when component's data is updated. } });
  • 30. Gaze-Based Cursor Interac2ons AFRAME.registerComponent('clickable', { init: function () { var el = this.el; el.addEventListener('mouseenter', function () { el.setAttribute('color', '#f00'); }); el.addEventListener('mouseleave', function () { el.setAttribute('color', '#fff'); }); el.addEventListener('click', function () { el.setAttribute('material', 'src' , 'assets/football.png'); }); } }); <a-sphere clickable src="assets/basketball.png" radius="0.5" color="#fff"></a-sphere> <a-camera><a-cursor></a-cursor></a-camera>
  • 35. Resources * A-Frame Slack * A-Frame Component Registry * mozvr.com * VR Gets Real with WebVR * WebVR API * The UX of VR Get In Touch @rolanddubois rolanddubois.com
  • 36. It’s code *me! Here’s what we’re building: • github.com/rdub80/Ferguson-VR-Hackathon • XAMPP, MAMP or $ python -m SimpleHTTPServer • JSBin