build html5 vr apps using intel® xdk

Build HTML5 VR Apps using Intel® XDKGanesh Rao

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

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


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

HTML5 Cross platform VR Apps1. 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

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

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


Intel® XDK Developer cycle in IDE

Code TestDebu

gBuild


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

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)

https://software.intel.com/en-us/xdk/docs/getstarted-gamedev

http://developer.playcanvas.com/en/user-manual/publishing/xdk/




https://www.scirra.com/tutorials/809/how-to-export-to-android-with-crosswalk




https://github.com/GregorBiswanger/XCardboard



http://complexity.zone/cardboard_solarsystem








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

build html5 vr apps using intel® xdk

Technology

intel corporation

build html5 vr apps

html5 features

html5 cross platform

mobile devices intel

html5 webgl support

cordova gyroscope

html5 standard