Build HTML5 VR Apps using Intel® XDK

1. Build HTML5 VR Apps using Intel® XDK
Ganesh Rao

2. Copyright © 2015, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others. Optimization Notice
2
Agenda
HTML5 technology for compelling VR Apps
Cordova API Hybrid apps access the native layer on Mobile devices
Intel® XDK helps build HTML5 Standard and Cordova Apps
HTML5 + Cordova APIs for Cross Platform Virtual Reality Apps

3. Copyright © 2015, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others. Optimization Notice
3
HTML5 technology is compelling
Cross platform
Collaborative community
Edit, refresh and see results
Package as apps using Cordova API
Crosswalk project for HTML5 features
and performance on mobile
Need Native app features on mobile?
No worries. Use Cordova APIs

4. Copyright © 2015, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others. Optimization Notice
 Access device and native platform
features through JavaScript APIs
 Cordova* 3.X API powered apps
device emulator
 Crosswalk* Runtime for Android
 Extends Hybrid app capabilities
 Access to device & native platform
features
 Build & packaging service support
HTML Hybrid Apps
with Cordova APIs
Accelerometer
Geolocation
Camera
Compass
Contacts
Device
Notification
Storage
Display, Multitouch, Connection,
Event,s File, Globalization, Media
InAppBrowser, and more...

5. Copyright © 2015, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others. Optimization Notice
5
HTML5 Cross platform VR Apps
1. Stereoscopic rendering
• WebGL,Three.js
• Camera
• Transitions (tween) for smooth graphics
2. Head tracking
• Device orientation
3. NFC/device feature access (As needed)
• Cordova plugins
Upcoming specs - WebVR, MozVR
Credits: Tim Samshuijzen
Credits: XCardboard, Gregor
Biswanger, Dale Schouten

6. Copyright © 2015, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others. Optimization Notice
6
Stereo 3D rendering in HTML5
• WebGL support for HTML5
• 2014 the year of WebGL?
• IE11, FF, Chrome, Safari
• Webview
• Intel XDK (Crosswalk project,
WKWebview on iOS 8 )
• Three.js
• JS interface to WebGL
• Well documented example for 3d Stereo
rendering
• Playcanvas GUI for WebGL

7. Copyright © 2015, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others. Optimization Notice
7
Device orientation in HTML5 and Cordova
• Gyroscope and accelerometer
• Or Cordova Device orientation
• https://github.com/apache/cordova-plugin-
device-orientation
• ThreeJS + Device orientation
• Example: https://github.com/richtr/threeVR
• W3C Device Orientation events - editors
draft

8. Copyright © 2015, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others. Optimization Notice
Intel® XDK Developer cycle in IDE
Code Test Debug Build

9. Copyright © 2015, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others. Optimization Notice
Intel® XDK
App Stores
Write once, Publish
 Build App package and
submit to more stores
 Deploy across many form
factor devices
Build apps for a variety of Operating Systems
and App Stores

10. Copyright © 2015, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others. Optimization Notice
10
References:
Intel XDK (http://xdk.intel.com)
Playcanvas* 3D Web GL games
(http://developer.playcanvas.com/en/user-
manual/publishing/xdk/)
Construct* 2
(https://www.scirra.com/tutorials/809/how-to-export-
to-android-with-crosswalk)
Xcardboard Google Cardboard, Angular, Cordova,
Intel XDK
(https://github.com/GregorBiswanger/XCardboard)
HTML5 Google Cardboard, Three.js,
(http://complexity.zone/cardboard_solarsystem)
PlayCanvas*
Construct* 2
Phaser*
Pixi*
EaselJS*
Cocos2d*
Games with Intel XDK
(https://software.intel.com/en-
us/xdk/docs/getstarted-gamedev)

11. Copyright © 2015, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others. Optimization Notice
Legal Disclaimer & Optimization Notice
INFORMATION IN THIS DOCUMENT IS PROVIDED “AS IS”. NO LICENSE, EXPRESS OR IMPLIED, BY ESTOPPEL OR
OTHERWISE, TO ANY INTELLECTUAL PROPERTY RIGHTS IS GRANTED BY THIS DOCUMENT. INTEL ASSUMES NO
LIABILITY WHATSOEVER AND INTEL DISCLAIMS ANY EXPRESS OR IMPLIED WARRANTY, RELATING TO THIS
INFORMATION INCLUDING LIABILITY OR WARRANTIES RELATING TO FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABILITY, OR INFRINGEMENT OF ANY PATENT, COPYRIGHT OR OTHER INTELLECTUAL PROPERTY RIGHT.
Software and workloads used in performance tests may have been optimized for performance only on Intel microprocessors.
Performance tests, such as SYSmark and MobileMark, are measured using specific computer systems, components, software,
operations and functions. Any change to any of those factors may cause the results to vary. You should consult other information
and performance tests to assist you in fully evaluating your contemplated purchases, including the performance of that product when
combined with other products.
Copyright © 2014, Intel Corporation. All rights reserved. Intel, Pentium, Xeon, Xeon Phi, Core, VTune, Cilk, and the Intel logo are
trademarks of Intel Corporation in the U.S. and other countries.
Optimization Notice
Intel’s compilers may or may not optimize to the same degree for non-Intel microprocessors for optimizations that are not unique to Intel
microprocessors. These optimizations include SSE2, SSE3, and SSSE3 instruction sets and other optimizations. Intel does not guarantee the
availability, functionality, or effectiveness of any optimization on microprocessors not manufactured by Intel. Microprocessor-dependent
optimizations in this product are intended for use with Intel microprocessors. Certain optimizations not specific to Intel microarchitecture are
reserved for Intel microprocessors. Please refer to the applicable product User and Reference Guides for more information regarding the
specific instruction sets covered by this notice.
Notice revision #20110804
11