Build HTML5 VR Apps using Intel® XDK Ganesh 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
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
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...
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
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
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
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
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
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)
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
Build HTML5 VR Apps using Intel® XDK

Build HTML5 VR Apps using Intel® XDK

  • 1.
    Build HTML5 VRApps 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

Editor's Notes

  • #4 Speaker notes -- OFFLINE & STORAGE CONNECTIVITY I REALTIMEMULTIMEDIA GRAPHICS. 3D & EFFECTS DEVICE ACCESS PERFORMANCE & INTEGRATION SEMANTICS CSS3 STYLING
  • #5 See http://plugins.cordova.io/ for many more
  • #6 http://complexity.zone/cardboard_solarsystem/ https://github.com/GregorBiswanger/Xcardboard http://complexity.zone/cardboard_solarsystem/run/ Tween three.js
  • #7 https://software.intel.com/en-us/xdk/docs/building-cordova-ios-app-with-wkwebview http://complexity.zone/cardboard_solarsystem/run/ Three.js https://github.com/mrdoob/three.js/blob/master/examples/webgl_effects_stereo.html http://complexity.zone/cardboard_solarsystem/ https://github.com/GregorBiswanger/Xcardboard <div class="col-*-6 > Left </div> <div class="col-*-6 > Right </div>
  • #8 http://w3c.github.io/deviceorientation/spec-source-orientation.html http://complexity.zone/cardboard_solarsystem/run/ Three.js https://github.com/mrdoob/three.js/blob/master/examples/webgl_effects_stereo.html http://complexity.zone/cardboard_solarsystem/ https://github.com/GregorBiswanger/Xcardboard <div class="col-*-6 > Left </div> <div class="col-*-6 > Right </div>
  • #9 (Debug) CPU Utilization on function level Platform Compatibility Checker for CSS3 For More Robust CSS3 UI layouts JavaScript Remote Debugger Memory, Frames & Events Profile